Hartkodierung Ihres Headers oder Footers (Elementor)

Einige Profi-Tipps für die manu­el­le Programmierung Ihres über­la­de­nen benut­zer­de­fi­nier­ten Header und Footer.

Dieser Beitrag wur­de durch die Arbeit inspi­riert, die ich ges­tern Abend für die Website eines Kunden geleis­tet habe. Er war es leid, dass sein Pagebuilder die Geschwindigkeit sei­ner Website ver­lang­sam­te und woll­te davon wegkommen.

Der aller­ers­te offen­sicht­li­che Schritt für mich war, die benut­zer­de­fi­nier­te Themebuilder-Funktion von Elementor los­zu­wer­den, die ver­wen­det wur­de, um den Header und Footer sei­nes Themes zu überschreiben.

Für diejenigen, die es nicht wissen: Pagebuilder verursachen im Allgemeinen 4 Hauptprobleme:

• Unordentliche und gro­ße Verschwendung von HTML-Code – buch­stäb­lich 10–30 Mal mehr Code, als es sein müss­te. (Wird in Seitenbewertungen oft als "über­mä­ßi­ge DOM-Elemente" bezeichnet).
• Verschwendung von CSS-Code – nicht nur viel mehr CSS, son­dern auch vie­le Stile, die sich über­all gegen­sei­tig überschreiben.
• Langsamere dyna­mi­sche PHP-Verarbeitung
• Höherer Speicherverbrauch – ver­lang­samt Ihren Server.

Lassen Sie uns kurz durch­ge­hen, was ich getan habe, und hof­fent­lich ande­re dazu inspi­rie­ren, die Aufgabe zu übernehmen.

SCHRITT 1 – Erstellen einer Staging-Seite und eines neuen Themes

Sie müs­sen von einer ande­ren Website aus arbei­ten, damit Sie Optik und Stile mit der Live-Seite ver­glei­chen können.

• Sichern Sie ein Backup des Themes, bevor Sie es anfassen.
• Benennen Sie die Version, an der Sie arbei­ten, in einen neu­en Namen um. (Dies geschieht durch Umbenennen des Theme-Verzeichnisses und durch Ändern des "Theme-Namens" in der style.css).

SCHRITT 2 – Umprogrammieren der Template Datei

Ich schla­ge vor, den Footer umzu­pro­gram­mie­ren, weil es nor­ma­ler­wei­se ein­fa­cher ist.

Die Elemente wer­den in gleich­mä­ßi­gen Abständen ange­ord­net, es gibt kei­ne Dropdowns oder JS-Animationen für das Off-Canvas-Mobilmenü und der Code ist ein­fa­cher zu lesen.

• Normalerweise ist Ihr Footer in Ihrem Theme-Verzeichnis: footer.php.
• Verschiedene Themes kön­nen einen ande­ren Dateinamen haben oder sie in einem ande­ren Verzeichnis ablegen.
• Entwickler-Themes (wie z.B. Genesis) pas­sen sie über Hooks & Filter in der functions.php an. Das ist ein­fa­cher, was den Arbeitsaufwand angeht, aber schwie­ri­ger für Nicht-Programmierer, die Dinge visu­ell zu verstehen.

Fügen Sie Divs hin­zu und plat­zie­ren Sie dar­in Ihr Roh-HTML oder regis­trie­ren Widget-Bereiche.

• Für die meis­ten Dinge brau­chen Sie nur etwa 3 Ebenen tief ver­schach­tel­te Divs. Eines für den Abschnitt (class="footer"), um den Hintergrund zu set­zen. Ein wei­te­res für den Wrapper (class="footer-wrapper"), um die Breite des Inhalts zu steu­ern. Und ein letz­tes für das Styling des Footer's (class="footer-widgets").
• Nachdem Sie die Divs und mit sinn­vol­len Klassen gesetzt haben, set­zen Sie Ihren Inhalt in Ihr Roh-HTML oder machen den Widget-Funktionsaufruf.

SCHRITT 3 – Registrieren Sie neue Widget-Bereiche (falls erforderlich)

Es gibt 2 Möglichkeiten, neue Widget-Bereiche in der functions.php zu regis­trie­ren, abhän­gig von Ihrem Theme.

• Fügen Sie das Codeschnipsel dafür ein, was je nach­dem, ob Sie bereits ande­re Widget-Bereiche regis­triert haben, unter­schied­lich sein kann. Lesen Sie die­se Anleitung oder die­se Anleitung.
• Oder bau­en Sie Hooks und Filter ein, wenn Sie ent­wick­ler­freund­li­che­re Themes wie Genesis verwenden.
• Bitte…installieren Sie nicht die­se Plugins zum Hinzufügen von Widgetbereichen. Das brau­chen Sie nicht!

SCHRITT 4 – Inhalt hinzufügen (falls erforderlich)

• Fügen Sie Inhalte zu die­sen Widget-Bereichen hinzu.
• Diejenigen, die den Inhalt hart­ko­diert haben, kön­nen es überspringen.

SCHRITT 5 – Stylen Sie Ihren Template-Bereich

Fügen Sie CSS-Stile zu Ihrem Thema style.css hinzu.

Sie haben also den Template-Code hin­zu­ge­fügt und eini­ge Inhalte ein­ge­fügt. Jetzt sind Sie beim letz­ten Teil, dem Styling. Diejenigen, die sich mit CSS aus­ken­nen, brau­che ich hier nicht viel zu erklären.

Für alle ande­ren gilt: Öffnen Sie Ihre Live- und Staging-Site neben­ein­an­der und fan­gen Sie an, CSS einzufügen.

• Arbeiten Sie ent­we­der von "Desktop-first" oder "Mobile-first" aus und füh­ren Sie danach Media Query Overrides durch.
• Die "Desktop-first"-Mentalität ist für Einsteiger wahr­schein­lich ein­fa­cher, wäh­rend das Gegenteil eher für erfah­re­ne Designer gilt.
• Ich emp­feh­le drin­gend, Ihr CSS von Grund auf neu zu schrei­ben, anstatt die häss­li­chen mathe­ma­ti­schen Berechnungen Ihres Pagebuilders zu kopieren.

Kopieren Sie das neue Theme auf die Live-Site.

• Kopieren Sie das Verzeichnis des neu­en Themes auf die Live-Site.
• Vergessen Sie nicht, das zusätz­li­che CSS, wel­ches Sie im Customizer hat­ten, zu kopieren.
• Aktivieren Sie das neue Theme auf der Live-Site.

FERTIG!

Genießen Sie Ihre Arbeit. Durch das Hardcoding des Themes und des Footers wird buch­stäb­lich 10 Mal weni­ger HTML, 10 Mal weni­ger CSS und viel weni­ger dyna­mi­sche PHP-Verarbeitung benö­tigt. Es schnei­det wahr­schein­lich auch alle unnö­ti­gen, auf­ge­bläh­ten JS/CSS-Bibliotheksanfragen her­aus. Von hier an sind Sie der Reduzierung Ihrer Pagebuilder-Abhängigkeit viel näher und kön­nen Ihre Seiten lang­sam nach und nach auf ein viel schnel­le­res Gutenberg umstellen.

Ich weiß nicht, wie vie­le mei­ner Leser die­se Anleitung tat­säch­lich befol­gen kön­nen, aber ich rech­ne damit, dass selbst wenn Sie nur 1–2 der Schritte durch­füh­ren kön­nen und einen Entwickler für den Rest anheu­ern, sich der Aufwand trotz­dem lohnt! Zumindest wer­den Schritte wie die­se Sie dazu brin­gen, als Profi zu wachsen.