Homepage erstellen in Biberach, Sigmaringen, Ulm und Ravensburg

Den WordPress-Header ohne Plugin verändern
28. Dezember 2017 WordPress 4

Header einer Html-Datei

Header einer Html-Datei

Was wird im Header definiert?

Typische Anwendungsfälle für die Ergänzung des <head>-Bereichs im Header einer WordPress-Seite sind beispielsweise:

  • Meta-Tags, z. B. zur Site-Verification durch Google
  • JavaScript-Code oder Skriptdateien
  • Einbindungen von individuellen CSS- oder Schriftdateien (z. B. Google Fonts)

Wie lässt sich der WordPress-Header ergänzen?

Dies kann mit einem Plugin wie z. B. Add Meta Tags erfolgen. Solche Plugins sind zielführend, wenn für eine Vielzahl von Seiten unterschiedliche Angaben erfasst werden sollen. Andererseits ist es immer sinnvoll, zusätzliche Plugins zu vermeiden, wenn es mit wenig Aufwand auch ohne diese Erweiterung geht, denn schlecht programmierte Plugins bergen immer das Risiko, dass sie sich negativ auf die Sicherheit und/oder die Performance von WordPress auswirken.

Wer ein Child-Theme nutzt, kann die header.php im Child-Verzeichnis verändern. Bei einer Aktualisierung des übergeordneten Themes bleibt diese Datei dann aber veraltet. Dies sollte man vermeiden, denn hier wird nicht nur der HTML-Head, sondern es wird auch der Kopfbereich der WordPress-Homepage, inklusive der Navigation, definiert.

Die add_action()-Funktion von WordPress stellt eine dritte Möglichkeit dar. Das funktioniert ohne Plugin – für alle Seiten oder für einzelne Seiten. Es kommt nur die functions.php zum Einsatz. Nachfolgend sollen einige Umsetzungsbeispiele aus unserem Webdesign-Bereich die Verwendung erläutern. Der Code muss in der functions.php des Child-Themes ergänzt werden.

Beispiel: Einbinden einer Google-Font auf allen WordPress-Seiten

<?php
function add_meta_tags() { ?>
	<link href="https://fonts.googleapis.com/css?family=Cabin" rel="stylesheet">
<?php }
 
add_action('wp_head', 'add_meta_tags');
?>

Beispiel: Einbinden einer Google Site-Verification als Metatag

<?php
function add_meta_tags() { ?>
	<meta name="google-site-verification" content=""">
<?php	}
 
add_action('wp_head', 'add_meta_tags');
?>

Beispiel: Einbinden einer Javascript-Datei im Head einer bestimmten WordPress-Seite

<?php
function my_custom_js() {
	if (get_the_ID()==100) {
		wp_enqueue_script('meinscript',
			'/wp-content/themes/mein-child/assets/js/meinscript.js', 
			array(), 
			false, 
			false
			);
		}
	}
 
add_action('wp_enqueue_scripts', 'my_custom_js');
?>

In diesem Fall ist neben dem Speicherort des Scripts auch die Id der Seite – hier beispielhaft 100 – anzupassen. Eine Seiten-Id lässt sich leicht ermitteln: In der Übersicht aller Seiten im WordPress-Backend bewegt man die Maus auf den Titel der entsprechenden Seite. Der Browser zeigt am unteren Bildschirmrand den zugehörigen Link an, aus dem sich die Id ablesen lässt.

Beispiel: Einbinden eines Stylesheets im Head einer ausgewählten WordPress-Seite

<?php
function my_custom_css() {
	if (get_the_ID()==100) {
		wp_enqueue_style('meinstyle',
			'/wp-content/themes/mein-child/assets/css/menistyle.css',
			array(),
			false,
			'all'
			);
		}
	}
 
add_action('wp_enqueue_scripts', 'my_custom_css');
?>

Auch hier muss neben den Angaben zum Stylesheet die Id der Seite angepasst werden. Wer die Reihenfolge der zu ladenden CSS-Dateien beeinflussen und das eigene Stylesheet zwingend zuletzt laden möchte, kann den HTML-Code zur CSS-Einbindung auch einfach mit wp_head in den Header einschleusen. (Vgl. erstes Umsetzungsbeispiel.) Diese Zeilen werden erst nach den Styles geladen.

  1. Hallo Rüdiger,

    schöner Artikel, eine Frage -> Ich habe so 30 Style Sheets welche geladen werden, diese werden ja nicht überall gebraucht. Wie könnte man diese Aufteilen, so das diese nur geladen werden, wenn diese auch gebraucht werden?

    Alle einzeln in der header.php
    if (is_category() or is_page(25)) { echo „\n“; }?>

    zu Bearbeiten finde ich schon extrem, gerade auch wenn es änderungen gibt.

    Eine Idee?

    LG Manuel

    • Kommentar des Beitrags-Autors

      Hallo Manuel,

      das kann man so machen, wie Du das beschreibst. Ich persönlich würde dafür nicht die header.php editieren, sondern die Stylesheets zentral in der functions.php verwalten. Das letzte Beispiel „Einbinden eines Stylesheets im Head einer ausgewählten WordPress-Seite“ verdeutlich dies.

      Beste Grüße, Rüdiger

  2. Hallo Rüdiger,

    schöner Artikel, eine Frage -> Ich habe so 30 Style Sheets welche geladen werden, diese werden ja nicht überall gebraucht. Wie könnte man diese Aufteilen, so das diese nur geladen werden, wenn diese auch gebraucht werden?

    Alle einzeln in der header.php
    if (is_category() or is_page(25)) { echo „\n“; }?>

    zu Bearbeiten finde ich schon extrem, gerade auch wenn es änderungen gibt.

    Eine Idee?

    LG Manuel

    • Hallo Manuel,

      das kann man so machen, wie Du das beschreibst. Ich persönlich würde dafür nicht die header.php editieren, sondern die Stylesheets zentral in der functions.php verwalten. Das letzte Beispiel „Einbinden eines Stylesheets im Head einer ausgewählten WordPress-Seite“ verdeutlich dies.

      Beste Grüße, Rüdiger

  3. Alexander

    Hallo Rüdiger!

    wie könnte ich einen externen Widget einbinden? Es gibt keinen erzeugten link darüf.
    Laut Widgetabbieter muss Script-Code im -Bereich einer HTML-Seite und im
    -Bereich einer HTML-Seite eingefügt werden (ist ein java code)

    fügt man es in die header.php Seite ein?

    VG
    Alexander

    • Kommentar des Beitrags-Autors

      Hallo Alexander,

      das solltest Du nicht in die header.php einfügen, nein, denn dann wird die Änderung beim nächsten Update Deines Themes wieder überschrieben. Stattdessen solltest Du zunächst ein Child-Theme anlegen. Der Code, der in den Header-Bereich der (vor den body-Tag) soll, fügst Du dann über die functions.php des Child-Themes ein, wie es der Artikel beschreibt. Der andere Code muss dann auf die Seite, auf welcher das externe Widget erscheinen soll.
      Bei Sportvereinen wird das z. B. so für die Widgets von fussball.de umgesetzt. Falls Deine Homepage über https aufgerufen wird, was dringend zu empfehlen ist, musst Du auch im externen Code für den Header den Skriptaufruf auf https anpassen.
      Beste Grüße, Rüdiger

  4. Alexander

    Hallo Rüdiger!

    wie könnte ich einen externen Widget einbinden? Es gibt keinen erzeugten link darüf.
    Laut Widgetabbieter muss Script-Code im -Bereich einer HTML-Seite und im
    -Bereich einer HTML-Seite eingefügt werden (ist ein java code)

    fügt man es in die header.php Seite ein?

    VG
    Alexander

    • Hallo Alexander,

      das solltest Du nicht in die header.php einfügen, nein, denn dann wird die Änderung beim nächsten Update Deines Themes wieder überschrieben. Stattdessen solltest Du zunächst ein Child-Theme anlegen. Der Code, der in den Header-Bereich der (vor den body-Tag) soll, fügst Du dann über die functions.php des Child-Themes ein, wie es der Artikel beschreibt. Der andere Code muss dann auf die Seite, auf welcher das externe Widget erscheinen soll.
      Bei Sportvereinen wird das z. B. so für die Widgets von fussball.de umgesetzt. Falls Deine Homepage über https aufgerufen wird, was dringend zu empfehlen ist, musst Du auch im externen Code für den Header den Skriptaufruf auf https anpassen.
      Beste Grüße, Rüdiger

Schreibe eine Antwort