Leider habe ich im Moment auch nicht genügend Zeit das coolste Blogsystem allerzeiten selbst zu programmieren, deshalb greife ich auf WordPress zurück. Wie man von einem leeren Ordner zu einem funktionierenden System mit eigenem Theme kommt ist der Inhalt dieses Eintrags.

Dateien beschaffen

Los gehts mit einer ganzen Reihe downloads. Entweder man hat einen Ressourcenordner auf dem Rechner in dem das drin liegt oder man holt es sich aus dem Netz. Als erstes natürlich WordPress und um im eigenen Theme eine vernünftige Aufteilung zu ermöglichen das 960 GridSystem.

Da man schon das ganze System nicht selbst schreibt, kann man sich auch bei den Grundlagen des Themes die Arbeit abnehmen lassen und ein Naked Theme benutzen. Ich nehme Simons Blank Theme, da es schon 960.gs und Featured Posts implementiert hat.

Installation

WordPress ist ein bisschen zickig wenn sich die Baseurl ändert. Deshalb macht es Sinn schon unter der finalen Domain zu entwickeln. In den meisten Fällen gehts aber lokal los, also Ordner anlegen, Datenbank erstellen und das WordPress Archiv in den Ordner entpacken.

Der Ordner wp-content/uploads/ muss, sofern nicht vorhanden, angelegt werden und für den Webserver beschreibbar sein.

Das ausgewählte Theme kommt in den Ordner wp-content/themes/. Anschließend die WordPress index.php aufrufen und der Installation folgen.

Einrichten

Die Datenbanken und notwendigen Ordner hat sich WordPress schon selbst zurecht gelegt. Als erstes sollte man prüfen ob schon Updates verfügbar sind (in meinem Fall Akismet). Entweder über WordPress automatisch installieren lassen (dem vertraue ich nicht so recht), oder von der Downloadseite ziehen, entpacken und in den Ordner wp-content/plugins/ legen.

Im Frontend sieht man jetzt das nette Standardtheme, das auch schon eine Menge kann. Aber wir haben ja ein eigenes Layout das es umzusetzen gilt. Also im Backend unter Design / Themes aktivieren.

Mein Theme

Alle Daten die man als Themeentwickler verändern darf liegen im Ordner wp-content/themes/themename. Den Ordnernamen sollte man nach eigenen Wünschen benennen und anschließend die Datei style.css öffnen. Im Kommentar am Seitenanfang kann man den Themenamen, Version, URL und Autor festlegen.

/*
Theme Name: Apeversity
Theme URI: http://www.apeunit.com
Description: Ape Unit Videotheme
Author: Paul Lunow
Author URI: http://www.paul-lunow.de
Version: 1.0
*/

Jetzt fängt das schöne entwickeln an. Die header.php ist ein guter Einstiegspunkt. Eine WordPressseite wird immer aus verschiedenen Teilen zusammengebaut. Es geht los mit dem Header, dann kommt der eigentliche Inhalt, die Sidebar und dann der Footer.

Die Startseite wird in der index.php generiert. Hier gibt es ein WordPress Tag um den Header einzubinden:

<?php get_header(); ?>

Eine großartige Funktion ist bloginfo(). Damit erfährt man jede Menge über die Installation und die Pfade. Will man die Werte im Script weiter verarbeiten, holt man sich die Infos mit get_bloginfo().

Um zum Beispiel eine JavaScript Datei aus dem Themeordner einzubinden nutzt man folgendes Tag:

<script type="text/javascript" src="<? bloginfo('template_directory'); ?>/action.js"></script>

Aber Halt: nicht auf die Idee kommen eine Kopie von jQuery herunterzuladen und wie oben beschrieben einzubinden. jQuery kommt schon als Standard Framework mit und muss über die functions.php nur freigeschaltet werden:

wp_enqueue_script("jquery");

Die functions.php wird bei jedem Seitenaufruf eingebunden und ist ein idealer Platz für eigene Funktionen, Abkürzungen und Konfiguration.

Im Idealfall hat das leere Theme schon ein paar praktische CSS Regeln dabei. Damit man nicht anfängt etwas doppelt zu schreiben, klickt man mit Firebug das zu stylende Element an und schaut ob es schon eine Regel dafür in den CSS Dateien gibt.

An dieser Stelle sollte man nicht davor zurück schrecken tiefgreifende Veränderungen und Restrukturierungen durchzuführen um das CSS den eigenen Bedürfnissen anzupassen. Alles löschen was einem nicht gefällt und bloß nicht anfangen mit important! oder anderen Mitteln eine zweite CSS Struktur zu erstellen.

Falls noch nicht geschehen sollte man sich jetzt die Tastenkombination in der bevorzugten Entwicklungsumgebung einprägen, um zu einer bestimmten Zeile zu springen. Für Coda ist es [CMD]+[UMSCHALT]+[L] in Eclipse [CMD]+[L].

Custom Menu

Mit WordPress 3 gibt es ein paar coole Neuerungen die man im eigenen Theme aufjedenfall benutzen möchte. Eins davon sind die eigenen Menüs. Das funktioniert so:

Im Theme (in der functions.php) sagt man WordPress, dass man Menüs unterstützt. Man kann verschiedene Menüs definieren (z.B. Header, Footer und Sidebar). Der Benutzer kann diese Platzhalter im Backend mit Seiten, Posts, Kategorien und Links bestücken.

Dem Theme teilt man das wiefolgt mit:

function register_my_menus() {
  register_nav_menus(array(
  'header-menu' => __( 'Header Menu' )
  ));
}
add_action('init', 'register_my_menus');

Im Backend unter Design / Menüs kann man jetzt ein eigenes Menü erstellen, bestücken und dem Marker header-menu zuweisen.

Ausgegeben wird das Menü über die Funktion wp_nav_menu. So sieht es aus:

<?php wp_nav_menu( array('menu' => 'header-menu' ) ); ?>

Um die Startseite im Menü ebenfalls erreichbar zu machen, muss man meiner Meinung nach den Link zur Baseurl als Link Element hinzufügen. Das ist allerdings nicht besonders prickelnd, vorallem nicht wenn sich die Baseurl ändert.

Post Thumbnails

Post Thumbnails erlauben es dem Redakteur für ein Post ein Bild zu definieren, welches dann bei der Ausgabe beliebig verwendet werden kann.

Das gute an denen, im Gegensatz zu einem "Benutzerdefinierten Feld", ist die Möglichkeit zur Bildbearbeitung. Außerdem kümmert sich WordPress um die Bereitstellung und Validierung.

Um Post Thumbnails zu benutzen, muss man sie über die functions.php aktivieren:

add_theme_support('post-thumbnails');
set_post_thumbnail_size(215, 150, true);

Anschließend steht in der rechten Seitenleiste beim Artikel schreiben ein entsprechendes Feld zur Verfügung.

Für die Ausgabe gibt es zwei Methoden. Die erste überprüft ob ein Post Thumbnail vorhanden ist:

has_post_thumbnail();

Mit der zweiten Funktion wird das Thumbnail direkt ausgegeben:

the_post_thumbnail();

Mit einem vorrausgestellten get_ kriegt man den HTML Code zur weiteren Verarbeitung zurück. In einem strangen Fall brauchte ich allerdings nur die URL des Post Thumbnails. Gelöst habe ich es über XML:

$s = simplexml_load_string(get_the_post_thumbnail());
echo $s->attributes()->src;

Benutzerdefinierte Felder

Das Post Thumbnail ist schon ausgegliedert. Trotzdem ist es sehr praktisch wenn man zu jedem Post individuell verschiedene Eigenschaften angeben kann.

Im Backend passiert das über die "Benutzerdefinierten Felder". Im Theme werden die Inhalte über die Funktion get_post_custom_values() ausgelesen. Die Funktion gibt die Daten allerdings in einem etwas unübersichtlichen Array zurück.

Deshalb ab in die functions.php und dort eine neue Funktion custom_field() erstellen:

function custom_field($name) {
  $value = @array_pop(get_post_custom_values($name));
  if(empty($value)) {
  return false;
  }
  return $value;
}

Im Theme, innerhalb der Artikelausgeben (The Loop), kann man jetzt einfach den Namen des Feldes eingeben und erhält den Inhalt:

<h3><? echo custom_field('subheader'); ?></h3>

Custom Queries

Bei umfangreichen Projekten kommt man schnell in die Situation nur Posts, die bestimmten Kriterien erfüllen auszugeben. Kein Problem!

Dafür steht in WordPress die Klasse WP_Query zur Verfügung. Von dieser erzeugt man ein neues Objekt und übergibt ein Array mit Einstellungen.

$my_query = new WP_Query(array('category_name' => 'featured', 'posts_per_page' => 1));

Im Objekt $my_query ist jetzt der letzte Post mit der Kategorie featured gespeichert. An die Posts kommt man, in dem man die berühmte Loop erstellt:

while($my_query->have_posts()):
  $my_query->the_post();
  <div class="post"><? the_title(); ?></div>
endwhile;

Innerhalb der While Schleife stehen einem jetzt alle gewohnten Funktionen zur Verfügung. Auf die Daten zugreifen können sie aufgrund von dem Aufruf the_post().

Besonders habe ich mich gerade über die Möglichkeit gefreut die Posts nach einem bestimmten benutzerdefinierten Feld zu sortieren:

$my_query = new WP_Query(array(
  'orderby' => 'meta_value',
  'meta_key' => 'episode',
  'order' => 'ASC'
));

Social Media und Plugins

Wer will schon alleine auf seinem Blog sein? Damit man selbst und alle Besucher sehen wieviele Fans und Freunde man hat, braucht man je nach Anforderung verschiedene Buttons und Funktionen.

Das meiste gibt es schon als fertiges Plugin. Eine gute Übersicht gibt es zum Beispiel bei Ellen. Für mich ist bei der Auswahl immer wichtig, dass es eine Funktion gibt, mit deren Hilfe man die Funktionalität an beliebiger stelle im eigenen Theme einbauen kann.

Man lädt eine ZIP Datei herunter, entpackt sie auf dem eigenen Rechner und schiebt den kompletten Ordner in das Verzeichnis wp-content/plugins/. Anschließend im Backend unter Plugins den neuen Eintrag in der Liste aktivieren.

Der Facebook Share Button ist sehr komfortabel. Nach Installation des Plugins findet man im linken Menü ganz unten eine Optionsseite mit Einstellungsmöglichkeiten. Im Theme bindet man an geeigneter Stelle innerhalb des Loops das entsprechende Tag ein:

<?php echo fb_generate_button(); ?>

Welches Tag das ist findet man heraus in dem man die PHP Dateien im Plugin Ordner ansieht. Meistens gibt es nur eine in der alles mögliche zusammen gefasst ist. Je nach Entwickler besser oder schlechter gemacht und dokumentiert.

Facebook steht, als nächstes kommt Twitter. Diesmal kommt das Plugin Topsy zum Einsatz. Die Einstellungen verstecken sich nach der Installation unter Einstellungen / Topsy. Für das Theme stehen zwei Tags zur Verfügung:

<?php echo topsy_retweet_small(); ?>
<?php echo topsy_retweet_big(); ?>

Viel Spaß beim einbinden!

Fazit

WordPress ist ein tolles System um die unterschiedlichsten Anforderungen zu erfüllen. Allerdings sieht man auch das sich nach einiger Zeit ein ziemliches Chaos entwickelt. Vorallem wenn mehrere Leute ohne genau definierte Regeln an einem Projekt arbeiten.

Aber es geht schnell und macht Spaß. Unsere Firmenseite ist ebenfalls in WordPress realisiert. Ich bin gespannt auf eure Verbesserungsvorschläge.

Es geht natürlich um den heißen Scheiß: Ajax. Mit aktiviertem JavaScript soll bei einem Klick auf einen Eintrag der Eintrag dynamisch nachgeladen werden anstatt auf die Einzelansicht zu verlinken. Mit TYPO3 und Typoscript baut man sich dafür ein weiteres Page Objekt und passt die Ausgabe an, darüber hatte ich schon berichtet. Bei WordPress gibt es aber kein Typoscript.

Mein erster Gedanke war ein alternatives Template per URL Parameter zu laden in dem nur die Inhalte angezeigt werden. Die Anleitungen waren allerdings allesamt nicht besonders ergiebig. Der nächste Ansatz war den gesamten Inhalt abzufragen und per jQuery nur den entsprechenden Container mit den Inhalten auszugeben. Das finde ich aber irgendwie unelegant.

Und nach einmal drüber schlafen kam dann der rettende und sehr simple Einfall.

functions.php

Mit meinem CakePHP verwöhntem Blick würde ich die functions.php mal mit einer Art Controller vergleichen. Der Aufruf geht also durch diese Datei, in der Variablen gesetzt und Funktionen definiert werden können, die anschließend in den Views zur Verfügung stehen.

Und hier steckt schon das ganze Geheimnis, ist die Servervariable HTTP_X_REQUESTED_WITH gesetztz, handelt es sich um eine asynchrone Anfrage:

if(isset($_SERVER['HTTP_X_REQUESTED_WITH'])) {
  $ajax = true;
}
else {
  $ajax = false;
}

Die Views

In den üblichen Verdächtigen des Themes, damit meine ich die single.php, page.php, index.php usw. steht jetzt die Variable $ajax zur Verfügung. Bisher fand ich die Arbeitsweise von WordPress nicht sehr elegant in jeder Datei Header, Sidebar und Footer einbinden zu müssen, aber jetzt finde ich sie gut. Denn wenn bei einem Ajaxaufruf nur der Inhalt zurück gegeben werden soll, dann lässt man das überflüssige HTML Gerüst einfach draußen:

if(!$ajax) {
  get_header();
}

Fazit

Das war einfach. WordPress ist ein tolles System und ich kann es kaum erwarten endlich die neue Version 3.0 stable zu sehen. Wie das ganze drum herum mit jQuery funktioniert, steht im bereits oben erwähnten Eintrag zu TYPO3. Frohes bloggen!

Es gibt das Plugin Register Plus welches auf vielfältige Art erlaubt das Registrierungsformular zu erweitern (auch mit eigenen Feldern). Aber trotzdem befindet sich das Teil noch im Backend. Aber das muss nicht so bleiben.Als erstes braucht das verwendete Theme eine neue Seitenvorlage. Dazu dupliziert man die Datei page.php und fügt als erstes den folgenden PHP Kommentar ein:

<?php
/*
Template Name: Frontend Registrierung
*/
?>

Anschließend kann man eine neue Seite anlegen und in der rechten Spalte die Seitenvorlage Frontend Registrierung (bzw. was man eingetragen hat) auswählen.

Jetzt muss nur noch die Datei die Funktionalität kriegen. Dazu öffnet man in seinem bevorzugten Editor die duplizierte Datei und fügt, wo auch immer das Formular erscheinen soll, den folgenden Inhalt ein.

<form name="registerform" id="registerform" action="<?=site_url('wp-login.php?action=register', 'login_post')?>" method="post">
  <p>
    <label><?php _e('Username') ?><br />
    <input type="text" name="user_login" id="user_login" class="input" value="<?php echo attribute_escape(stripslashes($user_login)); ?>" size="20" tabindex="10" /></label>
  </p>
  <p>
    <label><?php _e('E-mail') ?><br />
    <input type="text" name="user_email" id="user_email" class="input" value="<?php echo attribute_escape(stripslashes($user_email)); ?>" size="25" tabindex="20" /></label>
  </p>
  <?php $register_plus->RegForm(); ?>
  <input type="submit" value="Registrieren!">
</form>

Was ist passiert? Es wird ein ganz normales HTML Formular erstellt mit der gleichen Zielseite wie das Backendregistrierungsformular. Mit site_url() wird das Formular unabhängig von der verwendeten Baseurl gemacht.

Die beiden Felder Username und E-mail müssen per Hand angelegt werden, der Rest wird vom Plugin register plus übernommen. Im Plugin wird die Variable $register_plus mit der Klasse initalisiert und steht deshalb im Template zur Verfügung. Die Funktion RegForm() gibt das Formular je nach den getroffenen Einstellungen im Backend zurück.

Noch ein Abschicken-Knopf drunter und fertig! Es gibt nur eine unschöne Sache: die Antwort vom Script wird auf der normalen Registrierungsseite ausgegeben. Das ist noch nicht ganz perfekt, aber vielleicht hat jemand einen Tipp(?) oder in der nächsten Zeit kommt Teil 2 von diesem Tutorial.

Frohes bloggen!

remove_filter('the_content', 'wptexturize');

Endlich. Der Tipp kam von den 10 Killer WordPress Hacks vom Smashingmagazin. Danke, weitermachen!

Gerade war ich auf der Suche nach einer Möglichkeit diese verdammten "Anführungszeichen" aus meinem Quelltext zu verbannen. Nebenbei habe ich mich auch geärgert, ständig in den Quelltext wechseln zu müssen um die endlosen <pre><code class="bla"> Tags für das Syntaxhighlighting zu schreiben.

Nervt, muss aber nicht sein! Die functions.php ist mit ein paar einfachen Funktionen in der Lage, dem fleißigen Blogger einige Arbeit abzunehmen. Ich bin begeistert! Und so funktionierts:

Die Shortcode API bietet die Möglichkeit eigene Kurzbefehle zu erstellen. Die werden vom Autor in eckige Klammern geschrieben und können allein stehen (z.B. [datum]) oder Text umfassen (z.B. [wichtig]das ist es![/wichtig]). Außerdem kann der Shortcode mit Attributen erweitert werden, also [datum undzwar="gestern"].

Also verpacken wir das <pre><code...> gequatsche in einen praktischen Shortcode: [ code lang="php" ]. Der PHP Code dafür, gespeichert in der functions.php sieht wie folgt aus.

function code_func($atts, $content = null) {
  extract(shortcode_atts(array(
    'lang' => '',
  ), $atts));  
  return "<pre><code class='{$atts["lang"]}'>".do_shortcode($content)."</code></pre>";
}
add_shortcode('code', 'code_func');

Die Funktion wird mit einem Array aufgerufen ($atts) welches die Attribute beinhaltet. Die Variable $content wird mit dem umschlossenden Inhalt gefüllt. Der Rest ist dem Entwickler überlassen!

Der Rückgabewert wird im Blogpost gezeigt. Um weitere Shortcodes innerhalb zu erlauben, wird der Inhalt nochmal durch die Funktion do_shortcode() gejagt.

Nur ein Problem: mehrere Leerzeichen oder Tabs werden vom Editor aussortiert. Also nochmal in die Datei und ein weiterer Shortcode hinzugefügt: [ tab ].

function tab_func($atts) {
  return str_repeat(" ", 2);
}
add_shortcode('tab', 'tab_func');

Herrlich! Vor dem Kopieren aus dem Editor ein kurzes Suchen und Ersetzen und fertig! Jetzt wird auch die Funktion do_shortcode() gleich noch viel sinnvoller

Bleibt noch das Problem mit den nervigen Anführungszeichen. Aber vermutlich bietet WordPress da auch die eine oder andere Lösung. Eine offizielle Beschreibung gibt es natürlich auch.

PS: Kaum bloggt man über WordPress wird der Feedreader mit nützlichen Einträgen überfallen, zum Beispiel dem hier: 40+ Most Wanted WordPress Tricks and Hacks .

Funktionsweise

Die ausführliche Beschreibung finden Sie hier. Die Regeln habe ich weiter vereinfacht. Mein PlugIn prüft aktuell nur 3 von 5:

1. Zeit
   Ein Kommentator muss mind. 5s benötigen um einen Kommentar zu schreiben. Ansonsten ist er eine Machine.
2. Vertauschte Bezeichnungen
   Im HTML Formular sind Name und Emailfeld von den Bezeichnungen her vertauscht. Ist eine E-Mailadresse im Namenfeld eingetragen, handelt es sich mit ziemlicher Sicherheit um unerwünschte Werbung.
3. Hiddenfield
   Ein verstecktes Formularfeld (<input type="hidden") muss leer bleiben. Spamroboter füllen meistens sinnlos alles aus.

Schon wenn eine der Regeln zutritt wird der Kommentar abgewiesen.
Zum verfolgen der Tätigkeiten wird eine simple Logdatei beschrieben. Dieses Verhalten sollte man bei vielen Spamnachrichten abschalten.

Installation

Nach dem Download in den Ordner wp-content/plugins/ verschieben und im WordPress Backend aktivieren.

Anschließend müssen noch ein paar Dinge im Formular der Kommentareingabe angepasst werden. Je nach Theme unterschiedlich, meistens findet sich dies aber in der Datei wp-content/themes/THEME-NAME/comments.php.

1. Attribut Action vom Form-Tag

   Ich habe keinen anderen Weg gefunden in die Abarbeitung einzugreifen. Deshalb habe ich sie ersetzt. Das Attribut Action muss auf folgende Datei zeigen:

   <?php echo get_option('siteurl'); ?>/wp-content/plugins/id-spamkill/id-comments-without-spam.php

2. Bezeichnungen vertauschen

   Name und ID vom Namen und E-Mailfeld vertauschen. Nicht vergessen auch das for-Attribut vom Label anzupassen. Bei mir sieht es jetzt so aus:

   <p class="first">
   	<label for="email">Name <?php if ($req) echo "(erforderlich)"; ?></label>
   	<input class="styling" type="text" name="email" id="email" value="<?php echo $comment_author; ?>" size="22" tabindex="1" />
   </p>
   
   <p>
   	<label for="author">eMail <?php if ($req) echo "(erforderlich)"; ?></label>
   	<input class="styling" type="text" name="author" id="author" value="<?php echo $comment_author_email; ?>" size="22" tabindex="2" />
   	<span>(wird nicht veröffentlicht)</span>
   </p>

3. Innerhalb der beiden Form-Tags müssen die Hooks abgearbeitet werden. Auch das sollte bei den meisten Themes schon vorhanden sein:

   <?php do_action('comment_form', $post->ID); ?>

Zu guter letzt muss die Datei wp-content/plugins/id-spamkill/id-spamlog.txt für das Script noch beschreibbar gemacht werden (z.B. mit chmod(0777)). Das wars! Einträge werden gefiltert.

Konfiguration

Viel muss beim Plugin nicht konfiguriert werden. Da es so wenige Sachen sind sie noch nicht als "normale" Einstellungen über das Backend erreichbar sondern in der Datei id-spamkill.php zu finden. Ab Zeile 13 geht es los:

protected $logSpam = true;   // Spamlog speichern?
protected $logFile = "id-spamlog.txt";    // Datei in der das Spamlog gespeichert wird
protected $logSep = "\n-----------------------------------------------\n";    // Trennezeichen zwischen dein einzelnen Einträgen der Logdatei.

Download

Das Plugin kann als Archiv herunter geladen werden. Bei der Verwendung wäre eine kurze Nachricht nett.

Fazit

Das Plugin ist in einer sehr frühen Version und bietet noch viel Raum nach oben. Gerade die aufwendige Installation stört mich gewaltig, aber ich habe bisher keinen anderen Weg gefunden um so tiefgreifend das System zu verändern.

Ich habe ein gutes Gefühl und lade alle Besucher herzlich ein, mit mir zu beoachten welcher Spamkommentator es als erstes schafft durch zu kommen.

Bei Fragen, Problemen und Anregungen stehe ich gern zur Verfügung.

Es ist vollbracht! Ohne Stress und Verluste habe ich nicht nur auf die aktuelle WordPress Version aktualisiert, sondern auch gleich noch einen behutsamen Relaunch vollzogen.

Der weiße Hintergrund hat jetzt einen Abschluss und darunter finden sich interessante Listen oder die Kommentare zu den Beiträgen.
Außerdem habe ich den Beiträgen auf der Startseite einen Rahmen gegeben, damit sie besser unterscheidbar sind. Die Suchbox hat jetzt ein schöneres Äußeres (die inneren Werte sind unangetastet) und man kann mir ein Bier spendieren (Rechts unten auf der Startseite).
Unter Einstellungen ist entscheidbar ob sich externe Links im gleichen oder neuen Fenster öffnen sollen. Die aktuelle Auswahl wird in einem Cookie gespeichert. Die Erkennung von externen Links ist noch nicht perfekt gelöst, aber innerhalb von Beiträgen funktioniert es.

Viel Interessanter ist aber mein erstes WordPress Plugin: ID SpamKill! In einer langen Nacht habe ich meine Erkenntnisse aus dem Papyros Gästebuch in ein sehr kleines Plugin gepackt und hier zum laufen bekommen. Kommentare können ganz ohne Anmeldung, Captchas oder sonst was geschrieben und werden (ggf.) direkt veröffentlicht.
In Kürze werde ich es hier ausführlich vorstellen.

Bleibt mir noch eine gute Nacht zu wünschen und den Todo-Punkt IE6 + 7 testen doppelt zu unterstreichen.