Um Artikelbilder in WordPress nutzen zu können reicht ein kleiner Eintrag in die functions.php innerhalb des Theme-Ordners:

add_theme_support(‘post_thumbnails’);

Damit die Größen der einzelnen Darstellungen auf das eigene Theme passen, fügt man für jede eigene Größe folgenden Code in die functions.php ein:

add_image_size(‘thumbnail_klasse’, 220, 100, true);

Was bedeuten die einzelnen Parameter, die man der Funktion add_image_size() mitgibt? Der erste Parameter vergibt die Klasse und den Namen, mit dessen Hilfe man nachher in den Template-Files genau diese Größe aufrufen kann. Der zweite Parameter definiert die Breite, der dritte Parameter die Höhe des Bildes. Mit dem letzten Parameter gibt man WordPress die Anweisung, dass Bilder mit anderem Größenverhältnis proportional zurecht geschnitten werden sollen. Diesen muss man auf true setzen, da er standardmäßig auf false steht.

Einbinden in ein Theme-File:

Nachdem die Artikelbilder aktiviert und eigene Größen definiert wurden, können wir jetzt unsere generierten Bilder im Theme platzieren. Dazu fügen wir an die entsprechende Stelle im Quelltext des Themes folgenden Code ein:

<?php if(has_post_thumbnail()) { the_post_thumbnail(‘thumbnail_klasse’); } ?>

Mit der if-Schleife am Anfang stellen wir fest, ob der Artikel oder die Seite überhaupt ein Artikelbild besitzt. Ist dies der Fall, soll unser Artikelbild mit der Funktion the_post_thumbnail und den von uns vorher definierten eigenen Dimensionen dargestellt werden (thumbnail_klasse), fertig.

Noch ein Hinweis am Schluss

Natürlich können dem Artikelbild beliebig viele eigene Größen gegeben werden. Allerdings gilt es, dies nicht zu übertreiben, da WordPress für jede definierte Größe eine eigene Bild-Datei anlegt. Mit steigender Zahl an verschiedenen Größen steigt deshalb auch die Zahl der Bilder auf dem Server und die Verarbeitungsgeschwindigkeit beim Upload neuer Artikelbilder wird langsamer.

add_filter( 'show_admin_bar', '__return_false' );

Diesen einfach in die functions.php des eigenen Themes schreiben und fertig, die Admin-Bar ist Geschichte.

Da jQuery bereits in WordPress enthalten ist, wird es einfach durch folgenden Code in das Theme integriert. Diesen setzt man am besten in die functions.php seines Themes ein.

add_action(‘wp_print_scripts’,’meintheme_add_javascript’ );

function meintheme_add_javascript() {
wp_enqueue_script( ‘jquery’);
}

Um weitere Plugins zu laden, die auf jQuery basieren zu laden (wie zum Beispiel Fancybox), ergänzt man in der Funktion meintheme_add_javascript() nach der Zeile wp_enqueue_script(‘jquery’) einfach folgende Zeile:

wp_enqueue_script(‘fancybox’, get_bloginfo(‘template_url’).”/js/fancybox.js”, array(‘jquery’));

Nun wird das auf jQuery basierende Fancybox-Script ebenfalls auf den Seiten des Themes verknüpft. Da Fancybox nicht standardmäßig in WordPress enthalten ist, liegt die Datei im Ordner js des Themes ab und muss mit einer Pfadangabe aufgerufen werden.

Diese Methode erspart das Verknüpfen der Dateien im HTML-Text des WordPress Themes.

Aus Gründen der Ladegeschwindigkeit einer Webseite, sollten externe Javascript- und damit auch jQuery-Dateien, wenn möglich, am Ende des Quelltexts einer Seite geladen werden, vor dem schließenden </body> Tags. Das erreicht man mit unserer Methode, wenn man am Ende von

wp_enqueue_script(‘fancybox’, get_bloginfo(‘template_url’).’/js/jquery.fancybox-1.3.0.pack.js’, array(‘jquery’));

ein ,”,true); anhängt:

wp_enqueue_script(‘fancybox’, get_bloginfo(‘template_url’).’/js/jquery.fancybox-1.3.0.pack.js’, array(‘jquery’),”,true);

Alles zusammen sieht dann so aus:

add_action(‘wp_print_scripts’,’meintheme_add_javascript’ ); function meintheme_add_javascript() {
wp_enqueue_script( ‘jquery’);
wp_enqueue_script(‘fancybox’, get_bloginfo(‘template_url’).’/js/jquery.fancybox-1.3.0.pack.js’, array(‘jquery’),”,true); }

Doch ist das wirklich so? Sollte man den Aspekt der Ladegeschwindigkeit einer Webseite wirklich vernachlässigen? Klare Antwort: Nein!

Die Ladegeschwindigkeit einer Webseite ist aus mehreren Gründen von entscheidender Bedeutung.Hier die zwei wichtigsten:

1. Zuerst einmal ist es im Bereich der Benutzerfreundlichkeit einer Webseite entscheidend, dass Aktionen innerhalb weniger Sekunden zu einer Reaktion des Systems führen. Viele Benutzer klicken im günstigsten Fall ein paar mal hintereinander auf einen Button oder Link, wenn dieser nicht sofort eine Reaktion der Seite auslöst. Im schlimmsten Fall verlässt der Besucher die Webseite und kehrt nicht mehr wieder. Längere Reaktionszeiten sollten auf jeden Fall einen Status anzeigen, damit der Benutzer weiss, daß das System seine Aktion aufgenommen hat und im Moment an deren Bearbeitung ist, Beispiele hierfür sind die berühmten Loading-Animationen.
2. Suchmaschinen berücksichtigen bei der Bewertung von Webseiten auch deren Ladegeschwindigkeit. Auch aus SEO-Aspekten sollte man auf möglichst geringe Ladezeiten achten, denn Suchmaschinen berücksichtigen immer mehr die Ladegeschwindigkeit von Webseiten bei der Berechnung des Rankings. So werden Webseiten mit kurzen Ladezeiten meist höher gewertet als Webseiten mit hohen Ladezeiten.

Diese zwei Grundgedanken vorweg gestellt, fragt sich der Webdesigner nun, wie er seine Webseite oder Blog auf Basis von WordPress beschleunigen kann. Dabei geht es uns nur um das Frontend, denn kein Mensch käme auf die Idee, sein Dashboard für Suchmaschinen zu optimieren. Mit ein paar einfachen Schritten kann die eigenen Webseite an Ladegeschwindigkeit hinzugewinnen:

• Bilder optimieren. Eigentlich eine Selbstverständlichkeit; Bilder sollten vor dem Upload auf die Webseite ins passende Format gebracht und für den Einsatz auf einer Webseite optimiert werden. Das heißt, anstatt ein 1024×768 Pixel großes Bild per HTML-Anweisung in die gewünschte Breite von 640 Pixel zu quetschen, sollte das Bild direkt auf 640 Pixel Breite verkleinert werden und in unter Datei >Für Web und Geräte speichern abgespeichert werden. Je nach Art des Bildes kann aus drei verschiedenen Formaten gewählt werden. Solange das Bild keine Transparenzen enthält, liegt man mit dem Format “jpg” immer auf der richtigen Seite. Diese Art der Speicherung reduziert das Datenvolumen eines Bildes enorm.
• Viele CSS-Dateien zu einer zusammenfassen. Anstatt vieler kleiner CSS-Dateien, die auf der ganzen Webseite benötigten werden (z.B. layout.css, typo.css, navi.css) empfiehlt sich eine CSS, die alles beinhaltet. Das verringert die Requests an den Server, der nun nur eine einzige Datei bereitstellen muss.
• CSS-Dateien verkleinern. Auf minifycss.com kann man die gerade erzeugte große CSS-Datei schrumpfen lassen und alle Kommentare, Einschübe und Umbrüche entfernen. Damit verringert sich die Größe der CSS-Datei und damit auch deren Ladezeit. Allerdings sollte man sich immer die Orginal-Datei aufbewahren, damit man nachträglich Änderungen einfügen kann.
• Javascript-Dateien zusammenfassen und verkleinern. Ähnlich wie bei den CSS Dateien verhält es sich auch mit Javascript Dateien. Was seitenweit benötigt wird in eine JS-Datei ablegen, auf z.B. jscompress.com kann man diese dann verkleinern lassen, was nach dem selben Prinzip wie bei der CSS-Datei funktioniert.
• Javascript-Frameworks immer in der verkleinerten Form verwenden. Grundsätzlich benötigen Webseiten nicht die kommentierte und gut leserliche Form von Javascript-Frameworks, wie z.B. jQuery. Für die Funktionalität reicht die verkleinerte Datei vollkommen aus, ebenso bei Plugins.
• Javascript-Dateien wenn möglich zum Schluss laden. Manche Javascript-Funktionen benötigt man nicht zwingend direkt beim Start der Webseite. Damit die Inhalte bereits angezeigt werden und der Besucher/Crawler schon sieht, was ihn erwartet, sollte man wenn möglich Javascript-Dateien am Ende einer Webseite einfügen.
• WordPress Datenbank-Queries reduzieren. Manche dynamisch erzeugte Elemente können problemlos durch statischen Inhalt ersetzt werden. So muss der Webseiten-Name nicht ständig durch <?php bloginfo(‘name’); ?> aufgerufen werden. Ebenso verhält es sich mit der Navigation. Besonders die in WordPress 3 eingeführten Drag&Drop Navigationen lassen die Gesamtzahl der Datenbank-Queries enorm in die Höhe schießen und verlangsamen damit die ganze Webseite. Am besten lässt man sich einmal das Menü durch WordPress anzeigen, kopiert den erzeugten Quellcode und fügt ihn als statische HTML-Komponente in den Quellcode ein.

Es gibt durchaus noch mehr Tricks zum Verringern der Ladezeit einer Webseite. Ebenso gibt es noch viele weitere Beispiele zur Verringerung der Datenbank-Queries von WordPress. Vielleicht findet hier eine Diskussion und eine Sammlung zu diesem Thema statt.

Um Animationen und hübsche Effekte einzubinden sollte man sich eines Javascript-Frameworks bedienen, welches vorgefertigte Funktionen anbietet, die man dann ohne viel Arbeit schnell einbauen kann. Zu erwähnen wären Scriptaculous und jQuery. Zu Beginn meiner Karriere habe ich mich hauptsächlich mit Scriptaculous und Prototype beschäftigt, welche eine Vielzahl von Animationsmöglichkeiten und Plugins für die unterschiedlichsten Dinge bietet. Einziger, aber schwergewichtiger Nachteil daran war und ist die enorme Größe der Dateien. Deshalb empfehle ich jQuery. Es ist schlank, durch eine Unzahl an Plugins erweiterbar und mittlerweile das beliebteste und bestdokumentierte Javascript Framework im Internet. Zusätzlich bietet es einen sehr einfachen Syntax, der fast schon selbsterklärend ist. Weitere Informationen zu jQuery sind unter www.jquery.com zu finden.

Um jQuery im eigenen WordPress Theme einzubinden bedarf es ein paar kurzen Schritten. Zuerst die gute Nachricht: WordPress verfügt bereits über eine Kopie von jQuery. Viele Effekte des Admin-Bereichs wurden mit jQuery realisiert, weshalb man sich die Arbeit eines manuellen Down- und Uploads sparen kann. Hier nun die einzelnen Schritte, um jQuery im eigenen WordPress Theme nutzen zu können:

jQuery in WordPress aktivieren

Dazu öffnet man die functions.php des eignenen Themes, wenn nicht vorhanden, sollte man sie jetzt erstellen, und gibt folgenden Code ein:

if(!is_admin)
{
add_action(‘wp_print_scripts’,'meintheme_add_javascript’ );

function meintheme_add_javascript() {
wp_enqueue_script( ‘jquery’);
}
}

Was macht dieser Code? Die Anweisung if(!is_admin()) sagt, dass dieser Code nicht im Dashboard abgearbeitet werden soll. Die Anweisung add_action(‘wp_print_scripts’, ‘meintheme_add_javascript’); sagt aus, dass WordPress bei der Generierung des HTML-Codes des Head-Bereichs die Funktion meintheme_add_javascript() ausführen soll.

Die Funktion meintheme_add_javascript() wiederum erzeugt mit dem Befehl das Einbinden der WordPress-eigenen jQuery-Bibliothek.

Die functions.php abspeichern, die Seite neu laden und nun sollte ein

<script type=’text/javascript’ src=’http://meinedomain.de/wp-includes/js/jquery/jquery.js?ver=1.4.2′></script>

stehen. Vorteil dieser Methode ist, dass WordPress bei jedem Update automatisch die neuste Version von jQuery bietet und man nicht selbst für ein Update sorgen muss.

Aber wieso sollte man bei jedem neuen Plugin genau überlegen ob es wirklich notwendig ist, bevor man es installiert. Schließlich gehts das so wunderbar leicht dank der WordPress-Adminoberfläche und für (fast)  jedes Problemchen gibt es das passende Plugin? Auf diese Frage gibt es zwei Antworten:

1. WordPress Plugins können den Blog oder die Webseite deutlich verlangsamen. Insbesondere wenn große Mengen von Plugins ihren Dienst auf einer WordPress Webseite verrichten.
2. Nicht alle WordPress Plugins sind wirklich sicher. Viele Plugins öffnen gefährliche Sicherheitslücken.

Nicht selten wird ein WordPress Blog gestartet und zwei oder drei Plugins werden mit installiert. Natürlich gibt es eine Menge Plugins, die durchaus sinnvoll sind und die ich jedem Blogger dringend empfehle. Aber mit der Zeit liest man immer mehr Artikel im Internet mit Überschriften wie “Die Top 20 Plugins, die jeder WordPress-Blog brauch” oder ähnlich. So kann es geschehen, dass über die Wochen oder Monate die Zahl der installierten Plugins wächst und wächst. Bis man dann merkt, dass 30 oder 40 Plugins den WordPress Blog dermaßen abbremsen, dass es keinen Spass mehr macht.

Gerade diejenigen, die mit PHP und MySQL umzugehen verstehen und denen die inneren Prinzipien von WordPress nicht gänzlich unbekannt sind, können viele Dinge auch über ein paar wenige Zeilen PHP-Code viel schneller und eleganter lösen (siehe den Artikel Breadcrumbs in WordPress ohne Plugin). Solche Dinge, wie Breadcrumbs oder generell ausgedrückt, Dinge, die relativ statisch ablaufen und keine oder nur wenig Konfiguration bedürfen, müssen nicht unbedingt von einem Plugin gesteuert werden.

Pixel-Kingdom plant in kommender Zeit seinen Fokus für die WordPress-Rezepte auch verstärkt auf das Thema des Dashboard-Moddings auszuweiten: Mit Tutorials zum Thema Theme-Konfiguration oder Hinzufügen von eigenen Dashboard-Menüs. So kann der findige WordPress Webdesigner auch schnell sein eigenes Super-Wordpress-Plugin schreiben, dass all seine Belange auf einmal abdeckt und den Einsatz von vielen verschiedenen Plugins unnötig macht.

Schritt 1: Erstellen der Datei breadcrumb.php

In der neu erstellten Datei fügen wir folgenden Code ein:

<?php
echo ‘<ul id=”breadcrumbs”>’;
echo ‘<li>Sie befinden sich hier:</li>’;
if(is_page() && !is_front_page())
{
echo ‘<li><a href=”‘.get_bloginfo(‘url’).’”>Home</a>&raquo;</li>’;
$post_anchestors = get_post_ancestors($post);
if($post_anchestors)
{
$post_anchestors = array_reverse($post_anchestors);
foreach($post_anchestors as $crumb)
{
echo ‘<li><a href=”‘.get_permalink($crumb).’”>’.get_the_title($crumb).’</a>&raquo;</li>’;
}
}
echo ‘<li><a href=”‘.get_permalink().’”>’.get_the_title().’</a></li>’;

}elseif(is_front_page())
{
echo ‘<li><a href=”‘.get_bloginfo(‘url’).’”>Home</a></li>’;
}elseif(is_category() || is_single())
{
echo ‘<li><a href=”‘.get_bloginfo(‘url’).’”>Home</a>&raquo;</li>’;
$breadcrumb_category = get_the_category();
echo ‘<li><a href=”‘.get_category_link($breadcrumb_category[0]->cat_ID).’”>’.$breadcrumb_category[0]->cat_name.’</a>&raquo;</li>’;
if(is_single())
{
echo ‘<li><a href=”‘.get_permalink().’”>’.get_the_title().’</a></li>’;
}
}
echo ‘</ul>’;
?>

Mit der if_Schleife if(is_page() && !is_front_page() sprechen wir alle Seiten an, ausschließlich der Startseite des WordPress Blogs. Mit der WordPress-eigenen Funktion get_post_ancestors() bekommen wir eventuell vorhandene Unterseiten dieser Seite. Diese werden in einem Array abgespeichert, den wir dann mit array_reverse in die von uns gewünschte Reihenfolge umdrehen. Dieser Array wird dann Stück für Stück durch eine foreach-Schleife abgearbeitet.

Als nächstes bestimmen wir, wie der Breadcrumb auf der Startseite des WordPress Blogs aussehen soll. Durch die if-Schleife elseif(is_front_page()) kommen wir an die Startseite heran, da auf ihr nichts außer Home stehen soll.

Die letzte elseif-Schleife kümmert sich um die Kategorien und die Artikelseiten.

Im PHP-Code habe ich den einzelnen Elementen der ungeordneten Liste schon eine ID und Klassen vergeben, damit diese nachher problemlos mittels CSS an das vorhanden Webdesign seiner Seite anpassen kann.

Die breadcrumb.php speichern wir nun im Root-Verzeichnis unseres WordPress Themes ab und binden Sie an gewünschter Stelle mittels

<?php include(TEMPLATEPATH . ‘/breadcrumb.php’); ?>

ein, fertig.

Einfach folgenden Code an die Stelle des WordPress Blogs einbinden, an der die doppelspaltige Liste erscheinen soll:

<?php
$cats = explode(“<br />”,wp_list_categories(‘title_li=&echo=0&depth=1&style=none’));
$cat_n = count($cats) – 1;
for ($i=0;$i<$cat_n;$i++):
if ($i<$cat_n/2):
$cat_left = $cat_left.’<li>’.$cats[$i].’</li>’;
elseif ($i>=$cat_n/2):
$cat_right = $cat_right.’<li>’.$cats[$i].’</li>’;
endif;
endfor;
?>
<ul>
<?php echo $cat_left;?>
</ul>
<ul>
<?php echo $cat_right;?>
</ul>

Das folgende Stück Script wird überprüfen, ob sich der Besucher in der Kategorie “WordPress” befindet. Sollte dies der Fall sein, wird header-wordpress.php geladen, anderenfalls wird der Standard Head geladen.

<?php

if is_category(‘WordPress’) {

get_header(‘wordpress’);

} else {

get_header();

}

?>

Das selbe lässt sich auch für den Footer mit

<?php get_footer(‘meinfooter’); ?>

Damit wird die Datei footer-meinfooter.php eingebunden. Mittels

<?php get_sidebar(‘meinesidebar’); ?>

wird die Datei sidebar-meinesidebar.php eingebunden. Das Prinzip ist relativ simple. Den Wert, den man in der Funktion z.B. get_header() angibt, hängt man einfach nur an den regulären Dateinamen im WordPress Templateverzeichnis an (hier: header-wordpress.php).