unterschiedliche Kopfzeilen pro Kategorie mit Twenty Twelve

verschiedene Kopfzeilen je Kategorie Twenty Twelve
verschiedene Kopfzeilen je Kategorie Twenty Twelve
Per E-Mail wurde ich gefragt wie man unterschiedliche Kopfzeilen [Headerbilder] pro Kategorie mit dem Theme Twenty Twelve machen kann. Ich muss davon ausgehen, dass absolut keine bis gar keine PHP Kenntnisse da sind. Daher erkläre ich hier meine Lösung so einfach wie es mir möglich ist. Sollten dennoch Fragen auftauchen:einfach fragen :-)

Child Theme für Twenty Twelve

Für meine Lösung ist es unerläßlich ein Child Theme von Twenty Twelve zu erstellen. So bleibt alles update-sicher.
Eine wie ich meine gute verständliche Anleitung für so ein Twenty Twelve Child Theme findest du bei Marco Corradi. Wenn Du dieser Anleitung von Marco folgst musst du beim Kopieren der CodeBeispiele achten, dass du Hochkomata verwendest sonst funktioniert das alles nicht.

Child Theme Einstellungen

Du lädst nun den Ordner des Child Themes mittels FTP in den Ordner wp-content/themes und aktivierst das Theme unter Admincenter//Dashboard ==> Design==> Themes. Du musst das Menü und die Kopfzeilen//Headerbilder genauso neu einstellen wie bei jedem Themewechsel. Auf die Widgets nicht vergessen…

Die Kopfzeilen //Headerbilder vorbereiten

Twenty Twelve empfiehlt eine Breite von 960px und 250px Höhe. Nachzulesen unter Admincenter//Dashboard=> Design => Kopfzeile.
Solltest Du eine andere Breite oder Höhe bei deinen Kopfzeilen //Headerbildern haben, dann musst du diese Werte bei der untenstehenden Anleitung anpassen.

In meinem Beispiel sollen die Bilder in der Kategorie „Eins Alpha“ und „Zwei Beta“ erscheinen.
Zwecks Überblick benenn ich die Bilddateien nach dem Kategorieslug: kategorie-eins-alpha.jpg und kategorie-zwei-beta.jpg.

Wichtig: Weder Großbuchstaben, noch Sonderzeichen oder Umlaute noch Leerzeichen bei einem Bildnamen verwenden. Das erzeugt Chaos und ich habe das erst vor Kurzem erlebt, daher erwähn ich dies extra. :-)

Im Ordner wp-content=>themes=>childtwentytwelve erstellst du den Ordner images und kopierst dort deine speziellen Kopfzeilen//Headerbilder hinein.

Nun die Templates vorbereiten.

header.php

Du kopierst die header.php aus dem Theme-Ordner von TwentyTwelve in den von dir erstellen Child Theme Ordner.

wp-content=> themes=>childtwentytwelve und da drin ist nun die style.css, die header.php, der Ordner „images“ mit den beiden Bildern. Ab nun arbeitest du nur mehr mit diesen Templates//Dateien aus diesem Ordner.

Mit einem Texteditor (WordPad ist keiner) öffnest du die header.php aus dem Child Theme Ordner.

Code Beispiel für die unterschiedlichen Kopfzeilen

Du brauchst die Stelle zwischen


</nav><!-- #site-navigation -->  

und  	

</header><!-- #masthead -->


Wenn es die Kategorie Eins Alpha ist, zeige deren Bild verlinkt zur Startseite….

<?php if (is_category('eins-alpha')):?>

<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<img src=" <?php echo get_stylesheet_directory_uri(); ?>/images/kategorie-eins-alpha.jpg" class="header-image" width="960" height="250" alt="" /></a>

Oder wenn es die Kategorie Zwei Beta ist, zeigen deren Bild verlinkt zur Startseite…


<?php elseif  (is_category('zwei-beta')):?>

<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<img src=" <?php echo get_stylesheet_directory_uri(); ?>/images/kategorie-zwei-beta.jpg" class="header-image" width="960" height="250" alt="" /></a>

Sonst mache das was Twenty Twelve sowieso immer herzeigt…..


<?php else: 
$header_image = get_header_image();
if ( ! empty( $header_image ) ) : ?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<img src="<?php echo esc_url( $header_image ); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" /></a>

Nun die Abfragen beenden


<?php endif;?><!--headerimage aus-->  
<?php  endif;?><!--kategoriebilder aus-->	
</header><!-- #masthead -->

Alles noch wieder hochladen mittels FTP und ….
Fertig!

Wars hilfreich, freu ich mich übers Weitersagen oder ein +1
5

5 Beiträge zu “unterschiedliche Kopfzeilen pro Kategorie mit Twenty Twelve

  1. Kommentar Autor
    Alissa
    Kommentar

    Super einfach erklärt und für jede Kategorie eine eigenes Bild zu haben ist mal ne super Idee. So kann man das Thema der Kategorie im Bild nochmals aufgreifen.

  2. Ping Links

  3. Ping Wordpress

  4. Kommentar Autor
    Elsa
    Kommentar

    Hallo Monika,

    ich nutze dieses Theme Twenty Twelve, möchte aber für 3 bestimmte Seiten, jeweils ein anderes Header-Bild einbauen. Wie mache ich das?

    LG Elsa

  5. Kommentar Autor
    Monika
    Kommentar

    Hi Elsa
    du müßtest statt is_category is_page(’slug-der-page‘) nutzen
    hilft dir das weiter?