Header animieren: #header_home {height:200px;} / #header {height:100px;}

Demjenigen

So, nächster Brocken:

(Also, allmählich fühle ich mich wohl hier ;-) )

Mein Theme soll zwei unterschiedliche Header erhalten, wobei nur die Höhe (height) sich ändert. Die Homepage soll höher sein als der Rest.

Bislang habe ich mir damit beholfen, dass ich den Kopfbereich von home.php nicht ausgelagert, sondern manuell kopiert und eine entsprechende ID eingefügt habe (#headerhome).
Das ist ja aber eigentlich Blödsinn.

Ich müsste doch vermutlich eine if-else Weiche im Header notieren, nur weiß ich nicht, wie das geht. PHP-Analphabet. In Copy/Pasten bin ich hingegen Spitze ;-)

Kann mir jemand sagen, wie ich WP "dynamisch" anweise, auf home.php eine andere Header "height" anzuzeigen?
Mein CSS enthält ein #header {height:54px;} und ein #headerhome {height:124px;}.

Danke!

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

spickzettel

Statt <body> kann man

PHP

<body <?php body_class(); ?>>

in den header schreiben, dann kriegt die Homepage die Klasse .home verpasst

Dann kann man in der CSS-Datei schreiben:

Code

#header {height:54px;} 
.home #header {height:124px;}

Demjenigen

Irgendwas tut nicht - oder ich verstehe etwas miss...
Zustand jetzt: Der Header verschwindet auf der Homepage, ist bei allen anderen Seiten vorhanden.

Ich hab's so wie oben angegeben versucht und auch mit

PHP

<body class="<?php body_class(); ?>" >

, but alas, to no avail.
Wenn ich mir den Quelltext anzeigen lasse, steht auf der Homepage nur <body>. Keine Klasse.
Wenn ich eine Unterseite aufrufe, erhalte ich im Quelltext:

HTML

<body class="page page-id-78 page-child parent-pageid-2 page-template page-template-default logged-in">

Die ID #headerhome habe ich zugunsten von .home #header abgeschafft, und trotzdem erscheint im Quelltext nach Reload eine ID #headerhome. Wie kann denn das sein...?

???

bego

Kann es sein, dass

das body-Tag in einem conditional tag ( is_home() ) steht?
das body-Tag nicht in der header.php sondern z.B. der page.php und index.php und ggf. weitere steht?

Grundsätzlich stimmt der Aufruf

HTML

<body <?php body_class(); ?> >

Sollen zusätzliche Klassen verwendet werden, dann geht das mit

HTML

<body <?php body_class('meine_klasse'); ?> >

Demjenigen

Zitat von bego

Kann es sein, dass das body-Tag nicht in der header.php sondern z.B. der page.php und index.php und ggf. weitere steht?

Der Tag steht in der index.php, weil ich noch gar keine eigenen Templates abgeleitet habe (also header/footer/sidebar... .php).

Allerdings, und das finde ich auch komisch, habe ich die home.php ausge-x-t (xhome.php), und sie wird trotzdem angezeigt...
Ich dachte, WP sucht explizit nach dem String 'home.php'?

bego

Sicher ist Dir schon mal aufgefallen, dass das Layout zwischen Ansicht von Artikel, Seiten, Archivseiten, Suchergebnissen, etc. anders aussieht. Je nachdem, was gerade angezeigt werden soll, verwendet WordPress ein anderes Template: index.php, page.php, archiv.php, search.php, etc. Sind Templates nicht explizit angegeben, greift WordPress auf andere Templates zurück (statt "gar nichts" anzuzeigen).

Was Deinen konkreten Fall angeht: normalerweise legt man das <body>-Tag noch mit in die header.php, die dann von allen Seiten verwendet wird. Wenn Du nun die Klassen des <body>-Tags nur in der index.php änderst und anschließend z.B. eine Archiv-Seite mit eigenem Template archiv.php aufrufst, wirst Du von Deiner Änderung in der index.php nicht viel sehen.

Ausführlich wird das im Codex beschrieben. Schau Dir vor allem die Grafik an. Ausdrucken, über's Bett hängen und das Mantra wiederholen: "WordPress ist super!" ... :-)

Demjenigen

Ja, so kann dat ja nicht gehen:
Ich hatte noch eine front-page.php im Ordner herumliegen, die mich veräppelt hat.
(Was ist überhaupt der Unterschied zwischen home und front-page...?)

Inzwischen ist sie weg, header, sidebar, footer anständig ausgelagert - das Skript funktioniert auch - alles bestens...

...und zwar so bestens, dass ich auf meinen ursprünglichen Betreff zurückkomme: Animation

Anstatt zu springen, soll der Übergang zwischen Homepage-Header und "Sonstiges"-Header sanft stattfinden.
Ich habe auch ein Javascript gefunden, dass im Zusammenhang mit CSS3-Attributen funktioniert. Ein kleiner Dummy mit zwei HTM-Seiten zum Hin- und Herschalten funktioniert wunderbar und macht genau das, was ich will: Die beiden Seiten enthalten unterschiedliche IDs, ein Mal #header, ein Mal #headerhome, beide unterscheiden sich in der Höhe. Durch Umschalten wird der Header innerhalb einer Sekunde höher oder niedriger - toll.

Der Haken: Im Javascript gibt's ein Element el, das den Wert der CSS-ID abgreift:

Code

el.id = "header"

Es gibt auch einen querySelector, der ebenfalls als Attribut die ID zugewiesen bekommt, das sieht dann so aus:

Code

el = document.querySelector("div#header");

Nur, wie muss man das schreiben, damit die Klasse .home zusammen mit der ID #header abgefragt wird?
Die Klasse wird über el.className abgefragt, aber wie die Kombination aus beiden, also ".home #header {}"
Meine diversen Schreibversuche haben nicht hingehauen.

Gibt's jemanden hier, der sich mit JS entsprechend auskennt?

Anbei das komplette Skript:

Code

function headertransition() {   
    var el = updateTransition();   
     
    el.addEventListener("transitionend",  updateTransition, true);   
}   
 
function updateTransition() { 
    var el = document.querySelector("div#homeheader"); 
     
    if (el) { 
        el.id = "header"; 
    } else { 
        el = document.querySelector("div#header"); 
        el.id = "homeheader"; 
    } 
     
    return el; 
}

Alles anzeigen

und dass CSS hierzu:

Code

#header, #homeheader{ 
    position: absolute; 
    -moz-transition-property: height; 
    -moz-transition-duration: 1s; 
    -webkit-transition-property: height; 
    -webkit-transition-duration: 1s; 
    -o-transition-property: height; 
    -o-transition-duration: 1s; 
    width: 750px; 
    background:#eee url("header_bg.png"); 
} 


#header {     
    height: 154px;
}
 
#homeheader {     
    height: 224px;
}

Alles anzeigen

Ach so: Funktioniert nicht in Firefox, aber in Safari 5 und Opera 10.6 (was ich in Kauf nehme. Firefox 4 soll damit klar kommen, sagt man, und wer die Transition nicht bekommt, vermisst sie vielleicht auch gar nicht...).

Demjenigen

Gar... nie-...mand...?

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Header animieren: #header_home {height:200px;} / #header {height:100px;}

Jetzt mitmachen!