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); }

Die Telekom bietet mittlerweile VDSL an. Wahnsinnige Geschwindigkeiten im Down- und Upstream im Vergleich zu “normalem” DSL. Bedeutet dies für uns Webdesigner, dass wir noch größere Fotos, noch aufwendigere Grafiken und noch mehr Datenbankabfragen auf einmal nutzen können? Die Frage eindeutig zu beantworten fällt mir schwer. Denn viele Server können nicht in der selben Geschwindigkeit anworten, wie die Client-Anfragen von einem Rechner ankommen.

In meinen vorigen Artikeln über die Verbesserung von Ladegeschwindigkeiten von WordPress Webseiten habe ich bereits erwähnt, dass Suchmaschinen mittlerweile auch die Ladegeschwindigkeiten von Webseiten bewerten. Inwieweit diese gemessen werden behalten die Suchmaschinen natürlich für sich, dennoch war dies immer ein Qualitätsmerkmal guter Webseiten und enorm wichtig für die Konversion einer Webseite.

VDSL ist noch relativ neu. Genau wie DSL damals wird es wohl noch einige Zeit dauern, bis es zu einem Standard wird und die alte Technologie ablöst. Dennoch sollte man sich die neuen Möglichkeiten im Hinterkopf behalten damit man nicht als Letzter auf den neuen Zug aufspringen muss.

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.

Ich beschäftige mich seid ein paar Wochen mit den neuen Features von WordPress 3.0 und muss sagen, dass sich diese Blog-Software immer mehr in Richtung vollwertiges CMS mausert. Zu nennen sei die Möglichkeit, unterschiedliche Menüs zu erstellen und diese überall im Theme anzeigen zu lassen. Außerdem kann man in der nun kommenden Version von WordPress eigene Artikel-/Seiten-Module mit entsprechenden Taxonomies erstellen.

Es gibt also einiges Neues in WordPress 3.0 auf das sich das Warten definitiv gelohnt hat. Zwar sollte man den Tag nicht vor dem Abend loben, aber zumindestens mich hat WordPress 3 enorm begeistert. Bleibt abzuwarten, mit welcher Kreativität Webdesigner dies nutzen werden.

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>

Um den Wert eines Custom Field in WordPress außerhalb des Loops anzuzeigen, muss lediglich folgender Code-Block an die entsprechende Stelle des WordPress Webdesigns platziert werden (Bitte „customField” mit dem Namen des eigenen Custom Fields ersetzen):

<?php
global $wp_query;
$post_id = $wp_query->post->ID;
echo get_post_meta($postid, ‘customField’, true);
?>

<?php
if (!(current_user_can(‘level_0′))){ ?>
<h2>Login</h2>
<form action=”<?php echo get_option(‘home’); ?>/wp-login.php” method=”post”>
<input type=”text” name=”log” id=”log” value=”<?php echo wp_specialchars(stripslashes($user_login), 1) ?>” size=”20″ />
<input type=”password” name=”pwd” id=”pwd” size=”20″ />
<input type=”submit” name=”submit” value=”Einloggen” class=”button” />
<p>
<label for=”rememberme”><input name=”rememberme” id=”rememberme” type=”checkbox” checked=”checked” value=”forever” /> Eingeloggt bleiben</label>
<input type=”hidden” name=”redirect_to” value=”<?php echo $_SERVER['REQUEST_URI']; ?>” />
</p>
</form>
<a href=”<?php echo get_option(‘home’); ?>/wp-login.php?action=lostpassword”>Passwort anfordern</a>
<?php } else { ?>
<h2>Logout</h2>
<a href=”<?php echo wp_logout_url(urlencode($_SERVER['REQUEST_URI'])); ?>”>logout</a><br />
<a href=”http://XXX/wp-admin/”>admin</a>
<?php }?>

Natürlich sollte man die XXX mit seiner aktuellen URL austauschen. Fertig