In 8. Teil meines WordPress Video-Tutorials zeige ich, wie du ein eigenes Logobild in dein Theme einfügen kannst. Außerdem stelle ich noch die Headerbild-Funktion vor. Mit Hilfe dieser praktischen Funktion können individuelle oder bereits vorbereitete Headerbilder direkt im Adminbereich von WordPress (unter Design/Kopfzeile) hochgeladen und ausgewählt werden.
Alle bisherigen Teile des WordPress Video-Tutorials, sowie weitere Screencasts findest du übrigens auch im Album „WordPress Tutorials“ auf unserer Vimeo-Seite.
Hilfreiche Code-Schnipsel aus dem Video
Code der header.php Datei (für Webseiten-Logo, Hauptmenü und Headerbild):
<header id="branding" role="banner">
<nav id="mainnav" class="clearfix">
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
</nav><!-- end mainnav -->
<hgroup id="site-title">
<a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><img src="<?php bloginfo( 'template_directory' ); ?>/images/custom-logo.png" alt="<?php bloginfo('name'); ?>" /></a>
</hgroup><!-- end site-title -->
<?php if ( get_header_image() ) : ?>
<img src="<?php header_image(); ?>" class="headerimage" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" /><!-- end headerimage -->
<?php endif; ?>
</header><!-- end branding -->
Der Code für die Integration der Design/Kopfzeile Option in der functions.php (hier in einer vereinfachten Version nach Vorlage des originalen Codes im TwentyTen-Theme, das Standardbild „ginko.jpg“ befindet sich im Ordner images/headers):
// Your changeable header business starts here
define( 'HEADER_TEXTCOLOR', '' );
// No CSS, just IMG call. The %s is a placeholder for the theme template directory URI.
define( 'HEADER_IMAGE', '%s/images/headers/ginko.jpg' );
// The height and width of your custom header. You can hook into the theme's own filters to change these values.
// Add a filter to yoko_header_image_width and yoko_header_image_height to change these values.
define( 'HEADER_IMAGE_WIDTH', apply_filters( 'yoko_header_image_width', 1102 ) );
define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'yoko_header_image_height', 350 ) );
// Don't support text inside the header image.
define( 'NO_HEADER_TEXT', true );
// Add a way for the custom header to be styled in the admin panel that controls
// custom headers. See yoko_admin_header_style(), below.
add_custom_image_header( '', 'yoko_admin_header_style' );
// ... and thus ends the changeable header business.
// Default custom headers packaged with the theme. %s is a placeholder for the theme template directory URI.
register_default_headers( array(
'ginko' => array(
'url' => '%s/images/headers/ginko.jpg',
'thumbnail_url' => '%s/images/headers/ginko-thumbnail.jpg',
/* translators: header image description */
'description' => __( 'Ginko', 'yoko' )
)
) );
}
endif;
if ( ! function_exists( 'yoko_admin_header_style' ) ) :
/**
* Styles the header image displayed on the Appearance > Header admin panel.
* Referenced via add_custom_image_header() in yoko_setup().
*/
function yoko_admin_header_style() {
?>
<style type="text/css">
/* Shows the same border as on front end */
#headimg {
border-bottom: 1px solid #000;
border-top: 4px solid #000;
}
/* If NO_HEADER_TEXT is false, you would style the text with these selectors:
#headimg #name { }
#headimg #desc { }
*/
</style>
<?php
}
endif;
Ich hoffe auch dieser Teil meines WordPress Video-Tutorials kann dir wieder bei der Umsetzung eigener WordPress-Themes weiterhelfen. Wenn du Fragen oder Anregungen zum Video hast, schreibe mir doch einfach einen Kommentar. Ich freue mich auf dein Feedback!
Weitere Teile des WordPress Video-Tutorials
- WordPress Video-Tutorial Teil 7: Header und Hauptmenü eines Themes
- WordPress Video-Tutorial Teil 6: WordPress Testdaten importieren
- WordPress Video-Tutorial Teil 5: CSS3 Media Queries und der Viewport meta-tag
- WordPress Video-Tutorial Teil 4: Das Theme-Layout anlegen
- WordPress Video-Tutorial Teil 3: Die Theme-Übersetzung
- WordPress Video-Tutorial Teil 2: Das Toolbox Blank-Theme
- WordPress Video-Tutorial Teil 1: WordPress lokal installieren
Auch wenn ich bisher PHP nicht wirklich durchblickt habe, werde ich bei nächster Gelegenheit mal alle deine Video-Tutorials anwenden. Vielleicht lern ich dann mal was zu PHP, wobei ich auch ein PHP Buch hab, aber irgendwie will ich nie anfangen. Aber danke für die bisherigen Screencasts.
Viele Grüße
Vincent
Hallo Vincent,
vielen Dank für deinen Kommentar. es freut mich, wenn dir die Videos bei deiner Arbeit mit WP und PHP weiterhelfen können. Falls du mal nach einem speziellen PHP-Tutorial suchen solltest, schaue dir doch einmal „Diving into PHP“ an. Ich finde die Tuts sind eine tolle Serie für den Anfang (leider gibt es sie nur auf Englisch).
Viele Grüße,
Ellen
Hallo!
Jaja, das leidige Thema „php“…
Vielen ein graus, aber wenn man einen Blog nach seinen eigenen Vorstellungen anpassen möchte muss man sich damit befassen!
Wobei ich beim Design keine Probleme habe…bei Funktionen ist es bei mir eher die Faulheit, die mich vom umschreiben des php-codes abhält!
Bei manchen Funktionen bzw. den php-code der Funktionen möchte ich mich auch garnicht versuchen, da ich keinen Blödsinn anstellen möchte…
Aber es ist immer von Vorteil, wenn man gewisse Dinge, oder die Grundkenntnisse, in diesem Bereich weiss!
MfG
Csaba
Hallo Casaba Nagy,
naja, ich bin auch kein PHP-Experte, aber die oben im Kommentar erwähnten PHP-Tutorials haben mir bei der Umsetzung unserer WordPress-Themes wirklich sehr geholfen, ein besseres Verständnis für den PHP-Code zu bekommen :-)
Viele Grüße,
Ellen
Liebe Ellen,
ich bin seit einiger Zeit begeisterte Leserin deiner Turtorials und lerne sehr viel dabei, als absolute Anfängerin in WordPress! Deine Anleitungen machen mir Mut.
Nun habe ich eine Frage: wie integriere ich bei Yoko das Random im Headerimage-Bereich? Diese Möglichkeit zeigst du zwar in einem der Videos (Header und Farben anpassen), aber es ist im Theme selbst nicht istalliert. Das Plugin (twenty-ten-header-rotator) habe ich bereits installiert und aktiviert. Doch da fehlen ja noch einige Schritte. Wenn es nicht zu mühsam für dich ist, würde ich mich über ein paar Tipps freuen. Ansonsten versusche ich es selbst heraus zu bekommen.
Ich freue mich schon auf den nächsten Teil des Tutorials!
beste Grüße von Kathrin
Liebe Ellen,
das Random funktioniert nun doch! Also ist mein letzter Kommentar bereits überholt.
Aber: kann man das zufällige Wechseln des Headerimage auch auf den Wechsel einer bestimmten Seite festlegen ?
Das versuche ich nun auch noch…
Im Widget „Kopfzeile“ erscheint die Random-Möglichkeit nicht – es wäre schön, das dort auch zu sehen. (Thema Widgets erstellen)
Für Tipps bin ich dir sehr dankbar!
liebe Grüße von Kathrin
Wenn man eine Einsteiger Anleitung sucht welche das Thema nicht ganz so trocken angeht wie es häufig der Fall ist, kann ich nur die Seite von Peter Kropff (http://www.peterkropff.de/site/php/php.htm) empfehlen. Es kommt nicht jeder mit seiner lockeren Art zu recht, und für mich kamen die Einsteiger-Tutorials leider etwas zu spät, aber ich habe sie mir dennoch alle durchgelesen und hatte viel Spaß dabei.
Hallo Ellen,
weist Du schon wann Teil 9 fertig wird?
Hallo Christopher,
es tut mir leid, dass es gerade etwas länger mit dem nächsten Theme-Tutorial dauert. Ich plane aber auf jeden Fall noch diese Woche Teil 9 aufzunehmen :-)
Viele Grüße,
Ellen
Hallo Ellen, :)
Ich hatte mir dieses Tutorial schon mal angesehen, bin aber wieder drüber gestolpert. In dem Quellcode, den du unter dem Video gepostet hast, steht ja der Style:
#headimg {
border-bottom: 1px solid #000;
border-top: 4px solid #000;
}
Wird der überhaupt gebraucht? Ich finde kein Element, dass die ID heading hat. Auch nicht in deinem Theme ‚Yoko‘. Übersehe ich es?
Ich hab mal in dien Theme Yoko gespickt, um mir das mit dem Header-Image genauer anzusehen. Dabei ist mir aufgefallen, dass du das meiste in eine FUnktion namens ‚yoko‘ packst. Ich frage mich: Warum? Hat es einen bestimmten Grund? Sowas kann als ‚Anfänger‘ verwirrend sein xD
– Andre
Gibt es eine Möglichkeit, einen Text mit den Header BIlder zu verbinden? Für mein Theme (Vereinshomepage) möchte ich ein Headerbild ausgeben und darunter soll eine Beschreibung stehen. Ich weiss nur nicht, wie ich das umsetzen soll. :(
Ich hoffe, du weisst es :D
Die ID heading gibt es wirklich nicht, aber die ID headiMg schon ;)
Geht es denn gar nicht mehr weiter mit den nächsten Teilen?
Hallo Lars,
es wird auf jeden Fall mit dem Tutorial weiter gehen. Noch ein klein wenig Geduld :-)
Viele Grüße,
Ellen
Das ist gut, will es doch ausführlich in meinem Blog vorstellen, wenn es fertig ist.
(Hat mir aber auch bisher schon gut weitergeholfen.)
Kennt ihr eigentlich ein gutes Tutorial für das Erstellen von WordPress Plugins (inkl. Admin und Ergänzung der Erstellen-Seite etc)?
Hallo Lars,
bzgl. der Plugin-Erstellung kenne ich mich weniger aus. Tipps (allerdings nur auf English) findest du z.B. im WordPress Codex http://codex.wordpress.org/Writing_a_Plugin. Eventeull findest du auch auf dem Blog wp tuts noch eine entsprechende Anleitung.
Viele Grüße,
Ellen
Ja, die Seite kenne ich. Englisch wäre (oder besser: ist) nicht das Problem, aber ich habe den Eindruck, dass da sehr viel von den Internas vorausgesetzt wird. Habe aber noch kein gutes, umfassendes Tutorial gefunden und zu wenig Zeit, um mich suchend und per trail and error selbst einzuarbeiten :(
Sehr gute Tutorials. Bei funktioniert nur leider das individuelle Header- und Logobild, was hier beschrieben wird nicht. Es führt bei mit zu deinem PHP-Error und zwar in der Zeile, die im Codebespiel oben Zeile 29 für die functions.php-Datei ist. Bin kein PHP-Profi und deswegen wäre es sehr nett, wenn mir jemand helfen könnte.
Danke, Ellen für dieses Tutorial!
Ich möchte die Funktion für das Header-Image gern in einem WP-MU nutzen.
Dann aber scheint es mir sinnvoll zu sein, die individuellen Header-Images nicht im gemeinsamen Theme-Ordner sondern jeweils in einem Unterverzeichnes des je eigenen wp-content zu speichern.
%s ist ein Platzhalter für den Theme-Ordner, gibt es einen entsprechenden Platzhalter für den jeweils individuellen wp-content Ordner, bzw. wie müsste ich den Pfad sonst anpassen?
sorry, Ellen, hat sich erledigt, die individuell hoch geladenen Images landen ja im wp-conten/uploads Ordner, ganz wie gewünscht
Super Tutorials für WP Anfänger und nicht nur :)
Sehr lehrreich und detailliert! Komme aus dem PHP/MySQL Bereich und Entwicklungen im Frontend-Bereich sind für mich ein Graus.
Würde mich sehr über den 9ten Teil freuen.
Gibt es ne Chance, dass es weiter geht?
Viel Erfolg noch mit ElmaStudio!!
Hallo Ellen,
ich habe mit das: WordPress Video-Tutorial Teil 8 angeschaut weil ich mir auch ein Logo anstelle von dem Seitennamen einfügen wollte. Das Logo erscheint, aber so überdimensioniert. ich hab alles versucht es zu verkleinern aber damit nur das Headerbild mit verkleinert. Dazu muss ich aber noch sagen, dass ich eine (NextGEN Gallery) Slideshow als Headerbild habe. Liegt es daran oder muss ich für mein Logo noch spezielle css Angaben machen.
Deine Tutorials sind super aber hier fehlt mir was.
Vielen Dank und LG
Sebastian
Hallo Ellen,
ich habe gerade dein Video über die Veränderbarkeit der Kopfzeilen-Images gesehen.
Ich würde gerne für jeder Seite ein bestimmtes Bild anzeigen lassen und keine zufällige Abfolge. Kennst Du Lösung für diese Anforderung oder gibt es eventuell ein spezielles Theme, daß diese Anforderung schon beinhaltet. Im Moment arbeite ich mit dem Theme Twenty Eleven 1.2.
Vielen Dank schon mal.
Lieben Gruß
Bernoully
Hallöchen,
wie bekomme ich die Bilder, die ich selber hoch geladen habe, wieder gelöscht?
Wenn ich sie im uploadordner lösche, denkt wordpress immer noch das ein bild vorhanden ist, aber kann es ja nicht anzeigen kann, weil es ja nicht da ist.
Gruß von der Ostsee
Hi!
Wie krieg ich denn den code kopiert ohne Zeilennummern?
Bei mir switched das nicht um in copy.
Arbeite mit Firefox/Safari Imac Lion
Grüße vom Max
Hi Max,
Du löschst nach dem Kopieren den überflüssigen Code einfach per Handarbeit raus.
Viele Grüße,
Sabine
Normalerweise switched das um auf reinen Code, wenn man drüber geht.
Komisch, bei mir hat noch nie was geswitcht. Ich muss immer händisch deleten.
Ist ja wie Krabbenpulen:-) Ne – normalerweise blenden die Zeilennummern aus.
So jetzt habe ich keine Lust mehr. Versuche seit einer Stunde mein erstes selbstgebautes Theme mit einem austauschbaren Headerimage zu beflügeln. Gelingt mir aber nicht. Wenn ich den Code einfüge, bleibt der Bildschrim weiß.Grrrrrrr.
Hallo Ellen,
dass ist genau das was ich suche, aber bei mir wird das Logo über die volle Seitenbreite (seihe URL) gestreckt. Woran kann das liegen ?
Viele Grüße,
Kai
Hallo Ellen, schade daß es hier nicht mehr weitergeht, habe schon ganz lange nach teil 9 gesucht und nicht gefunden.
Wurde der Screencast eigentlich fortgesetzt?
Viele Grüße
Claudia
Hallo Ellen,
hab auf meiner Website den Sitetitel durch ein selbsterstelltes Logo ersetzt.
Das passt soweit gut, lediglich auf kleinen Bildschirmen oder Smartphones ist der Bild zu groß und die Site sieht dann unschön aus.
Einen ähnlichen Effekt kann man auch am PC Browser sehen, wenn man das Fenster entsprechend verkleinert.
hab das ganze auch schon letzte Woche im WP forum eingekippt, aber keine Hilfe bekommen.
Vielleicht hast du ja einen Tipp, DANKE
gruß
frank
Hallo,
vielen Dank für das gute Tutorial. ES hat mir geholfen mein Kopfbild im WordPresstheme umzuändern… da hatte ich lage für rumprobiert.
LG Marina
Hallo,
Ich möchte auf meiner Website oben 2 Logos nebeneinander einbauen. Du hast alles so wunderbar beschrieben, doch bei meinem Theme funktioniert das leider nicht. Hast Du einen Tipp, wie ich mit „Vithy“ von WP-R+Titans umgehe?
LG Rolf
Hallo Ellen,
dein Tutorial ist soweit echt gut, ich finde es teilweise ein wenig verwirrend und ich wusste nie so genau worauf du eigentlich hinaus willst. Aber ich habe es im endeffekt dann doch geschafft :)
Mir ist etwas aufgefallen. Und zwar in dem Code den man in die functions.php kopieren soll, um im adminbereich das header bild auswählen zu können ist ein kleiner Fehler.
In zeile 29 muss die klammer weg und in 30 das endif;. Zu mindestens war es bei mir so. Es wird ja auch nirgendwo ein if geöffnet.
Kann auch sein das ich vollkommen daneben liege, aber bei mir hat es ohne diese beiden Zeilen dann auch funktioniert.
Liebe Grüße
Hi Ellen,
danke für das Tutorial! Ich bin gerade dabei ein neues Theme zu entwickeln und bin auf der Suche nach einer Möglichkeit die Header Grafik bei jedem Menüpunkt zu ändern und auf einer Seite benötige ich sogar eine Flashanimation statt der Headergrafik… Weißt Du zufällig Rat?
LG
Gabriel
Hi,
tolle Tutorial Reihe.
Darf man eigendlich auch die Themes von WordPress also z.B. das twentytwelve Theme nach lust und laune anpassen oder ist das irgendwie Urheberrechtlich geschützt?
LG
Peter
Hallo Ellen,
ich habe mir das Video ändern der Header Grafik angesehen. Ich konnte es nicht so umsetzen wie Du es beschrieben hast. Du hattest ja in dem Beispiel, die header.php vomTheme Twenty Ten oder Twenty Twenty. Ich wollte aber an dem Theme Twenty Thirteen die Header Grafik ändern.
In der ganzen header.php habe ich nirgendwo ein aufruf eines Bildes gefunden. Was ich herausfinden konnte ist das das gewählte Hintergrund header Bild star.png heißt und 1060 x 230p groß ist.
Wo werden in dem Theme Twenty Thirteen die Bilder für den Header aufgerufen, bzw in welcher Datei.
In der Style.css habe ich auch nichts gefunden.
Danke für Deine Bemühungen.
////Thorsten
In der aktuellen Version von Yoko kann man das Kopfbild ja bei Anpassen wechseln. Leider gibt es dort kein Hochladen neuer Kopfbilder. Bevor ich was in php ändere (das Vimeo-Video läuft auf meinem Tablet nicht), lade ich neue Kopfbilder und Thumbnails per FTP hoch, lösche vorhandene Kopfbilder und gebe den neuen den Namen der gelöschten. Mich würde interessieren, wie ich WP neue Dateinamen beibringe, die ich dann für weitere hochgeladene Bilder verwenden kann.
Hat sich mit Wechsel zum Theme 20 14 erledigt.
dliste
Auch bei mir läuft functions.php erst, nachdem ich die Zeilen 29 und 30 im neuen *Absatz* gelöscht habe. Aber ohne die erhoffte Wirkung. Kein Hochladen. Kein Random. Wie kann es sein, dass es bei allen Kommentierenden klappt? Kann mir jemand die erfolgreich modifizierte functions.php per Email an dliste@injazz.de schicken?
Hat sich mit Wechsel zum Theme 20 14 erledigt.
dliste
Hallöchen,
nun bin ich bei Folge 8 angelangt… aber wo ist denn der Rest? Gibts die nicht mehr? Das wäre wirklich schade….
Liebe Ellen,
das Bild im Head zu ändern bereitet mir noch größere Probleme, weil ich auch kein Profi bin, was Quelltexte angeht.
Ich habe eine Header.php und eine style.css. Bei beiden kommen die Bilddateien im Head vor, werden also genannt.
Soll ich jetzt die Header.php bearbeiten, oder die style.css oder beide?
Meine Milchmädchenrechnung war, mich einfach per Filezilla auf meinen Server einzuloggen und dann die Bilder im Image-Ordner einfach rauszunehmen und durch die zu ersetzen, die ich möchte – und die neuen Bilder genauso zu benennen, wie die Vorgänger geheißen haben, damit ich die Namen nicht bei style.css oder Header.php abändern müsste. Hat aber nicht funktioniert, das alte Bild war dann trotzdem noch drin, was mich sehr gewundert hat.
Vielleicht kannst du für mich ein wenig Licht ins Dunkel bringen, vielen Dank im Voraus!
Wenn ich ein Hintergrundvideo nutze, habe ich ab heute ein PlugIn-Symbol, was aber nicht funktioniert.
Ich bekomme es nicht weg und das Video läuft aber auch nicht.
Haben Sie eine Idee ?
Prima Video, hat mir sehr geholfen,
allerdings habe ich jetzt ein Problem, mit dem Logo ist die Seite nicht mehr sooo ganz responsive.
Wie kann ich es anstellen, das sich das Logo verkleinert wenn das Display kleiner wird?