Um so wichtiger, dass ich eine bessere Lösung aufzeige und wiedermal, in dem Fall auch mich, darauf hinweise, dass man die Core-Dateien von Systemen nicht anfasst! Aber der Artikel scheint recht beliebt und scheinbar wollen auch viele Nutzer diesen Editor anpassen. Im ersten Schritt sucht man dann nach Plugins und nicht immer wird man fündig. Es gibt also noch immer Bedarf im Plugin-Sektor von WordPress; wie im übrigen auch meine Mails zeigen.

Nun aber zum eigentlichen Inhalt des Beitrags, das Anpassen des Editor TinyMCE via Hook, also unabhängig der Core-Dateien von WordPress. Die folgenden Code-Schnippsel legt man in die functions.php des Themes oder lagert sie in ein Plugin aus. Es gibt eine ganze Reihe von Möglichkeiten und ich möchte nur eine Auswahl aufzeigen. Das Anpassen der Buttons ist sicher recht bequem über das Plugin TinyMCE Advanced zu erledigen.

Den HTML-Filter anpassen

Im Standard ist der Editor so eingestellt, dass immer xHTML 1.0 erzeugt wird und damit werden nicht alle Tags erlaubt; klassisches Beispiel sind iframes, die man Beispielsweise mit Google Map im Boot hat. Auch dafür gibt es andere Ansätze via Shortcode etc., aber darum soll es hier nicht gehen. Lediglich als Beispiel soll das Erlauben des Tag iframe mit diversen Attributen hier stehen und die Tags müssen zur Variable $ext ergänzt werden.

function fb_change_mce_options($initArray) {
	// Comma separated string od extendes tags
	// Command separated string of extended elements
	$ext = 'pre[id|name|class|style],iframe[align|longdesc|name|width|height|frameborder|scrolling|marginheight|marginwidth|src]';

	if ( isset( $initArray['extended_valid_elements'] ) ) {
		$initArray['extended_valid_elements'] .= ',' . $ext;
	} else {
		$initArray['extended_valid_elements'] = $ext;
	}
	// maybe; set tiny paramter verify_html
	//$initArray['verify_html'] = false;

	return $initArray;
}
add_filter('tiny_mce_before_init', 'fb_change_mce_options');

Anpassen der Funktion, der Buttons im Editor

Im weiteren eine kleine Möglichkeit um die Blockformate (theme_advanced_blockformats) zu erweitern bzw. zu verändern und einige Buttons im Editor zu deaktivieren (theme_advanced_disable).

function fb_change_mce_buttons( $initArray ) {
	//@see http://wiki.moxiecode.com/index.php/TinyMCE:Control_reference
	$initArray['theme_advanced_blockformats'] = 'p,address,pre,code,h3,h4,h5,h6';
	$initArray['theme_advanced_disable'] = 'forecolor,bold,italic';

	return $initArray;
}
add_filter('tiny_mce_before_init', 'fb_change_mce_buttons');

Sprachen der Rechtschreibprüfung ändern

Im dritten Fall passen wir die Sprachen der Rechtschreibprüfung an, im Beispiel wird nun nur noch Deutsch und Englisch zugelassen.

function fb_mce_external_languages($initArray){
	$initArray['spellchecker_languages'] = '+German=de, English=en';

	return $initArray;
}
add_filter('tiny_mce_before_init', 'fb_mce_external_languages');

Die Standard-Werte von WordPress

Im Anschluss die Werte, die im Standard von WordPress genutzt werden und die einen Einblick in die Möglichkeiten für die Übergabe des Arrays geben.

'mode' => 'specific_textareas'
'editor_selector' => 'theEditor'
'width' => '100%'
'theme' => 'advanced'
'skin' => 'wp_theme'
'theme_advanced_buttons1' => 'bold,italic,strikethrough,|,bullist,numlist,blockquote,|,justifyleft,justifycenter,justifyright,|,link,unlink,wp_more,|,spellchecker,fullscreen,wp_adv'
'theme_advanced_buttons2' => 'formatselect,underline,justifyfull,forecolor,|,pastetext,pasteword,removeformat,|,media,charmap,|,outdent,indent,|,undo,redo,wp_help'
'theme_advanced_buttons3' => ''
'theme_advanced_buttons4' => ''
'language' => 'de'
'spellchecker_languages' => 'English=en,Danish=da,Dutch=nl,Finnish=fi,French=fr,+German=de,Italian=it,Polish=pl,Portuguese=pt,Spanish=es,Swedish=sv'
'theme_advanced_toolbar_location' => 'top'
'theme_advanced_toolbar_align' => 'left'
'theme_advanced_statusbar_location' => 'bottom'
'theme_advanced_resizing' => true
'theme_advanced_resize_horizontal' => false
'dialog_type' => 'modal'
'relative_urls' => false
'remove_script_host' => false
'convert_urls' => false
'apply_source_formatting' => false
'remove_linebreaks' => true
'gecko_spellcheck' => true
'entities' => '38,amp,60,lt,62,gt'
'accessibility_focus' => true
'tabfocus_elements' => 'major-publishing-actions'
'media_strict' => false
'paste_remove_styles' => true
'paste_remove_spans' => true
'paste_strip_class_attributes' => 'all'
'wpeditimage_disable_captions' => false
'plugins' => 'safari,inlinepopups,spellchecker,paste,wordpress,media,fullscreen,wpeditimage,wpgallery,tabfocus'

© Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)

Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren

Inhalt:

• Teil 1 - Wir legen los,
  Voraussetzungen,
  Grundlagen, Layout
• Teil 2 - Das statische
  Design wird
  WordPress-fähig
• Teil 3 - Noch mehr Daten
  aus dem Backend
• Teil 4 - Der Loop
• . . .

Es ist viel Zeit seit dem letzten Teil dieser Serie vergangen. Liegt einerseits daran, dass ich viele Projekte bearbeite, andererseits daran, dass das Feedback zur Serie so gering ausgefallen ist, dass ich dachte: Kein Interesse, dann muss ich mich auch nicht weiter bemühen. Offensichtlich habe ich aber doch einige Leser, denen das Tutorial hilft und somit mache gibt es nun einen weiteren Teil 4.

In diesem Abschnitt der Serie werden wir den Loop kennen lernen. Denn dieser stellt den Kern bei der Ausgabe im Frontend von WordPress dar. Eine ganze Reihe von Template Tags sind nur im Loop funktionstüchtig und nur im Loop hat man einfachen Zugriff auf die Datenbank. Der Loop sieht außerdem im Standard eine ganze Reihe von Daten, mit denen die einzelnen Template Tags oder eigene Funktionen arbeiten.

Definition Loop

Im Umfeld von WordPress fällt das Wort oft und es ist auch für das Verständnis unerlässlich. Worum handelt es sich also beim Loop: der Loop ist eine Ereignisschleife im Template, wobei man unendlich viele Templates mit dem Loop bestücken kann. Ebenso kann man den Loop verschachteln, mehrere Loop nacheinander verwenden oder den Loop einschränken. Der Loop wirkt in single, page, archive, index und viele weitere Templates. Für jede Funktion/Template kan nein eigener Loop hinterlegt werden und die Ausgabe kann unterschiedlich sein. Ebenso kann man es einfach gestalten und den Loop immer wieder verwenden. Alles Punkte, die von dem eigenen Wissen und Können abhängen.

Sehr viele Template Tags sind nur innerhalb des Loop funktionsfähig. Der WordPress Codex zu Template Tags gibt dazu immer genau Auskunft.

Alles was sich im Loop befindet wird auf die Ausgabe angewandt, für jeden Artikel oder Seite, die der Loop ausgibt.
Der Standard-Loop durchläuft dabei immer so oft, wie es im Backend der Installation eingestellt ist, siehe Screenshot.

Diese Einstellung wird bei jeder Art von Archiv, Suche und index gezogen. Aber auch da kann man in dem jeweiligen Template Anpassungen vornehmen. In diesem Zusammenhang sollte man sich das Verständnis der Template-Hirarchie ansehen. Diese Übersicht stellt recht gut da, wie und mit was man das Theme aufgrund der Templates beeinflussen kann.

Basic Loop

Der klassische Loop, die einfachste Variante sieht wie folgt aus. Der Loop unterteilt sich in übersichtlich gestaltet in vier Abschnitte. Eigentlich drei, wer Punkt 4 zum 1 gehört. Es ist die Alternative zur wenn (if)-Abfrage.

1. Gibt es Beiträge?

   
   <?php if (have_posts()) : ?>
   

2. Dann wird die Schleife gestartet, so lange es Beiträge gibt und der Wert im Backend zulässt.

   
   <?php while (have_posts()) : the_post(); ?>
       <!-- Punkt 2: Hier kommt die Ausgabe rein, realisiert mit xHTML und Template Tags>
   <?php endwhile; ?>
   

3. Ende der Schleife ...
   <!-- Punkt 3: Hier kommt die Ausgabe rein, wenn die Schleife beendet ist -->
4. und wenn es nicht passendes gibt, dann zeige ...

   
   <?php else: ?>
       <!-- Punkt 4: Hier kommt die Ausgabe rein, realisiert mit xHTML und Template Tags, wenn kein passender Inhalt gefunden wurde -->
   <?php endif; ?>
   

Gibt es Beiträge (if (have_posts())) in Punkt 1 und sind in der Datenbankabfrage Daten enthalten (have_posts), dann wird die Ausgabe gestartet und alle Inhalte mit Hilfe der Template Tags ausgelesen --> Punkt 2. Das Markup wird mit Hilfe von xHTML realisiert. Dazu machen wir im Anschluss ein einfaches Beispiel.

Ist die while-Schleife beendet, dann werden die Inhalte ausgegeben, die in Position des Punkt 3 hinterlegt werden. Auch hier wird mit xHTML und Template Tags das entsprechende an Markup und Inhalt erschaffen.

Werden keine Beiträge gefunden, zum Beispiel bei einer Suche, dann wird alles ausgegeben, was sich in Punkt 4 findet. Hier gestalten wir die Ausgabe ebenfalls mit den genannten Möglichkeiten.

Der Loop komplett

<?php if (have_posts()) : ?>

	<?php while (have_posts()) : the_post(); ?>

	<?php endwhile; ?>
	
	<?php else: ?>
	
<?php endif; ?>

Inhalte ausgeben

Hinterlegt man den obigen Loop in unsere index.php der Beispieldatei, dann haben wir zwar einen funktionierenden Loop, aber ohne Ausgabe. Daher realisieren wir nun die Ausgabe mit wenig Markup um das Verständnis zu fördern und nicht mit unnötig Syntax zu erschweren.

Nochmal zurück zum Tutorial Teil 3, dort haben wir die Ausgabe des Inhalt in den Container mit der ID content gepackt. Schaut euch die index.php aus dem Teil 3 dieser Serie an und vergleicht es mit dem folgenden Syntax. Dieses Markup wollen wir weiterhin nutzen und lassen aber nicht mit statischem Inhalt füllen, sondern mit Daten aus der Datenbank, aus dem installierten Blog.

Dazu erweitere ich die index.php um den Loop aus den obigen Erläuterungen und entferne den statischen Inhalt. Der div content und das h2-Tag bleiben. Darin legen wir dann den Inhalt aus der Datenbank.

Damit sieht der komplette body wie folgt aus; die Inhalte fehlen, ebenso die Inhalte des Sidebar, denn sie sind nicht relevant für Loop und Markup im Loop. Die Darstellung in diesem Artikel wird aber leserlicher und der abschließende Download und komplette Quellcode füllt dann diese Lücken wieder.
Zusätzlich habe ich einen weitern div eingefügt mit der Klasse post. Dieser Container nimmt in der Ausgabe jeden einzelnen Artikel auf und lässt uns die Formatierung mit CSS sehr gut ermöglichen.

<body>

	<div id="container">

		<div id="header">
			<h1>WordPress Theme Tutorial bei bueltge.de</h1>
			<p>Eu sit discere assueverit, sea solum sententiae intellegebat ea. Id est verterem consequat.</p>
		</div>

		<div id="sidebar">
			. . .
		</div>

		<div id="content">

			<?php if (have_posts()) : ?>

				<?php while (have_posts()) : the_post(); ?>
				<div class="post">
					<h2> . . . </h2>
					. . .
				</div>
				<?php endwhile; ?>
			
				<?php else: ?>
			
			<?php endif; ?>
			
		</div>

	</div>
</body>

Nun aber endlich, Daten aus den Datenbank. Der folgende Code nutzt drei Template Tag und holt

• den Titel des Beitrags - the_title()
• den Link zum Beitrag - the_permalink()
• und den Inhalt des Beitrags, ungekürzt - the_content()

Dazu muss man wissen, dass der Editor im Backend von WordPress die Vergabe von Absatz und Breaks vor nimmt. Das komplette Markup und der Text des Beitrags stehen in der Datenbank und werden nun nur noch geladen.

<div id="content">
			
	<?php if (have_posts()) : ?>
	
		<?php while (have_posts()) : the_post(); ?>
				
		<div class="post">
			<h2><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
			<?php the_content(); ?>
		</div>

		<?php endwhile; ?>
				
		<?php else: ?>
				
	<?php endif; ?>
			
</div>

Schaut man sich die Ausgabe im Frontend nun an, dann werden die Artikel aus der DB geholt, nach einer Standard-Installation von WordPress ist das lediglich der Begrüßungsartikel. Erstellt also noch den einen oder anderen Beitrag um zu sehen, dass der Loop mehr als diesen einen Beitrag lädt, je nach Einstellung im Backend.

Ebenso bekommt jeder Titel eines Beitrags einen Link zu dem einzelnen Beitrag, so dass man diesen einzeln betrachten kann. Damit läßt sich schon erahnen, es ist eine Menge an Möglichkeiten und wir stehen erst am Anfang.

Wir werden nun die anderen Abschnitte des Loop noch mit Tags befüllen um die Alternativen zu schaffen.

<div id="content">
	
	<?php if (have_posts()) : ?>

		<?php while (have_posts()) : the_post(); ?>
		
		<div class="post">
			<h2><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
			<?php the_content(); ?>
		</div>

		<?php endwhile; ?>
		
		<p class="navigation"><?php next_posts_link(' ««« '); ?><?php previous_posts_link(' »»» '); ?></p>
		
		<?php else: ?>
		
		<p><?php _e('Nichts gefunden, was den Suchkriterien entspricht.'); ?></p>
		
	<?php endif; ?>
	
</div>

Der obige Syntax wurde um zwei Abschnitte bereichert. Zum einen haben wir eine „Navigation“ hinterlegt. Ist man in der Sicht aller Artikel, beispielsweise der Startseite oder eines Archives, so wird man nun auf den weiteren Artikel verwiesen. Zur Ausgabe sind aktuell nur die Zeichen ««« hinterlegt, dass kann man natürlich auch anders machen, aber dazu später mehr. Die Ausgabe findet nach dem Beenden der Schleife statt.

<p class="navigation"><?php next_posts_link(' ««« '); ?><?php previous_posts_link(' »»» '); ?></p>

Die beiden Funktionen wurden mit Parametern gefüllt, diese werden übergeben und dienen der angepassten Ausgabe. Viele Template Tags können Parameter aufnehmen, dadurch wird das gestalten flexibel und sorgt für mehr Freiheiten.

Der zweite Syntax, eine reiner Text dient nur dazu, dass eine Ausgabe entsteht, wenn nichts passendes zur Datenbankabfrage gefunden wurde, beispielsweise einer Suche. Auch für diesen Fall gib es vielen schönerer Varianten und Lösungen, aber die sorgen nicht für ein besseres Verständnis und in weiteren Abschnitten dieses Tutorials, wenn es dazu kommt, soll es ja noch Themen geben.
Auffallen sollte aber die Funktion _e(), die hier zur direkten Ausgabe des Textes dient. Diese Funktion ist ein Bestandteil von gettext und sorgt dafür, dass man das Theme später mehrsprachig machen kann, ohne den Syntax für jede Sprach in den Templates zu ändern. Aber auch das ist dann kür, noch sind wir bei den Grundlagen.

<p><?php _e('Nichts gefunden, was den Suchkriterien entspricht.'); ?></p>

Im letzten Teil dieser Serie haben wir die Conditional Tags kennen gelernt, davon gibt es eine ganze Reihe und auch hier wollen wir einen einsetzen, in zwei verschiedenen Anwendungen.

Da wir nur mit einer Datei die komplette Ausgabe steuern, müssen wir, um die Navigation auch auf einzelnen Beiträgen zu realisieren, die Darstellung abfragen. Also nutzen wir die if-Abfragen und prüfen, ob es sich nicht um eine einzelne Beitrags-Seite handelt - !is_single(). Im Anschluss prüfen wir, ob es sich um eine Beitragsseite handelt, die einzelne dargestellt wird - is_single(). Je nach Abfrage, nutzen wir die jeweiligen Template Tags zur Ausgabe. Damit sieht unser Navigationsabschnitt wie folgt aus.

<p class="postlink">
<?php if ( !is_single() ) next_posts_link(' ««« '); previous_posts_link(' »»» '); ?>
<?php if ( is_single() ) previous_post_link('%link', ' ««« '); next_post_link('%link', ' »»» '); ?>	
</p>

Zum Abschluss werden wir noch den Header mit Leben erfüllen und die Inhalte aus der Datenbank, also aus den Einstellungen des Backend holen.

<div id="header">
	<h1><a accesskey="1" href="<?php bloginfo('url'); ?>/"><?php bloginfo('name'); ?></a></h1>
	<p><?php bloginfo('description'); ?></p>
</div>

Damit übergeben wir mit dem schon in Teil 3 ausgiebig erläuterten Template Tag bloginfo() den Link, den Namen und die Beschreibung des Weblog an den Header. Somit genügt nun ein Klick auf die Überschrift im Header und wir befinden uns wieder auf der Startseite. Alternativ kann man auch die Accesskey nutzen, denn dazu haben wir den Syntax accesskey="1" hinterlegt. Im Firefox ist dazu das Drücken von Alt + Shitf und 1 erforderlich. Dazu aber mehr auf vielen Webseiten, die sich mit dem Thema Barrierefreiheit bzw. -arm beschäftigen.

Download:

Ist die Arbeit nicht 1 Euro wert?
Jede Spende wird dankbar angenommen und ermöglicht das weitere Arbeiten an freier Software.
Möchtest du mehr oder anders spenden, so besuche meine Wunschliste.

Download als zip-Datei: wp_tutorial_teil4.zip - 1 kByte

Fazit und Ausblick

Nun sind wir bei dem wichtigstem Ausgabeelemet von WordPress angekommen - der Loop. Ich hoffe, dass ich es ein wenig verständlich darlegen konnte. Der Loop ist sehr mächtig und kann sehr vielfältig beeinflusst werden. Dazu aber später in einem anderen Abschnitt. Sollte noch Bedarf bestehen, so werde ich an dieser Serie weiter arbeiten und würde dann im nächsten Artikel den Sidebar einbinden und das Theme Widget-fähig machen. Damit sind der Vielfältigkeit der Gestaltung im Sidebar viele Möglichkeiten gegeben und es ist steuerbar im Backend.

Ebenso sollte man die Reihenfolge und Unterstützung der Templates in WordPress kennen und nutzen, die Variation des Loop, eigene und mehrfache Schleifen und die Beieinflussung per Funktionen im Theme sind nur einige Themenpunkte, die WordPress sehr interessant machen. Werden wir also sehen, wohin uns diese Reise führt.

© Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)

Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren

Inhalt:

• Teil 1 - Wir legen los,
  Voraussetzungen,
  Grundlagen, Layout
• Teil 2 - Das statische
  Design wird
  WordPress-fähig
• Teil 3 - Noch mehr Daten
  aus dem Backend
• Teil 4 - Der Loop
• . . .

Nachdem wir im zweiten Teil der Serie „Ein WordPress Theme selbst erstellen” das Stylesheet mit Hilfe der Template Tags eingebunden haben, sollen nun im dritten Teil alle weiteren Daten aus dem Backend von WordPress geladen werden. Damit wird die Grundlage geschaffen, dass ein Theme die Einstellungen des jeweiligen Weblogs nutzt und das Theme in jedem beliebigen Weblog einsetzbar ist.

Gleich vorweg, es wird in diesem Artikel eine ganze Reihe an Code kommen. Bitte nicht verzweifeln, wenn es der erste Kontakt mit PHP-Syntax ist. Mit der Zeit kommt die Übung, ganz gleich wie das Lernen von HTML. Außerdem werde ich gleichzeitig auf eine Reihe Template Tags und Funktionen eingehen, die für das erstellen eines Themes von Relevanz sind und in diesem Teil des Tutorials nötig sind.

Im diesem Abschnitt des Tutorials werden wir den head-Abschnitt der index.php erweitern. Es werden nicht nur die statischen Daten so erweitert, dass die Werte aus der Datenbank gezogen werden, sondern ich erweitere gleich um eine Reihe weiterer Zeilen und Zeichen, um die Möglichkeiten und nach meiner Meinung wichtigen Daten zu integrieren.

html-Tag

Als erstes wird der Doctype deklariert. Ich wähle dabei XHTML 1.0 Transitional und erweitere den html-Tag lediglich um eine Funktion von WordPress language_attributes().

<html xmlns="http://www.w3.org/1999/xhtml" &lt;?php if ( function_exists('language_attributes') ) language_attributes(); ?&gt; id="fb">

Diese Funktion übergibt zwei Werte die für sauberen und validierbaren Code nötig sind.

dir="ltr" lang="de-DE"

Das Attribut dir bekommt den Wert aus den WordPress-Einstellungen und übergibt den Wert ltr, womit der Text von links nach rechts (left to right) dargestellt wird. Nähere Information zum Beispiel bei SELFHTML.

Das Attribut lang übergibt die Sprache der Website und wird aus der wp-config.php gezogen. Je nach dem welcher Wert dort hinterlegt wurde, wird nun das Attribut lang ergänzt. Bekommt die Konstante WPLANG in der wp-config.php keinen Wert zugeordnet, so wird auch kein Wert für das Attribut lang ausgeben, wie es beispielsweise die Sprache des Weblog und Backend interpretiert. In dem Fall wird en_US genutzt und ausgeben, interessant bei der Erstellung von mehrsprachigen Themes oder Plugins. Gleichzeitig wird aber auch das Attribut nicht ausgegeben, also lediglich das dir-Attribut.

<?php if ( function_exists('FUNKTION') ) FUNKTION(); ?>

Möchte man die beiden Attribute einzelnen übergeben, dann steht die Funktion get_bloginfo() als Alternative zur Verfügung. Bei der Verwendung dieser Möglichkeit, würde unser Beispiel wie folgt aussehen.

<html xmlns="http://www.w3.org/1999/xhtml" dir="<?php echo get_bloginfo('text_direction'); ?>" lang="<?php echo get_bloginfo('language'); ?>" id="fb">

Allerdings muss in diesem Fall beachtet werden, dass bei nicht hinterlegtem Wert für die Konstante WPLANG in der wp-config.php auch kein Wert gezogen wird. Das Attribut lang steht also ohne Inhalt, was zu Fehlern führt. Also diese Version nur bei gepflegtem Wert in der wp-config.php nutzen.

head-Tag

WordPress unterstützt das Metadaten-Profil der XHMTL Friens Network (XFN) und dieses wird dem head-Tag hinzugefügt. Das Attribut profile ist dafür zuständig. Kurz gesagt, kann man damit persönliche Beziehungen über Links deklarieren. WordPress nutzt das bei der Definition der Links in der Blogroll (mehr zu XFN).

<head profile="http://gmpg.org/xfn/11">

Innerhalb des head-Abschnittes werden eine Reihe an meta-Tags definiert, bei denen ich eine ganze Reihe mehr als unbedingt nötig nutze. Das hat einerseits den Grund der Suchmaschinenfütterung und andererseits den Grund alle Daten zu dem Dokument Weblog zu hinterlegen, der für sauberen und vollständigen Code nötig ist.

meta-Tag die 1.

Die ersten beiden meta-Tags legen den Content-Type (Angaben zur Zeichencodierung) und den Content-Script-Type (Angaben zum Standard für Scripte) fest. Sollte keinerlei Script zum Einsatz kommen, dann kann die Zeile fehlen. In der Regel sind aber immer JavaScript-Codes in der Ausgabe des Weblog zu finden.

<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />

Im zweiten Teil dieses Tutorials haben wir den Template Tag bloginfo() schon einmal verwendet, zur Angabe der Stylesheet-Adresse.
Dieser Tag ist ein recht mächtiger und wichtiger Template Tag bei dem Erstellen von Theme und Plugins. Er akzeptiert eine große Anzahl von Parametern. Der Codex stellt nicht alle Möglichkeiten des Tags dar, deshalb kurz die Möglichen Parameter und was es damit auf sich hat.

Die Funktion bloginfo() ist im übrigen nur die Ausgabe (echo) von der Funktion get_bloginfo(). Sollte man also den Wert eines Parameters ohne Ausgabe wünschen, dann kann die Funktion get_bloginfo() als Alternative dienen.

• url Blog-Adresse (URL) aus den Einstellungen im Backend (ehemals auch home oder siteurl, fällt aber in den Folgeversionen >2.4 von WP weg)
• wpurl WordPress-Adresse (URL) aus den Einstellungen im Backend (Installationsadresse)
• description Blog-Thema aus den Einstellungen im Backend
• rdf_url URL für RDF/RSS 1.0 Feed
• rss_url URL für RSS 0.92 Feed
• rss2_url URL für RSS 2.0 Feed
• atom_url URL für den Atom Feed
• comments_atom_url URL für den Atom Feed zu Kommentaren
• comments_rss2_url URL für den RSS 2.0 Feed zu Kommentaren
• pingback_url Pingback Adresse
• stylesheet_url URL zum Stylesheet des aktiven Themes (muss im Theme ohne Unterordner liegen)
• stylesheet_directory URL zum Ordner des verwendeten Stylesheets
• template_directory oder template_url URL zum Order des aktiven Themes
• admin_email E-Mail-Adresse des Administrators aus den allgemeinen Einstellungen im Backend
• charset Zeichensatz aus den lesenden Einstellungen im Backend
• html_type Content-Type für das Blog
• version Version der WordPress-Installation
• language Sprache aus der wp-config.php, siehe oben im Abschnitt
• text_direction Wert für das dir-Attribut, siehe oben im Abschnitt
• name Blogtitel aus den allgemeinen Einstellungen im Backend

title-Tag

In der folgenden Zeile übergebe ich den title-Tag, der den Title des jeweiligen Beitrags, Seite, Kategorie usw. übergeben soll. Im einfachsten Fall wird dieser mit Hifle des Template Tag the_title() gefüttert.

<title><?php wp_title(); ?></title>

Der Template Tag the_title() hat dabei die Funktion der Übergabe des jeweiligen Beitrags, Seite, Archiv usw.. Der Codex beschreibt den Tag ausführlich.

<?php the_title('before', 'after', display); ?>

Parameter:
before (string) Text vor dem Titel, standard ist ''
after (string) Text nach dem Titel, standard ist ''
display (Boolean) Zeige den Title (TRUE) oder Rückgabe für PHP (FALSE), standard ist TRUE.

Natürlich lässt sich dieser beliebig erweitern, beispielsweise um den Namen des Weblog.

<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>

Allerdings sollte man wissen, dass eine derartige Darstellung nicht besonders schön für Leser, die beispielsweise einen Beitrag als Lesezeichen ablegen, oder Suchmaschinen ist. Dafür nutze ich die Conditional Tags und je nach geladenem Dokument-Type wird der Title angepasst. Eine Möglichkeit könnte wie folgt aussehen.

<title><?php if ( is_home() ) { _e('Startseite | ', 'THEMENAME'); } wp_title(' '); if (wp_title(' ', false)) { echo ' | '; } bloginfo('name'); ?></title>

Im Beitrag „WordPress Titel ändern” bin ich schon auf Hintergründe und Lösungen eingegangen. Deshalb hier keine weiteren Erklärungen. Lediglich die Erläuterung zum Thema Conditional Tags soll nicht verloren gehen.

Conditional Tags sind Funktionen, mit denen man Bedingungen abfragen kann. Die Ausgabe des Weblog ist damit vielfältig und einfach steuerbar. Es gibt eine ganze Reihe von Conditional Tags. Einige von ihnen können Parameter aufnehmen. Das Ergebnis der Übergabe ist immer TRUE oder FALSE.

• is_admin Wenn im Adminbereich
• is_archive Ob ein Archiv dargestellt wird
• is_attachment Anhang im Beitrag oder Seite
• is_author Autorenseite
• is_category Kategorie Archiv oder Parameter
• is_tag Tag-seite
• is_comments_popup Kommentar per Popup Funktion
• is_date Archivseite auf Basis Datum
• is_day Archivseite auf Basis Tag
• is_feed wenn es ein Feed ist
• is_front_page die definierte Startseite des Blog (nur ab WP 2.5)
• is_home Startseite (nicht nur die statische Seite)
• is_month Archivseite auf Basis Monat
• is_page statische Seite
• is_paged Seite/ Weblog wurde „geblättert”
• is_preview Vorschau
• is_robots
• is_search Suchseite
• is_single einzelner Beitrag
• is_singular
• is_time Archivseite auf Basis Zeit
• is_trackback wenn es es sich um Pingback oder Trackback handelt
• is_year Archivseite auf Basis Jahr
• is_404 Fehlerseite 404

Nicht alle Tags sind im Theme-Umfeld üblich, trotzdem sollen sie erwähnt werden und stehen somit als vollständige Liste zur Verfügung. Eine Dokumentation der Conditional Tags findet man ebenso im Codex.

meta-Tag die 2.

In den folgenden Zeilen werden eine ganze Reihe von meta-Tags hinterlegt und mit Werten gefüllt. Wenn möglich, dann fülle ich diese mit Daten aus dem Backend. Dabei kommen wieder die bereits erwähnten Template Tags zum Tragen. Deshalb werde ich auch nicht auf jede Zeile eingehen, Informationen zu den Möglichkeiten mit Tag bloginfo() bzw. get_bloginfo() sind im obigen Abschnitt zu finden.
Ebenso wende ich Conditional Tags an, um den Inhalt der Attribute je nach Ausgabe entsprechend zu füllen.

<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
<meta name="robots" content="index, follow" />
<meta name="description" content="<?php if ( is_single() ) { wp_title(''); echo ' - '; } elseif ( is_page() ) { wp_title(''); echo ' - '; } bloginfo('description'); ?>" />
<meta name="keywords" content="" />
<meta name="language" content="<?php bloginfo('language'); ?>" />
<meta name="content-language" content="<?php bloginfo('language'); ?>" />
<meta name="publisher" content="<?php bloginfo('name'); ?>" />
<meta name="revisit-after" content="1 days" />
<meta name="author" content="Frank Bueltge" />

Die Übergabe von Keywords im entsprechendem meta-Tag ist nicht so ohne weiteres möglich. Der kann beispielsweise mit den benutzerdefinierten Feldern oder einem Plugin entsprechend dem Inhalt der Ausgabe befüllt werden.

Stylesheet laden

Im Anschluss lade ich das Stylesheet des Themes. Diese Zeilen haben wir schon im Teil 2 des Tutorials besprochen und dementsprechend verweise ich nur drauf und hinterlasse hier keine weiteren Zeilen Erklärung.

link-Tag

Der link-Tag ist im Zusammenhang mit seinem rel-Attribut eine sehr sinnvolle Erweiterung mit Mehrwert. In unserem Fall definieren wir die RSS 2.0 Feed-URL, das Favicon und die Pingback-URL des Blogs und können so eine Reihe von weiteren Funktionen vieler Browser bzw. Applikationen nutzen.
Auch hierbei kommt der Template Tag bloginfo() zum Einsatz.

<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="Shortcut Icon" type="image/x-icon" href="<?php bloginfo('url'); ?</favicon.ico" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

wp_head Hook

Bevor wir zum Abschluss des Abschnittes head kommen, erweitern wir den Teil noch um den Hook wp_head. Dieser ermöglicht die Erweiterung der Daten im head-Abschnitt durch WordPress, zum Beispiel durch Plugins innerhalb des Backends. Alle Daten können mit Hilfe dieses Hook aus dem Backend, einem Plugin, direkt hier hinzugefügt werden, ohne Arbeit am Code. Dies macht die Einbindung von Plugins einfacher, insofern sie Daten hier ablegen müssen und ebenso die Integration von neuen Funktionen der WordPress-Anwender. (Doku im Codex)

<?php wp_head(); ?>

kompletter Code doctype, html und head

Zum Schluss nun noch der komplette Code des besprochenen Abschnittes.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php if ( function_exists('language_attributes') ) language_attributes(); ?> id="fb">

<head profile="http://gmpg.org/xfn/11">
	<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
	<meta http-equiv="Content-Script-Type" content="text/javascript" />
	
	<title><?php if (is_home()) { _e('Startseite | ', 'THEMENAME'); } wp_title(' '); if (wp_title(' ', false)) { echo ' | '; } bloginfo('name'); ?></title>

	<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
	<meta name="robots" content="index, follow" />
	<meta name="description" content="<?php if ( is_single() ) { wp_title(''); echo ' - '; } elseif ( is_page() ) { wp_title(''); echo ' - '; } bloginfo('description'); ?>" />
	<meta name="keywords" content="" />
	<meta name="language" content="<?php bloginfo('language'); ?>" />
	<meta name="content-language" content="<?php bloginfo('language'); ?>" />
	<meta name="publisher" content="<?php bloginfo('name'); ?>" />
	<meta name="revisit-after" content="1 days" />
	<meta name="author" content="Frank Bueltge" />
	
	<style type="text/css" media="screen">
		@import url( <?php bloginfo('stylesheet_url'); ?> );
	</style>

	<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
	<link rel="Shortcut Icon" type="image/x-icon" href="<?php bloginfo('url'); ?>/favicon.ico" />
	<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

	<?php wp_head(); ?>

</head>

Download:

Ist die Arbeit nicht 1 Euro wert?
Jede Spende wird dankbar angenommen und ermöglicht das weitere Arbeiten an freier Software.
Möchtest du mehr oder anders spenden, so besuche meine Wunschliste.
Download als php-Datei: wp_tutorial_teil3.zip - 2 kByte

Fazit und Ausblick

In diesem dritten Teil der Serie haben wir eine ganze Reihe neuer Informationen, so hoffe ich, gelernt. Die Mächtigkeit der Conditional Tags ist hoffentlich zum Tragen gekommen und ebenso das Verständnis der Template Tags, auch wenn wir nur sehr wenige der vielen Tags genutzt haben.

Im kommen Teil 4 werde ich den Loop ins Spiel bringen, denn nun soll es endlich Daten aus dem Backend geben. Ich hoffe, dass es nicht zu theoretisch und zu langweilig ist, aber nur so kann ich auf die kleinen Details eingehen und Bezug zu den Unterschieden zu einer statischen HTML-Datei nehmen. Noch mehr Inhalt in die jeweiligen Teile zu bringen, halte ich für weniger gut und es macht die Seite unleserlich. Außerdem ist es für mich auch recht viel Aufwand derartige Artikel zu schreiben.

Auch hier wieder der Hinweis, ich freue mich über Feedback in jeder Form.

© Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)

Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren

Inhalt:

• Teil 1 - Wir legen los,
  Voraussetzungen,
  Grundlagen, Layout
• Teil 2 - Das statische
  Design wird
  WordPress-fähig
• Teil 3 - Noch mehr Daten
  aus dem Backend
• Teil 4 -Der Loop
• . . .

Im ersten Teil des Tutorial zum erstellen eines WordPress-Themes haben wir Grundsteine gelegt. Ich hoffe, dass sich alle Teilnehmer mit den Markups und CSS-Styles der verschiedenen Layouts auseinander gesetzt haben?

Prinzipiell kann nun mit jedem beliebigen Layout weiter gearbeitet werden. Die Basis stellt immer eine statische HTML-Datei dar. So hat man die Möglichkeit das Layout in verschiedenen Browsern zu testen und einen Überblick über eventuelle Probleme zu erhalten.

Hat man später ausreichend Erfahrung muss sicher nicht auf Basis eines statische Layouts aufgebaut werden, aber so kann man eine Reihe von Problemen umgehen. Auch im Bezug auf professionelle Entwicklungen kann so im Vorfeld eine Reihe von Komplikationen umgangen werden. Der Kunde kann eine Layout sehen, ohne das spezifische Wissen über WordPress zu integrieren. In der Regel soll er erstmal einen Entwurf außerhalb des Papiers absegnen und das geht sicher mit einer statischen HTML-Seite scheller. Nun aber zum Umsetzen, so dass wie die simple HTML-Datei mit Daten von WordPress füttern.

Ich beziehe mich in den folgenden Abschnitten immer auf das absolut positionierte Layout. Warum? - ganz einfach, ich möchte Probleme mit CSS umgehen und eine Reihe von lieben Lesern meines Blogs möchten Layouts im Rahmen der CMS-Anwendung umsetzen. Aber wie gesagt, um WordPress zu verstehen, spielt es keine Rolle, das sind Grundlagen und Können im Rahmen von HTML und CSS.

Ich bin ein Amateur-Webdesigner. Im Allgemeinen unterstütze ich das Profi-Tun im Webdesign nicht, sobald es über das Vermitteln von „Basics” und eine lockerer Anleitung hinausgeht. Ich gebe mein Bestes und ich bin ein starker Verfechter der Methode sich selbst zu motivieren und selbst zu lernen. Frank Bueltge

Damit wir das komplette Layout nun aber sauber und standardisiert außerhalb des Markup haben, muss der interne Styleabschnitt in die style.css integriert werden. Dazu nehmt eines der Beispielmarkups, mit dem ihr das Tutorial weiter absolvieren wollt und kopiert den Inhalt zwischen

<style type="text/css" media="screen">

</style>

Die CSS-Anweisungen kopiert ihr in die bestehende style.css. Die beiden oben genannten Zeilen löscht ihr dann, inklusiver der Styleanweisungen. Somit steht nun nur noch die Anweisung für moderne Browser im Markup zum Laden des Stylesheets @import url( style.css );, gefolgt in von den Zeilen:

</head>
<body>

Für alle sparsamen Teilnehmer, der Code steht im Anschluss wieder zum Download bereit.

WordPress erkennt das Template

Im aktuellen Zustand haben wir unser Design lediglich als HTML-Datei vorliegen. Damit WordPress die Datei erkennt und damit arbeiten kann, müssen wir nun eine Reihe von Anpassungen vornehmen. Ich werde versuchen, es so einfach und nachvollziehbar wie möglich zu erläutern. Tipps, Kritik und Verbesserungen sind erwünscht. In diesem Teil wird es noch wenig Code sein, aber das ändert sich ab Teil 3 dieses Tutorial.

Nachdem wir die statische HTML-Datei in unserem Editor des Vertrauens geöffnet haben, werden nun einige Eckdaten so geändert, dass die Inhalte aus der Datenbank kommen und Einstellungen des Blog an das Template übergeben werden. Nur so kann das Frontend, die eigentliche Seite für den Leser, sauber vom Backend, dem Administrationsbereich, angepasst werden.
Dazu speichern wir als erstes die HTML-Datei als PHP-Datei unter dem Namen index.php ab, im gleichen Verzeichnis wp-content/themes/wp_tutorial/, in dem wir schon im ersten Teil gearbeitet haben. Dort liegt auch das Stylesheet der verschiedenen HTML-Layout-Vorschläge.

Nun könnt ihr schon das Theme im Backend von WordPress aktivieren und das Layout bewundern.

Ein nicht sonderlich schöner Anblick, denn es fehlt die Zuordnung des Stylesheets. Bisher wurde die Datei direkt zugewiesen @import url( style.css );. Das müssen wir nun im Sinne von WordPress tun und damit erscheint dann auch die Seite im Design des Stylesheets. Ändert also diese Anweisung in den folgenden Syntax: @import url( <?php bloginfo('stylesheet_url'); ?> );.

Wichtig, das Stylesheet wird nur dann von WordPress als solches erkannt, wenn die Datei style.css heißt und die entsprechenden Kommentarfelder in der Datei vorhanden sind.

/*
Theme Name: WordPress Tutorial
Theme URI: http://bueltge.de
Description: Das Theme zum WordPress Tutorial
Version: 1.0
Author: Frank Bueltge
Author URI: http://bueltge.de
*/

Template Tag

Durch die Anpassung der index.php haben wir nun auch unseren ersten Template-Tag genutzt. Ein Grund, um ein wenig mehr darüber zu schreiben und zu verstehen.

Mit Hilfe der Template Tags werden Informationen aus der Datenbank an das Frontend, im Gewissen Maße auch an das Backend von WordPress übergeben. Im Grunde sind Template Tags PHP-Funktionen, welche in den Dateien der WordPress-Installation liegen. Einige dieser Template Tags können Parameter aufnehmen. Wobei die Parameter durch Variablen übergeben werden. Diese Variablen bekommen in den meisten Template Tags schon Werte mit und so können die Funktionen, die Template Tags unkompliziert eingesetzt werden.

Template Tags werden nach den Regeln von PHP in HTML eingebunden: <?php bloginfo('stylesheet_url'); ?>. Es wird also jeder Tag nach SGML Processing Instructions in HTML integriert: <?php ?>.

Es gibt eine ganze Reihe von Template Tags und am besten man gewöhnt sich an die Arbeit mit dem Codex, der Dokumentation rund um WordPress, denn dort werden alle Template Tags erläutert und aktuell gehalten. Denn im Rahmen von neuen Versionen kommen neue Tags hinzu und ab und zu werden auch bestehende Tags verändert oder werden gar nicht mehr unterstützt.

Nun sind aber Template Tags nicht gleich Template Tag. Es gibt drei Arten von Tags:

• Tags ohne Parameter
• Tags mit PHP-Funktion-Style-Paramtern
• Tags mit Quera-Style-Parametern

Was ist das nun wieder und muss ich das wissen? Die Unterscheidung ist bei der Arbeit an einem Theme sicher nicht von expliziter Bedeutung, Hauptsache man kann die Tags einsetzen und versteht die Anwendung. Trotzdem ist ein solides Hintergrundwissen niemals verkehrt und sorgt für mehr Verständnis beim Einsatz der Template Tags. Deshalb im folgenden kurz und knapp die Erläuterungen.

Tags ohne Parameter

Einige Funktionen benötigen keine Parameter und sind einfach und unkompliziert eingesetzt. Diese Tags werden lediglich mit Namen und folgender Klammerpaar eingesetzt. Ein typisches Beispiel ist the_meta(). Dieser Template Tag listet lediglich den Schlüssel und den Wert aus den benutzerdefinierten Feldern aus.

<?php the_author(); ?>

Tags mit PHP-Funktion-Style-Parametern

Ein große Anzahl der Template Tags akzeptiert Parameter. Diese Parameter werden genauso wie in PHP-Funktion eingesetzt und daher kommt auch der Name. Werden mehrere Parameter übergeben, so sind diese per Kommata zu trennen. Alle Parameter werden immer in ein Klammerpaar eingeschlossen. Und damit schließe ich auch wieder den Kreis zu unserem verwendeten Template Tag bloginfo(). Dieser Tag ist ein klassisches und viel verwendeter Tag mit PHP-Funktion-Style-Parametern. Er akzeptiert eine große Anzahl von Parametern und gibt je nach Parameter das entsprechende Ergebnis. In unserem aktuellen Fall die URl zur Stylesheet-Datei bloginfo('stylesheet_url').

<?php the_content('Weiterlesen ...'); ?>

Tags mit Query-Style-Parametern

Damit aber nicht genug, denn es gibt noch ein drittes Model der Templates Tags. Diese Form nutzt den Query-String und entspricht damit der GET-Methode des HTTP-Protokolls. Dadurch kann man Template Tags, die eine besonders große Anzahl von Parametern besitzen, mit Hilfe eines Wrapper - einer Hülle nutzen. Dies führt dazu, dass man einen Template Tag schnell und einfach nutzen kann. Es müssen nur die Parameter übergeben werden, die man auch benötigt, nicht die benötigen der Funktion.

Es gibt nur eine Auswahl von Template Tags mit Wrapper. Am Syntax kann man einige Tags erkennen. In der Regel sind Tags, die einen Wrapper besitzen mit wp_ am Anfang gekennzeichnet. Leider gilt das nicht ausnahmslos. Ein typisches Beispiel ist der Aufruf des Archiv wp_get_archives(). Dieser Tag mit Wrapper beruht auf der Funktion get_archives('type', 'limit', format, 'before', 'after', 'show_post_counter'). Benötigt man also nur eine oder wenige Paramater, so ist die Anwendung mit Wrapper wesentlich einfacher - wp_get_archives('limit=5')

<ul>
<?php wp_tag_cloud('smallest=8&largest=22'); ?>
</ul>

<?php include (TEMPLATEPATH . '/example.php'); ?>

<?php include (ABSPATH . 'wp-content/themes/default/example.php'); ?>