Sicherlich haben Sie beim Durchsuchen der WordPress-Themen schon Werbung gesehen, die als Adsensefertig bezeichnet wurde. Aber: Was heißt das im Detail? Grundsätzlich bedeutet es, dass das WordPress-Thema noch Platz für Adsensewerbung in vorhandenen Größen hat. Tatsächlich ist fast jedes WordPress-Thema potenziell “Adsensebereit”, da in jede Thematik und an jeder Stelle Werbung platziert werden kann. Diese Anleitung zeigt Ihnen die verschiedensten Möglichkeiten, wie Sie Werbung in Ihr WordPress einsetzen. Es geht wie folgt:

• Durch eine Vielzahl an WordPress Plug-ins.
• Einfügen von unbearbeiteten Anzeigen-Codes direkt in den Beitrag.
• Direktes einfügen von Anzeigen-Codes in Ihre Vorlagendateien.

Im Internet sind heutzutage viele weitverbreitete Anzeigen-Größen verfügbar. Einige Adsense-Anzeigen:

• Leaderboard (728×90)
• Banner (468×60)
• Skyscraper (120×600)
• Quadrat (250×250)
• Mittleres Rechteck (300×250)
• Großes Rechteck (336×280)
• Wide Skyscraper (160×600)

Einige davon sind groß, einige breit, andere quadratisch. Je nach Ihrem Themenaufbau haben Sie wahrscheinlich viele ideale Stellen für unterschiedliche Anzeigengrößen.

WordPress Plug-ins

WordPress Plug-ins sind wahrscheinlich die einfachste Art, automatisch Werbung in alle Ihre Beiträge und Seiten zu platzieren. Ich fand ein paar Gute, die es wert sind, näher betrachtet zu werden.

• Adsense Manager – mit 50.000 Downloads ist es unbestritten eines der beliebtesten Plug-ins bei der Anzeigenverwaltung. Trotz des Namens wird damit nicht nur Adsense unterstützt, sondern auch eine ganze Anzahl anderer Veröffentlichungsdienste am Gebiet der Werbung.
• All-in-One Adsense und YPN – ein sehr einfach zu nutzendes Plug-in. Alles was Sie dazu tun müssen: Einfügen Ihrer Adsense oder Publisher ID und danach werden sofort und automatisch Ihre Anzeigen in alle Ihre Beiträge eingefügt. Es gestattet auch die Farb-und Größenauswahl.
  Fürs Erste sollten diese beiden Plug-ins ausreichen. Allerdings gibt es hier viele andere Adsense-Plug-ins.

Manuelle Codeeinbgabe

Eine andere Möglichkeit Werbung in Ihre Beiträge zu platzieren ist es, einfach den Code in den Beitragseditor einzufügen. Vergewissern Sie sich, dass Sie den Code- Editor ausgewählt haben, denn im Visual-Editor wird der Code in Text umgewandelt.

Im Code Editor wird Ihre Adsense (oder jede andere Anzeige) passend in Ihre Seite eingefügt. Der in einen Beitrag oder auf eine Seite eingefügte Code sollte in etwa so aussehen:

Nach erfolgreicher Eingabe einer 468×60 Googleanzeige wird der Live Blogbeitrag folgendes Aussehen haben.

Um ehrlich zu sein würde ich diese Methode nicht empfehlen, da es dafür wirksamere Methoden gibt. Auch, wenn Sie gezielt Anzeigen in ganz spezielle Beiträge einfügen möchten, kann das oben angeführte Plug-in dies für Sie erledigen. Darüber hinaus bietet es auch eine einfache Markierung (tag), der in Ihren Beitrag eingefügt werden kann.

Codeeingabe direkt in Ihre Vorlage

Wenn Sie mit dem Bearbeiten von Vorlagendateien vertraut sind, ist dies wahrscheinlich die beste Möglichkeit, um eine Sitewide-Anzeige in Ihrem WordPress Blog zu platzieren. Die meisten WordPress-Themen werden in die verschiedensten Teile aufgegliedert:

• Kopfzeile – übergeordnetes Thema.
• Seitenleiste – Raum für Spekulationen.
• Hauptindex – Aufzählung der Beiträge auf der Homepage. Trifft auf Seiten und einzelne Beiträge zu, wenn diese nicht in anderen Dateien definiert sind.
• Einzelner Beitrag – einzelne Blogbeiträge.
• Seitenvorlage – statische Seiten.

All statischen Seiten werden nun Adsenseanzeigen wie folgt anzeigen:

Viel Vergnügen!

Ehe Sie fortfahren: Dieser Leitfaden bezieht sich auf WordPress Version 2.5. oder darüber. Dieser Code funktioniert nicht mit den vorhergehenden Versionen.

Das reine Einfügen des nachfolgenden Codes in Ihren Kommentarloop wird zwar funktionieren, aber wahrscheinlich im Original nicht gut aussehen:

<?php if(function_exists('get_avatar')) { echo get_avatar($comment, '50'); } ?>

Dieser Code prüft grundsätzlich, ob Sie über die get_avatar Funktion verfügen (WordPress 2.5+), und danach den Avatar des Kommentarverfassers in einem 50 px Quadrat zeigen.

Wenn Sie sicher sein wollen, dass die Gravatare in passender Größe angezeigt werden, sollten Sie die Firefox-Erweiterung MeasureIT verwenden. Damit können Sie den Bereich in Ihrem Thema ausmessen, um eine geeignete Gravatargröße zu bestimmen.

Für meinen Blog war 40 eine gute Größe. Wo habe ich diesen Code genau eingefügt:

Irgendwo zwischen foreach und endforeach (der Kommentarloop) wird der Code funktionieren.

Wenn einmal Gravatare in Ihren Kommentarvorlagen angezeigt werden, möchten Sie wahrscheinlich auch die Gestaltung übernehmen. Damit der Avator nach links gleitet, fügen Sie dem CSS Stylesheet die folgende Zeile und einen kleinen, rechten Rand hinzu. Um den Avatar auszurichten, können Sie den folgenden Code bearbeiten:

img.avatar {float:left; margin-right:5px;}

Die Themen werden variieren, aber durch Bearbeiten des oben angeführten Codes können Sie den Avatar nach Belieben ausrichten.
Zur Erinnerung: Dieser Code funktioniert unter Word Press 2.5 und darüber.

Es können nicht nur Gravatare für Kommentare verwendet werden, sie können auch zu einzelnen Verfasserkommentaren hinzugefügt werden!

Eine beliebte und weitverbreitete Methode Bilder, Videos oder andere Inhalte einer Website darzustellen ist die sogenannte Lightbox. Diese öffnet den gewünschten Inhalt in einem extra Fenster und verdunkelt derweil den Hintergrund. Im Folgenden möchte ich zeigen, wie man ohne Plugin die jQuery Lightbox prettyPhoto in ein WordPress-Theme einbaut.

jQuery Lightbox prettyPhoto

In vielen meiner Themes ist die jQuery Lightbox prettyPhoto bereits eingebaut. Persönlich finde ich prettyPhoto eines der schickesten jQuery-Lightbox-Plugins (nicht WordPress-Plugin!) und möchte daher zeigen, wie man es auf korrekte Weise und ohne WordPress-Plugin in ein Theme integriert.

Drück mich für eine Demo

Folgender Content kann von prettyPhoto in der Lightox dargestellt werden:

• Einzelbild
• Bildergelerie (mit Navigation)
• Flash
• YouTube-Videos
• Vimeo-Videos
• QuickTime-Videos
• iFrames (externe Websites)
• Inline Content (HTML-Elemente)
• Galerie aus gemischten Inhalten

Herunterladen von prettyPhoto

Zunächst laden wir uns das Original-Skript von der Website des Plugin-Autors Stephane Caron.

unkomprimierte Version | komprimierte Version

Den heruntergeladenen ZIP-Ordner entpacken wir und laden die darin enthaltenen Ordner /css, /images und /js in einen Ordner unseres WordPress-Themes z. B. /wp-content/themes/**dein-theme**/pretty/.

Einbinden von jQuery

Um die prettyPhoto-Lightbox nutzen zu können, müssen wir zunächst die Javascript-Bibliothek jQuery aktivieren bzw. in userem Theme-Header laden.

Jede WordPress-Installation bringt jQuery, da es sehr häufig verwendet wird, von Haus mit. Folgender Aufruf in der functions.php des Themes läd die nötige Datei:

<?php
add_action('wp_enqueue_scripts', 'wdm_scripts');
function wdm_scripts() {
    wp_enqueue_script('jquery');
}
?>

Eine Übersicht aller in WordPress bereits enthaltenen Skripte findet Ihr im WordPress-Codex.

Einbinden von prettyPhoto

Auch um die Skripte von prettyPhoto in den Head-Bereich unseres WordPress-Themes in der functions.php zu laden, behelfen wir uns wie bei dem allgemeinen jQuery-Skript der Funktionen wp_enqueue_script() und wp_enqueue_style().

Es müssen zwei Dateien eingebunden werden. Eine davon ist die Javascript-Datei /wp-content/themes/**dein-theme**/pretty/js/jquery.prettyPhoto.js und die andere ist das Stylesheet /wp-content/themes/**dein-theme**/pretty/css/prettyPhoto.css (s. a. Ordnerstruktur beim Upload).

<?php
add_action('wp_enqueue_scripts', 'wdm_scripts');
function wdm_scripts() {
    wp_enqueue_script('jquery');
    wp_enqueue_script('pretty', get_bloginfo('template_url').'/pretty/js/jquery.prettyPhoto.js', array('jquery'), '2.5.6', false);
    wp_enqueue_style('pretty', get_bloginfo('template_url').'/pretty/css/prettyPhoto.css', false, '2.5.6', 'all' );
}
?>

Im WordPress-Codex gibt es weitere Informationen zu wp_enqueue_script() und wp_enqueue_style().

Konfiguration von prettyPhoto

Alle nötigen Skripte sind bereits eingebunden. Nun muss die jQuery-Lightbox noch gesagt bekommen, wie, wann und wo sie funktionieren soll. Auf der Seite der Dokumentation von prettyPhoto finden wir, dass folgendes Skript in den Head-Bereich eingebunden werden muss:

<script type="text/javascript">
    $(document).ready(function(){
        $("a[rel^='prettyPhoto']").prettyPhoto();
    });
</script>

Achtung! Beim Einbinden in WordPress ist zu beachten, dass jQuery im sogenannten no conflict mode geladen wird. Das ist bei der Konfiguration von prettyPhoto wichtig.

prettyPhoto im no conflict mode

Der Javscript-Aufruf muss daher um sogenannte no conflict wrapper erweitert werden, damit die Lightbox funktioniert:

<script type="text/javascript">
(function($) {
    $(document).ready(function(){
        $("a[rel^='prettyPhoto']").prettyPhoto();
    });
})(jQuery);
</script>

Weitere Informationen zu der Methode der no conflict wrapper gibt es im WordPress-Codex.

Einbinden in der functions.php

Um das Theme nicht direkt in die header.php des WordPress-Themes einzufügen, behelfen wir uns der WordPress-Action wp_head, mit der man in der functions.php den Theme-Header erweitern kann:

<?php
add_action('wp_head','wdm_theme_head');
function wdm_theme_head() { ?>
<script type="text/javascript">
(function($) {
    $(document).ready(function(){
        $("a[rel^='prettyPhoto']").prettyPhoto();
    });
})(jQuery);
</script>
<?php } ?>

Weitere Informationen zu Optionen und der Anpassung von prettyPhoto findet Ihr in der Dokumentation.

Aufruf von prettyPhoto

Mit der obigen Konfiguration der jQuery-Lightbox lässt sich diese mit jedem a-Tag mit rel="prettyPhoto" öffnen. Der zu verwendene Code im Post-Content oder in einem Theme-Template könnte also wie folgt aussehen:

<a href="http://domain.de/dein/bild.jpg" rel="prettyPhoto">Lightbox aufrufen</a>

Drück mich für eine Demo

Weitere Möglichkeiten Inhalte in die prettyPhoto-Lightbox zu laden, findet Ihr in den Demos des Skriptes.

Fazit

Letztlich muss jeder selbst wissen, ob es einfacher ist ein Plugin zu installieren oder das Skript zu Fuß einzubinden. Ich verzichte gerne auf Plugins, wenn diese möglich ist und ich das Wissen habe, den Code selbst einzubauen.

Den ThemeShift-Kunden gefällt dieses eingebaute Feature auf jeden Fall. In Kombination mit WordPress-Funktionen lassen sich mit dieser jQuery-Lightbox umfangreiche und vor allem ansprechende Galerien bauen.

Relevante Links

• jQuery Lightbox prettyPhoto | Dokumentation
• WordPress Codex: wp_enqueue_script()
• WordPress Codex: wp_enqueue_style()
• WordPress Codex: no conflict wrapper

In dem ersten Teil meines Tutorials über Bildeffekte mit Overlays möchte ich zeigen, wie man mit ein wenig Photoshop und ein paar Zeilen HTML und CSS ganz normalen Fotos verblüffende Effekte wie abgerundete Ecken und Schlagschatten hinzufügen kann.

Das Ziel

Am Ende dieses Tutorials werde ich einem normalen Foto, ohne es selbst zu bearbeiten, abgerundete Ecken und einen Schlagschatten hinzugefügt haben. Besonders im zweiten Teil wird dann deutlich, wie nützlich dieser Effekt ist und wie man diesen Vorgang mit Benutzerdefinierten Feldern in WordPress-Themes automatisieren kann.

Du willst erst wissen, worum genau es geht?
Dann schau Dir erst die Demo dieses Tutorials an.

Die Vorgehensweise

Zunächst erstelle ich in Photoshop den nötigen Bild-Overlay, den ich später mittels HTML und CSS so über das Foto positioniere, dass es den Anschein hat, dass das Bild abgerundete Ecken und einen Schlagschatten hat.

Schritt 1 – Photoshop

In Photoshop lege ich mir als erstes eine neue Datei mit den Maßen 540x440px und einem hellen Hintergrund #f9f9f9 an. Darüber lege ich auf eine zweite Ebene das Foto einer nicht hässlichen jugen Frau mit den Maßen 400x300px.

Schritt 2 – Photoshop

Über das Foto lege ich nun mit dem Abgerundete-Ecken-Werkzeug eine Ebene in denselben Maßen (wie das Foto) und einem Radius von 10px.

Schritt 3 – Photoshop

Im nächsten Schritte blende ich die Ebene des Fotos zur besseren Übersicht zunächst aus und lege die gewünschten Ebeneneffekte für meinen Bild-Overlay an. In meinem Beispiel ist das ein Schlagschatten (Deckkraft: 75%, Abstand: 2px & Größe: 5px).

Schritt 4 – Photoshop

Wenn ich das Bild unter dem Overlay nun wieder einblende, sieht man die überstehenden Ecken des Fotos. Um das Foto nur im gewünschten Bereich (innerhalb der abgerundeten Ecken) anzeigen zu lassen, klicke ich bei gedrückter STRG-Taste (oder Apfel- oder CMD-) auf die Miniaturansicht der Vektormaske des abgerundeten Rechtecks, um die richtige Auswahl zu laden.

Schritt 5 – Photoshop

Dann blende ich das Rechteck mit abgerundeten Ecken aus und füge dem Foto mit dieser Auswahl eine Ebenenmaske hinzu. Bemerkung: Dieser Schritt ist nicht unbedingt nötig und dient hier nur zur Veranschaulichung.

Schritt 6 – Photoshop

Die Ebene des abgerundeten Rechtecks, das über dem Foto liegt, wird nun wieder eingeblendet. Außerdem setze ich die Deckkraft innerhalb der Ebene (Fläche) auf 0%. Der Unterschied zur Ebenendeckkraft ist, dass trotz der 100% Transparenz der Ebenenstil (Schlagschatten) sichtbar bleibt.

Schritt 7 – Photoshop

Das Foto, das ich ja später eh separat ansprechen möchte, blende ich aus. Mit dem Klick auf die Vektormaske bei gedrückter STRG-Taste lade ich mir die Auswahl des abgerundeten Rechtecks, das ich wieder eingeblendet habe. Diese Auswahl schneide ich nun aus der Hintergrundebene aus, so dass im Bereich des Fotos nun ein transparenter Bereich entsteht.

Schritt 8 – Photoshop

Mit dem Freistellen-Werkzeug schneide ich mir schließlich das endgültige Format meines Bild-Overlays zu. Dabei lasse ich an jeder Seite 10px Platz, so dass der Overlay 420x300px misst.

Schritt 9 – Photoshop

Als letzten Schritt in Photoshop wähle ich nun Für Web und Geräte speichern, wähle als Bildformat PNG (wichtig für die Transparenz) und lege die Bilddatei unter dem Namen img-overlay.png ab.

Schritt 10 – HTML/CSS

Um die HTML/CSS-Struktur zu erstellen, lege ich mir einen Beispielordner /bildeffekte an, speichere dort mein Beispielfoto foto.jpg und mein Bild-Overlay img-overlay.png. Desweiteren lege ich mir gleich eine Stylesheet-Datei style.css für die späteren Formatierungen an.

Schritt 11 – HTML/CSS

Für das Beispiel lege ich mir eine index.html mit zwei Überschriften und meinem Beispielfoto an.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="de-DE">

<html>
<head>

<title>Tutorial: Kreative Effekte mit Bild-Overlays erzeugen – Demo</title>

<link href="style.css" rel="stylesheet" type="text/css">

</head>

<body>

    <div id="main">

        <h1>Kreative Effekte mit Bild-Overlays</h1>
        <h2>von Simon Rimkus [webdemar]</h2>

        <div id="content">
            <img src="foto.jpg" alt="foto" width="400" height="300"/>
        </div>

       </div>

</body>
</html>

Wie ist das Ergebnis bis jetzt?
Demo ohne den Effekt durch den Bild-Overlay

Schritt 12 – HTML/CSS

Damit das Ganze etwas ansprechender aussieht habe ich folgende Formatierung über die externe Stylesheet-Datei style.css vorgenommen.

body {
    margin: 100px 0 0;
    background: #f9f9f9;
}

#main {
    width: 600px;
    margin: 0 auto;
}

h1 {
    color: #444;
    font-size: 36px;
    font-family: Georgia, serif;
    text-shadow: 1px 1px 0px #fff;
    text-align: center;
}

h2 {
    color: #666;
    font-size: 10px;
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    font-weight: normal;
    text-align: center;
    letter-spacing: 6px;
}

#content {
    margin: 100px auto 0;
    text-align: center;
}

Wie ist das Ergebnis bis jetzt?
Demo ohne den Effekt durch den Bild-Overlay

Schritt 13 – HTML/CSS

Das eigentliche Ziel war und ist, den Bild-Overlay über das Foto zu legen und somit den gewünschten Effekt zu erzielen. Dazu bedarf es zunächst einiger Zeilen mehr im HTML-Code.

    <div id="main">

        <h1>Kreative Effekte mit Bild-Overlays</h1>
        <h2>Ein Tutorial von Simon Rimkus [webdemar]</h2>

        <div id="content">
            <div class="foto-wrap">
                <img src="foto.jpg" alt="foto" width="400" height="300" />
                <span class="img-overlay"><img src="img-overlay.png" alt="" width="420" height="320" /></span>
            </div>
        </div><!-- end content -->

    </div><!-- end main -->

Wie ist das Ergebnis bis jetzt?
Demo mit dem Effekt durch den Bild-Overlay

Schritt 14 – HTML/CSS

Ich habe nun das Foto und den Bild-Overlay in einen weitern div mit der Klasse foto-wrap eingebaut, um diese innerhalb dieses divs mit CSS absolut positionieren zu können. Das Stylesheet ist also um weitere Zeilen zu erweitern.

.foto-wrap {
    position: relative;
    width: 400px;
    margin: 0 auto;
}

.foto-wrap img {
    position: absolute;
    top: 0px;
    left: 0px;
    width: auto;
}

.foto-wrap span {
    position: absolute;
    top: -10px;
    left: -10px;
    width: auto;
}

Wie ist das Ergebnis bis jetzt?
Demo mit dem Effekt durch den Bild-Overlay

Schritt 15 – HTML/CSS

Der Bild-Overlay ist nun innerhalb des Container-divs mit der Klasse foto-wrap über dem eigentlichen Foto positioniert und verleiht ihm die gewünschten Effekte abgerundete Ecken und Schlagschatten.

Fazit

Dieser erste Teil des Tutorials macht hoffentlich deutlich, welche Möglichkeiten hinter dieser Technik stecken. Besonders im Bereich dynamischer Einbindung von Bildern macht der Effekt Sinn, da das Foto ja beliebig ausgetauscht werden kann und quasi automatisch ein paar Effekte verpasst bekommt.

Was kommt im zweiten Teil?

Im zweiten Teil werde ich diese Technik mit WordPress verknüpfen. Ich werde diesen Effekt auf Post-Fotos, die ich über Benutzerdefinierte Felder einbinde, in einem Loop automatisch anwenden. Außerdem zeige ich noch weitere Effekte, mit denen man normale Fotos etwas aufpeppen kann.

Relevante Links

• Demo ohne Overlay-Effekt
• Demo mit Overlay-Effekt
• Theme deLuxe – Live-Beispiel

Um mit WordPress einen weiteren Schritt in Richtung CMS zu machen, kann man die Widgets der Sidebar oder jeder anderen Widget-Area in einem WordPress-Theme abhängig vom Inhalt anzeigen lassen. Im folgenden Beispiel unterscheide ich zwischen Sidebars für Startseite, Seiten, Artikeleinzelansichten und Kategorien.

Warum verschachtelte Widget-Areas?

Verschachtelte Widget-Areas bieten eine große Flexibilität. Man hat damit die Möglichkeit bspw. verschiedene Sidebars abhängig davon anzuzeigen, wo der Benutzer sich auf der Website befindet.

In meinem Beispiel werde ich abfragen, ob sich der User auf der Startseite, auf einer Seite, in einer Artikeleinzelansicht oder in einer Kategorie befindet. Um nicht obligatorisch für alle Fälle eine eigene Sidebar anlegen zu müssen, erstelle ich außerdem eine allgemeine Sidebar, die immer dann angezeigt wird, wenn für den jeweiligen Unterbereich keine Widgets definiert wurden.

Sprungmarken

• Erstellen einer Widget-Area
• Ausgabe der Widgets im Theme
• Erstellen mehrerer Widget-Areas
• Verschachteln der Widget-Areas

Erstellen einer Widget-Area

Zum Definieren der Widget-Area benötige ich die Funktion register_sidebar() (s.a. WordPress Codex). Der Funktionsname ist dabei ein wenig irreführend, da man damit nicht nur Widget-Areas in Sidebars, sondern natürlich auch im Footer oder sonstwo in den Theme-Dateien erstellen kann.

Folgenden Code trage ich in die functions.php im Theme-Ordner ein, um zunächst die allgemeine Sidebar namens Sidebar zu erstellen.

Code für functions.php

<?php
register_sidebar(array(
'name' => 'Sidebar',
'before_widget' => '<div id='%1$s' class='%2$s'>',
'after_widget' => '</div>',
'before_title' => '<h3>',
'after_title' => '</h3>'));
?>

Bemerkung:
Das Format für die Widgets ist somit festgelegt. Die Widget-Sidebar wird nun im WordPress-Admin bereits (wie oben im Bild zu sehen) angezeigt.

Ausgabe der Widgets im Theme

Jetzt muss dem WordPress-Theme noch gesagt, werden wo diese Widget-Area, wenn sie Widgets enthält (aktiv ist), angezeigt werden soll (s.a. Widgetizing Themes von Automattic).

Für den Aufruf der Widget-Area im Theme (in meinem Beispiel in der sidebar.php) wird die Funktion dynamic_sidebar() (s.a. WordPress Codex) verwendet.

Code für sidebar.php

<div id='sidebar'>

<?php if ( !dynamic_sidebar() ) : ?>

    <!-- hier werden die Widgets angezeigt -->
    <p>Inhalt der Sidebar, wenn keine Widgets aktiv sind.</p>

<?php endif; // endif dynamic sidebar ?>

</div><!-- end sidebar -->

Bemerkung:
In diesem Code liegt meine Sidebar in einem div mit der ID sidebar. Wenn mindestens ein Widget aktiv ist, wird dieses innerhalb der if-Abfrage angezeigt.

Erstellen mehrerer Widget-Areas

In der functions.php lege ich nun auch die übrigen Widget-Areas an, die wir dann später in der Sidebar verschachteln wollen.

Wie schon angesprochen möchte ich eine allgemeine Sidebar erstellen, die immer dann angezeigt wird, wenn für den jeweiligen Unterbereich kein Widget aktiv ist. Außerdem definiere ich die extra Widget-Areas für Startseite, Seite, Artikeleinzelansicht und Kategorie.

Code für functions.php

<?php

// Sidebar Nr. 1 - Allgemein
register_sidebar(array(
'name' => 'Sidebar',
'before_widget' => '<div id='%1$s' class='%2$s'>',
'after_widget' => '</div>',
'before_title' => '<h3>',
'after_title' => '</h3>'));

// Sidebar Nr. 2 - Startseite
register_sidebar(array(
'name' => 'Sidebar-Home',
'before_widget' => '<div id='%1$s' class='%2$s'>',
'after_widget' => '</div>',
'before_title' => '<h3>',
'after_title' => '</h3>'));

// Sidebar Nr. 3 - Seite
register_sidebar(array(
'name' => 'Sidebar-Page',
'before_widget' => '<div id='%1$s' class='%2$s'>',
'after_widget' => '</div>',
'before_title' => '<h3>',
'after_title' => '</h3>'));

// Sidebar Nr. 4 - Artikeleinzelansicht
register_sidebar(array(
'name' => 'Sidebar-Post',
'before_widget' => '<div id='%1$s' class='%2$s'>',
'after_widget' => '</div>',
'before_title' => '<h3>',
'after_title' => '</h3>'));

// Sidebar Nr. 5 - Kategorie
register_sidebar(array(
'name' => 'Sidebar-Category',
'before_widget' => '<div id='%1$s' class='%2$s'>',
'after_widget' => '</div>',
'before_title' => '<h3>',
'after_title' => '</h3>'));

?>

Bemerkung:
Alle für mein Beispiel benötigten Widget-Sidebars sind nun angelegt. Um das Ganze übersichtlich zu halten, habe ich sinnvolle Namen vergeben und die Sidebars zur Übersicht nummeriert (das brauchen wir später noch).

Verschachteln der Widget-Areas

Nochmal zur Verdeutlichung: Es soll erreicht werden, dass, wenn wir uns bspw. in einer Artikeleinzelansicht (Post) befinden, abgefragt wird, ob für diesen Unterbereich Widgets aktiv sind. Wenn das der Fall ist, werden diese in der Sidebar ausgegeben, wenn nicht, wird die allgemeine Startseite angezeigt. Die gleiche Abfrage soll für die Unterbereiche Startseite, Seite und Kategorie gemacht werden.

Wo sich der Benutzer auf der Website befindet, kann ich mit folgenden Conditional Tags (s. a. WordPress Codex) abfragen:

• is_front_page()
• is_page()
• is_single()
• is_archive()

Parallel dazu muss ich herausfinden, ob eine bestimmte Widget-Area aktiv ist, d. h. ob ihr Widgets zugewiesen wurden. Das mache ich mit dem Conditional Tag is_active_sidebar().

Die verschiedenen Sidebars werden durch den Namen, die ID oder der Nummer identifiziert. Ich habe mir für die eindeutige Zuordnung durch die Nummer (Reihenfolge) entschieden.

• Nr. 1 = Sidebar Allgemein
• Nr. 2 = Sidebar Startseite
• Nr. 3 = Sidebar Seite
• Nr. 4 = Sidebar Artikeleinzelansicht
• Nr. 5 = Sidebar Kategorie

Code für sidebar.php

<div id='sidebar'>

<?php
    if(is_front_page() &amp;&amp; is_active_sidebar(2)) : dynamic_sidebar(2);
    elseif(is_page() &amp;&amp; is_active_sidebar(3)) : dynamic_sidebar(3);
    elseif(is_single() &amp;&amp; is_active_sidebar(4)) : dynamic_sidebar(4);
    elseif(is_archive() &amp;&amp; is_active_sidebar(5)) : dynamic_sidebar(5);

    else : 

        if (!dynamic_sidebar(1)) : ?>

    	<!-- hier werden die Widgets angezeigt -->
    	<p>Inhalt der Sidebar, wenn keine Widgets aktiv sind.</p>

        <?php endif; // endif dynamic sidebar ?>

<?php endif; // endif active sidebars ?>

</div><!-- end sidebar -->

In Worten bedeutet dieser Code:

Wenn der User auf der Startseite ist und die Sidebar Nr. 2 aktiv ist, dann zeige diese an. Wenn sich der User auf einer Seite bewegt und die Sidebar Nr. 3 aktiv ist, dann zeige diese an. Wenn sich der User in einer Artikeleinzelansicht bewegt und die Sidebar Nr. 4 aktiv ist, dann zeige diese an. Wenn eine Kategorie angezeigt wird und die Sidebar Nr. 5 aktiv ist, dann zeige diese an.

Wenn all das nicht der Fall ist, wird abgefragt, ob die allgemeine Sidebar Nr. 1 aktiv ist. Wenn auch das nicht der Fall ist, dann wird der Text Inhalt der Sidebar, wenn keine Widgets aktiv sind. angezeigt.

Verbesserungsvorschläge?

Da es sich meines Erachtens um ein interessantes Feature für WordPress-Themes handelt, würde ich mich über Verbesserungsvorchläge freuen, sollte jemand eine einfachere oder bessere Lösung haben. Da ich kein PHP-Experte bin, kann es sein, dass dieser Code evtl. noch effektiver gestaltet werden kann.

Fazit

Mit verschachtelten Widget-Areas kann man schon ein gutes Stück an Flexibilität in einem WordPress-Theme gewinnen und sich somit weiter in Richtung CMS bewegen. Das Beispiel ist natürlich beliebig erweiterbar, da man alle möglichen Abfragen für die Anzeige verschiedener Widget-Areas verwenden kann. Hier ist Kreativität gefragt.

Relevante Links

• register_sidebar() – WordPress Codex
• dynamic_sidebar() – WordPress Codex
• Conditional Tags – WordPress Codex
• Widgetizing Themes von Automattic

Inhalte von WordPress-Seiten werden immer komplexer und damit natürlich ihre Navigation. Eine schicke Sache für ein komplexes Navigationsmenü ist ein Dropdown-Menü. Eine Lösung, die ich gern verwende, ist das Superfish jQuery-Plugin von Joel Birch. Die Implementierung in WordPress ist nicht schwer.

Vor drei Wochen habe ich bereits ein Tutorial geschrieben, welches das Einfügen eines Superfish-Dropdown in eine normale Website erklärt. Wer also noch keine Erfahrung mit dem jQuery-Plugin hat, sollte dort mal einen Blick drauf werfen.

Grundlage für dieses Tutorial
Tutorial: jQuery Dropdown Menü mit Superfish

Einbindung des Superfish-Skriptes

Wie in dem vorherigen Tutorial, müssen wir zunächst das Skript des jQuery-Plugins im Head-Bereich der Website einbinden und aufrufen.

In einem WordPress-Theme bearbeiten wir dafür die Datei header.php. Wir setzen weiterhin voraus, dass sowohl die jQuery-Library (jquery-1.2.6.min.js), das Superfish-Skript (superfish.js) und das Superfish-Stylesheet (superfish.css) im Theme-Ordner im Unterordner /sf/ liegen.

<link rel='stylesheet' type='text/css' media='screen' href='<?php bloginfo('template_url'); ?>/sf/superfish.css' />
<script type='text/javascript' src='<?php bloginfo('template_url'); ?>/sf/superfish.js'></script>

Bemerkung:
Hiermit binden wir also sowohl das Stylesheet des Dropdown also auch das Javascript mit den richtigen Pfaden (/wp-content/themes/dein-theme/sf/) in den Head-Bereich ein.

Somit ist das Plugin für uns nun aufruf- und einsetzbar.

<script type='text/javascript'>
    $(document).ready(function() {
        $('ul.sf-menu').superfish();
    });
</script>

Bemerkung:
Mit diesem Aufrunf wird das Superfish-Plugin nun auf alle ungeordneten Listen mit der CSS-Klasse .sf-menu angewendet. Weitere Anpassungen des Plugins entnehmt bitte dem vorherigen Tutorial.

Superfish-Dropdown und wp_list_categories()

Für die Anzeige eines Dropdown-Menüs für Kategorien brauchen wir eine ungeordnete Liste (ul) aller Kategorien. Unterkategorien werden in verschachtelten Listen dargestellt (ul > li > ul etc.). WordPress stellt uns dafür die Funktion wp_list_categories() bereit.

Ein Aufruf könnte also wie folgt aussehen:

<ul id='cat-menu' class='sf-menu'>
    <?php wp_list_categories('title_li='); ?>
</ul>

Dieses Konstrukt würde nun schon ein ansehnliches Dropdown-Menü erzeugen. Um das Ganze zu verfeinern, kann man dem Menü noch einen Link zur Startseite hinzufügen.

<ul id='cat-menu' class='sf-menu'>
    <li class='cat_item<?php if(is_home()) echo ' current-cat'; ?>'><a href='<?php bloginfo('url'); ?>'>Startseite</a></li>
    <?php wp_list_categories('title_li='); ?>
</ul>

Bemerkung:
Wir haben auch hier alle Einflussmöglichkeiten, die uns die Funktion wp_list_categories() bietet.

Superfish-Dropdown und wp_list_pages()

Ein Menü für WordPress-Seiten mit dem Dropdown darzustellen, ist nun relativ einfach. Mit der Funktion wp_list_pages() erhalten wir die erforderliche Listenstruktur für alle Seiten und Unterseiten.

<ul id='page-menu' class='sf-menu'>
    <?php wp_list_pages('title_li='); ?>
</ul>

Bemerkung:
Auch hier können wir natürlich den Startseiten-Menüpunkt einfügen (s.o.) und das Menü mit den Parametern der Funktion wp_list_pages() an unsere Anforderungen anpassen.

Superfish-Dropdown und wp_page_menu()

Mit der Version 2.7 haben uns die WordPress-Entwickler eine neue Funktion zum Aufruf eines Seitenmenüs gegeben – wp_page_menu().

Wie oben erwähnt, ist es für die Darstellung eines Superfish-Menüs nötig, der ungeordneten Liste (ul) des Seitenemenüs die CSS-Klasse .sf-menu zu geben. Die neue Funktion wp_page_menu() bietet uns zwar einige neue Möglichkeiten (z. B. Startseiten-Link einfügen), “verwährt” uns jedoch den direkten Zugriff auf den ul-Tag der Liste.

Der Aufruf sieht bspw. wie folgt aus:

<?php wp_page_menu('show_home=1&include=1,2,4,7&menu_class=page-navi&title_li='); ?>

Bemerkung:
Wir können u.a. eine CSS-Klasse vergeben (menu_class). Jedoch wird diese Klasse auf den um die Liste (ul) erzeugten div-Container angewendet.

Der Output der Funktion würde etwa wie folgt aussehen:

<div class='page-navi'>
	<ul>
		<li class='current_page_item'><a href='#'>Home</a></li>
		<li class='page_item page-item-1'><a href='#' title='Seite1'>Seite1</a></li>
		<li class='page_item page-item-2'><a href='#' title='Seite2'>Seite2</a></li>
		<li class='page_item page-item-3'><a href='#' title='Seite4'>Seite4</a></li>
		<li class='page_item page-item-3'><a href='#' title='Seite7'>Seite7</a></li>
	</ul>
</div>

Bemerkung:
Nun haben wir zwar eine Liste innerhalb eines div-Containers und für CSS-Formatierungen ist diese Verschachtelung natürlich kein Problem. Für unser Dropdown brauchen wir aber auf jeden Fall die Klasse .sf-menu auf dem ul-Tag.

Der Liste in wp_page_menu() eine Klasse zuteilen

Mit einer kleinen Erweiterung in der functions.php unseres WordPress-Themes können wir die Funktion wp_page_menu() durch einen WordPress-Filter schicken. Mit der PHP-Funktion preg_replace suchen wir uns den ersten(!) ul-Tag im Output unseres Seitenmenüs und erweitern diesen um eine ID und eine Klasse. Ian Steward von ThemeShaper hat diese Lösung vorgestellt.

// Add ID and CLASS attributes to the first <ul> occurence in wp_page_menu
function add_menuclass($ulclass) {
return preg_replace('/<ul>/', '<ul id='nav' class='something-classy'>', $ulclass, 1);
}
add_filter('wp_page_menu','add_menuclass');

Bemerkung:
Mit diesem kleinen Code-Schnipsel in der functions.php ist es nun ohne Probleme möglich, auch in der neuen wp_page_menu-Funktion unsere Klasse .sf-menu an die ungeordnete Liste (ul) weiterzugeben.

Fazit

Wir sehen also, es ist nicht weiter schwierig, ein Superfish-Dropdown-Menü in einer WordPress-Navigation zu nutzen, da wir lediglich eine Klasse vergeben müssen. Was etwas mehr Arbeit bereitet, ist die Anpassung des Stylesheets an das Layout der Seite. Aber auch das ist mit Geduld und Spucke ohne Weiteres zu schaffen

Relevante Links

• Superfish – Suckerfish on ‘roids
• Tutorial: jQuery Dropdown Menü mit Superfish
• Funktion wp_page_menu()
• Adding Class To The WordPress Page Menu
• PHP-Funktion preg_replace()
• Superfish jQuery Menu IE z-index Bug (English)

Die Lokalisierung / Übersetzung von WordPress-Themes ist eine von mir bisher sträflich wenig beachtete Funktion von WordPress. Dabei kann man mit einem relativ geringen Mehraufwand einen gehörigen Mehrwert in Sachen Interantionalisierung von Themes schaffen.

Warum lokalisieren?

Die Vorteile, den kleinen Mehraufwand bei der Erstellung eines WordPress-Themes in Kauf zu nehmen und dieses zu lokalisieren, liegen auf der Hand. Mit gesonderten Sprachdateien lässt sich das Theme unabhängig vom Quellcode, den man dafür dann nicht mehr anrühren muss, in beliebig viele Sprachen übersetzen.

Die WordPress-Installation selbst ist in Sachen Intarnationalisierung und Übersetzung schon weit gediehen und es gibt bereits unzählige Übersetzungen für den WordPress-Admin. Dann sollten wir beim Theme nicht aufhören.

WordPress verwendet GetText:

Um WordPress-Themes zu lokalisieren verwendet WordPress eine Übersetzungsanwendung namens GetText. Mit dieser Anwendung ist es relativ einfach, WordPress zusagen, was wo und womit übersetzt werden soll. Mehr dazu im Detail.

HTML-Strings übersetzbar machen:

Nehmen wir an, wir wollen in userem Theme einen Titel der Sidebar übersetzen. Dort steht im Quellcode folgendes:

<h4>Recent Articles</h4>

Um diesen HTML-String nun per GetText übersetzbar zu machen, müssen wir ihn in einen GetText-Call packen, den viele Theme-Designer von Euch sicherlich schon gesehen haben und der wie folgt aussieht:

<h4><?php _e('Recent Articles', my_theme_name); ?></h4>

Bemerkung:
Hiermit rufen wir die GetText-Funktion _e() auf und sagen ihr, was womit übersetzt werden soll und dass die Übersetzung an dieser Stelle ausgegeben werden soll (PHP: echo). Der erste Parameter in der Klammer sagt, was übersetzt werden soll und der zweite (my_theme_name) sagt WordPress, wo die Übersetzung zu finden ist (dazu später mehr),

GetText in WordPress-Funktionen:

Sicherlich sind Euch auch schon WordPress-Funktionen bekannt, in denen verschiedene Strings verarbeitet werden. Ein Beispiel ist der Aufruf der Anzahl der Kommentare:

<?php comments_number(__('No comments',my_theme_name), __('One comment',my_theme_name), __( '% comments',my_theme_name) );?>

Bemerkung:
In der Funktion comments_number() können wir drei Strings für drei mögliche Fälle übergeben (kein, 1 und x Kommentare). Wie ihr vielleicht seht, rufen wir jedoch jetzt die GetText-Funktion __() auf. Auch diese sagt WordPress was womit übersetzt werden soll, doch nun wird die Übersetzung an dieser Stelle nicht ausgegeben (PHP: kein echo), sondern kann als String von PHP weiterverarbeitet werden.

Text-Domains:

Der Name ist ein wenig irreführend. Es geht um den zweiten Parameter in den GetText-Calls (my_theme_name). Dieser ist optional und hilft WordPress die richtige Übersetzung zu finden. Es kann nämlich vorkommen, dass z. B. in einem Plugin, das wir verwenden, der gleiche String übersetzt werden soll. Mit unserer eindeutigen Text-Domain können wir klar bestimmen, welche Übersetzung gewählt werden soll. Die Text-Domain kann der Theme-Name sein, mit dem man auch den Theme-Ordner benannt hat (z. B. ‘decoder’ oder ‘my_theme_name’).

Vorbereiten und Erstellen der Sprachdatei:

Angenommen wir haben jetzt überall in unseren Theme diese zu übersetzenden Strings verteilt. Als nächstes wollen wir diese in einer Liste ausgeben, um sie weiterverarbeiten zu können.

PHP to .po extractor

Diese Liste, mit der wir auch die Übersetzung machen ist eine .po-Datei (Portable Object). Um nun aus den php-Dateien unseres Themes die Liste in der .po-Datei zu erstellen, gibt es PHP to .po extractor, mit denen wir einzelne Dateien aber auch Zip-Archive verarbeiten können. Dieser sucht alle Strings, die in _e() und __() Funktionen gepackt sind und gibt uns die .po-Datei zurück.

Übersetzen aller Strings in der .po-Datei:

Um .po-Dateien verarbeiten zu können, solltet Ihr Euch das Programm Poedit herunterladen. Mit diesem Programm lassen sich die Übersetzungen einfach und übersichtlich anfertigen. Beim Abspeichern unserer .po-Datei wird automatisch eine .mo-Datei erstellt, die letztlich die Sprachdatei ist, die WordPress benötigt. Die .po-Datei ist sozusagen nur die Bearabeitungsdatei.

Sprachdateien bearbeiten mit Poedit

Wichtig beim Erstellen der Sprachdateien sind noch die Sprach- und Ländercodes, mit denen wir die Sprachfiles benennen. Eine Sprachdatei für Deutsch aus Deutschland müsste also de_DE.po / de_DE.mo heißen. Für Schweizer Deutsch dementsprechend de_CH.po / de_CH.mo.

Laden der Text-Domain:

Wenn wir die .po/.mo-Dateien in unserem Theme-Ordner platziert haben, sagen wir WordPress, dass in unserem Theme eine Übersetzung geladen werden soll.

<?php load_theme_textdomain(my_theme_name); ?>

Bemerkung:
Diesen Aufruf platzieren wir am besten in der header.php, da diese bei jedem Seitenaufruf angesprochen wird.

Wenn WordPress nun das Sprachfile für die Sprache findet, die in der wp-config.php angegeben ist, wird das Theme mit allen Übersetzungen richtig angezeigt.

define ('WPLANG', 'de_DE');

// edit:

Alternative per Plugin:

Wenn einem das Installieren von Poedit und das externe Scannen der PHP-Dateien zum umständlich ist, kann man das Ganze auch WordPress-intern lösen. Das WordPress-Plugin Codestyling Localization scheint mir dafür eine starke Alternative zu sein. Ich habe es selbst noch nicht getestet, werde das aber auf jeden Fall nachholen.

Danke an sokai für den Tipp!

// end edit;

Fazit:

Die Lokalisierung von WordPress-Themes sollte für Theme-Autoren zum Standard gehören. Wenn man diese Routine einmal durchlaufen ist, hält sich der Mehraufwand tatsächlich in Grenzen und das Theme wird dem internationalen Charakter von WordPress gerecht.

Relevante Links:

• WordPress Codex Translating WordPress
• WordPress Codex WordPress in You Language
• Poedit zum Verarbeiten von .po-Dateien
• PHP Text-Scanner zum Erstellen der .po-Dateien
• How to localize WordPress themes and plugins with GetText
• WordPress Themes lokalisieren /// ZyBlog

Das für mich beste Skript, um dynamische Dropdown-Menüs zu erzeugen, ist das jQuery-Plugin von Joel Birch. Durch zahlreiche Parameter können wir uns das Multi-Level-Menü mit Leichtigkeit in Aussehen und Funktion unseren Anforderungen anpassen. Die Einbindung ist keineswegs schwer.

Auch auf diesem Blog habe ich das Superfish Dropdown-Menü von Joel Birch erfolgreich im Einsatz. Das Menü ist beliebig erweiterbar, es können also unendlich viele Unterebenen dargestellt werden.

IE Problems?
Superfish jQuery Menu IE z-index Bug (English)

Einbindung von Superfish in eine Website:

• Herunterladen des Skriptes – Superfish
• Einbinden des Stylesheets und des Javascript-Aufrufes in den Head-Bereich der Website
• Aufrufen der Superfish-Funktion im Head-Bereich der Website

<link rel='stylesheet' type='text/css' media='screen' href='superfish.css' />
<script type='text/javascript' src='superfish.js'></script>

Bemerkung:
Im Head-Bereich unserer Website binden wir das Stylesheet ein und rufen das Superfish-Javascript auf. Bitte beachten! Der Pfad muss möglicherweise angepasst werden. In obigem Beispiel gehen wir davon aus, dass das Website-Dokument, das Stylesheet und das Javascript auf einer Ordnerebene liegen.

<script type='text/javascript'>
    $(document).ready(function() {
        $('ul.sf-menu').superfish();
    });
</script>

Bemerkung:
Ebenso im Head-Bereich unseres Dokuments rufen wir nun die Superfish-Funktion mittels Javascript auf. Hierbei wird gesagt, dass das Superfish-Menü auf eine ungeordnete Liste ul mit der Klasse .sf-menu angewendet werden soll.

Anpassen der Menü-Parameter:

Wie schon angesprochen, lässt uns Joel Birch bei dem Aufruf der Superfish-Funktion zahlreiche Optionen die Funktionsweise des Dropdown-Menüs zu beeinflussen.

Folgende Parameter stehen uns zur Verfügung:

$.fn.superfish.defaults = {
    hoverClass:    'sfHover',          // the class applied to hovered list items
    pathClass:     'overideThisToUse', // the class you have applied to list items that lead to the current page
    pathLevels:    1,                  // the number of levels of submenus that remain open or are restored using pathClass
    delay:         800,                // the delay in milliseconds that the mouse can remain outside a submenu without it closing
    animation:     {opacity:'show'},   // an object equivalent to first parameter of jQuery’s .animate() method
    speed:         'normal',           // speed of the animation. Equivalent to second parameter of jQuery’s .animate() method
    autoArrows:    true,               // if true, arrow mark-up generated automatically = cleaner source code at expense of initialisation performance
    dropShadows:   true,               // completely disable drop shadows by setting this to false
    disableHI:     false,              // set to true to disable hoverIntent detection
    onInit:        function(){},       // callback function fires once Superfish is initialised – 'this' is the containing ul
    onBeforeShow:  function(){},       // callback function fires just before reveal animation begins – 'this' is the ul about to open
    onShow:        function(){},       // callback function fires once reveal animation completed – 'this' is the opened ul
    onHide:        function(){}        // callback function fires after a sub-menu has closed – 'this' is the ul that just closed
};

Der Aufruf der Superfish-Funktion im Head-Bereich lässt sich nun beispielsweise wie folgt erweitern:

<script type='text/javascript'> 

    $(document).ready(function() {
        $('ul.sf-menu').superfish({
            delay:       1000,                            // one second delay on mouseout
            animation:   {opacity:'show',height:'show'},  // fade-in and slide-down animation
            speed:       'fast',                          // faster animation speed
            autoArrows:  false,                           // disable generation of arrow mark-up
            dropShadows: false                            // disable drop shadows
        });
    }); 

</script>

Bemerkung:
Mit diesen Parametern bestimmen wir also, dass das Dropdown eine Sekunde nach Mouseout ausgeblendet, eine leichte Einblendung über Transparenz und ein Slide-Down-Effekt mit schneller Geschwindigkeit haben soll. Außerdem werden keine Pfeile (wenn Unterpunkte vorhanden) angezeigt und kein Menüschatten erzeugt. Ihr seht bereits, was alles mit diesem Skript möglich ist.

Verschiedene Arten des Superfish-Menüs:

Neben den Optionen für Animationen und Geschwindigkeiten gibt es verschiedene Arten des Dropdown-Menüs.

1. Basic Style – horizontales Menü mit Dropdowns:

horizontale Menüleiste mit Dropdowns

Wie der Name schon sagt, ist der Basic Style die einfachste Form des Superfish-Menüs.

2. Vertical Style – vertikales Menü mit Dropdowns zur Seite:

vertikales Menü mit Dropdowns zur Seite

Um ein vertikales Menü anzuzeigen, brauchen wir lediglich ein zusätzliches Stylesheet einbinden und der ungeordneten Liste ul unseres Menüs mit der Klassen .sf-menu eine weitere Klasse .sf-vertical hinzufügen:

<link rel='stylesheet' type='text/css' media='screen' href='superfish.css' />
<link rel='stylesheet' type='text/css' media='screen' href='superfish-vertical.css' />

<ul id='menu' class='sf-menu sf-vertical'>
    <li><a href='#'>Menu Item</a>
        <ul>
            <li><a href='#'>Submenu Item</a></li>
            <li><a href='#'>Submenu Item</a></li>
            <li><a href='#'>Submenu Item</a></li>
        </ul>
    </li>
    <li><a href='#'>Menu Item</a></li>
    <li><a href='#'>Menu Item</a></li>
</ul>

3. Nav-bar Style – doppelte Menüleiste mit Dropdowns:

doppelte Menüleiste mit Dropdowns

Der Nav-bar Style ist ebenfalls sehr interessant. Er bietet eine doppelte Menüleiste, bei der ab der dritten Ebene Dropdowns angezeigt werden. Ebenfalls wird der Pfad zur aktuellen Seite im Menü wiedergegeben.

Auch hier muss nur das entsprechende zusätzliche Stylesheet eingebunden werden und die weitere Klasse .sf-navbar an die Liste weitergegeben werden.

<link rel='stylesheet' type='text/css' media='screen' href='superfish.css' />
<link rel='stylesheet' type='text/css' media='screen' href='superfish-navbar.css' />

<ul id='menu' class='sf-menu sf-navbar'>
    <li><a href='#'>Menu Item</a>
        <ul>
            <li><a href='#'>Submenu Item</a></li>
            <li><a href='#'>Submenu Item</a></li>

            <li><a href='#'>Submenu Item</a></li>
        </ul>
    </li>
    <li><a href='#'>Menu Item</a></li>
    <li><a href='#'>Menu Item</a></li>
</ul>

4. with Supersubs – Dropdown-Menü mit extralangen Unterpunkten:

Dropdown-Menü mit extralangen Unterpunkten

Die Option Supersubs bietet die Möglichkeit dynamisch auf besonders lange Unterpunkte zu reagieren, um Zeilenumbrüche im Menü zu vermeiden.

Um Supersubs einzubinden, müssen wir ein zusätzliches Javascript integrieren und den Aufruf der Superfish-Funktion etwas erweitern.

<script type='text/javascript' src='superfish.js'></script>
<script type='text/javascript' src='supersubs.js'></script>

<script type='text/javascript'> 

    $(document).ready(function(){
        $('ul.sf-menu').supersubs({
            minWidth:    12,   // minimum width of sub-menus in em units
            maxWidth:    27,   // maximum width of sub-menus in em units
            extraWidth:  1     // extra width can ensure lines don't sometimes turn over
                               // due to slight rounding differences and font-family
        }).superfish();  // call supersubs first, then superfish, so that subs are
                         // not display:none when measuring. Call before initialising
                         // containing tabs for same reason.
    }); 

</script>

Formatierung mit CSS:

Blau ist hübsch, aber nicht jedermanns Sache und nicht immer zum Rest der Website passend. Die Anpassung des Aussehens über CSS ist übersichtlich gestaltet und kann in folgenden Dateien vorgenommen werden:

• superfish.css
• superfish-vertical.css (bei Vertical Stlye)
• superfish-navbar.css (bei Nav-bar Stlye)

Support:

Sollte man Probleme mit der Einbindung und Anwendung von Superfish haben, kann man sich in die jQuery Mailing List eintragen und sein Anliegen dort kundtun.

Sowie Joel etwas Zeit hat, hilft er persönlich weiter, ansonsten tummeln sich dort auch sonstige schlaue jQuery-Köpfe.

Ich selbst hatte letzte Woche ein Problem mit der Einbindung von Superfish in WordPress. Innerhalb eines Tages war das Problem nach einigem Hin- und Her-Gemaile (tolles Wort!) gelöst.

A big big thanks to Joel for awesome support!

Fazit:

Das Superfish jQuery-Dropdown-Menü bringt eine unheimliche Vielfalt an Features mit sich. Wenn man sich auch nur ein wenig mit Einbindung von Skripten und XHTML/CSS auskennt, ist die Anwenung dieses Plugins überhaupt kein Problem und bietet einen beachtlichen Mehrwert für eine Website, ein Template oder WordPress-Theme.

Relevante Links:

• Superfish – Suckerfish on ‘roids
• Download – Superfish
• Support in der jQuery Mailing List
• Superfish jQuery Menu IE z-index Bug (English)
• Tutorial: jQuery Dropdown Menü für WordPress

Im Webdesign allgemein und in WordPress-Themes ist es sehr praktisch, automatische Thumbnails eines Fotos zu erstellen und es in der Größe an das Layout anzupassen. So kann man z. B. auf der Startseite einen Thumb anzeigen und im Post selbst eine Großansicht – und alles mit einer Bilddatei.

Das Ganze hört sich kompliziert an, ist aber dank nützlicher Open-Source-Skripte heller Köpfe relativ einfach in eine Website zu integrieren.

Besagtes Skript, das ich häufig zum Image-Resizing nehme, heißt TimThumb und wurde ursprünglich für das WordPress-Theme Mimbo Pro geschrieben und letztes Jahr als Open-Source-Projekt für jedermann zugänglich gemacht.

Dem Skript TimThumb muss man lediglich sagen, welche Datei bearbeitet und wie diese ausgegeben werden soll. Folgende Parameter stehen dafür zur Verfügung.

Parameter:

• w: width – Breite des Bildes
• h: height – Höhe des Bildes
• zc: zoom crop (0 oder 1) – Beschneidung des Bildes (wenn nötig)
• q: quality (default ist 75 und max ist 100) – Ausgabequalität

Anwendung

<img src='/skripte/timthumb.php?src=/img/bild.jpg&h=180&w=180&zc=1&q=95' alt='' />

Bemerkung:
Im obigen Beispiel nehmen wir an, dass wir z. B. in einer index.html ein Bild eingefügt werden soll. Der Bilderordner ist /img/ und das Skript TimThumb liegt im Ordner /skripte/. Wir sprechen das Skript an und übergeben die nötigen Parameter.

Installation

• Herunterladen des Skriptes – TimThumb
• Erzeugen des Ordners /cache/ – muss im selben Ordner liegen wie timthumb.php und volle Schreibrechte (777) besitzen
• Auch der Ordner, der TimThumb enthält, sollte volle Schreibrechte (777) besitzen
• Optional: Um die Performance zu verbessern, kann die .htaccess noch erweitert werden

Automatische Thumbnails in einem WordPress-Theme

Unser Ziel ist es nun, einen Post mit einer Bilddatei zu erstellen und zum Einen einen Thumbnail und zum Anderen eine Großansicht dieses Bildes zu erzeugen.

Voraussetzungen sind:

• Das Bild liegt im Ordner /img/ im Hauptverzeichnis der WordPress-Installation
• timthumb.php liegt im Order (Chmod 777) /skripte/ des WordPress-Theme-Ordners
• Der Ordner /skripte/ enthält den Unterordner (Chmod 777) /cache/

Damit wir das Bild mit dem Skript erfassen können, legen wir uns einen Post mit einem Spezialfeld namens ‘post-img’ an. Als Wert bekommt dieses Spezialfeld die URL des zu verarbeitenden Bildes (z. B. ‘http://webdemar.com/img/bild.jpg’).

Den Spezialfeld des Posts können wir innerhalb des Loops in unserem WordPress-Theme ausgeben – z. B. in der home.php (genauer möchte ich darauf an dieser Stelle nicht eingehen, da dies zu weit führen würde).

<?php echo get_post_meta($post->ID, 'post-img', true) ?>

Bemerkung:
Mit diesem Aufruf würde die URL des Bildes ausgegeben. Das machen wir uns zunutze und konstruieren damit die erforderliche Ausgabe (s. Anwendung) zum Ansprechen von TimThumb.

<img src='<?php bloginfo('template_url'); ?>/skripte/timthumb.php?src=<?php echo get_post_meta($post->ID, 'post-img', true); ?>&w=120&h=80&zc=1&q=95' width='120' height='80' alt='<?php the_title(); ?>' />

Bemerkung:
Hiermit geben wir das Bild, das wir im Spezialfeld des Posts angegeben haben, als Thumbnail 120x80px, wenn nötig zugeschnitten und in einer Qualität von 95 (von 100) aus.

Breite und Höhe lassen sich nun beliebig anpassen, so dass z. B. in der single.php des Themes dasselbe Bild mit einer Größe von 240x160px ausgegeben werden kann. Wichtig ist dabei, dass width und height des img-Tags ebenfalls angepasst werden.

Man kann das Ganze nun noch einen Schritt verbessern, indem man vor dem Aufruf des Bildes mit der URL aus dem Spezialfeld zunächst abfragt, ob dieses auch vorhanden ist. Wenn das Spezialfeld in einem Post leer bleibt, würde sonst ein img-Tag ohne src erzeugt.

<?php if(get_post_meta($post->ID, 'post-img', true)) { ?>
    <img src='<?php bloginfo('template_url'); ?>/skripte/timthumb.php?src=<?php echo get_post_meta($post->ID, 'post-img', true); ?>&w=120&h=80&zc=1&q=95' width='120' height='80' alt='<?php the_title(); ?>' />
<?php } // endif post-img ?>

Bemerkung:
Bei einem leeren Spezialfeld wird nun einfach nichts ausgegeben.

Fazit:

Mit TimThumb lassen sich also automatisch über das Theme gesteuert beliebig viele Thumbnails eines einzigen Bildes erstellen.

Relevante Links:

• Google-Code Projektseite von TimThumb
• Quellcode timthumb.php
• Release-Post von Darren Hoyt
• Support-Forum für TimThumb

Sliding-Content sieht man im Webdesign und WordPress Themes heute sehr häufig. Durch jQuery und kluge Köpfe, die Plugins dafür schreiben, ist dies auch ohne große Programmierkenntnisse möglich. In diesem Tutorial beschreibe die Verwendung von jFlow – ein einfach zu verwendendes jQuery-Plugin.

Was soll am Ende dabei herauskommen?

Damit wir wissen, worum es geht, sollten wir uns zunächsts erstmal ein › Beispiel ansehen.

Download jFlow 1.2

Die nötigen Dateien laden wir uns im Gesamtpaket jFlow 1.2 herunter.

Einbinden der Skripte

Zunächst legen wir uns eine neue html-Datei an (z. B. index.html) und binden im Head-Bereich dieser Datei die nötigen Skripte ein.

Als erstes laden wir die jQuery-Library per Google-Api. Ebenfalls könnte man sich aber auch die letzte jQuery-Version herunterladen und diese einbinden.

<script language='javascript' type='text/javascript'
src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js'></script>

Der zweite Schritt ist das Einbinden des jFlow-Skriptes. In diesem Beispiel liegt die index.html im Root-Verzeichnis und das Skript im Order /js.

<script src='js/jquery.flow.1.2.js' type='text/javascript'></script>

Anlegen des Contents

Wir erzeugen drei div-Container, die nachher geslidet werden sollen. In jedem Slide ist ein Bild (aus dem Ordner /img), eine Überschrift und ein wenig Text enthalten.

Diese drei divs packen wir der Ordnung halber in einen weiteren div mit der ID content-slider. So können wir das Ganze über CSS besser formatieren und positionieren und auch für jFlow ist dies wichtig.

<div id='content-slider'>

  <div id='slide1'>
    <img src='img/slide1.jpg' alt='slide1' width='425' height='282'/>
    <h1>Slide1</h1>
    <p>Inceptos elit, vitae et. Eget eget nec, lectus nisl, vehicula est feugiat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad </p>
  </div>

  <div id='slide2'>
    <img src='img/slide2.jpg' alt='slide2' width='425' height='282'/>
    <h1>Slide2</h1>
    <p>Inceptos elit, vitae et. Eget eget nec, lectus nisl, vehicula est feugiat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad </p>
  </div>

  <div id='slide3'>
    <img src='img/slide3.jpg' alt='slide3' width='425' height='282'/>
    <h1>Slide3</h1>
    <p>Inceptos elit, vitae et. Eget eget nec, lectus nisl, vehicula est feugiat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad </p>
  </div>

</div><!-- end content-slider -->

Wir haben also jetzt die Skripte eingebunden und unseren Content angelegt. Als nächstes werden wir jFlow nun beibringen, wo unser Content liegt und wie er geslidet werden soll.

Im Head der Datei machen wir daher folgende Angaben:

<script type='text/javascript'>
$(function() {
	$('div#content-slider').jFlow({
	slides: '#slides',
	width: '425px',
	height: '425px'
	});
});
</script>

Bemerkung:
Wir sagen dem Skript hiermit, dass unser Content im Container mit der ID content-slider liegt, dass die Slides innerhalb des Containers slides (müssen wir noch anlegen) liegen und welche Maße dieser haben soll.

In unserer Beispieldatei legen wir also innerhalb des Containers mit der ID content-slider einen weiteren Container slides um unsere Content-divs. Außerdem lege ich innerhalb von div#content-slider noch einen weiteren mit der ID panel an. Dort kommen unsere Steuerelemente (vor, zurück etc.) hinein.

<div id='content-slider'>

  <div id='panel'>

    <div id='controller'>
      <span class='jFlowControl'>Slide #1</span> |
      <span class='jFlowControl'>Slide #2</span> |
      <span class='jFlowControl'>Slide #3</span>
    </div>
    <div id='prev-next'>
      <img src='img/prev.png' alt='prev' width='16' height='16' class='jFlowPrev'/>
      <img src='img/next.png' alt='next' width='16' height='16' class='jFlowNext'/>
    </div>

  </div><!-- end panel -->

  <div id='slides'>

    <div id='slide1'>
      <img src='img/slide1.jpg' alt='slide1' width='425' height='282'/>
      <h1>Slide1</h1>
      <p>Inceptos elit, vitae et. Eget eget nec, lectus nisl, vehicula est feugiat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad </p>
    </div>

    <div id='slide2'>
      <img src='img/slide2.jpg' alt='slide2' width='425' height='282'/>
      <h1>Slide2</h1>
      <p>Inceptos elit, vitae et. Eget eget nec, lectus nisl, vehicula est feugiat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad </p>
    </div>

    <div id='slide3'>
      <img src='img/slide3.jpg' alt='slide3' width='425' height='282'/>
      <h1>Slide3</h1>
      <p>Inceptos elit, vitae et. Eget eget nec, lectus nisl, vehicula est feugiat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad </p>
    </div>

  </div><!-- end slides -->

</div><!-- end content-slider -->

Bemerkung:
Im Container div#panel haben wir jetzt den controller mit drei Spans, die uns als Links zu den verschiedenen Slides dienen. Achtung! Die Anzahl der Spans muss immer der Anzahl der Sliding-Div (in unserem Beispiel 3) übereinstimmen, sont funktioniert jFlow nicht richtig. Im div prev-next finden wir die Bilder (kann auch Text sein), um vor oder zurück zu sliden. Durch die Klassen jFlowPrev und jFlowNext weiß jFlow, was bei einem Klick darauf zu tun ist.

Ab jetzt funkioniert unser Sliding-Content bereits und wir können uns mit CSS daran austoben. Da dies jeder anders macht und mag, gehe ich auf die Formatierungen nicht im Einzelnen ein.

Download Beispiel › ansehen

Wer mag, kann sich die Beispiele in dem Paket jFlow 1.2 ansehen und anpassen oder sich das Beispiel aus diesem Tutorial herunterladen.

Relevante Links:

• jFlow 1.2 – The Ultra-lightweight Fluid Content Slider for jQuery
• Offizielle Website von jQuery
• Beispiel aus diesem Tutorial