Logo und Tagline (Spruch)

Jetzt wollen wir endlich mal den leeren Bereich oben im Template füllen. Laut unserem Wireframe soll oben auf der Seite das Logo, bzw. der Name der Website + ein passender Spruch angezeigt werden. Diese Daten können im WordPress Backend unter „Settings -> General“ eingestellt werden und betreffen den „Blog Title“ und die „Tagline“. Wenn diese Felder ausgefüllt sind, können wir mit der WordPress-Template Funktion „bloginfo()“ darauf zugreifen:

header.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//DE" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de">
<head profile="http://gmpg.org/xfn/11">
	
	<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

	<title><?php wp_title(' - ', true, 'right'); ?> <?php bloginfo('name'); ?></title>
	
	<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
	<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
	
	<?php wp_head(); ?>
	
</head>
<body>

<div id="wrapper">
	
	<div id="header">
		<h1><?php bloginfo('name'); ?></h1>
		<h3><?php bloginfo('description'); ?></h3>
	</div><!-- header -->

Im h1-Tag zeigen wir den Blogtitel an, dieser wird über den Parameter-Wert „name“ ausgegeben. Die Tagline, also der Spruch des Blogs, erhält man mit dem Parameter-Wert „description“.

Zugegeben, das sieht nicht besonders schick aus, aber darum gehts hier ja erstmal nicht. Durch eine kleine Modifikation wird unser Titel gleichzeitig zu einem Link zurück zur Startseite des Blogs:

<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>

Jetzt nehmen wir noch eine simple Änderung an unserem Stylesheet vor, um eine Trennlinie zwischen dem header und dem main Bereich zu erhalten:

style.css

/*   
Theme Name: Tutorial
Theme URI: http://wordpress.lernenhoch2.de
Description: Template zum WordPress Tutorial auf http://wordpress.lernenhoch2.de
Author: Christian Strang
Author URI: http://lernenhoch2.de
*/

body			{margin: 0px; padding: 0px; color: #333; background: #e5e5e5;}

#wrapper		{width: 850px; margin: auto; text-align: left; background: #fff;}
#header			{height: 160px; padding: 20px; border-bottom: 1px solid #ccc;}
#main			{width: 520px; padding: 20px; float: left;}
#sidebar		{width: 270px; padding: 10px; padding-top: 20px; float: left;}
#footer			{clear: both; height: 100px; padding: 20px; }

Das Ergebnis sollte nun folgendermaßen aussehen:

hier geht's weiter...



Kommentare


kann man evtl. auch Bilder in den Headerbereicht einfügen? wenn ja dann wie ? über style.css oder über die header.php mit imgsrc ? Danke für deine Bemühungen im Voraus


alles klar hab es gerad rausgefunden. Über Style.css mit Background-image url … is das so richtig?


entweder oder, beides funktioniert. Grundsätzlich würde ich es aber in der style.css machen, wenn es aber nicht anders funktioniert, ist die header.php auch eine gute Alternative.


Wenn man das über die style.css regelt, wie fügt man dann am besten den Link ein?
Geht des auch über css, nicht das ich wüsste oder?


Man muss immer unterscheiden zwischen HTML und CSS. Links sind HTML, die müssen definitiv in die header.php (oder in eine andere Template Datei).


ich würds mit jquery machen die in den header einfügen oder du lässt ne php schleife durchlaufen mit den bildern gibt da schon möglichkeiten

Kommentar schreiben

Kommentar

Hilfe:

<strong>fettgedruckt</strong> => fettgedruckt

<em>kursiv</em> => kursiv

<a href="http://wordpress.lernenhoch2.de">Link</a> => Link

[code]<?php echo 'hello world'; ?>[/code]

*

Feedback Formular