Den WordPress-Header ohne Plugin verändern

Header einer Html-DateiWas 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

    • 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

Schreibe eine Antwort

LiveZilla Live Chat Software