Durch diese Grundschritte wird die Sicherheit Ihres WordPress-Blogs deutlich erhöht.

1) Nicht das Adminkonto verwenden

Das Standard-Benutzerkonto, das bei jeder Installation von WordPress erstellt wird, ist das Adminkonto. Bedauerlicherweise ist dieser Umstand dem Rest der Welt, zu dem auch Hacker gehören, ebenso bekannt, und auf Ihre Website kann mühelos ein Wörterbuchangriff gestartet werden, um Ihr Passwort zu erraten. Wenn ein Hacker Ihren Benutzernamen kennt, ist die halbe Schlacht bereits gewonnen. Deshalb ist es höchst empfehlenswert, den Benutzernamen des Adminkontos zu löschen oder zu ändern.
Um das Adminkonto zu entfernen, gehen Sie wie folgt vor:

• Erstellen Sie ein neues WordPress-Benutzerkonto. Verwenden Sie einen ganz einmaligen Benutzernamen.
• Weisen Sie dem Konto die Administratorrolle zu.
• Melden Sie sich von WordPress ab, und melden Sie sich mit dem neu erstellten Konto wieder an.
• Löschen Sie das Adminkonto.

2) Geheimschlüssel verwenden

Ein Geheimschlüssel ist ein Hashing-Salt, das für Ihr Passwort verwendet wird und es sogar noch stärker macht. Geheimschlüssel werden in Ihrer wp-config.php-Datei bestimmt. Besuchen Sie einfach https://api.wordpress.org/secret-key/1.1 und lassen Sie sich einen Satz zufällig erstellter Geheimschlüssel erstellen. Kopieren Sie die 4 Geheimschlüssel in Ihre wp-config.php-Datei, und speichern Sie sie. Sie können diese Schlüssel jederzeit hinzufügen oder ändern. Das Einzige, was dabei geschieht, ist, dass alle derzeitigen WordPress-Cookies ungültig gemacht werden und Ihre Benutzer sich erneut anmelden müssen.

3) HTAccess-Schutz

Mit einer .htaccess-Datei können Sie Ihr wp-admin-Verzeichnis nach IP-Adressen sperren. Das bedeutet, dass nur von Ihnen angegebene IP-Adressen auf die URLs Ihres Admin-Dashboards zugreifen können. Das verhindert jeden Versuch, das Back-End Ihres WordPress anzugreifen. Erstellen Sie dazu einfach im wp-admin-Verzeichnis eine Datei namens .htaccess und fügen Sie Ihrer Datei folgenden Code hinzu, der xxx.xxx.xxx.xxx durch Ihre IP-Adresse ersetzt:

AuthUserFile /dev/null
AuthGroupFile /dev/null
AuthName "Admin"
AuthType Basic
order deny,allow
deny from all
allow from xxx.xxx.xxx.xxx

4) SSL-Anmeldung und Adminzugriff erzwingen

SSL (https) ist eine Methode zur Verschlüsselung von Daten, die von einer Website übertragen werden. Um auf einfache Weise die WordPress-Administration über SSL zu aktivieren (und zu erzwingen), müssen zwei Konstanten in der wp-config.php-Datei bestimmt werden. Bevor Sie diese Funktion verwenden, stellen Sie sicher, dass SSL auf Ihrem Server ordnungsgemäß eingerichtet ist:

define('FORCE_SSL_LOGIN', true);
define('FORCE_SSL_ADMIN', true);

5) Sicherheits-Plug-ins von WordPress installieren

Die Installation der nachfolgend empfohlenen Plug-ins dient dazu, Ihre Website vor Hackern und anderen Personen, die den Inhalt missbrauchen wollen, zu schützen:

• WP Security Scan – scannt Ihre Ordner-/Dateiberechtigungen und überprüft deren Korrektheit.
  Es zeigt außerdem, basierend auf Ihrer Konfiguration, andere sicherheitsrelevante Hinweise an.
• WordPress Exploit Scanner – durchsucht Ihre Quelldateien und den Inhalt von Datenbanken nach schädlichem Code.
• WordPress File Monitor – überwacht alle Quelldateien Ihrer WordPress-Installation und benachrichtigt Sie per E-Mail, wenn die Dateien geändert werden.
• Login Lockdown – sperrt alle Benutzer, die zu viele fehlgeschlagene Anmeldeversuche unternommen haben.

Ich hoffe, diese Info hilft!

ThemeShift schickt Dir in diesem Jahr ein kleines Geschenk und wünscht Dir damit eine Fröhliche Weihnacht und einen Guten Rutsch ins neue Jahr. Nutze beim Kauf den Rabatt-Code NAVIDAD und Du erhälst 30% auf alle WordPress-Themes von ThemeShift. Hol Dir Dein Theme noch in diesem Jahr und spare was das Zeug hält!

Dankeschön!

Ich möchte mich bei dieser Gelegenheit bei meinen bisherigen, momentanen und zukünftigen ThemeShift-Kunden (und auch allen anderen) bedanken, die es möglich gemacht haben, dass ThemeShift meinen Lebensunterhalt sichert. Dabei tue ich lediglich etwas, woran ich sehr viel Spaß habe… ich schraube WordPress-Themes. Dankeschön!

Weihnachtsgeschenk

Von jetzt an bis zum Ende des Jahres 2010 kannst Du beim Kauf von ThemeShift-Themes 30% sparen, wenn Du den Rabatt-Code NAVIDAD verwendest. Schau Dir die Themes in Ruhe an und mache Deinen ThemeShift noch in diesem Jahr.

→ zu den Themes

Endlich ist es soweit, dass ich Euch mein Portfolio WordPress-Theme deFolio vorstellen kann. Mit Custom Post Types, den neuesten Features von WordPress 3, jQuery-Slidern, Shortcodes und eigenen Widgets ist deFolio sehr komplex und flexibel. Die Startseite bspw. ist ein Widget-Bereich, der per Drag&Drop in Sekunden angepasst werden kann.

deFolio war ein gutes Stück Arbeit und es hat mich etwas länger gedauert als geplant. Aber es hat sich, so finde ich zumindest, gelohnt.

• deFolio – Theme-Info
• deFolio – Theme-Demo
• deFolio – Hilfe-Center

Theme-Features

Ein wichtiges Feature des Themes ist der Custom Post Type für Portfolio-Einträge. So hat man dafür eine separate Maske mit auf ein Portfolio abgestimmten Eingabefeldern. Auch auf der Website selbst werden diese Einträge dementsprechend anders dargestellt.

Die Startseite des Themes kann völlig frei gestaltet werden. So werden standardmäßig bloggleich die letzten Artikel angezeigt. Mit wenigen Handgriffen kann diese mit WordPress- und deFolio-Widgets völlig umgestaltet werden. Auch statische Seiten können als Startseite dienen und mit deFolio Seiten-Templates kombiniert werden.

Der jQuery-Slider kann in unendlich vielen Instanzen eingesetzt werden. So kann man diesen auf der Startseite die letzten Blog- oder Portfolio-Einträge anzeigen lassen und / oder auf Porfolio-Seiten eine interaktive Slider-Galerie präsentieren. Über Theme-Optionen und Benutzerdefinierte Felder hat man volle Kontrolle.

Selbstverständlich unterstützt deFolio die neues Features aus WordPress 3. Wenige Klicks sind nötig, um das Menü selbst zu organisieren oder einen eigenes Hintergrundbild zu verwenden.

Spezieller Dank!

Ein dickes DANKE geht an drei Jungs, die so nett waren mir ihre Meisterwerke für die deFolio Theme-Demo zu überlassen. Ihr solltet unbedingt einen Blick auf ihre Websites werden:

• André Kutscherauer – The art of 3D artist Andre Kutscherauer
• Jens Rydén – Graphic designer & photographer
• Daniel Kemper – SCHWARZWEISS-ANSICHTEN

Besonders für Leute, die gerade erst angefangen haben sich mit WordPress zu beschäftigen, ist es sicher sinnvoll zunächst mit kostenlosen WordPress-Themes einen Einstieg zu finden. Da es nicht immer leicht ist qualitative kostenlose Themes aufzuspüren, möchte ich Euch heute Padd Solutions ans Herz legen. Die sind schon lange im Geschäft und machen sehr ordentliche Arbeit.

Padd Solutions hat eine große Auswahl an optisch ansprechenden WordPress-Themes, auf die Ihr mal ein Auge werfen solltet. Es könnte sich lohnen.

Manganescent

→ Theme-Info | Theme-Demo

Masinop

→ Theme-Info | Theme-Demo

Scandiumity

→ Theme-Info | Theme-Demo

Argonoid

→ Theme-Info | Theme-Demo

Nitrogenate

→ Theme-Info | Theme-Demo

Für das Versenden von E-Mails aus einem Theme oder Plugin heraus stellt uns WordPress die Funktion wp_mail() zur Verfügung. Diese ist der PHP-Funktion für den Mail-Versand sehr ähnlich, vereinfacht jedoch z. B. das Hinzufügen von Anhängen und ist durch Filter leicht veränder- oder erweiterbar.

Anwendung

Wie gesagt, ist die Funktion wp_mail() seinem ursprünglichen PHP-Pendant mail() sehr ähnlich und wird Euch daher bekannt vorkommen.

<?php wp_mail( $to, $subject, $message, $headers, $attachments ); ?>

• $to: mehrere Adressen durch Kommas trennen oder in einem Array übergeben
• $subject: Betreff als Text-String
• $headers: zumindest From: My Name <myname@mydomain.com> erforderlich
• $attachments: Array von Pfaden anzuhängender Dateien

Beispiel

Ein funktionierendes Beispiel von wp_mail() wäre folgendes:

<?php

    $mail_to = 'empfaenger@email.de';
    $subject = 'Betreffendes';

    $message = 'Ich will keine Message, ich will lieber ne Massage!';

    $headers = 'From: Dein Name <absender@email.de>' . "\r\n\";
    $attachments = array(WP_CONTENT_DIR . '/uploads/file_to_attach.zip');

    wp_mail($mail_to, $subject, $message, $headers, $attachments);

?>

Wichtig ist hierbei zu wissen, dass zum korrekten Versenden der Nachricht zumindest der zusätzliche Header From: mit der Absenderadresse nötig ist.

HTML-Mails

Standardmäßig ist der Content-type der durch wp_mail() versendeten E-Mails reiner Text (text/plain). Es ist also erstmal kein HTML möglich.

Mit dem Filter wp_mail_content_type kann man den Content-type verändern und auf text/html setzen:

<?php

    function wdm_contenttype($content_type) {
        return 'text/html';
    }

    add_filter('wp_mail_content_type','wdm_contenttype');

?>

Relevante Links

• WordPress Codex: wp_mail()
• PHP Manual: mail()

Standardmäßig wird im Kopfbereich eines jeden Themes der Meta-Tag generator mit der Versionsnummer von WordPress ausgegeben. Nun kann es vorkommen, dass Theme-Designer diesen aus Sicherheits- oder anderen Gründen anpassen möchten. Im Folgenden zeige ich, wie man den Tag entfernen, verändern oder erweitern kann.

Kopfbereich

Sobald ein WordPress-Theme die Funktion wp_head() einsetzt (sollte zwingender Standard sein), wird im Kopfbereich head ein Meta-Tag mit Angabe der WordPress-Versionsnummer ausgegeben.

<meta name="generator" content="WordPress 3.0.1" />

Entfernen

In der Vergangenheit gab es immer wieder Aufrufe, diese Versionsnummer als Sicherheitsmaßnahme gegen gezielte Hackerangriffe auf WordPress zu entfernen. Alles Humbug sagen WordPress-Entwickler.

Wer diesen Meta-Tag dennoch loswerden möchte, kann folgenden Code in die functions.php des Themes kopieren:

remove_action('wp_head', 'wp_generator');

Verändern

Wenn man den Meta-Tag nicht komplett entfernen möchte, kann man ihm mit dem Filter the_generator verändern. So ließe sich z. B. nur die Versionsnummer entfernen:

function wdm_generator($generator) {
        return str_replace(' '.get_bloginfo('version'), '', $generator);
}
add_filter('the_generator', 'wdm_generator');

Erweitern

Machmal kann es nützlich sein, diese Angaben im Kopf des WordPress-Themes noch zu erweitern. Mit dem schon angesprochenen Filter the_generator lässt sich das einfach umsetzen. Um bspw. die Versionsnummer des Themes hinzuzufügen, kann man folgenden Code in die functions.php kopieren:

function wdm_generator($generator) {
    $generator .= "\r\n" . '<meta name="generator" content="Mein Theme 2.0" />';
    return $generator;
}
add_filter('the_generator', 'wdm_generator');

* "\r\n" dient lediglich dazu einen Zeilenumbruch im Quelltext zu erzwingen und ist optional.

Es war endlich wieder an der Zeit kreativ zu werden. Heute kann ich Euch mein neues Business WordPress Theme deSignum präsentieren. Ein wohldurchdachtes Theme mit vielen interessanten Features wie Custom Menus, jQuery-Effekten und vielen Layout-Optionen.

Nach meinem Umzug von den Kanaren nach Andalusien, viel Ärger mit meiner spanischen Lieblingsfirma Telefonica und den Updates aller meiner Themes (WordPress 3.0 etc.) könnte ich mit diesem Theme endlich wieder kreativ werden und frei von der Leber weg coden.

Theme-Features

deSignum ist ein ansprechendes, flexibles und wohldurchdachtes WordPress Theme für kleine Business-Websites, die ihren Service und/oder Produkte ansprechend präsentieren möchten.

Mit den neuesten WordPress-Features (Menüs, Hintergrund etc.), jeder Menge jQuery-Leckerlies, vielen Layout-Optionen und umfangreichen Shortcodes ist deSignum ein leicht anpassbares und professionelles WordPress-Theme.

• deSignum – Theme-Info
• deSignum – Theme-Demo
• deSignum – Hilfe-Center

Es hat mich aufgrund meines Umzugs einige Mühen und Umwege gekostet, aber nun darf ich Euch stolz mein neues Portfolio WordPress Theme deLucide vorstellen, das ich gestern auf ThemeShift.com veröffentlicht habe.

Theme-Features

Mit deLucide lässt sich sehr einfach auf ansprechende Weise jegliche Art von Portfolio darstellen. Neben dem obligatorischen Featured Content Slider hat das Theme außerdem einen jQuery Display Switcher, mit dem der Besucher der Website Artikellisten zwischen einem Listen- und einem Gitter-Layout umschalten kann.

Außerdem kommt deLucide von Haus aus mit einer höchst einfach zu bedienenden Galeriefunktion, mit der man in wenigen Schritten einen netten Showcase erstellen kann.

Natürlich gibt es noch zahlreiche andere Features. So unterstützt das Theme die neuen Features von WordPress 3.0. So kann man mit wenigen Klicks und per Drag&Drop sein eigenes Menü erstellen oder den Look von deLucide mit einem eigenen Hintergrundbild völlig verändern.

Weiteres dazu gibt es auf ThemeShift.com:

• deLucide – Theme Info
• deLucide – Theme Demo

WordPress ist schon von Haus aus gut dafür eingestellt, von Suchmaschinen gefunden zu werden. Das Standard Theme sowie die meisten kostenlosen Templates, besteht aus sauberen, gut für Maschinen lesbaren Code. Durch wenige Handgriffe im Theme, kannst Du Deinen Blog optimal für Suchmaschinen einrichten.

Den Title-Tag optimieren

Der Title-Tag, in der header.php, ist für die Suchmaschinenoptimierung einer der wichtigsten Faktoren. Es ist der Name des Dokuments und das erste was die Suchmaschine von deiner Seite lernt, hier sollten die Wörter stehen für die Du gefunden werden willst. Der Title im WordPress Default Theme war eine lange Zeit nicht wirklich optimal eingestellt, was jetzt aber behoben wurde und auch insbesondere im neuen Standard Theme Twenty Ten sehr schön gelöst ist.

Der Name deines Artikels sollte im Title-Tag vor dem Namen deines Blogs stehen, da Suchmaschinen den ersten Worte des Titels mehr Bedeutung schenken und es so auch für den Suchenden leichter zu erkennen ist, worum es auf deiner Seite geht. Sollte das in Eurem Theme noch nicht so sein, schlage ich vor es wie im derzeitigen Default Theme zu machen.

<title><?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?></title>

Wer möchte kann sich seinen Title-Tag aber auch noch differenzierter gestalten, je nach dem in welchem Bereich Deiner Webseite der Besucher sich gerade befindet. Startseite, Kategorien, Archive und beispielsweise die Suchresultate können verschieden angepasste Title-Tags besitzen:

<title><?php
if(is_single() || is_page()) {
  single_post_title(); echo ' | '; bloginfo( 'name' );
} else {

if(is_category() || is_archive()) {
  wp_title(''); echo ' auf '; bloginfo( 'name' );
} else {

if(is_front_page() || is_home()) {
  bloginfo('name'); echo ' | '; bloginfo( 'description' );
} else {

  wp_title(''); echo ' | by creative! ';

} } } ?></title>

Meta-Tags: Keywords & Description

Ebenfalls im Kopf eines HTML Dokuments befinden sich die Meta-Keywords und die Meta-Description. Diese waren früher sehr gut dafür geeignet, bessere Positionen bei den Suchmaschinen zu erlangen. Nachdem diese Methode allerdings, vor über 10 Jahren schon, ausgenutzt wurde, haben beide im Grunde überhaupt keinen Einfluss mehr auf Eure Rankings.

Dennoch sucht Google beispielsweise in eurer Meta-Description, um eine kleine Beschreibung für die Suchresultate zu generieren, findet Google dort nichts, wird meist eine relevante Stelle aus dem normalen Text gewählt. Wollt Ihr diese Elemente ohne Plugins direkt kontrollieren, könnt Ihr die WordPress Tags und das Feld Auszug (Excerpt) benutzen um diese Daten für jede Unterseite einzutragen und im Quellcode wieder auszugeben:

<?php if(is_home()) : ?>
 <meta name="description" content=" <?php bloginfo( 'description' ); ?> ">
<?php else : ?>
 <meta name="description" content=" <?php the_excerpt_rss(); ?> ">
<?php endif; ?>

<meta name="keywords" content="<?php
$posttags = get_the_tags();
if ($posttags) {
foreach($posttags as $tag) {
echo $tag->name . ' ';
}
}
?>">

Das ist eine der simpelste Möglichkeit, Tags und Description dynamisch im Template auszugeben. Auf der Frontpage wird die Blog Description verwendet und auf den Unterseiten die spezifische Beschreibung aus dem Excerpt-Feld. Dieser Eintrag muss, wie der Title in die header.php in den Head Bereich des Dokuments. Die kurze Beschreibung sollte nicht mehr als etwa 160 Zeichen haben, da sie sonst nichts in das kleine Feld unter den Suchresultaten bei Google passt.

URL-Struktur umschreiben

Die von WordPress erzeugten URLs haben normalerweise diese Form: domain.com/?p=126, können aber mittels mod_rewrite beliebig verändert werden. Dazu geht Ihr, im Admin Menü, auf den Bereich Einstellungen, auf die Seite Permalinks und wählt dort die gewünschte URL-Struktur aus. Ich persönlich wähle meist die möglichst einfachste Form aus, in dem ich im Feld Benutzerdefinierte Struktur nur /%postname%/ eingebe, was eine URLs in dieser Form erzeugt: domain.com/artikelname/.

Damit die Änderungen wirksam werden brauchst du die sogenannte .htaccess Datei, die man in der Regel selbst erstellen und hochladen muss. Du nimmst einen einfachen Text bzw. HTML Editor und erstellst eine leere Datei mit dem Namen .htaccess ohne Dateiendung. Auf der Permalink Seite schlägt WordPress Dir den Code für diese Datei vor, den du einfach in deine leere Datei kopierst, abspeicherst und ins WordPress Hauptverzeichnis hochlädst. Hast du das gemacht, kannst du die Änderungen aus dem Permalink Menü übernehmen und gleich schon betrachten. Links auf alte URLs werden von WordPress automatisch weitergeleitet, es gehen keine Besucher oder Google Pagerank verloren.

Semantisch korrekte Überschriften

Suchmaschinen mögen es wenn die HTML Überschriften sinngemäß verwendet werden. In einer vernünftigen Struktur würde die H1 als Überschrift, ganz oben, für den Blog Namen verwendet werden. Die H2 Als Artikel Überschrift, bei gleichbleibender H1 und die H3-H6 als Unterüberschriften, unter der H2 im Text. Google scheint insbesondere H2 und H3 Überschriften zu verwenden, um den Sinn einer Seite zu verstehen.

Viele Theme Designer benutzen beispielsweise aber auch H3 Überschriften in der Sidebar, in denen dann bloß so etwas wie ‘Kategorien’ oder ‘Die neusten Artikel’ steht, anstatt zum Text relevante Wörter. Daher empfehle ich Überschriften nur im Content zu verwenden. Mit CSS können die Titel in der Sidebar auch ohne HTML H1-H6 Überschriften auf die gleiche Größe gebracht werden:

Kategorien

Auch andere, für den Inhalt des Textes, unrelevante HTML Überschriften, wie beispielsweise ‘Einen Kommantar schreiben’ in der comment.php, sollten mit dieser Methode angepasst werden.

Duplicate Content vermeiden

Duplicate Content bedeutet, das ein Inhalt auf einer Webseite unter verschiedenen URLs erreichbar ist. Wenn man auf der Frontpage beispielsweise, ganze Artikel anzeigt, ohne sie durch den more-tag zu kürzen, ist der Inhalt schon doppelt erreichbar, nämlich auf der Artikel URL selbst und auf der Frontpage. Gleichzeitig aber wahrscheinlich auch in allen angegebenen Kategorien, Tags und entsprechenden Unterseiten.

Wenn Google jetzt Deinen Inhalt, zu einer passenden Suchphrase, anzeigen möchte, muss es sich zwischen einer dieser Unterseiten entscheiden. Oft landet der Google Sucher dann auf einer Tag oder Kategorien Seite, wo der passende Beitrag zwischen 10 oder 20 anderen irgendwo versteckt ist, anstatt auf dem Artikel selbst.

Es hilft seine Blogartikel mit dem more-tag beim schreiben sinngemäß zu kürzen, noch effektiver ist es allerdings den Suchmaschinen gleich zu verbieten Kategorien und Tags überhaupt in den Index mit aufzunehmen. So steht der einzelne Artikel nicht mehr in Konkurrenz zu seinen eigenen Duplikaten. Mittels spezieller Anweisungen für die Suchmaschinen Roboter lässt sich das sehr einfach in ein WordPress Theme integrieren:

<?php if(is_category() || is_search() || is_archive() || is_tag()) : ?>
<meta name="robots" content="noindex, follow">
<?php else : ?>
<meta name="robots" content="index, follow">
<?php endif; ?>

Auch dieser Code wird in den Head Bereich eingetragen. Wenn es sich um eine Kategorie, Suchergebnis, Archiv oder Tag-Seite handelt wird noindex, follow ausgegeben. Das bedeutet diese Seite soll nicht in den Suchmaschinenindex gelangen, dennoch aber angesehen, alle Links verfolgt und Linkstärke weitergegeben werden. Alles andere wird wir immer behandelt index, follow ist quasi die Grundeinstellung.

Onpage und Offpage SEO

Mit diesen simplen Veränderungen ist im Grunde jedes WordPress Theme gut ausgestattet und grundlegend konfiguriert um von Suchmaschinen gut gefunden, verstanden und bewertet zu werden. Komplexere Probleme mit Suchmaschinen tauchen erst auf wenn Webseiten es mit hunderten und tausenden verschiedener Inhalten zu tun haben. Für den normalen WordPress Blog reicht das alles hier aus, um mit jeder anderen Seite in den Google Suchergebnissen konkurrieren zu können.

Alles was man auf der eigenen Seite erledigen kann, wird Onpage SEO genannt. Hat Google es bei einer Suchanfrage mit zwei Seiten zu tun, die im Onpage Bereich gleich gut optimiert worden sind und deren Inhalte vielversprechend ausschauen, gewinnt allerdings die Seite, der Google bereits mehr vertraut, was von der Vernetzung im Web abhängig ist. Diese externen Faktoren zu beeinflussen wir Offpage SEO genannt, ist nicht CMS spezifisch und sprengt hier leider den Rahmen. Grundlegend kann man aber sagen, das Du qualitativ hochwertige Links zu deiner Webseite brauchst, um von den Suchmaschinen ernst genommen zu werden. Und der Schlüssel zu guten Links, ist gute Inhalte zu schreiben.

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