// Adds classes for custom post types to body_class() and post_class()
function fb_add_body_class( $class ) {
	$post_type = 'my_example_post_type'; // der Post Type

	if ( get_query_var('post_type') === $post_type ) { // nur wenn der Post Type aktiv ist, dann erweitern
		$class[] = $post_type;
		$class[] = 'type-' . $post_type;
	}

	return $class;
}
add_filter( 'body_class', 'fb_add_body_class' );

Alternativ kann man auch die post_class() Funktion erweitern um die Klasse des Custom Post Type nicht direkt am body-Tag zu haben. Dazu verwende ich die gleiche Funktion und es muss lediglich der Hook für die post-Klassen angesprochen werden.

add_filter( 'post_class', 'fb_add_body_class' );

Beide Template Tags werden im HTML-Tag verwendet, wie auch die verlinkten Codex-Seiten aufzeigen; bzw. ein Beispiel für die Post-Klasse:

<div <?php post_class('class-name'); ?>>

Viel Freude beim austesten und nutzen. Die Kommentarfunktion steht wie immer für Verbesserungen und Diskussion offen.

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

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

body {
	background-repeat:no-repeat !important;
	background-position:center center !important;
	background-attachment:fixed !important;
	-o-background-size: 100% 100%, auto !important;
	-moz-background-size: 100% 100%, auto !important;
	-webkit-background-size: 100% 100%, auto !important;
	background-size: 100% 100%, auto !important;
}

Das CSS ist nicht in allen Browsern nutzbar, siehe Übersicht, liefert daher nur in den aktuellen Browsern den erwarteten Effekt. Der Internet Explorer, Browser kann man ihn ja schlecht nennen, hat hiermit so seine Schwierigkeiten.

Eine Alternative ist es den Callback für die Funktion mitzugeben und eine eigene kleine Funktion in der functions.php abzulegen, die sich um das Ausgeben des CSS kümmert. Die folgende Funktion tut dies statisch, fragt also nur das Bild ab und nutzt die Werte aus dem Backend nicht.

function fb_header_callback() {
  
  $background = get_background_image();
  if ( !$background )
    return;

  if ( $background ) {
    $image = " background-image: url('$background');";
  
    $style  = 'background-repeat:no-repeat;';
    $style .= 'background-position:center center;';
    $style .= 'background-attachment:fixed;';
    $style .= '-o-background-size: 100% 100%, auto;';
    $style .= '-moz-background-size: 100% 100%, auto;';
    $style .= '-webkit-background-size: 100% 100%, auto;';
    $style .= 'background-size: 100% 100%, auto;';

    $style .= $image . $style;
  }
?>
<style type="text/css">
body { <?php echo trim( $style ); ?> }
</style>
<?php
}

Diese Funktion muss in der Funktion als Callback mitgeben, sie kann natürlich beliebig angepasst werden. In der functions.php des Themes sollte es, wenn es die Background-Image-Funktionalität schon gibt, die Funktion add_custom_background() geben. Dieser muss im ersten Parameter mit der neuen Funktion erweitert werden und nun wird der Standard-Callback von WordPress nicht mehr aufgerufen.

	// This theme allows users to set a custom background
	add_custom_background( 'fb_header_callback' );

Als Hinweis, der Style wird dann via Hook wp_head direkt im head ausgegeben, eher unschön - wie ich finde, und daher solltet ihr diese Formatierung wohl besser im Stylesheet ablegen, da sie eh statisch ist und nicht vom User angepasst werden kann. Ebenso ist wichtig das der Hook auch im Theme vorhanden ist, was aber auch für andere Plugins oder Funktionen wichtig ist.

Werte aus dem Backend nutzen

Als letzter kleiner Tipp für eure eigenen Anpassungen möchte ich noch zeigen, wie man die Werte aus dem Backend bekommt und nutzt.
Die Hintergrundfarbe der Optionen zum Hintergrundbild wird mit folgender Funktion zurück gegeben:

$color = get_background_color();

Das Bild bekommt via:

$background = get_background_image();

Und einzelne Einstellungen zum Style werden via get_theme_mod($name); abgefragt:
Der folgende kleine Schnipsel gibt die gesetzten Werte zum Theme zurück.

$mods = get_theme_mods();
var_dump($mods);

Dies könnte beispielsweise für das Standard Theme Tweny Ten wie folgt aussehen

string 'Twenty Ten' (length=10)

array
  'background_image' => string 'http://localhost/wpbeta/wp-content/uploads/2010/12/apple-touch-icon.png' (length=71)
  'background_image_thumb' => string 'http://localhost/wpbeta/wp-content/uploads/2010/12/apple-touch-icon.png' (length=71)
  'background_repeat' => string 'no-repeat' (length=9)
  'background_position_x' => string 'center' (length=6)
  'background_attachment' => string 'scroll' (length=6)
  'background_color' => string '' (length=0)

Aufgrund dieser Werte im Array kann man beispielsweise den Wert background_repeat holen,

$repeat = get_theme_mod( 'background_repeat' );

der in diesem Beispiel no-repeat zurück gibt.

Mit den anderen Werten kann man genauso verfahren; eine Menge an Spielraum und Möglichkeiten.
Zum den Themen CSS und Hintergrund findet man einen ausführlichen Artikel bei Chris: Perfect Full Page Background Image

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

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

Der grobe Ablauf

• Kopie der page.php in guestbook-page.php erstellen
• Inhaltlich einige Veränderungen vornehmen
• Kopie der comments.php in guestbook.php erstellen
• Inhaltlich den Aufbau ändern
• Templates in den Theme-Ordner kopieren oder Child-Theme erstellen
• Seite im Backend von WordPress erstellen und Template wählen

Die guestbook-page.php

Im neuen Template sind nur wenige Veränderungen vorzunehmen. Im ersten Schritt braucht das Template einen Namen, damit es im backend von WordPress für statische Seiten erkannt wird. Dies geschieht in den Kommentaren am Anfang der Datei.

<?php
/**
 * Template Name: Guestbook
 *
 * A custom page for guestbook function.
 *
 * The "Template Name:" bit above allows this to be selectable
 * from a dropdown menu on the edit page screen.
 *
 * @package WordPress
 * @subpackage Twenty_Ten
 * @since Twenty Ten 1.0
 */

Im Anschluss wird im Aufruf der Kommentarfunktion noch der Name der Datei mitgegeben, der sich um die Darstellung der Gästebucheinträge kümmert und das Formular zum Eintragen enthält. Im Grunde könnte man dies auch weglassen, aber dann ist inhaltlich alles auf Kommentare abgeglichen und das Formular für Neueinträge befindet sich am Ende, also nach den Einträgen. Da es bei Gästebüchern aber meist anders ist, legen wir das Formular vor die Liste der Einträge und ändern die Texte.
Daher muss also die Datei an die Funktion übergeben werden.

<?php comments_template( '/guestbook.php' ); ?>

Das Beispieltemplate mit den Änderungen in der kompletten Sicht:

<?php
/**
 * Template Name: Guestbook
 *
 * A custom page for guestbook function.
 *
 * The "Template Name:" bit above allows this to be selectable
 * from a dropdown menu on the edit page screen.
 *
 * @package WordPress
 * @subpackage Twenty_Ten
 * @since Twenty Ten 1.0
 */

get_header(); ?>


		<div id="container">
			<div id="content" role="main">

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

				<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
					<?php if ( is_front_page() ) { ?>
						<h2 class="entry-title"><?php the_title(); ?></h2>
					<?php } else { ?>
						<h1 class="entry-title"><?php the_title(); ?></h1>
					<?php } ?>

					<div class="entry-content">
						<?php the_content(); ?>
						<?php wp_link_pages( array( 'before' => '<div class="page-link">' . __( 'Pages:', 'twentyten' ), 'after' => '</div>' ) ); ?>
						<?php edit_post_link( __( 'Edit', 'twentyten' ), '<span class="edit-link">', '</span>' ); ?>
					</div><!-- .entry-content -->
				</div><!-- #post-## -->

				<?php comments_template( '/guestbook.php' ); ?>

<?php endwhile; ?>

			</div><!-- #content -->
		</div><!-- #container -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Die guestbook-page.php

Auch hier gibt es wenig Verändeurngen. Im ersten Schritt holen wir das Formular vor die Ausgabe der Gästbuch-Einträge. Der folgende Code ist das Original und ruft das Formualr seit WordPress 3.0 auf.

<?php comment_form(); ?>

Diesen Code setzen wir nun vor die Ausgabe der Einträge, also vor

<?php
	// You can start editing here -- including this comment!
?>

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

Um nun aber die Felder richtig anzupassen und entsprechende Texte mitzugeben, müssen einige Paramter der Funktion übergeben werden. Die Funktion comment_form() lässt sehr viele Möglichkeiten zu und alle Parameter werden in einem Array übergeben. Im Codex findet man die einzelnen Felder erläutert.
In meinem Fall sieht der Abschnitt dann wie folgt aus.

<?php
// You can start editing here -- including this comment!

// the form
$attr = array(
					'comment_field'        => '<p class="comment-form-comment"><label for="comment">' . _x( 'Guestbook entry', 'noun', 'twentyten' ) . '</label><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea></p>',
					'label_submit'         => __( 'Post Entry', 'twentyten' ),
					'title_reply'          => __( 'Leave a Entry', 'twentyten' ),
					'title_reply_to'       => __( 'Leave a Entry to %s', 'twentyten' ),
					'cancel_reply_link'    => __( 'Cancel reply', 'twentyten' ),
				);
comment_form( $attr );

// list of guestbook entries
if ( have_comments() ) : ?>

Das Beispieltemplate mit den Änderungen in der kompletten Sicht:

<?php
/**
 * The template for displaying Comments.
 *
 * The area of the page that contains both current comments
 * and the comment form.  The actual display of comments is
 * handled by a callback to twentyten_comment which is
 * located in the functions.php file.
 *
 * @package WordPress
 * @subpackage Twenty_Ten
 * @since Twenty Ten 1.0
 */
?>

			<div id="comments">
<?php if ( post_password_required() ) : ?>
				<p class="nopassword"><?php _e( 'This post is password protected. Enter the password to view any comments.', 'twentyten' ); ?></p>
			</div><!-- #comments -->
<?php
		/* Stop the rest of comments.php from being processed,
		 * but don't kill the script entirely -- we still have
		 * to fully load the template.
		 */
		return;
	endif;
?>

<?php
// You can start editing here -- including this comment!

// the form
$attr = array(
					'comment_field'        => '<p class="comment-form-comment"><label for="comment">' . _x( 'Guestbook entry', 'noun', 'twentyten' ) . '</label><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea></p>',
					'label_submit'         => __( 'Post Entry', 'twentyten' ),
					'title_reply'          => __( 'Leave a Entry', 'twentyten' ),
					'title_reply_to'       => __( 'Leave a Entry to %s', 'twentyten' ),
					'cancel_reply_link'    => __( 'Cancel reply', 'twentyten' ),
				);
comment_form( $attr );

// list of guestbook entries
if ( have_comments() ) : ?>
			<h3 id="comments-title"><?php
			printf( _n( 'One Entry in %2$s', '%1$s Entries in %2$s', get_comments_number(), 'twentyten' ),
			number_format_i18n( get_comments_number() ), '<em>' . get_the_title() . '</em>' );
			?></h3>

<?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : // Are there comments to navigate through? ?>
			<div class="navigation">
				<div class="nav-previous"><?php previous_comments_link( __( '<span class="meta-nav">&larr;</span> Older Entries', 'twentyten' ) ); ?></div>
				<div class="nav-next"><?php next_comments_link( __( 'Newer Entries <span class="meta-nav">&rarr;</span>', 'twentyten' ) ); ?></div>
			</div> <!-- .navigation -->
<?php endif; // check for comment navigation ?>

			<ol class="commentlist">
				<?php
					/* Loop through and list the comments. Tell wp_list_comments()
					 * to use twentyten_comment() to format the comments.
					 * If you want to overload this in a child theme then you can
					 * define twentyten_comment() and that will be used instead.
					 * See twentyten_comment() in twentyten/functions.php for more.
                     * use param reverse_top_level to reverse the order of the guestbook-entries
					 */
					wp_list_comments( array( 'reverse_top_level' => TRUE, 'callback' => 'twentyten_comment' ) );
				?>
			</ol>

<?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : // Are there comments to navigate through? ?>
			<div class="navigation">
				<div class="nav-previous"><?php previous_comments_link( __( '<span class="meta-nav">&larr;</span> Older Entries', 'twentyten' ) ); ?></div>
				<div class="nav-next"><?php next_comments_link( __( 'Newer Entries <span class="meta-nav">&rarr;</span>', 'twentyten' ) ); ?></div>
			</div><!-- .navigation -->
<?php endif; // check for comment navigation ?>

<?php else : // or, if we don't have comments:

	/* If there are no comments and comments are closed,
	 * let's leave a little note, shall we?
	 */
	if ( ! comments_open() ) :
?>
	<p class="nocomments"><?php _e( 'Guestbook are closed.', 'twentyten' ); ?></p>
<?php endif; // end ! comments_open() ?>

<?php endif; // end have_comments() ?>

</div><!-- #comments -->

Die Sprache

Nun müssen die Felder übersetzt werden. Dazu sollte ein Werkzeug genutzt werden - meine Empfehlung das Plugin für WordPress Localization. Damit wird nun die Sprachdatei des TwentyTen Theme neu erstellt und die neuen Sprachschlüssel erkannt, welche dann übersetzt werden können.

Hinweis: Damit wird ein Teil dem Update entnommen - die Sprachdatei. Daher ist es sauberer, wenn man ein Child-Theme anlegt, dort die beiden Templates ablegt und die Sprachdatei dort erzeugt. Hinweise, wie man ein Child-Theme erzeugt, findet ihr im Artikel WordPress Child Themes verstehen. Trotzdem habe ich mal als Beispiel als Child Theme erzeugt. Es enthält die Sprachdateien und die Templates für das Gästebuch, sowie die notwendigen Dateien und Strings um ein Child Theme für diese Funktion zu erzeugen. Damit sollte es einfach möglich sein ein Child Theme mit der Möglichkeit der Erweiterung und einem Gästebuch zu erstellen. Der Download ist in den folgenden Zeilen zu finden.

Abschluss

Nun gilt es die beiden php-Templates und die Sprachdatei in das Theme zu kopieren und eine neue Seite über das Backend zu erstellen. Vergebt einen Namen für das Gästebuch, hinterlasst eventuell einen einführenden Text für die Gäste und wählt das neue Template „Guestbook“ in der Meta-Box dieser Seite.
Wenn alles ok ist, dann steht nun euer Gästebuch und kann genutzt werden. Keine Plugins, keine unnötigen Ressourcen oder Tabellen in der Datenbank. Aber, abhängig von Theme, was auch richtig ist, denn es handelt sich im Themen zum Design - der Inhalt steht in der Datenbank.

Für alle, die sich das Kopieren des Code ersparen wollen, lege ich die beiden Dateien als zip ab, so dass man sie downloaden und nutzen kann.

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.

• Template-Dateien im Download als zip-Datei: guestbook-twentyten.zip - 2 kByte
• Child Theme inkl. Sprachdateien Deutsch etc. im Download als zip-Datei: guestbook-tutorial.zip - 28 kByte

Viel Freude damit und viel Erfolg beim Verstehen des Code und meiner kurzen Anleitung. Für Hinweise, Verbesserungen und Fehler steht die Kommentarfunktion zur Verfügung - vielen Dank.

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

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

Mehr:

• #1
• #2
• #3

Schon mehrfach habe ich über die Möglichkeiten der Anpassungen des Login zum WordPress Backend berichtet, diverse Beiträge lassen sich dazu finden. Aktuell kommen trotzdem immer wieder Fragen und so möchte ich drei einfache Möglichkeiten aufzeigen, so dass man mit wenig Aufwand das Login an die Site anpassen - ein schöner Mehrwert auch im Bezug auf Kundenprojekte, die so runder wirken, als wenn immer das WordPress Logo und der Link erscheint.

Im ersten Schritt passe ich dazu das Logo auf der Login-Seite an. Dies wurde von mir schon mal beschrieben, allerdings mehr im Hinblick auf das Ändern des kompletten Login-Screen und so hier eine einfachere Art und Weise, die schnell realisiert ist. Die Stylesheet-Anweisung soll einfach in den head geschrieben werden, im älteren Tutorial wird ein externes Stylesheet eingebunden.

Logo ändern

Im ersten Code-Beispiel binde ich das Favicon ein, ein schneller Weg ohne großen Aufwand. Alternativ kann natürlich auch ein Logo aus dem Theme eingebunden werden, dazu Code-Beispiel Nummer zwei. Jedes der folgenden Beispiele gehört in die functions.php des Themes.

function fb_custom_login_logo() {
	$style = '<style type="text/css"> h1 a { background: transparent url(' . get_bloginfo('url') . '/favicon.ico) no-repeat 30px center !important; } </style>';
	echo $style;
}
add_action( 'login_head', 'fb_custom_login_logo' );

function fb_custom_login_logo() {
	$style = '<style type="text/css"> h1 a { background: transparent url(' . get_bloginfo('template_directory') . '/images/your-logo-image.png) no-repeat center top !important; } </style>';
	echo $style;
}
add_action( 'login_head', 'fb_custom_login_logo' );

Nun haben wir zwar das Logo angepasst, aber der Name beim Hover-Effekt ist noch immer nicht der Site entsprechend. Also auch dafür eine Anpassung, wozu es einen Hook gibt.

Namen ändern

Diesen Hook sprechen wir an und geben in dem folgenden Schnippsel den Namen des Blog mit, der in der Datenbank gepflegt ist, der also über die Einstellungen erreichbar und veränderbar ist. Alternativ kann man natürlich auch statische Inhalte oder eigene Felder abfragen.

function fb_login_headertitle() {
	$name = get_option('blogname');
	echo $name;
}
add_filter( 'login_headertitle', 'fb_login_headertitle' );

Link ändern

Zum Abschluss soll nun noch der Link ebenfalls angepasst werden, so dass ein Klick auf das Logo zum Frontend der Installation führt. Auch dafür hat WP einen Hook vorgesehen.

function fb_login_headerurl() {
	$url = bloginfo('url');
	echo $url;
}
add_filter( 'login_headerurl', 'fb_login_headerurl' );

Drei kleine einfache Möglichkeiten die in fast jedes Theme gehören und so das Login zur Site entsprechend anpassen. Der Kunde wird es danken und das Produkt ist einfach ein wenig runder. Viel Freude damit.

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

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

Die Funktion der Child Themes kann im Grunde bei jedem Theme angewandt werden und die neuen Funktionen erleichtern den Zugriff und das Erstellen einen Child Themes. Im Vorfeld gab es auch Möglichkeiten ein Theme zu verändern ohne die eigentlichen Dateien des Themes stark zu verändern. Mit Hilfe der Unterstützung von Child Themes ist dies nun aber komplett unabhängig und so kann man ein Theme nutzen, kann ohne Problem updaten, und trotzdem eigene Ideen realisieren.

In einigen Beiträgen des Netzes wurde die Child Themes schon angesprochen und ich habe bisher nur Artikel gefunden, die die Aktivierung und Änderung des Stylesheets ansprechen. Daher möchte ich dazu nur kurz eingehen, dass ist im Grunde auch recht einfach und dann die verschiedenen Möglichkeiten im Bezug der Template-Dateien aufzeigen.

Vorteile der Idee Child Theme

Mehr oder weniger versucht jeder Administrator einer WordPress Installation etwas Individualismus zu leben. Dabei gehen nicht alle den Weg eines eigens erstellen Themes. Nicht selten wird ein freies oder kommerzielles Theme genutzt und dann an die eigenen Bedürfnisse angepasst. Dabei haben diverse Themes unterschiedliche Optionen, die aber trotzdem nur selten für das Anpassen ausreichen. Will man die einzelnen Darstellungen anpassen, beispielsweise die Sicht einer Kategorie, führt dies schnell zu sehr starken Veränderungen des Themes. Egal wie umfangreich, ein Update eines Themes ist nicht mehr ohne Probleme realisierbar. Hier kommen die Child Themes ins Spiel.

Mit einem Child Theme kann ein Theme angepasst werden oder man kann ein Theme als "Framework" nutzen und dabei komplett eigene Ideen umsetzen. Egal wie umfangreich, das eigentliche Theme bleibt unangetastet und kann ein Update erfahren.

Nachteile der Verwendung Child Theme

Wie so oft, wo Vorteile sind, sind auch Nachteile. Nicht selten sind die "Framework" Themes sehr umfangreich und bringen sehr viele Funktionen mit, die man als Laie nicht mehr überschauen kann und das Anpassen kann viel Mühe und Zeit kosten. Hier können auch die Child Themes nicht helfen.
Einen großen Nachteile sehe ich in der Performance, muss WordPress doch einnen Schritt weiter gehen und sich in zwei Bereichen nach den Templates umsehen und entsprechend ziehen.
Im weiteren werden in der Regel die Stylesheets, wenn man auf sie aufbaut, via @-Regel eingebunden, die Nachteile in der Performance hat.

In allen negativen Punkten kommt es auf Können und Wissen des Entwicklers an, also wie man das Theme bzw. Child Theme erstellt. Damit kann man die Punkte entkräften. Wichtig: die neue Funktion ist kein Freibrief, sie sollte genauso überlegt eingesetzt werden. Aber sie sorgt dafür, dass man sein erstandenes Theme nicht anfassen muss und trotzdem sehr überschaubar Anpassungen vornehmen kann.

Child Theme anlegen

Genug der Vorrede, die man sicher erweitern und diskutieren kann. Am Beispiel Theme TwentyTen soll nun eine angepasstes Theme entstehen - ich nenne es TwentyTenJump

Im ersten Schritt wird ein neuer Ordner angelegt, in dem wir alle Template-Dateien, Bilder, Scripte und Stylesheets ablegen - was man im Grunde für das Child Theme benötigt. In diesem Beispiel ist das der Ordner twentytenjump. Um ein Child Theme zu erzeugen und WordPress dieses erkennbar zu machen bedarf es lediglich der style.css innerhalb der neuen Ordners mit diversen Strings in einem Kommentar.

Innerhalb der style.css sieht es wie folgt aus.

@charset "UTF-8";

/**
 * Theme Name:     TwentyTenJump
 * Theme URI:      http://bueltge.de/?p=1192
 * Description:    Child theme for the Twenty Ten theme. Realized for a small tutorial to child themes in WordPress.
 * Author:         Frank Bültge
 * Author URI:     http://bueltge.de/
 * Template:       twentyten
 * Version:        0.1.0
 */

@import url('../twentyten/style.css');

Entscheidend sind die Schlüssel Theme Name und Template. Der Schlüssel Template verweist auf den Ordner-Namen des Theme, welches als Basis gezogen wird - in diesem Beispiel das Theme Twentyten.

Folgenden Aufbau habe ich nun innerhalb der Installation von WordPress.

• wp-content
  • themes
    • twentyten

    (das Basis-Theme, inkl. aller Template-Dateien)

    • style.css
    • index.php
    • ...
    • twentytenjump
      • style.css (muss diese Namenskonvetion erfüllen: style.css)

Damit sind die ersten Voraussetzungen geschaffen und man kann das neue Theme im Backend von WordPress aktivieren.
Achtung: der Verweis auf das Basis-Theme ist nicht sonderlich auffällig, so dass man die Abhängigkeit übersehen könnte. Darum also immer kontrolliert ein Theme löschen. Am verwendeten Theme gibt es keinerlei Hinweis, dass ein anderes Theme als Child-Theme auf dieses Theme zugreift.

Am Stylesheet drehen

Ab nun kann man jede beliebe Änderung in dem eigenen Stylesheet ablegen. Ebenfalls kann natürlich der Aufruf des Stylesheets @import url('../twentyten/style.css'); aus dem Basis-Theme entfallen und man kann sich komplett eigene Stylesheet-Strukturen aufbauen.

Man nutzt quasi die Template-Dateien, den Aufbau und das PHP-KnowHow vom Basis Theme, in dem Fall Twenty Ten. Man kümmert sich ausschließlich um das Design und das im beliebigen Umfang. Beispielsweise könnte das im einfachsten Fall eine Farbänderung des Hintergrund sein und alternativ kann ein komplett eigenes Design kreiert werden.

Templates ersetzen

Die Funktionalität des Child Theme lässt aber mehr zu als das Änderung des Aussehen. So kann man bestehende Template-Dateien des Basis-Themes ersetzen. WordPress sucht quasi im ersten Schritt im übergeordneten Child Theme und dann im Basis-Theme nach dem möglichen Template. Durchläuft dabei die Hierarchie der Template-Dateien.

An vielen Punkten vom Theme kann man via Hook eingreifen, was aber nicht jedem Nutzer liegt und kompliziert erscheint. So wird nicht selten die Ausgabe des Titel im head einer Website mit eigenen Funktionen oder von Plugins ersetzt. Man kann entweder via Hook den Titel bearbeiten oder die Ausgabe über eine Funktion steuern. Für das Beispiel soll nun der Titel mit einer Funktion aus einem Plugin ausgegeben werden. In dem Fall muss die header.php bearbeitet werden und darum muss man wie folgt vorgehen, so dass das Basis-Theme unangetastet bleibt.

Es ist lediglich die header.php, die den head-Abschnitt für das Theme enthält in das eigene Child Theme zu kopieren und hier kann sie beliebig bearbeitet werden. Ab nun zieht WordPress diese header.php und nicht mehr die Original-Datei aus dem Basis Theme Twenty Ten.

Damit kann nun auch die angesprochene Funktion in den Title integriert werden, ein Beispiel:

<title><?php
	/*
	 * Print the <title> tag based on what is being viewed.
	 * We filter the output of wp_title() a bit -- see
	 * twentyten_filter_wp_title() in functions.php.
	 */
	if ( function_exists('seo_title_tag') )
		seo_title_tag();
	else
		wp_title( '|', true, 'right' );

	?></title>

Das Basis-Theme bleibt unangetastet, kann weiterhin via Updates auf dem neusten Stand gehalten werden und ab nun zieht WordPress die header.php immer aus dem Child Theme.

Wie in diesem kleinen Beispiel kann man jedes Template ersetzen und so an die eigenen Anforderungen angepasst werden. Trotzdem sollte man bedenken, dass man das Template komplett ersetzt - in dem Beispiel-Fall würde man also ein Update der header.php nicht mitbekommen. Insofern kann es nützlich sein, wenn man auf diverse Bereiche besser via Hook zugreift und diese in eigenen Funktionen abbildet, dazu gleich mehr.

Wichtig: eine Ausnahme ist die functions.php, dazu im Anschluss mehr.

Templates erweitern

Um eigene Anforderungen zu erfüllen, kann es sein, dass man neue Templates benötigt, Template-Dateien die es im Ist-Zustand nicht im Basis-Theme nicht gibt. Im Sinne der Hirarchie kann man immer erweitern. Beispielsweise besitzt Twenty Ten keine home.php - sollte man die aber definieren wollen, also dann wenn die definierte Home-Seite des Backend im Frontend geladen wird, dann kann man diese Datei einfach in das Child-Theme ablegen und WordPress zieht diese Datei, wenn der Zustand is_home() wahr ist.

Mit WordPress Version 3.0 gibt es aber eine weitere Möglichkeit außerhalb der Template-Hirarchie um eigene Templates einzubringen - get_template_part().
Diese Funktion wird konsequent innerhalb von Twenty Ten verwendet - damit muss man in diversen Fällen keine eigenen Templates für den kompletten Aufruf anlegen, sondern lediglich den Abschnitt des Loop.
Beispielsweise nutzt Twenty Ten für die Darstellung der Kategorie-Archive den Aufruf get_template_part( 'loop', 'category' );. Damit ist es möglich, dass in unserem Child Theme ein Template abgelegt wird, was diesen Loop bedient. Es ist also lediglich eine Datei loop-category.php anzulegen und dort alle notwendigen Infos abzulegen.
Im folgenden Beispiel passe ich den Loop an, wenn man sich einem der vier Kategorien befindet. Weitere Änderungen sind möglich, so dass man volle Kontrolle und Flexibilität erhält.

// Anpassungen des Loop
if ( in_category( array(47, 37, 27, 45) ) ) {
	query_posts( 'cat='.$cat.'&posts_per_page=-1&orderby=title&order=ASC' );
}	else {
	query_posts( 'cat='.$cat.'&posts_per_page=20&paged='.$paged );
}
while ( have_posts() ) : the_post(); ?>

Ähnlich könnte man so den Loop für die index.php anpassen - Template Datei loop-index.php wäre dann im Spiel

Funktionen einbringen

Natürlich kann man auch innerhalb des Child-Theme eigene Funktionen einbringen. Wenn man eine eigene functions.php im Child Theme ablegt, dann ersetzt diese Datei nicht die functions.php des Basis-Theme!
Es werden immer die Funktionen des Basis-Theme genutzt; man muss sie via Hook deaktivieren. Die Möglichkeit wird auch in einer Doku in der Datei functions.php erklärt.

add_action( 'after_setup_theme', 'my_child_theme_setup' );
function my_child_theme_setup() {
		// We are providing our own filter for excerpt_length (or using the unfiltered value)
		remove_filter( 'excerpt_length', 'twentyten_excerpt_length' );
		...
}

Innerhalb der Funktion my_child_theme_setup() kann man nun Funktione des Basis-Theme deaktivieren und eigene Funktionen einbringen.

Weitere Funktionen gehören in die functions.php des Child Themes - das Basis-Theme bleibt immer unangetastet. Im folgenden Code dazu ein Beispiel.
Dabei deaktiviere ich die Funktion des Basis Theme Twenty Ten zur Länge des Excerpt und lade dazu eine eigene Funktion twentytenjump_excerpt_length() und es wird ein Widget eingebracht.

<?php
function twentytenjump_setup() {
	
	remove_filter( 'excerpt_length', 'twentyten_excerpt_length' );
	add_filter( 'excerpt_length', 'twentytenjump_excerpt_length' );
	
	add_action( 'widgets_init', 'register_limited_catagories_widget' );
}
add_action( 'after_setup_theme', 'twentytenjump_setup' );

function twentytenjump_excerpt_length( $length ) {
	return 10;
}

class limited_catagories_list_widget extends WP_Widget {
	
	function limited_catagories_list_widget(){
		$widget_ops = array( 'classname' => __('Selective categories'), 'description' => __('Show a list of Categories, with the ability to exclude categories') );
		
		$control_ops = array( 'id_base' => 'some-cats-widget' );
		$this->WP_Widget( 'some-cats-widget', __('Selective Catagories'), $widget_ops, $control_ops );
	}
 
	function form ( $instance){
		$defaults = array( 'title' => __('Catagories'), 'cats' => '', 'count' => 0 );
		$instance = wp_parse_args( (array) $instance, $defaults );
		$count = isset($instance['count']) ? (bool) $instance['count'] :false;
		?>
		<p>
			<label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></label>
			<input id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" value="<?php echo $instance['title']; ?>" class="widefat" />
		</p>
		<p>
			<input type="checkbox" class="checkbox" id="<?php echo $this->get_field_id('count'); ?>" name="<?php echo $this->get_field_name('count'); ?>"<?php checked( $count ); ?> />
			<label for="<?php echo $this->get_field_id('count'); ?>"><?php _e( 'Show post counts' ); ?></label><br />
		</p>
		<p>
			<label for="<?php echo $this->get_field_id( 'cats' ); ?>"><?php _e( 'Categories to exclude (comma separated list of Category-IDs): ' ); ?></label>
			<input id="<?php echo $this->get_field_id( 'cats' ); ?>" name="<?php echo $this->get_field_name( 'cats' ); ?>" value="<?php echo $instance['cats']; ?>" class="widefat" />
		</p>
		<?php
	}
 
	function update($new_instance, $old_instance) {
			$instance = $old_instance;
			$instance['title'] = strip_tags( $new_instance['title'] );
			$instance['count'] = !empty($new_instance['count']) ? 1 : 0;
			$instance['cats']  = strip_tags( $new_instance['cats'] );
			return $instance;
	}
 
	function widget($args, $instance){
		extract( $args );
		$title = apply_filters('widget_title', $instance['title'] );
		$c     = $instance['count'] ? '1' : '0';
		$cats  = $instance['cats'];
		echo $before_widget;
		if ( $title )
			echo $before_title . $title . $after_title;
		echo '<ul>';
		wp_list_categories("exclude=$cats&title_li=&show_count=$c");
		echo '</ul>';
		echo $after_widget;
	}

}

function register_limited_catagories_widget(){
	register_widget('limited_catagories_list_widget');
}
?>

Fazit

Ich meine aktuell, dass durch die Einführung des neuen Standard-Theme Twenty Ten sicher einige neue schöne Funktionen hinzugekommen sind. Ich denke aber ebenso, dass Twenty Ten sehr ungeeignet ist um die Arbeit von WordPress im Bereich des Themes zu verstehen. Gerade Einsteiger und PHP-Neulinge werden sich schwer tun. Trotzdem entstehen so neue Möglichkeiten und will man Child Themes sauber nutzen, dann kommt man um das Verständnis der Hooks in der WordPress API nicht herum. WordPress führt die Idee der Hooks konsequent fort, schon immer in Plugins beliebt, machen sie sich nun auch in Themes breit. Alles hat Vor- und Nachteile.
Nutzt man aber ein gut gepflegtes Theme oder Framework, dann wird man die neuen Möglichkeiten schätzen und kann so immer ohne Probleme Updaten. Entscheidend wird das eigene Wissen um WordPress sein - je nach Interesse, Wissensstand und Arbeitsweise kann man eigene Themes erstellen. Man sollte sich im Vorfeld Gedanken machen und nicht blind loslegen und wie so oft, am Theme schrauben.

Download:

Zum Abschluss noch das Theme mit den entsprechenden Template-Dateien als Downlaod, so dass man einen kleinen Start zum Spielen hat.

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: twentytenjump.zip - 5 kByte
Einen Stand online einsehbar und erweiterbar, eventuell gepflegt findest du auf Github: github.com/bueltge/TwentyTenJump

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

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

Ab und an braucht man aber etwas bestimmtes und einiges davon wiederholt sich und daraus sind einige Code-Schnippsel entstanden, die hier nun abgelegt sind. Dabei möchte ich speziell am Beispiel jQuery zeigen, wie das geht - liegt zum einen daran, dass jQuery mit vielen Plugins im Core von WordPress vorhanden ist und dass die Arbeit mit jQuery recht unkompliziert ist. Prinzipiell gelten die Hooks und Aufrufe aber auch für eigene Scripte und andere Bibliotheken.

Die Hooks zum einhaken

WordPress bietet die Hooks um an bestimmten Punkten im Core einzuhaken. Hier ist einer der Stärken von WordPress und die folgenden drei Hooks sind insbesondere für das inkludieren von Scripten bei Themes interessant. Die nachfolgenden Beispiele zeigen die Verwendung auf.

• init
• template_redirect
• after_setup_theme ab WordPress 3.0

jQuery von WordPress im Theme mit der Google AJAX Library ersetzen

Im folgenden Source wird die jquery-Library von Google CDN geladen; die Nutzung von jQuery kann aber ungestört genutzt bleiben. Andere Plugins können also via wp_enqueue_script() sehr einfach auf die Bibliothek zugreifen.

function fb_greyfoto_init() {
	if ( !is_admin() ) { // prinzipiell überflüssig, da der Hook nur im Theme zieht
		wp_deregister_script( 'jquery' ); // deregister Schlüssel jquery
		wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js', false, '1.4.2'); // registriere Schlüssel jquery mit der URL von Google CDN
		wp_enqueue_script( 'jquery' ); // binde jquery ein
	}
}
// nur für Theme, ab WordPress 3.0
add_action( 'after_setup_theme', 'fb_greyfoto_init' ); // Theme aktiv, inkludiere Funktion

jQuery Library im Footer

Der Standard-Aufruf von wp_enqueue_script( 'jquery' ) im Theme sorgt zwar dafür, dass man jQuery von WordPress holt und wenn alle Plugins und Themes die Bibliothek so referenzieren, dann wird die Bibliothek auch nur einmal eingebunden, aber jQuery wird nicht im Footer geladen, sondern im head der Site. Daher muss der Aufruf umgestellt werden und der Parameter für "lade im Footer" mitgegeben werden.
Im Aufruf des Beispiel zeigt sich auch der Unterschied der Hooks, da after_setup_theme erst ab WordPress 3.0 zur Verfügung steht.

function fb_greyfoto_init() {
	if ( !is_admin() ) {
		wp_deregister_script( 'jquery' );
		wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js', false, '1.4.2', true ); // lade im Footer - true
		wp_enqueue_script( 'jquery' );
		
		// js vom Theme laden, Vorraussetzung jQuery
		wp_enqueue_script( 'styleswitcher', get_bloginfo( 'template_directory') . '/js/styleswitcher.jquery.php', array( 'jquery'), '1.3.2', true ); // lade mein Script mit Schlüssel styleswitcher im Footer und benutze jquery
		wp_enqueue_script( 'greyfoto', get_template_directory_uri() . '/js/photoblogfb.js', array( 'jquery', 'styleswitcher'), '1.1.3.1', true ); // nutze jquery und styleswitcher und lade dann Script greyfoto
	}
}

// auch für WP < version 3.0
global $wp_version;
if ( version_compare($wp_version, "3.0alpha", "<") ) {
	add_action( 'init', 'fb_greyfoto_init' );
} else {
	add_action( 'after_setup_theme', 'fb_greyfoto_init' );
}

Das obige Beispiel kann man noch ein wenig eleganter lösen und so das Laden der Scripte an WP übergeben; wichtig ist, dass die eigenen Scripte über einen Schlüssel registriert sind und diese Schlüssel gibt man dann nur als Voraussetzung mit.

function fb_greyfoto_init() {
	if ( !is_admin() ) {
		wp_deregister_script( 'jquery' );
		wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js', false, '1.4.2', true ); // lade im Footer - true
		wp_register_script( 'styleswitcher', get_template_directory_uri() . '/js/styleswitcher.jquery.php', array( 'jquery'), '1.3.2', true ); // registrier mein Script mit Schlüssel styleswitcher für das Laden im Footer und Vorraussetzung jquery
		wp_register_script( 'greyfoto', get_template_directory_uri() . '/js/photoblogfb.js', array( 'jquery', 'styleswitcher'), '1.1.3.1', true ); // nutze jquery und styleswitcher und lade dann Script greyfoto
		
		wp_enqueue_script( array('greyfoto') ); // greyfoto braucht styleswitcher und jquery
	}
}

add_action( 'after_setup_theme', 'fb_greyfoto_init' );

Script bei spezieller Seite laden

Manche Scripte braucht man explizit nur auf bestimmten Templates, Seiten oder Beiträgen - dazu sind die Conditional Tags da; es gilt sie zu nutzen. Hier beginnt Performance-Optimierung. Das folgende Script wird nur beim Template custom-page.php geladen.

function fb_greyfoto_page_init() {
	if ( !is_page_template( 'custom-page.php' ) )
		return;

	wp_enqueue_script( 'mypagescript', get_template_directory_uri() . '/js/my_script_4_page.js', array('jquery'), '0.1', true );
}
add_action( 'template_redirect', 'fb_greyfoto_page_init' );

Die Verwendung des $

Auch innerhalb der Scripte gibt es einiges zu beachten.
Um mit $ zu arbeiten, wie viele mit jQuery gewohnt sind, muss Jquery aan $ übergeben werden; einfach und schnell passiert und nun kann man wie gewohnt arbeiten. Die Kurzvariante $(function() {} ); sollte man sich innerhalb von WordPress angewöhnen.

jQuery(function ($) {
	// hier kann man nun ohne Probleme $ als Referenz auf jQuery nutzen
});

Um zu prüfen, ob das HTML geladen ist, nutzt man den folgenden Aufruf. So stellt man sicher, dass der DOM geladen ist und man via jQuery das DOM durchsuchen kann und nun die eigentliche Arbeit des Scriptes starten kann. Ein klare Empfehlung also für diese Variante. Die vielen Vorteile möchte ich nicht erklären, dies kann man genau und umfangreich im Beitrag Introducing $(document).ready() nachlesen.

jQuery(document).ready(function ($) {
	$('#id').toggle({
		//paramter für bsp. toggle
	});
});

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

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

Demo des Photoblog
Vielen Dank schon jetzt an die Tester.

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

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

Am Beispiel verstehen

Stellen wir uns vor, es soll eine Navigation mehrfach verwendet werden - aber an unterschiedlichen Positionen und an unterschiedlicher Stelle des Markup. Hier würde es also nicht ausreichen, wenn man via CSS das Aussehen beeinflusst. In den meisten Fällen würde man wohl die Navigation in ein eigenes Template auslagern, zum Beispiel die nav.php. In dieser Datei befindet sich das HTML-Markup und die nötigen Template Tags um eine Navigation zu erstellen. Diese Datei würde man dann inkludieren. Bis WordPress 3.0 wurde das üblicherweise wie folgt getan: include( TEMPLATEPATH . '/navi.php' );

Funktion get_template_part()

Mit WordPress 3.0 soll in diese Form der Modularisierung mehr Bewegung kommen und so kann man mit Hilfe der Funktion get_template_part() Templates ansprechen. Die Funktion erlaubt die Übergabe von zwei Parametern:

/**
 * @uses locate_template()
 * @since 3.0.0
 * @uses do_action() Calls 'get_template_part{$slug}' action.
 *
 * @param string $slug The slug name for the generic template.
 * @param string $name The name of the specialised template.
 */
get_template_part( $slug, $name = null )

und besitzt einen Hook get_template_part_$slug, den man ansprechen kann.

Kommen wir nun zurück auf das obige Beispiel der Navigation, die nun mit Hilfe der neuen Funktion wie folgt inkludiert wird: get_template_part( 'navi' );. In diesem Fall wurde lediglich der Parameter slug übergeben - navi - der nun dafür sorgt, dass die navi.php geladen wird.
Im nächsten Schritt soll die Navi, welche explizit für die Sidebar erstellt wurde, genutzt werden. Der Source ist in der navi-sidebar.php gehalten und damit sieht der Aufruf wie folgt aus: get_template_part( 'navi', 'sidebar' );. Der Aufbau der Template-Datei muss also aus slug-name.php entstehen.

So lassen sich quasi beliebige Muster erstellen, die vor allem dann an Wert gewinnen, wenn es um Wiederverwendung geht oder wenn man mit Hilfe von Child-Themes arbeitet, da man so auf das Vater-Theme zugreifen kann und doch recht flexibel die eigenen Templates erstellen kann.

Reihenfolge beim Laden

WordPress nutzt beim Laden der Templates eine Hierarchie, so dass man auf verschiedene Templates zugreifen kann, ein Beispiel soll es verdeutlichen. Das Vater-Theme befindet sich in wp-content/themes/ und benutzt den Ordner wpbasis, das Child-Theme ist im Ordner wpbasischild zu finden. Nun gibt es in einem der Templates den Aufruf <?php get_template_part( 'navi', 'index' ); ?>. Nun wird nach der navi-index.php gesucht mit folgendem Muster:

1. wp-content/themes/wpbasischild/navi-index.php
2. wp-content/themes/wpbasischild/navi.php
3. wp-content/themes/wpbasis/navi-index.php
4. wp-content/themes/wpbasis/navi.php

Auch hier also einige Neuerungen unter der Haube, die für Theme-Autoren recht nützlich sein können. Da in letzter Zeit die Nutzung von Child-Themes gewachsen ist, sicher eine nützliche Funktion.

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

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

Die kleine Funktion listet die Kategorie und darunter die Beiträge. Es gibt einen Parameter, der die Ausgabe der Beiträge einschränkt, so dass es im Extremfall nicht zu viele werden und die letzten Beiträge gelistet werden - $mylimit. Die Übergabe des Wertes -1 für diesen Parameter sorgt für das Ausgeben aller Beiträge, alternativ nutzt einen Wert, der die Anzahl bestimmt. Die Funktion selber gehört in die functions.php des Themes oder ein Plugin ausgelagert. Eine beispielhafte Verwendung findet ihr im Anschluss an die Funktion.

function fb_posts_by_category() {
	global $wpdb, $post;
	
	$mylimit = '-1'; // limit for posts, -1 for all
	$sort_code = 'ORDER BY name ASC, post_date DESC';
	$the_output = '';

	$last_posts = (array)$wpdb->get_results("
		SELECT $wpdb->terms.name, $wpdb->terms.term_id
		FROM $wpdb->terms, $wpdb->term_taxonomy
		WHERE $wpdb->terms.term_id = $wpdb->term_taxonomy.term_id
		AND $wpdb->term_taxonomy.taxonomy = 'category'
		{$hide_check} 
	");

	if ( empty($last_posts) )
		return NULL;

	$used_cats = array();
	$i = 0;
	foreach ($last_posts as $posts) {
		if ( in_array($posts->name, $used_cats) ) {
			unset($last_posts[$i]);
		} else {
			$used_cats[] = $posts->name;
		}
		$i++;
	}
	$last_posts = array_values($last_posts);

	//$the_output .= '<ul>';
	foreach ($last_posts as $posts) {
		$class = 'cat-item cat-item-' . $posts->term_id;
		$catsy = get_the_category();
		$current_category = $catsy[0]->cat_ID;
		if ( isset($current_category) && $current_category && ($posts->term_id == $current_category) )
		$class .=  ' current-cat';
		elseif ( isset($_current_category) && $_current_category && ($posts->term_id == $_current_category->parent) )
		$class .=  ' current-cat-parent';
		
		$the_output .= '<li class="' . $class . '"><a class="category" href="' . get_category_link($posts->term_id) . '">' . apply_filters('list_cats', $posts->name, $posts) . '</a>';
		$where = apply_filters('getarchives_where', "WHERE post_type = 'post' AND post_status = 'publish'" , $r );
		
		if ('-1' !== $mylimit)
			$limit = ' LIMIT ' . (int) $mylimit;
		else
			$limit = '';
		
		$arcresults = $wpdb->get_results("SELECT ID, post_title  FROM $wpdb->posts WHERE post_type = 'post' AND post_status = 'publish' AND ID IN (Select object_id FROM $wpdb->term_relationships, $wpdb->terms WHERE $wpdb->term_relationships.term_taxonomy_id =" . $posts->term_id . ") ORDER BY post_date DESC$limit");
		if (isset($arcresults) && $arcresults) {
			$the_output .= '<ul>';
			foreach ( $arcresults as $arcresult ) {
				$class = 'post-item post-item-' . $arcresult->ID;
				$current_post = get_the_ID();
				if ( isset($current_post) && $current_post && is_singular() && ($arcresult->ID == $current_post) )
				$class .=  ' current-post';
				
				$the_output .= '<li class="' . $class . '"><a class="post" href="' . get_permalink($arcresult->ID) . '">' . apply_filters('the_title', $arcresult->post_title) . '</a></li>';
			}
			$the_output .= '</ul>';
		}
		
		$the_output .= '</li>';
	}
	//$the_output .= '</ul>';
	
	echo $the_output;
}

Nur bestimmte Kategorien einbeziehen

Dazu genügt im einfachsten Fall die Ergänzung des SQL-Query, wo man die IDs mitteilt, die durchsucht werden dürfen.

AND $wpdb->term_taxonomy.term_id IN (3,8,9)

Alternativ kann man auch Kategorien ausschließen

AND $wpdb->term_taxonomy.term_id NOT IN (3,8,9)

Beispielhafte Verwendung

Beispielhafte Verwendung in der sidebar.php, die hier mit Markup HTML5 auskommt.

<div id="sidebar">
	<nav>
		<h3>Navigation</h3>
		<ul>
			<li><a title="Startseite aufsuchen" href="<?php bloginfo('url'); ?>">Home</a></li>
			<?php
			fb_posts_by_category();
			
			wp_list_pages( 'title_li=&sort_column=menu_order&exclude=2,14,49' );
			?>
		</ul>
	</nav>
</div>

Accordion Menu ergänzen

Mit Hilfe von ein wenig JavaScript und dem Framework jQuery kann man dann jeweils nur den Bereich zeigen, der aktiv ist, eine kleines Beispiel dazu, welches die Klassen anspricht und entsprechend die Animation auslößt.

jQuery(document).ready(function($) {
	$(".cat-item ul").hide();
	$(".current-cat ul").show();
 
	$(".page_item ul").hide();
	$(".current_page_parent ul, .current_page_item ul").show();
 
	return false;
});

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

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

Parallel habe ich aber auch das Theme Documentation auf einen neuen Stand gehoben und einige kleine Erweiterungen integriert. Liegt zum einem daran, dass ich das Theme in einigen Bereichen einsetze, wo explizit Neuentwicklungen dokumentiert werden und zum anderen, dass es einige Anfragen per Mail gab. Im Grunde pflege ich keine Themes, der Zeitaufwand ist von mir einfach nicht zu stemmen - in diesem Fall also eine Ausnahme und nun viel Freude mit dem Theme Documentation.

Aktuell unterstützt das Plugin einige Funktionen, eine Auswahl:

• Post-Thumbnails für Beiträge
• Übersicht der Post-Thumbnails im Edit-Bereich des Admin
• Angepasstes Login-Design
• Mehrsprachigkeit vollständig unterstützt, deutsches Sprachfile liegt bei
• Kommentarfunktion mit allen Möglichkeiten, die WordPress seit 2.8 mitbringt
• Filter der Kommentare in Trackback, Pingback und Kommentare; inkl. Zähler
• 2 Widget-Bereiche zum Trennen der Ausgabe:
  1. Nicht sichtbar auf Seiten und Beiträgen
  2. Nur sichtbar auf Seiten und Beiträgen
• Angepasster Title in Abhängigkeit der dargestellten Inhalte
• Abfrage WPML Plugin bei Mehrsprachigkeit im Sidebar
• Minimiertes Stylesheet; Arbeitsdatei liegt jeweils bei als ...-dev.css

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

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

// onyl css, when post has a gallery
function gallery_stylesheet($posts) {
	if ( empty($posts) )
		return $posts;

	$found = false;

	foreach ($posts as $post) {
		if ( stripos($post->post_content, '[gallery') )
			$found = true;
			break;
		}

	if ($found)
		wp_enqueue_style( 'gallery-stylesheet', get_bloginfo('stylesheet_directory') . '/gallery.css', false, false, 'screen' );

	return $posts;
}
add_action('the_posts', 'gallery_stylesheet');

Diesen Ansatz kann man natürlich auch nutzen für das Laden von Scripten,

// onyl js, when post has a gallery
function my_script($posts) {
	if ( empty($posts) )
		return $posts;

	$found = false;

	foreach ($posts as $post) {
		if ( stripos($post->post_content, '[gallery') )
			$found = true;
			break;
		}

	if ($found)
		wp_enqueue_script( 'my-script', get_bloginfo('stylesheet_directory') . '/script.js', false, false, true );

	return $posts;
}
add_action('the_posts', 'my_script');

Weitere Hinweise zum Einbinden von JavaScript- und CSS-Dateien gibt es in einem anderen Beitrag zum Thema.

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

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

Als kleines Präsent zum heiligen Abend heute habe ich euch ein Plugin erstellt, was euch zum einen zusätzliche Felder in den Bereich Schreiben von WordPress bringt, was euch zeigt, wie einfach man den Bereich erweitern kann und was nach belieben von euch genutzt werden darf.

Das Plugin bringt 3 neue Felder in einer Metabox mit:

• Untertitel - wie der Name schon sagt, eine Zeile ohne Formatierung in der Ausgabe
• Zusatzinformationen - ein vollwertiger Editor, ebenso kann man jede Art von Attachments hinzufügen, also fast gleich dem Content-Editor.
• Listdaten - Hier wird ermöglicht, dass man pro Zeile einen Inhalt pflegt und jede Zeile als List-Element ausgeben wird, ungeordnete Liste ul

Jedes dieser Felder kann gezielt im Template des Themes eingesetzt werden, hat also einen Template Tag, der die Ausgabe steuert. Nur wenn es in diesem Feld Daten gibt, dann werden sie auch ausgegeben. Im folgenden ein Beispiel, der die drei neuen Felder ausgibt.

<div <?php post_class() ?> id="post-<?php the_ID(); ?>">

	<h2><?php the_title(); ?></h2>

	<h3><?php if ( function_exists('the_DifferentTypeFacts') ) the_DifferentTypeFacts($post->ID, 'heading'); ?></h3>

	<div class="entry">

		<?php the_content('<p class="serif">Read the rest of this entry &raquo;</p>'); ?>

		<?php if ( function_exists('the_DifferentTypeFacts') ) the_DifferentTypeFacts($post->ID, 'additional-info'); ?>

		<?php if ( function_exists('the_DifferentTypeFacts') ) the_DifferentTypeFacts($post->ID, 'listdata'); ?>

Das Plugin soll als Vorlage dienen, wer also mag, der passt es an und schafft eine Oberfläche, in der sich die Autoren wohl fühlen, keine Pflege der benutzerdefinierten Felder.

Das Plugin sorgt dafür, dass die Metaboxen "Benutzerdefinierte Felder" und "Trackbacks" nicht mehr da sind (remove_meta_box()); auch das als Beispiel für die Nutzung. Zu jedem der genutzten Code-Schnipsel im Plugin gibt es hier im Blog einen Beitrag und so sollte man damit klar kommen. Im folgenden der Code ohne Zusatzfiles und im Anschluss das Plugin als Download, inkl. readme, Sprachfiles für deutsche User und die nötigen Scripte.

<?php
/**
 * @package Different Type
 * @author Frank B&uuml;ltge
 * @version 0.1
 */
 
/*
	Plugin Name: Different Type
	Plugin URI: http://bueltge.de/
	Description: Add different types to posts
	Author: Frank B&uuml;ltge
	Version: 0.1
	License: GPL
	Author URI: http://bueltge.de/
	Last change: 24.12.2009 00:00:00
*/

/**
 * Example for use outside the loop:
 * <?php the_DifferentTypeFacts($post->ID); ?>
 * @param $id Integer - Post-ID
 * @param $type String - heading, additional-info, listdata (default is ''-empty)
 *
 * Example: <?php the_DifferentTypeFacts($post->ID, 'heading'); ?>
 */

//avoid direct calls to this file, because now WP core and framework has been used
if ( !function_exists('add_action') ) {
	header('Status: 403 Forbidden');
	header('HTTP/1.1 403 Forbidden');
	exit();
}

if ( function_exists('add_action') ) {
	//WordPress definitions
	if ( !defined('WP_CONTENT_URL') )
		define('WP_CONTENT_URL', get_option('siteurl') . '/wp-content');
	if ( !defined('WP_CONTENT_DIR') )
		define('WP_CONTENT_DIR', ABSPATH . 'wp-content');
	if ( !defined('WP_PLUGIN_URL') )
		define('WP_PLUGIN_URL', WP_CONTENT_URL.'/plugins');
	if ( !defined('WP_PLUGIN_DIR') )
		define('WP_PLUGIN_DIR', WP_CONTENT_DIR.'/plugins');
	if ( !defined('PLUGINDIR') )
		define( 'PLUGINDIR', 'wp-content/plugins' ); // Relative to ABSPATH.  For back compat.
	if ( !defined('WP_LANG_DIR') )
		define('WP_LANG_DIR', WP_CONTENT_DIR . '/languages');
	
	// plugin definitions
	define( 'FB_DT_BASENAME', plugin_basename(__FILE__) );
	define( 'FB_DT_BASEDIR', dirname( plugin_basename(__FILE__) ) );
	define( 'FB_DT_TEXTDOMAIN', 'different-types' );
}

if ( !class_exists( 'DifferentType' ) ) {
	class DifferentType {
		
		// constructor
		function DifferentType() {
			
			if (is_admin() ) {
				add_action( 'admin_init', array(&$this, 'on_admin_init') );
				add_action( 'wp_insert_post', array(&$this, 'on_wp_insert_post'), 10, 2 );
				add_action( 'init', array(&$this, 'textdomain') );
				register_uninstall_hook( __FILE__, array(&$this, 'uninstall') );
				add_action( "admin_print_scripts-post.php", array($this, 'enqueue_script') );
				add_action( "admin_print_scripts-post-new.php", array($this, 'enqueue_script') );
				add_action( "admin_print_scripts-page.php", array($this, 'enqueue_script') );
				add_action( "admin_print_scripts-page-new.php", array($this, 'enqueue_script') );
			}
		}
		
		// active for multilanguage
		function textdomain() {
			
			if ( function_exists('load_plugin_textdomain') )
				load_plugin_textdomain( FB_DT_TEXTDOMAIN, false, dirname( FB_DT_BASENAME ) . '/languages' );
		}
		
		// unsintall all postmetadata
		function uninstall() {
			
			$all_posts = get_posts('numberposts=0&post_type=post&post_status=');

			

			foreach( $all_posts as $postinfo) {

				delete_post_meta($postinfo->ID, '_different-types');

			}
		}
		
		// add script
		function enqueue_script() {
			wp_enqueue_script( 'tinymce4dt', WP_PLUGIN_URL . '/' . FB_DT_BASEDIR . '/js/script.js', array('jquery') );
		}
		
		// admin init
		function on_admin_init() {
			
			if ( !current_user_can( 'publish_posts' ) )
				return;
			
			add_meta_box( 'different_types',
									__( 'Different Types', FB_DT_TEXTDOMAIN ),
									array( &$this, 'meta_box' ),
									'post', 'normal', 'high'
									);
									
			// remove meta box for trackbacks
			remove_meta_box('trackbacksdiv', 'post', 'normal');
			// remove meta box for custom fields
			remove_meta_box('postcustom', 'post', 'normal');
		}
		
		// check for preview
		function is_page_preview() {
			$id = (int)$_GET['preview_id'];
			if ($id == 0) $id = (int)$_GET['post_id'];
			$preview = $_GET['preview'];
			if ($id > 0 && $preview == 'true') {
				global $wpdb;
				$type = $wpdb->get_results("SELECT post_type FROM $wpdb->posts WHERE ID=$id");
				if ( count($type) && ($type[0]->post_type == 'page') && current_user_can('edit_page') )
					return true;
			}
			return false;
		}
		
		// after save post, save meta data for plugin
		function on_wp_insert_post($id) {
			global $id;
			
			if ( !isset($id) )
				$id = (int)$_REQUEST['post_ID'];
			if ( $this->is_page_preview() && !isset($id) )
				$id = (int)$_GET['preview_id'];
			
			if ( !current_user_can('edit_post') )
				return;
			
			if ( isset($_POST['dt-heading']) && $_POST['dt-heading'] != '' )
				$this->data['heading'] = esc_attr( $_POST['dt-heading'] );
			if ( isset($_POST['dt-additional-info']) && $_POST['dt-additional-info'] != '' )
				$this->data['additional-info'] = $_POST['dt-additional-info'];
			if ( isset($_POST['dt-listdata']) && $_POST['dt-listdata'] != '' )
				$this->data['listdata'] = esc_attr( $_POST['dt-listdata'] );
			
			if ( isset($this->data) && $this->data != '' )
				update_post_meta($id, '_different-types', $this->data);
		}

		// load post_meta_data
		function load_post_meta($id) {
			
			return get_post_meta($id, '_different-types', true);
		}

		// meta box on post/page
		function meta_box($data) {
			
			$value = $this->load_post_meta($data->ID);
			?>
			<table id="dt-page-definition" width="100%" cellspacing="5px">
				<tr valign="top">
					<td style="width:20%;"><label for="dt-heading"><?php _e( 'Subtitle:', FB_DT_TEXTDOMAIN ); ?></label></td>
					<td><input type="text" id="dt-heading" name="dt-heading" class="heading form-input-tip" size="16" autocomplete="off" value="<?php echo $value['heading']; ?>" tabindex="6" style="width:99.5%"/></td>
				</tr>
				<tr valign="top">
					<td><label for="dt-additional-info"><?php _e( 'Additional information:', FB_DT_TEXTDOMAIN ); ?></label></td>
					<td><textarea cols="16" rows="5" id="dt-additional-info" name="dt-additional-info" class="additional-info form-input-tip code" size="20" autocomplete="off" tabindex="6" style="width:90%"/><?php echo wpautop( $value['additional-info'] ); ?></textarea>
						<table id="post-status-info" cellspacing="0" style="line-height: 24px;">
							<tbody>
								<tr>
									<td>&nbsp;</td>
									<td>&nbsp;</td>
								</tr>
							</tbody>
						</table>
					</td>
				</tr>
				<tr valign="top">
					<td><label for="dt-listdata"><?php _e( 'Listdata:', FB_DT_TEXTDOMAIN ); ?></label></td>
					<td><textarea cols="16" rows="10" id="dt-listdata" name="dt-listdata" class="listdata form-input-tip" size="20" autocomplete="off" tabindex="6" style="width:99.5%"/><?php echo $value['listdata']; ?></textarea><br /><small><?php _e( 'One list per line', FB_DT_TEXTDOMAIN ) ?></small></td>
				</tr>
			</table>
			<?php
		}

		// return facts incl. markup
		function get_DifferentTypeFacts($id, $type, $value) {
			
			if (!$value)
				return false;
			if ( $type == '' )
				return false;
			
			if ( 'heading' == $type && '' != $value['heading'] )
				return $value['heading'];
			if ( 'additional-info' == $type && '' != $value['additional-info'] )
				return wpautop( wptexturize($value['additional-info']) );
			if ( 'listdata' == $type && '' != $value['listdata'] ) {
				$return = '';
				$listdatas = preg_split("/\r\n/", $value['listdata'] );

				foreach ( (array) $listdatas as $key => $listdata ) {

					$return .= '<li>' . trim($listdata) . '</li>';

				}
				return '<ul>' . $return . '</ul>'. "\n";
			}
		}
		
		// echo facts, if exists
		function DifferentTypeFacts($id, $type, $string) {
		
			if ( $id ) {
				$value = $this->load_post_meta($id);
				
				echo $this->get_DifferentTypeFacts($id, $type, $value);
			}
		}

	} // End class
	
	// instance class
	$DifferentType = new DifferentType();
	
	
	// use in template
	function the_DifferentTypeFacts($id, $type = '', $string = '') {
		global $DifferentType;
		
		$DifferentType->DifferentTypeFacts($id, $type, $string);
	}
	
} // End if class exists statement
?>

Download als zip-Datei: github.com/bueltge/different-type/zipball/master - 40 kByte
Das Plugin liegt in einer gepflegten Version bei github.com und kann dort besichtigt, geforkt und gezogen werden.

Ich wünsche viel Spass damit und vielleicht wird das einen oder andere Projekt mit WordPress damit in diesem Bereich ein wenig klarer und logischer für die Autoren.

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

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

WordPress bringt im Standard die jQuery Bibliothek mit und so müssen wir uns um die nicht kümmern, sondern nutzen sie lediglich. Dabei findet der Aufruf aller nötigen Dateien und Scripte innerhalb des Templates statt, welches sich im Anschluss um die Ausgabe des Kontaktformulars kümmert. Dieses Aufruf erledigen wir mit den Funktionen von WordPress - so gehen wir sicher, dass die Dateien wirklich nur einmal geladen werden. WordPress kümmert sich um die richtige Reihenfolge und um die Abhängigkeiten. Zu diesem Thema habe ich bereits einiges an Infos hinterlegt und verweise auf diesen Beitrag.

Als erstes erstellen wir ein Template, ich nenne es contact-page.php und es muss im Ordner eures Themes abgelegt werden. Dies enthält den Aufruf der nötigen Scripte und der dazugehörigen Stylesheets. Im Grunde benötigt ihr nur diese vier Aufrufe in der page.php eures Theme abzulegen, einen neuen Namen für die Datei zu vergeben und den Kommentar zum Erkennen durch WordPress im Page-Bereich des Backend abzulegen (ganz am Anfang der Datei). Im folgenden die Syntax am Beispiel der page.php aus dem Standard-Theme Kubrick.

<?php
/**
 * Template Name: Contact Page
 *
 * @package WordPress
 * @subpackage Default_Theme
 */

wp_enqueue_script( 'jquery.contactable', get_bloginfo('template_directory') . '/contactable/jquery.contactable.js', array('jquery') , 3.1, true );
wp_enqueue_script( 'jquery.validate', get_bloginfo('template_directory') . '/contactable/jquery.validate.pack.js', array('jquery') , 3.1, true );
wp_enqueue_script( 'my_contactable', get_bloginfo('template_directory') . '/contactable/my_contactable.js', array('jquery') , 3.1, true );
wp_enqueue_style( 'contactable', get_bloginfo('template_directory') . '/contactable/contactable.css' );

get_header(); ?>

	<div id="content" class="narrowcolumn" role="main">

		<div class="post" id="post-<?php the_ID(); ?>">
		<h2><?php the_title(); ?></h2>

			<div class="entry">
				<?php the_content('<p class="serif">Read the rest of this page &raquo;</p>'); ?>
				
				<div id="mycontactform"> </div>
				
			</div>
		</div>
	
	</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Wie in der Syntax zu erkennen, habe ich alle Dateien des jQuery-Formular-Plugnis im Ordner contactable im Ordner des Themes abgelegt. Eventuell müssen daher eure Pfade angepasst werden. Aktuell sieht es in meinem Theme wie folgt aus:

• default
  • contactable
    • jquery.contactable.js
    • jquery.validate.pack.jss
    • my.contactable.js
    • contactable.css
  • style.css
  • contact-page.php
  • ...

Einzig die Datei my.contactable.js habe ich hinzugefügt; diese kümmert sich um den Aufruf des Formulars und kann mit Parametern gefüllt werden. Inhaltlich sieht sie wie folgt aus:

jQuery(document).ready( function($){
	$('#mycontactform').contactable({
		name: 'Name',
		email: 'E-Mail',
		message : 'Nachricht',
		recipient: 'example@domain.com',
		subject: 'Kontaktformular',
		recievedMsg : 'Vielen Dank für Ihre Nachricht.'
	});
});

Sind alle Dateien gespeichert und an eure Bedürfnisse angepasst, dann muss lediglich im Admin-Bereich von WordPress eine Seite angelegt werden. Dieser Seite gebt ihr einen Namen, eventuell Inhalt und ihr müsst das Template auswählen - in unserem Fall die Contact Page. Nachdem Speichern sollte die Seite im Frontend des Blog aufzurufen sein und mit einem Klick auf das kleine Label fährt das Formular in die Sicht und kann ausgefüllt werden.

Durch die Aufrufe mit Hilfe von WordPress Funktionen und den richtigen Parametern, sind nun die Scripte im Footer der Site integriert. Die Bibliothek jQuery muss nicht aufgerufen werden, sie wird von WordPress hinzugefügt, wenn sie noch nicht da ist, durch die Abhängigkeit der Parameter zum Schlüssel jquery. Durch die Nutzung eines Templates mit allen Aufrufen werden sämtliche Scripte und StyleSheets nur eingebunden, wenn diese Seite von WordPress aufgerufen wird. Wer das Formular-Schnippsel auf allen Seiten möchte, der macht den Aufruf bspw. in der header.php oder functions.php.

Möchte man diese Funktion nicht nutzen, so kann entweder dass CSS nicht genutzt werden, bzw. ein eigenes Design hinzugefügt werden oder man passt das JS an seine eigenen Bedürfnisse an. Gleiches gilt für zusätzliche Felder im Formular, dazu muss der Inhalt der Dateien angepasst werden.

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

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

Aber auch bei dieser Funktion sollte man auf das Vorhandensein der Funktion prüfen und eine Alternative anbieten. Nur so kann man dem Nutzer die Freiheit der WordPress Version überlassen. Die Funktionen von Erweiterungen, Plugins und Themes gehröen einer Prüfung unterzogen; so ist die Funktion des Themes abgesichert, auch wenn eine Funktion nicht zur Verfügung steht. Ähnlich sehe ich es mit dieser Funktion für die Thumbnails zum Beitrag, auch wenn sie Funktionen aus dem Core nutzen.

Zwei Anregungen für Alternativen möchte ich im folgenden kurz aufzeigen und ich verweise auf den ausführlichen Artikel zum Thema Bilder in Themes mit Benutzerdef. Feldern oder der Mediathek von WordPress nutzen.

Nach Hinzufügen der folgenden Syntax in der functions.php des Themes steht die MetaBox im Bereich Schreiben eines Beitrags bzw. Seite bereit und kann einfach via Aufruf der Mediathek aus dieser MetaBox genutzt werden.

if ( function_exists('add_theme_support') )
	add_theme_support('post-thumbnails');

Alternativ kann man zwischen Beiträgen und Seiten trennen:

add_theme_support( 'post-thumbnails', array( 'post' ) ); //Beiträge
add_theme_support( 'post-thumbnails', array( 'page' ) ); //Seiten

Man kann im übrigen auch Größen definieren, zum einen direkt für Thumbnails ...

set_post_thumbnail_size( 150, 150, true ); // Breite, Höhe, true für kein crop mode; beschneiden

... und ebenso andere Größen, in dem man zusätzlich einen Namen vergibt. Im obigen Code ist der Standard-Name post-thumbnail übergeben.

add_image_size('my-single-picture', 150, 150, false);

Die Ausgabe des Bildes wird dann im Theme an der Stelle, wo es erscheinen soll, einfach mit Hilfe des Template Tag erzeugt: the_post_thumbnail().

if ( current_theme_supports( 'post-thumbnails' ) )
	the_post_thumbnail( array(300,200) );

Alternativ kann man dann auch wieder die eigenen Typen abfragen:

the_post_thumbnail( 'my-single-picture' );

Wichtig, arbeitet man mit zusätzlichem Markup, dann gehört die Abfrage dazu, ob es denn ein Thumbnail zum Beitrag gibt. Ansonsten wird unnötig Markup ausgegeben, welches keinen Inhalt hat.

<?php
if ( has_post_thumbnail() ) { ?>
	<span class="my_image">
		<?php the_post_thumbnail(array(600, 400)); ?>
	</span>
} ?>

Um nun aber eine Alternative für Installationen kleiner WP 2.9 zu haben, kann man verschiedene Ansätze gehen. Die zwei folgenden Beispiele sind daher als Ideengeber zu verstehen: entweder mit Hilfe der benutzerdefinierten Felder, Feldname ist post-image ...

if ( function_exists('has_post_thumbnail') && has_post_thumbnail() ) {
	the_post_thumbnail(); // @parameter: array(height, width)
} else {
	$myimage = get_post_meta($post->ID, 'post-image', true); // via custom field
	if ($myimage) {
		echo '<img class="wp-post-image" src="'.$postimage.'" alt="Post Iage" />';
	}
}

... oder im nachfolgenden Beispiel das erste Bild aus der Mediathek. Mehr dazu gibt es in einem separaten Beitrag.

if ( function_exists('has_post_thumbnail') && has_post_thumbnail() ) {
	the_post_thumbnail(); // @paramter: array(height, width)
} else {
	// via mediathek
	$attachments = get_children( array(
									'post_parent'    => get_the_ID(),
									'post_type'      => 'attachment',
									'numberposts'    => 1, // show all -1
									'post_status'    => 'inherit',
									'post_mime_type' => 'image',
									'order'          => 'ASC',
									'orderby'        => 'menu_order ASC'
									) );
	foreach ( $attachments as $attachment_id => $attachment ) {
		echo wp_get_attachment_image( $attachment_id );
	}
}

Prüfen ob das Theme die Funktion unterstützt ist ebenso möglich:

if ( current_theme_supports( 'post-thumbnails' ) ) {
	...

Zusätzlich kann man prüfen, ob das Theme die Funktion unterstützt und explizit für Beiträge (post) oder Seiten (page) nutzen. Sehr interessant, wenn man zusätzliche Funktionen in den Schreiben-Bereich des Backend bringen möchte, welcher abhängig von diesem Feature innerhalb des Theme ist.:

if ( current_theme_supports( 'post-thumbnails', array( 'page' ) ) ) {
	add_meta_box( ...

In diesem Zusammenhang kann man auch extern Dateien mit neuen Funktionen einbinden.

require_if_theme_supports( 'post-thumbnails', ABSPATH . WPINC . '/my-post-thumbnail-funktion.php' );

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

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

Mark Jaquith stellt zwei sehr schöne Lösungen vor, wie man in Plugins und Themes als Autor den Update-check abklemmt. Viele Blogs nutzen Themes, welche selbst geschrieben sind, oder welche kein Update erhalten können. Insofern ist vor allem die Lösung für die Themes sehr nützlich.

Sie ist schnell in die functions.php des jeweiligen Themes integriert und so muss man sich nicht mehr in den Einstellungen des Blog darum kümmern. Gerade im Hinblick auf Themes für Kunden, welche sicher kein automatisches Update bekommen, ist diese kleine Funktion ein Mehrwert und gehört daher in die Arbeit aufgenommen.

function cws_hidden_theme_12345( $r, $url ) {
	if ( false !== strpos( $url, 'http://api.wordpress.org/themes/update-check' ) )
		return $r; // Not a theme update request. Bail immediately.
	
	$themes = unserialize( $r['body']['themes'] );
	unset( $themes[ get_option( 'template' ) ] );
	unset( $themes[ get_option( 'stylesheet' ) ] );
	$r['body']['themes'] = serialize( $themes );
	return $r;
}

add_filter( 'http_request_args', 'cws_hidden_theme_12345', 5, 2 );

Mark stellt in seinem Beitrag ebenso eine Lösung für Plugins vor, die ich ebenso sinnvoll finde; gerade bei Plugins für explizite Kundenwünsche finde ich das wichtig und so kommt man auch nicht in Kollision, wenn es ein Plugin im SVN gibt/entsteht, was den gleichen Namen trägt.

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

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

function is_sidebar_active($index) {
	global $wp_registered_sidebars;

	$widgetcolums = wp_get_sidebars_widgets();

	if ($widgetcolums[$index])
		return true;

	return false;
}

Damit wird die Ausgabe des Widget-Bereiches nur genutzt, wenn es auch Inhalte gibt.
Im Template könnte die Abfrage beispielsweise wie folgt aussehen.

<?php if ( function_exists('is_sidebar_active') && is_sidebar_active('sidebar') ) { ?>
	<div id="sidebar">
		<ul>
			<?php dynamic_sidebar('sidebar'); ?>
		</ul>
	</div>
<?php } ?>

Das obige Beispiel lädt den Inhalt nur, wenn der Widget-Bereich mit der ID sidebar Inhalte hat, also wenn Widgets in diesem Bereich genutzt werden.

Seit WordPress Version 2.8 gibt es dazu auch eine Funktion im Core und man muss die obige Funktion nicht eigens hinzu bringen is_active_sidebar(). Damit geht die Prüfung ebenso einfach und sicher.

<?php if ( function_exists('is_active_sidebar') && is_active_sidebar('sidebar') ) { ?>
	<div id="sidebar">
		<ul>
			<?php dynamic_sidebar('sidebar'); ?>
		</ul>
	</div>
<?php } ?>

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

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

if ( function_exists('register_sidebar') ) {
	register_sidebar(array(
		'name' => 'My Lorem Ipsum Sidebar',
		'description' => __('Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.', 'your_textdomain'),
		'before_widget' => '<li id="%1$s" class="widget %2$s">',
		'after_widget' => '</li>',
		'before_title' => '<h2 class="widgettitle">',
		'after_title' => '</h2>',
	));
}

Ein etwas umfassendes Beispiel mit zwei Widgetbereichen, ein Bereich für den Sidebar und ein Bereich für den Footer; in der Regle also in die footer.php.

if ( function_exists('register_sidebar') ) {
	register_sidebar(array(
		'id' => 'mysidebar',
		'name' => 'My Lorem Ipsum Sidebar',
		'description' => __('Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.', 'your_textdomain'),
		'before_widget' => '<li id="%1$s" class="widget %2$s">',
		'after_widget' => '</li>',
		'before_title' => '<h2 class="widgettitle">',
		'after_title' => '</h2>',
	));

	register_sidebar(array(
		'id' => 'myfooter',
		'name' => 'My Lorem Ipsum Footer',
		'description' => __('Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.', 'your_textdomain'),
		'before_widget' => '<li id="%1$s" class="widget %2$s">',
		'after_widget' => '</li>',
		'before_title' => '<h2 class="widgettitle">',
		'after_title' => '</h2>',
	));
}

Diesen kann man im einfachsten Fall dann wie folgt in den Templates nutzen; im folgendem mal die Nutzung in der footer.php des Widget-Bereiches My Lorem Ipsum Footer.

<div id="myfooter">
	<ul>
		<?php dynamic_sidebar('myfooter'); ?>
	</ul>
</div>

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

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

Die Darstellung dieser Beiträge in der Kategorie-Übersicht soll eine andere sein. Bisher musste man dazu folgenden Abfrage integrieren:

if ( is_category('microblog') ) {
	// hier die Ausgabe oder Integration des Stylesheet für Kategorie Microblog
}

Mit WordPress 2.9 reicht das entsprechende Template category-microblog.php und dieses Template wird gezogen, wenn man in der Kategorie des Slug microblog ist. Alternativ geht es auch weiterhin mit der ID, die sich aber ändern kann. Über den Namen des Slug ist die Identifizierung eindeutig und einfach.

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

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

Mit Hilfe der benutzerdefinierten Felder

Im ersten Fall soll die Lösung mit Hilfe eines benutzerdefinierten Feldes dargestellt werden, dabei müssen die Daten in diesem Feld zu einem Schlüssel gepflegt werden.

In Version 1 wird zum Schlüssel authorlink der Wert des Autors gespeichert, so ist, so hoffe ich, die Nutzung der Felder leicht zu verstehen. Weitere Infos dazu findet man im Codex.

Version 1

Die Ausgabe zum Schlüssel wird mir Hilfe des Template Tag get_post_meta() übergeben. Die Funktion erwartet die Id des Beitrags und den Schlüssel als Pflichtwert, alternativ kann übergeben werden, ob ein Wert oder auch Arrays als Rückgabe erlaubt sind. Setze auf true und es kommt nur ein String zurück.

/**
 * @param int $post_id Post ID.
 * @param string $key The meta key to retrieve.
 * @param bool $single Whether to return a single value.
 * @return mixed Will be an array if $single is false. Will be value of meta data field if $single
 *  is true.
 */
function get_post_meta($post_id, $key, $single = false)

<?php $key = 'authorlink'; ?>
<p>Foto von <a href="<?php echo get_post_meta($post->ID, $key, true); ?>"></a>.</p>

Im nächsten Schritt ist das im Grunde nichts anderes, nur dass wir nun als Wert zu einem anderen Schlüssel die Adresse ablegen, wo das Bild liegt. Dazu muss der Autor die Adresse wissen und die URL speichern.

In Version 2 gehen wir aber einen Schritt weiter und legen eine Funktion in der functions.php ab, die sich später darum kümmert und die wir mit Daten füttern können. Auch dies ist nur ein Beispiel und braucht in der Version den Schlüssel des benutzerdefinierten Feldes, die Breite und Höhe des Bildes. Diese drei Beispielwerte schreiben wir dann in den Tag zur Ausgabe des Bildes.

Version 2

/*Custom Field Images*/
function image_attachment($key, $width, $height) {
	global $post;

	$custom_field = get_post_meta($post->ID, $key, true);
	if ($custom_field) {
		echo '<img src="' . $custom_field . '" alt="Post Image" width="' . $width . '" height="' . $height . '" />';
	} else {
		return;
	}
}

Die Ausgabe im Template ist durch die obige Funktion dann wie folgt.

<?php
$image_key = 'image';
$myimage = get_post_meta($post->ID, $image_key, true);
if ($myimage) { ?>
	<div class="post-image">
		<?php image_attachment($image_key, 512, 200); ?>
	</div>
<?php } ?>

Damit kann man einige schöne Sachen machen und je nach Kenntnis umsetzen. Viele Theme-Autoren möchten aber einfach ein Bild zum Beitrag haben, was direkt an diversen Stellen gezogen wird und eventuell keine Verwendung im Inhalt des Beitrags hat. Oft wird dies über die obige Lösung realisiert. Dies sorgt aber dafür, dass die Autoren der Beiträge die Felder kennen und pflegen müssen, also Schlüssel des Feldes und URL zum Bild.

Nicht sehr komfortabel und daher möchte ich eine Lösung zeigen, wie man an das Bild kommt, welches zum Beitrag hoch geladen wurde, welches man quasi in der Gallery zum Beitrag wieder findet.

WordPress eigene Funktionen für Bilder

Eine der vielen Möglichkeiten ist die Funktion wp_get_attachment_image(), welche aus meiner Sicht die einfachste Lösung darstellt. Dazu ein Beispiel, was es näher erklärt.

Zu erst holen wir einfach mal alle Bilder, nicht alle Attachments zum Beitrag, die man direkt zum Beitrag hoch geladen hat. Diese Bilder lassen wir direkt ausgeben. Die Syntax muss immer im Loop sein.

<?php
$attachments = get_children( array('post_parent' => get_the_ID(), 'post_type' => 'attachment', 'post_mime_type' => 'image') );
foreach ( $attachments as $attachment_id => $attachment ) {
	echo wp_get_attachment_image($attachment_id);
} ?>

Zur Erklärung ist zu sagen, dass in dem obigen Beispiel über die Schleife alle Bilder geladen werden und direkt ausgegeben werden. Dabei kümmern wir uns aktuell nicht um die Größe des Bildes, es wird im Standard das Thumbnail ausgegeben. Durch die Festlegung post_mime_type = image, werden auch wirklich nur Bilder geholt und nicht noch andere Anhänge zum Beitrag.
Die Funktion von WordPress, welches uns dann das Bild mit dem HTML ausgibt, benötigt zwingend die ID des Attachment, daher muss im Vorfeld diese ID zum Beitrag geholt werden, erledigen wir mit get_children().

Einige Worte nun zur Funktion wp_get_attachment_image() von WP zum Ausgaben des Bildes. Wie schon angesprochen, es gibt mehrere Funktionen, alle haben einen ähnlichen Aufbau und geben entweder anderes Markup zurück oder lassen andere Parameter zu. Zur einfache Ausgabe eignet sich diese Funktion am besten. Sie ist auch im Codex beschrieben.

Die Funktion lässt 3 Parameter zu:

/**
 * Get an HTML img element representing an image attachment
 *
 * @param int $attachment_id Image attachment ID.
 * @param string $size Optional, default is 'thumbnail'.
 * @param bool $icon Optional, default is false. Whether it is an icon.
 * @return string HTML img element or empty string on failure.
 */
function wp_get_attachment_image($attachment_id, $size = 'thumbnail', $icon = false)

Zurück bekommt man das Markup zum img-Tag, wie das folgende Beispiel.

<img width="150" height="150" src="http://example.com/wp-content/uploads/2009/08/DSC00261-150x150.jpg" class="attachment-thumbnail" alt="Image Example" title="Example Image" />

Der letzte der drei Parameter ist im Zusammenhang mit Bildern eigentlich wenig interessant, da er ein Icon ausgibt. Aber der zweite Parameter ist da schon spannender, denn dieser lässt die Übergabe der Größe des Bildes zu. Dabei kann man entweder einer der vorkonfigurierten Größen mitgeben, quasi die Größen, die WP in den Einstellungen konfigurieren lässt und die beim Upload über die Mediathek angelegt werden. Folgende Möglichkeiten stehen zur Verfügung.

• Standard-Werte: thumbnail, medium, large oder full
• Eigene Größen via Array: array( Breite, Höhe ) Bsp.: array(100, 100)

Wenn man eigene Werte übergibt, dann zieht WordPress in Abhängigkeit dieser Werte das jeweils passende Bild. Also wenn man bspw. 100x100 übergibt und die Thumbnails sind 150px150px, dann werden diese Bilder dafür gezogen und bei einem eigenen Array von 200x200 wird dann das Medium-Bild gezogen, da das Thumbnail zu klein wäre.

<?php
$attachments = get_children( array('post_parent' => get_the_ID(), 'post_type' => 'attachment', 'post_mime_type' => 'image') );
foreach ( $attachments as $attachment_id => $attachment ) {
	echo wp_get_attachment_image( $attachment_id, array(200, 250) );
} ?>

Bilder mit Links

Nun will aber nicht immer nur die Bilder zum Beitrag, sondern eventuell das Bild mit einem Link zum Bild in Originalgröße haben. Auch dazu gibt es eine Funktion wp_get_attachment_link() und man muss das Markup nicht zusammen stellen. Beispielsweise könnte die Nutzung der Funktion analog der obigen Beschreibung aussehen.

<?php
$attachments = get_children( array('post_parent' => get_the_ID(), 'post_type' => 'attachment', 'post_mime_type' => 'image') );
foreach ( $attachments as $attachment_id => $attachment ) {
	echo wp_get_attachment_link( $attachment_id, 'medium' );
} ?>

Das HTML sieht dann wie folgt aus.

<a href="http://example.com/wp-content/uploads/2009/08/DSC00261.JPG" title="Example Image"><img src="http://example.com/wp-content/uploads/2009/08/DSC00261-150x150.jpg" class="attachment-thumbnail" alt="Image Example" title="Example Image" height="150" width="150"></a>

Damit wird das Bild in der angeforderten Größe ausgegeben und der Link zum Bild in Originalgröße gesetzt.

Größe der Bilder bestimmen

mitunter will man im Vorfeld wissen, wie groß das Bild ist, abhängig von der Übergabe des Typ der Größe. Dazu gibt es eine Funktion, die die Werte als Array zurück gibt. Auch dazu ein Beispiel mit der Ausgabe.

<?php
$attachments = get_children( array('post_parent' => get_the_ID(), 'post_type' => 'attachment', 'post_mime_type' => 'image') );
foreach ( $attachments as $attachment_id => $attachment ) {
	$src = wp_get_attachment_image_src( $attachment_id, 'full' );
	var_dump($src);
} ?>

Diese einfache Schleife zur Ausgabe der Werte gibt ein Array zurück.

array
  0 => string 'http://example.com/wp-content/uploads/2009/08/DSC00261.JPG' (length=63)
  1 => int 1632
  2 => int 1224
  3 => boolean false

Die Reihenfolge im Array wird wie folgt zugeordnet.

• $src[0] => url
• $src[1] => width
• $src[2] => height
• $src[3] => icon

Somit kann auf die Größe reagiert werden, je nach Anforderung. Alternativ kann mit der Funktion image_get_intermediate_size($post_id, $size='thumbnail') gearbeitet werden, die noch einige Werte mehr zurück gibt. Ein Ausgabebeispiel bei der Übergabe 'medium' dazu:

array
  'file' => string 'DSC00261-300x225.jpg' (length=20)
  'width' => string '300' (length=3)
  'height' => string '225' (length=3)
  'path' => string '2009/08/example-300x225.jpg' (length=28)
  'url' => string 'http://example.com/wp-content/uploads/2009/08/DSC00261-300x225.jpg' (length=71)

Weitere Funktionen und Möglichkeiten

In diesem Zusammenhang gibt es noch einige weitere Funktion, die die Arbeit mit Anhängen bzw. Bildern zu Beiträgen ermöglichen. Ich möchte nicht jede einzelne erklären und stelle nachfolgend eine kleine Schleife zum Testen zur Verfügung. Damit sind recht viele Möglichkeiten abgedeckt und erklären sich in einem Test sicher selbst.

<?php
$attachments = get_children( array('post_parent' => get_the_ID(), 'post_type' => 'attachment', 'post_mime_type' => 'image') );
foreach ( $attachments as $attachment_id => $attachment ) {
	echo '<p>';
	echo 'wp_get_attachment_image: ' . wp_get_attachment_image( $attachment_id, array(200,250) ) . '<br />';
	echo 'wp_get_attachment_link: ' . wp_get_attachment_link( $attachment_id ) . '<br />';
	echo 'wp_get_attachment_url: ' . wp_get_attachment_url( $attachment_id ) . '<br />';
	echo 'wp_get_attachment_thumb_url: ' . wp_get_attachment_thumb_url( $attachment_id ) . '<br />';
	echo 'get_attachment_link: ' . get_attachment_link( $attachment_id ) . '<br />';
	$src = image_get_intermediate_size( $attachment_id, 'medium'	 );
	echo 'image_get_intermediate_size. '; var_dump($src); echo '<br />';
	$src = wp_get_attachment_image_src( $attachment_id, 'full', true );
	echo 'wp_get_attachment_image_src. '; var_dump($src); echo '<br />';
	echo 'Title des Attachment: ' . apply_filters( 'the_title', $attachment->post_title ) . '<br />';
	echo 'Link zum Beitrag: ' . get_permalink($image->post_parent) . '<br />';
	echo '<hr style="clear:both;" /></p>';
} ?>

Bitte daran denken, die Syntax muss im Loop von WordPress sein.

Nur ein Bild zum Beitrag

Nun habe ich schon einige Punkte zum Holen der Bilder erklärt und in der Regel wird man wohl nicht alle Bilder zum Beitrag benötigen, sondern man möchte ein Bild. Dies findet zum Beispiel Anwendung in Magazin-Themes, wo ein kleines Bild Lust auf den Beitrag machen soll. Durch diese Funktionen kann ich damit dem Autor der jeweiligen Beiträge die Kontrolle über dieses Bild in die Hand geben. In der Regel mache ich das so, das explizit das erste Bild aus der Galerie zum Beitrag gezogen wird. Damit kann der Autor in der Galerie das Bild per Drag&Drop an die richtige Stelle bewegen.

Dies ist keine eigene Funktion, dazu muss die Funktion get_children() entsprechend gefüttert werden. Die Ausgabe des Bildes und andere Werte zum Bild ist dann wieder wie oben beschrieben.

Im ersten Wurf holen wir nur das erste Bild aus der Galerie.

<?php
$attachments = get_children( array(
				'post_parent'    => get_the_ID(),
				'post_type'      => 'attachment',
				'numberposts'    => 1, // show all -1
				'post_status'    => 'inherit',
				'post_mime_type' => 'image',
				'order'          => 'ASC',
				'orderby'        => 'menu_order ASC'
				) );
foreach ( $attachments as $attachment_id => $attachment ) {
	echo wp_get_attachment_image( $attachment_id );
} ?>

Nun kann der Autor des Beitrages immer das erste Bild festlegen, was er nutzen möchte.

Alternativ drehen wir den Spieß um und holen das letzte Bild aus der Galerie.

<?php
$attachments = get_children( array(
				'post_parent'    => get_the_ID(),
				'post_type'      => 'attachment',
				'numberposts'    => 1, // show all -1
				'post_status'    => 'inherit',
				'post_mime_type' => 'image',
				'order'          => 'DESC',
				'orderby'        => 'menu_order ASC'
				) );
foreach ( $attachments as $attachment_id => $attachment ) {
	echo wp_get_attachment_image( $attachment_id );
} ?>

Mit Hilfe von numberposts legen wir fest, wie viele Bilder geholt werden sollen. So holen wir im folgenden Beispiel die ersten 2 Bilder und im Anschluss die letzten 2 Bilder.

<?php
$attachments = get_children( array(
				'post_parent'    => get_the_ID(),
				'post_type'      => 'attachment',
				'numberposts'    => 2, // show all -1
				'post_status'    => 'inherit',
				'post_mime_type' => 'image',
				'order'          => 'ASC',
				'orderby'        => 'menu_order ASC'
				) );
foreach ( $attachments as $attachment_id => $attachment ) {
	echo wp_get_attachment_image( $attachment_id );
} ?>

Nun also die letzten beiden Bilder, beginnend mit dem letzten Bild.

<?php
$attachments = get_children( array(
				'post_parent'    => get_the_ID(),
				'post_type'      => 'attachment',
				'numberposts'    => 2, // show all -1
				'post_status'    => 'inherit',
				'post_mime_type' => 'image',
				'order'          => 'DESC',
				'orderby'        => 'menu_order ASC'
				) );
foreach ( $attachments as $attachment_id => $attachment ) {
	echo wp_get_attachment_image( $attachment_id );
} ?>

Meta-Daten zu Bildern

Nun werden durch WordPress zu den Bildern diverse Meta-Daten gespeichert. Ab und an sind diese sehr nützlich und warum nicht einfach darauf zugreifen und nutzen.

Auch dazu erstmal ein Beispiel um an die Daten zu kommen. Dies machen wir mit der Funktion wp_get_attachment_metadata(). Diese Funktion gibt recht viele Daten zurück und so kann man mit dieser auf die Größe der Bilder, auf deren Pfad und ebenso die Meta-Daten zugreifen.

<?php
$attachments = get_children( array(
				'post_parent'    => get_the_ID(),
				'post_type'      => 'attachment',
				'numberposts'    => 1, // show all -1
				'post_status'    => 'inherit',
				'post_mime_type' => 'image',
				'order'          => 'ASC',
				'orderby'        => 'menu_order ASC'
				) );
foreach ( $attachments as $attachment_id => $attachment ) {
	echo wp_get_attachment_image( $attachment_id );
	$imagemeta = wp_get_attachment_metadata( $attachment_id );
	var_dump($imagemeta); // list values in array
	
	$aperture          = $imagemeta['image_meta']['aperture'];
	$credit            = $imagemeta['image_meta']['credit'];
	$camera            = $imagemeta['image_meta']['camera'];
	$caption           = $imagemeta['image_meta']['caption'];
	$created_timestamp = $imagemeta['image_meta']['created_timestamp'];
	$copyright         = $imagemeta['image_meta']['copyright'];
	$focal_length      = $imagemeta['image_meta']['focal_length'];
	$iso               = $imagemeta['image_meta']['iso'];
	$shutter_speed     = $imagemeta['image_meta']['shutter_speed'];
	$title             = $imagemeta['image_meta']['title'];
} ?>

Im obige Code ist zur Ausgabe aller Wert ein var_dump() drin. Damit erkennt man recht schnell, welche Inahtle im Array existieren und an welcher Stelle man zugreifen kann.
Alle Werte der Meta-Daten habe ich beispielhaft in jeweils eine Variable geschrieben, so dass auch nicht so versierte Nutzer damit zurecht kommen sollten.

Bei einem einfachen Bild, was via Handy-Kamera entstanden ist würde beispielsweise das Array wie folgt aussehen.

array
  'width' => string '1632' (length=4)
  'height' => string '1224' (length=4)
  'hwstring_small' => string 'height='96' width='128'' (length=23)
  'file' => string '2009/08/DSC00261.JPG' (length=20)
  'sizes' => 
    array
      'thumbnail' => 
        array
          'file' => string 'DSC00261-150x150.jpg' (length=20)
          'width' => string '150' (length=3)
          'height' => string '150' (length=3)
      'medium' => 
        array
          'file' => string 'DSC00261-300x225.jpg' (length=20)
          'width' => string '300' (length=3)
          'height' => string '225' (length=3)
      'large' => 
        array
          'file' => string 'DSC00261-1024x768.jpg' (length=21)
          'width' => string '1024' (length=4)
          'height' => string '768' (length=3)
  'image_meta' => 
    array
      'aperture' => string '2.8' (length=3)
      'credit' => string '' (length=0)
      'camera' => string 'W800i' (length=5)
      'caption' => string '' (length=0)
      'created_timestamp' => string '1184253323' (length=10)
      'copyright' => string '' (length=0)
      'focal_length' => string '0' (length=1)
      'iso' => string '100' (length=3)
      'shutter_speed' => string '0.0166666666667' (length=15)
      'title' => string '' (length=0)

Alternative ab WordPress 2.9

Mit WordPress Version 2.9 gibt es einen Template Tag genau für diese Anforderung, damit wird es einfacher und verständlicher. Man nutze einfach die Funktion the_post_thumbnail() und kann die Größe mitgeben. Standard ist thumbnail, möglich ist thumbnail, medium, large oder full.

the_post_thumbnail(); // without parameter -> Thumbnail
the_post_thumbnail('post-thumbnail'); // Thumbnail
the_post_thumbnail('post-medium'); // Medium resolution - use full

Als kleine Alternative steht noch get_the_post_image() zur Verfügung, wobei die Funktion kein echo hat und optional die ID des Post bekommen kann.
get_the_post_thumbnail( $post_id = NULL, $size = 'post-thumbnail', $attr = '' )

Fazit

WordPress bietet sehr viele unterschiedliche Funktionen um auf Anhänge, ob Bilder oder andere Art ist egal, zuzugreifen. Ebenso wird ein Teil an Meta-Daten gespeichert, die man nutzen kann. Viele Ansätze findet man im Code, vorrangig in der wp-includes/media.php. Vielleicht konnte ich einige Lösungen aufzeigen, leicht ist es nicht. Aber es stellt aus meiner Sicht eine bessere Alternative dar als die Nutzung der Benutzerdefinierten Felder oder gar dem Scannen des Content.

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

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

Loop Nr.1

<?php
$do_not_duplicate = array(); // vor den Loops Variable als Array setzen  

// 1. Loop
query_posts('ca=1,2,3&showposts=5');
while ( have_posts() ) : the_post();
    $do_not_duplicate[] = $post->ID; // IDs im Loop merken 
    // Post ausgeben ...
    the_title();
endwhile;
?>

Nach dem nun durch die obige Loop 5 Artikel ausgegeben wurden, haben wir im Array 5 IDs, mit denen wir nun arbeiten können. Im Übrigen kann man sich das Array mit der PHP-Funktion var_dump() anschauen.

In der kommenden Loop Nr.2 sollen nun 15 Beiträge ausgegeben werden, wobei die schon aus Loop Nr. 1 bekannten IDs nicht nochmal erscheinen sollen. Dies könnte sein, wenn Beiträge mehreren Kategorien zugeordnet sind, da beide Loops unterschiedliche Kategorien ausgeben. Ich prüfe nun mit der Funktion in_array(), ob die aktuelle ID $post->ID im Array $do_not_duplicate vorhanden ist. Nur wenn die ID nicht ( !in_array() ) im Array vorhanden, dann wird im Loop Nr. 2 Inhalt ausgegeben.

Loop Nr.2

<?php
// 2. Loop
query_posts( 'cat=4,5,6&showposts=15' );
while (have_posts()) : the_post();
    if ( !in_array( $post->ID, $do_not_duplicate ) ) { // IDs prüfen
        // Post ausgeben ...
        the_title();
    }
endwhile;
?>

Wie so oft, gibt es eine Alternative und dazu stellt WordPress einen Parameter im Query bereit - post__not_in, siehe Codex. Auch diesem Parameter übergebe ich alternativ den Array und in diesem Query sind dann die IDs nicht enthalten. Je nach dem, welchen Weg man geht, stehen damit zwei unterschiedliche Syntax bereit, um doppelten Content zu vermeiden.

<?php
// weiterer Loop ohne Duplikat
query_posts( array(
    'cat' => 456,
    'post__not_in' => $do_not_duplicate 
    )
);
while ( have_posts() ) : the_post();
    // Post ausgeben ...
        the_title();
endwhile;
?>

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

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

WordPress stellt eine Funktion bereit, die es einfach erlaubt, das Suchformular zu nutzen: get_search_form(). Ist genauso zu verstehen wie beispielsweise die Template Tags get_sidebar() oder get_header(), die die meisten Themes nutzen. Verfügbar ist die Funktion seit WordPress Version 2.7 und ist zu finden in wp-includes/general-template.php.

HTML-Resultat

Die Ausgabe ohne Veränderung der Funktion sieht dann im HTML wie folgt aus.

<form role="search" method="get" id="searchform" action="http://example.com/">
	<div>
		<label class="screen-reader-text" for="s">' . __('Search for:') . '</label>
		<input type="text" value="" name="s" id="s" />
		<input type="submit" id="searchsubmit" value="Suche" />
	</div>
</form>

Inhalt im Inputfeld

Nun bietet die Funktion einen Hook an, um auf das Suchfeld Einfluss zu nehmen. In diesem Beispiel soll der Text im Suchfeld beeinflusst werden, so dass der User eine Info dort vorfindet.
Dies wird über Filter Hook the_search_query realisiert. Innerhalb der Funktion, die an diesen Hook übergeben wird, wird zusätzlich noch geprüft, ob schon ein Wert im Feld steht und wenn dies nicht der Standard-Wert ist, sondern zum Beispiel der zurückgegeben Wert aus der Suche, dann wird nicht der Wert im Suchfeld gesetzt, sondern unverändert gelassen.
Diese Funktion gehört klassisch in die functions.php des Themes und kann natürlich an die eigenen Bedürfnisse angepasst werden.

function fb_get_search_query() {
	$return = stripslashes( get_query_var( 's' ) );
	if ( $return == '' )
		$return = __( 'Hier Suchbegriff eingeben...', FB_BASIS_TEXTDOMAIN );
	else
		$return = apply_filters( 'get_search_query', $return );
	
	return $return;
}
add_filter( 'the_search_query', 'fb_get_search_query' );

Suchfeld und eigene Bedürfnisse

Nun ist das Suchformular aber eventuell nicht immer, wie man sich das wünscht und daher bietet es sich an, ein eigenes Suchfeld zu erstellen und zu nutzen. Um dabei aber die Möglichkeiten von WordPress weiterhin anzubieten, ist es sinnvoll, auch diese Möglichkeit als Funktion oder auch Template mit dem Namen searchform.php, siehe nähere Infos weiter unten, im Theme einzubinden und die Hooks mit vorzusehen. So können eventuell genutzte Plugins darauf zugreifen. Auch dazu ein kleines Beispiel, bei dem als Veränderung eine kleine JavaScript-Funktion eingebunden werden soll.

Als erstes die Funktion für die functions.php des Themes.

function fb_get_search_form() {
	do_action( 'get_search_form' );

	$form = '<form method="get" id="searchform" action="' . get_option('home') . '/" >
	<div><label class="screen-reader-text" for="s">' . __('Search for:') . '</label>
	<input type="text" value="' . esc_attr(apply_filters('the_search_query', get_search_query())) . '" name="s" id="s" onfocus="clearSearch();" />
	<input type="submit" id="searchsubmit" value="'. esc_attr__('Search') .'" />
	</div>
	</form>';

	echo apply_filters('get_search_form', $form);
}

Die Funktion ernthält den schon oben angesprochenen Hook the_search_query und außerdem die Erweiterung des JavaScript onfocus="clearSearch();". Dies kleine Funktion sorgt nur dafür, dass der Inhalt des Suchfeldes gelöscht wird, wenn man in die Box klickt. Wobei ich den Inhalt prüfe und nur dann lösche, wenn der Inhalt explizit dem vorgegebenen Syntax Hier Suchbegriff eingeben... entspricht.

function clearSearch() {
	queryBox = document.getElementById('s');

	if ( queryBox.value == 'Hier Suchbegriff eingeben...' ) {
		queryBox.value = '';
	}
	queryBox.style.color = '#292929';
}

Das kleine Script ist in einer Datei abgelegt und wird ebenfalls aus der functions.php des Themes geladen. Dazu dient der folgende Aufruf; nähere Infos zur Funktion wp_enqueue_script finet ihr beispielsweise im Artikel JavaScript-Bibliotheken in und aus WordPress nutzen.
wp_enqueue_script( 'fb_scripts', get_bloginfo('template_directory') . '/js/script.js', '', '', true );


Alternativ eine Lösung mit Hilfe von jQuery

$(document).ready(function() {  
$("input#s").val("Enter your search text here");  
   textFill($('input.text1'));  
});  
    function textFill(input){ //input focus text function  
    var originalvalue = input.val();  
    input.focus( function(){  
        if( $.trim(input.val()) == originalvalue ){ input.val(''); }  
    });  
    input.blur( function(){  
        if( $.trim(input.val()) == '' ){ input.val(originalvalue); }  
    });  
} 

Das Template searchform.php

Natürlich besteht auch weiterhin die Möglichkeit extra ein Template für das Suchformular anzulegen. Dabei sucht WordPress nach dem Template searchform.php im Theme. Dabei sucht WordPress im ersten Schritt nach diesem Template, wird dies nicht gefunden, dann wird seit Version 2.7 von WordPress das Formular aus dem Template Tag get_search_form() genutzt.

Welchen Weg man geht, das ist sicher von der Arbeitsweise und Gewohnheit abhängig, aber damit ist ein Standard vorhanden, der einfach als Template Tag zur Verfügung steht und es kann bei nicht sonderlich ausgefallenen Anwendungen ein Template gespart werden.

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

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

Möchte man das Aktivieren des Themes nutzen um diverse Einstellungen zu setzen, dann kann auch folgender Schnipsel sehr nützlich sein, der in der Diskussion der WP Hacker auf kam. Dies klappt wunderbar und sollte für Theme-Entwickler nützlich sein, die Optionen beim Aktivieren schreiben wollen.

Hier ein kleines Beispiel, in dem die Standard-Einstellung posts_per_page von WordPress in der Tabelle options neu auf den Wert 1 gesetzt wird.

// with activate istall option
if ( is_admin() && isset($_GET['activated'] ) && $pagenow == 'themes.php' ) {
	update_option( 'posts_per_page', 1 );
}

Seit WordPress Version 2.9 gibt es explizit dafür die Funktion register_theme_directory().

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

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

Für Theme-Autoren bleibt nur der Weg, in die functions.php des Themes eine kleine Funktion abzulegen, die die Widgets, welche man nicht mag, deaktiviert. Der folgende Syntax schaltet alle Standard-Widgets ab. Er sollte daher angepasst werden, je nach Anforderung.

// unregister all default WP Widgets
function unregister_default_wp_widgets() {

	unregister_widget('WP_Widget_Pages');

	unregister_widget('WP_Widget_Calendar');

	unregister_widget('WP_Widget_Archives');

	unregister_widget('WP_Widget_Links');

	unregister_widget('WP_Widget_Meta');

	unregister_widget('WP_Widget_Search');

	unregister_widget('WP_Widget_Text');

	unregister_widget('WP_Widget_Categories');

	unregister_widget('WP_Widget_Recent_Posts');

	unregister_widget('WP_Widget_Recent_Comments');

	unregister_widget('WP_Widget_RSS');

	unregister_widget('WP_Widget_Tag_Cloud');
}

add_action('widgets_init', 'unregister_default_wp_widgets', 1);

Die Funktion unregister_widget() benötigt als Parameter die Übergabe der Klasse, damit ist der Code hier nur ab Version 2.8 nutzbar, im Vorfeld wurden Widgets anders unterstützt.

Wie man eigene Widgets ab WordPress Version 2.8 erstellt, kann man beispielsweise im Beitrag WordPress 2.8 Widget erstellen von Micha nachlesen.

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

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

Da sich HTML5 aber schon geraume Zeit auf meiner ToDo-Liste befindet und ich ein Thema benötige um zu starten, habe ich begonnen das Basis Theme in HTML5 zu bauen, so dass WordPress direkt damit arbeiten kann. Dabei habe ich auch gleich ein Beispiel-Stylesheet beigelegt, so dass es ein Design gibt.

Zusätzlich gibt es eine kleines Stylesheet, welches die neuen Bereiche und ihre Tags darstellt, so dass man bei einem Einstieg in HTML5 ein wenig visueller arbeiten kann. Das Stylesheet ist nicht im Code verdrahtet und kann zum Beispiel einfach und unkompliziert mit Hilfe des WebDeveloper-Toolbar hinzugefügt werden. Zu finden ist das Stylesheet in der Struktur unter layout/html5areas/html5areas.css. Ein Beitrag ist damit wie folgt ersichtlich.

Diverse Punkte sind aktuell nur im Opera > 9.5 sichtbar. Dazu zählen alle Inhalte des Kommentar-Formulars. Dort wurde unter anderem Pflichtfelder übergeben, wenn sie durch WordPress gesetzt werden und die type-Attribute haben der Aufgabe bezogen ihren Wert erhalten, daher die Image-Zuordnung im Opera.

Arbeit mit...

Als Nachschlagewerk dient mit die Übersicht des w3c und das Blog zum Thema HTML5. Leider ist die Arbeit beim Validieren aktuell nicht so einfach, da mir kein Validator bekannt ist, der lokal validieren kann. Über Tipps würde ich mich daher freuen. Für den IE liefere ich ein Script mit, welches ihm den Umgang mit diversen Elementen beibringt.

• HTML 5
• html5doctor
• HTML5 Validator
• HTML5 enabling script

Warum das alles?

Ich würde mir wünschen, dass der eine oder andere mal drüber schaut, vielleicht Leute, die schon mehr mit HTML5 gearbeitet haben und tief in der Materie stecken. Rückmeldungen wären toll und vielleicht erweitert der eine oder andere das Theme um bestimmte Tags oder Elemente.

Wie komme ich daran?

Es gibt hier keinen Download und die Arbeit daran wird in der freien Zeit weiter gehen und daher wird es immer wieder Veränderungen geben. Aktuell stehen nur wenige Grundzüge und es soll den gleichen Stand wie das WP Basis Theme bekommen. Um sich in das Theme einzuarbeiten oder einfach mal drüber zu schauen steht ein Repository bereit. Dort kann auch Kommentiert und diskutiert werden.

Der Ordner mit allen Inhalten findet sich im Bereich trunk/basis-html5 des SVN.

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

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

Funktion remove_action

remove_action( $tag, $function_to_add, $priority, $accepted_args );

This function removes a function attached to a specified action hook. This method can be used to remove default functions attached to a specific action hook and possibly replace them with a substitute.

Important: To remove a hook, the $function_to_remove and $priority arguments must match when the hook was added. This goes for both filters and actions. No warning will be given on removal failure.
via: WP Codex

Die folgenden Syntax zeigt einen Auszug, der nur einen Teil der Ausgabe zeigt, die man im Theme aktiv haben kann. Sie resultieren aus den Standard Funktion, die in den head des Themes geladen werden. Erkennbar, in dem man in der Datei wp-includes/default-filters.php nach dem Hook wp_head sucht. Nicht alle Filter sollte man deaktivieren, da sie in den meisten Fällen sinnvoll sind. Aber WordPress ist nicht nur in klassischen Blogscenarios im Einsatz und daher bietet es sich, wenn man zumindest die Lösung kennt. Diese ist dann im zweiten Syntax-Feld zu erkennnen.

<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://bueltge.de/xmlrpc.php?rsd" />
<link rel='index' title='bueltge.de [by:ltge.de]' href='http://bueltge.de' />
<link rel='start' title='WP - Datenbank sichern' href='http://bueltge.de/datenbank-sichern/9/' />
<link rel='prev' title='WordPress Konstanten nutzen' href='http://bueltge.de/wordpress-konstanten-nutzen/962/' />

Hier werden nun diverse Funktion deaktiviert, beispielhaft und nicht als Empfehlung. Untersucht euren Head und schaltet ab, was ihr nicht benötigt. Weniger Markup freut nicht nur die Ladezeit.

remove_action( 'wp_head', 'feed_links_extra', 3 ); // Display the links to the extra feeds such as category feeds
remove_action( 'wp_head', 'feed_links', 2 ); // Display the links to the general feeds: Post and Comment Feed
remove_action( 'wp_head', 'rsd_link' ); // Display the link to the Really Simple Discovery service endpoint, EditURI link
remove_action( 'wp_head', 'wlwmanifest_link' ); // Display the link to the Windows Live Writer manifest file.
remove_action( 'wp_head', 'index_rel_link'); // index link
remove_action( 'wp_head', 'parent_post_rel_link', 10, 0 ); // prev link
remove_action( 'wp_head', 'start_post_rel_link', 10, 0 ); // start link
remove_action( 'wp_head', 'adjacent_posts_rel_link', 10, 0 ); // Display relational links for the posts adjacent to the current post.
remove_action(  'wp_head', 'wp_generator' ); // Display the XHTML generator that is generated on the wp_head hook, WP version

Als Hinweis, wer noch nicht mit eigenen Funktionen im Theme gearbeitet hat: Zugriffe auf Hooks werden durch die Pluginschnittstelle realisiert oder in der functions.php des Themes abgelegt. Sollte es die Datei nicht geben, dann einfach anlegen und im Theme ablegen, WordPress erkennt die Datei und inkludiert die Funktionen.

Ergänzung

Mit WordPress 3.0 gibt es einen Filter, der dafür sorgt, dass das P in WordPress immer groß geschrieben wird; muss man aus meiner Sicht nicht haben, kostet nur unnötig Last. Daher entfernt man auch diesen Filter, der auf drei Hooks geht.

// Remove Format WordPress 
foreach ( array( 'the_content', 'the_title', 'comment_text' ) as $filter ) { 
	remove_filter( $filter, 'capital_P_dangit' ); 
}

Mit 3.0 wurde auch der Filter für relational links umgestellt, daher der folgende Code, der beide Filter beachtet, je nach WordPress version.

if ( !remove_action( 'wp_head', 'adjacent_posts_rel_link', 10, 0 ) )
    remove_action ('wp_head', 'adjacent_posts_rel_link_wp_head', 10, 0);

Ergänzt von realloc

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

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