Verschiedene Headerbilder ohne Plugin auf einer WordPress Webseite verwenden

25-03-2016

Will man auf einer WordPress Webseite verschiedene Headerbilder verwenden, kann man dies auch ohne ein Plugin bewerkstelligen.

In WordPress kann man dies auf verschiedene Arten lösen, ich zeige hier zwei Methoden.

1. Verschiedene Headerbilder nur durch CSS-Code für jede Seite verwenden.

Damit es funktioniert muss das <body> durch einen Klassennamen ergänzt werden. In der entsprechenden Theme Datei (meistens header.php) muss die Codezeile:

<body>

verändert werden.

Wichtig: Falls kein selbst programmiertes Theme verwendet wird, muss ein Child Theme erstellt werden sonst sind die Änderungen beim nächsten Update weg.

Unter diesen Link findet man weitere Informationen dazu: http://code.tutsplus.com/de/tutorials/adding-to-the-body-class-in-wordpress--cms-21077

Hier ein einfaches Beispiel wie der CSS-Code verändert wird:

Voraussetzung damit es funktioniert, im Template wurde den <header> die Klasse site-header vergeben.

Danach schreibt man in der CSS-Datei folgendes rein.

.site-header {
   position: relative;
   float: left;
   width: 900px;
   height: 180px;
   background: url(../vorlage/images/header1.jpg);
}

.category-allgemein .site-header {
   background: url(../vorlage/images/header2.jpg);
}

.page-id-11 .site-header {
   background: url(../vorlage/images/header3.jpg);
}

.postid-1 .site-header {
   background: url(../vorlage/images/header4.jpg);
}

Erklärung zum CSS-Code:

.site-header: Allgemeiner Headerbild (header1.jpg) der Webseite.

.category-allgemein .site-header: Die Kategorieseite Allgemein erhält ein anderes Headerbild (header2.jpg)

.page-id-11 .site-header: Die Seite mit der ID 11 erhält ein anderes Headerbild (header3.jpg)

.postid-1 .site-header: Der Blogbeitrag mit der ID 1 erhält ein anderes Headerbild (header4.jpg)

Die ID der Beiträge oder Seiten findet man entweder im Quellcode heraus (<body>) oder in der Administration der Webseite, einfach beim bearbeiten eines Beitrags/Seite auf die Webadresse(URL) schauen.

2. Verschiedene Header-Templates für jede Seite verwenden.

Was man vorher wissen sollte, mittels dieser Codezeile wird das Header-Template in den WordPress Templates eingefügt:

<?php get_header(); ?>

Offizielle Dokumentation: https://developer.wordpress.org/reference/functions/get_header/

Hier ein kleines Beispiel

Wir erstellen ein Header-Template für die Startseite. Man muss zuerst ein Header-Template erstellen, einfach die header.php Datei kopieren, den Inhalt nach Wunsch anpassen und die Datei zu header-startseite.php umbenennen.

Danach hat man zwei Header-Template Dateien

header.php
header-startseite.php

Im Template header-startseite.php wird die Klasse site-header zur Klasse startseite-header umgewandelt.

In der CSS-Datei wird dann der <header> für die Startseite mittels folgender Codezeile angesprochen.

.startseite-header {}

Will man jetzt anstatt den header.php Template, den header-startseite.php Template in das Seiten-Template einfügen, ändert man dafür einfach folgende Codezeile:

<?php get_header(); ?>

<?php get_header('startseite'); ?>

So kann man für die Startseite ein komplett anderes Header wie auf den restlichen Seiten verwenden.

Für Kategorieseiten hat man entweder die Wahl ein eigenständiges Template zu erstellen z.B. category-news.php mit den entsprechenden Header-Templates oder es mittels Abfragen auf dem category.php Template zu lösen.

Offizielle Dokumentation zur template Hierarchie in WordPress: https://developer.wordpress.org/themes/basics/template-hierarchy/

Hier ein einfaches Beispiel was ich meine:

3 Header-Templates:

header-news.php: Header Template für die Kategorieseite News
header-archiv.php: Header Template für die Kategorieseite Archiv
header.php: Header Template für alle anderen Seiten

Jetzt schreibt man einfach folgenden Code im category.php Template zuoberst rein.

<?php
if ( is_category('news') ) :
get_header('news');
elseif ( is_category('archiv') ) :
get_header('archiv');
else :
get_header();
endif;
?>

Erklärung: https://developer.wordpress.org/reference/functions/is_category/

if ( is_category('news') ) : get_header('news');: Wenn es sich um die Kategorieseite News handelt, dann bekommt diese Seite das Header-Template News.

elseif ( is_category('archiv') ) : get_header('archiv');: Wenn es sich um die Kategorieseite Archiv handelt, dann bekommt diese Seite das Header-Template Archiv.

else : get_header();: Sonst bekommt diese Seite das allgemeine Header-Template.

Als letzter Punkt noch, will man das alle Beiträge einer bestimmten Kategorie den gleichen Header-Template bekommen, so muss man folgenden Code im single.php Template zuoberst reinschreiben.

<?php
if ( has_category('news') ) :
get_header('news');
elseif ( has_category('archiv') ) :
get_header('archiv');
else :
get_header();
endif;
?>

Erklärung: https://developer.wordpress.org/reference/functions/has_category/

Achtung es ist nicht der gleiche Code wie im category.php Template, is_category ändert sich zu has_category.

Javi González