WordPress Video-Tutorial Teil 8: individuelles Logo- und Headerbild

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

29 Kommentare

Vincent
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
- 15/06/2011 @ 16:31
- · Antworten
- Ellen
  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
  - 15/06/2011 @ 18:30
  - · Antworten
Csaba Nagy
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
- 15/06/2011 @ 21:26
- · Antworten
- Ellen
  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
  - 17/06/2011 @ 09:23
  - · Antworten
Kathrin
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
- 20/06/2011 @ 13:08
- · Antworten
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
- 20/06/2011 @ 14:03
- · Antworten
Holger
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.
- 20/06/2011 @ 14:17
- · Antworten
Christopher
Hallo Ellen,
weist Du schon wann Teil 9 fertig wird?
- 06/07/2011 @ 19:26
- · Antworten
- Ellen
  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
  - 06/07/2011 @ 20:42
  - · Antworten
Andre
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
- 25/07/2011 @ 18:45
- · Antworten
- Jim
  Die ID heading gibt es wirklich nicht, aber die ID headiMg schon ;)
  - 25/07/2011 @ 20:11
  - · Antworten
Lars
Geht es denn gar nicht mehr weiter mit den nächsten Teilen?
- 01/08/2011 @ 03:14
- · Antworten
- Ellen
  Hallo Lars,
  
  es wird auf jeden Fall mit dem Tutorial weiter gehen. Noch ein klein wenig Geduld :-)
  
  Viele Grüße,
  Ellen
  - 03/08/2011 @ 13:14
  - · Antworten
  - Lars
    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)?
    - 03/08/2011 @ 13:21
    - · Antworten
    - Ellen
      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
      
      03/08/2011 @ 13:30
      
      · Antworten
      - Lars
        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 :(
        
        03/08/2011 @ 13:42
        
        · Antworten
Tim
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.
- 17/08/2011 @ 14:20
- · Antworten
Nepf
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?
- 09/09/2011 @ 09:34
- · Antworten
Nepf
sorry, Ellen, hat sich erledigt, die individuell hoch geladenen Images landen ja im wp-conten/uploads Ordner, ganz wie gewünscht
- 09/09/2011 @ 09:47
- · Antworten
Denikin
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!!
- 13/10/2011 @ 12:03
- · Antworten
Sebastian
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
- 18/10/2011 @ 14:00
- · Antworten
Bernoully
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
- 14/11/2011 @ 14:52
- · Antworten
Steffen
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
- 25/02/2012 @ 11:36
- · Antworten
Max
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
- 17/03/2012 @ 18:17
- · Antworten
- Sabine
  Hi Max,
  
  Du löschst nach dem Kopieren den überflüssigen Code einfach per Handarbeit raus.
  
  Viele Grüße,
  Sabine
  - 17/03/2012 @ 18:24
  - · Antworten
  - Max
    Normalerweise switched das um auf reinen Code, wenn man drüber geht.
    - 17/03/2012 @ 18:26
    - · Antworten
    - Sabine
      Komisch, bei mir hat noch nie was geswitcht. Ich muss immer händisch deleten.
      
      17/03/2012 @ 18:37
      
      · Antworten
Max
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.
- 17/03/2012 @ 18:42
- · Antworten
Kai
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
- 26/03/2012 @ 11:30
- · Antworten

Elmastudio

WordPress Video-Tutorial Teil 8: individuelles Logo- und Headerbild

Hilfreiche Code-Schnipsel aus dem Video

Weitere Teile des WordPress Video-Tutorials

29 Kommentare

Hinterlasse eine Antwort Antworten abbrechen