WordPress | t3n News News, Infos, Tipps und aktuelle Artikel zu WordPress 2014-10-15T09:44:02Z t3n Redaktion http://t3n.de/tag/wordpress Twenty Fifteen: Das neue Standard-Theme für WordPress legt den Fokus auf Einfachheit und Typografie http://t3n.de/news/twenty-fifteen-standard-wordpress-theme-572042/ 2014-10-15T09:44:02Z
Für WordPress erscheint jedes Jahr ein neues Standard-Theme. Aktuell ist es Twenty Fourteen, das voraussichtlich im Dezember mit dem Release von WordPress 4.1 von Twenty Fifteen abgelöst wird.

Für WordPress erscheint jedes Jahr ein neues Standard-Theme. Aktuell ist es Twenty Fourteen, das voraussichtlich im Dezember mit dem Release von WordPress 4.1 von Twenty Fifteen abgelöst wird. Wie das Theme aussieht und welche Theme-spezifischen Funktionen und Möglichkeiten es bietet, zeigen wir euch in diese Artikel.

Twenty Fifteen: Schlicht und auf den Inhalt fokussiert

Twenty Fifteen, das neue Standard-Theme von WordPress. (Screenshot: WordPress-Make-Blog)
Twenty Fifteen, das neue Standard-Theme von WordPress. (Screenshot: WordPress-Make-Blog)

Takashi Irie ist verantwortlich für das Design des Themes und beschreibt es als Blog-fokussiertes Theme mit Augenmerk auf Typografie. Das Theme ist zweispaltig aufgebaut: Der Inhalt befindet sich rechts, die Sidebar links – wenn der Viewport zu klein wird, verschwindet der Sidebar-Bereich. Er kann dann per Button-Klick über dem Inhalt eingeblendet werden. Des weiteren gibt es einen Footer-Bereich, in dem sich der „Proudly-powered-by-WordPress“-Hinweis befindet.

Damit ihr euch einen besseren Eindruck davon machen könnt, starten wir erst mal mit weiteren Screenshots:

Twenty Fifteen: Umfangreiche Möglichkeiten der Anpassung

Twenty Fifteen bringt neben dem schön einfachen und klaren Design einiges an Anpassungsmöglichkeiten mit. Das Theme bietet einen Widget-Bereich, der in der Sidebar erscheint und in dem ihr wie gewohnt eure Widgets platzieren könnt. Des Weiteren werden zwei Menüpositionen angeboten: eine normale Navigation, die in der Sidebar direkt unter dem Titel beziehungsweise gegebenenfalls unter der Beschreibung erscheint und ein Menü für eure Profile bei Sozialen Netzwerken. Um dieses Feature zu nutzen, müsst ihr nur ein neues Menü erstellen, eure Social-Media-Links einfügen und es der Position „Social Links Menu“ zuweisen. Folgende Netzwerke sind integriert:

Codepen, Digg, Dribbble, Dropbox, Facebook, Flickr, GitHub, Google+, Instagram, LinkedIn, Email (mailto: links), Pinterest, Pocket, PollDaddy, Reddit, RSS Feed (urls mit „/feed/“), Spotify, StumbleUpon, Tumblr, Twitch, Twitter, Vimeo, WordPress und YouTube.

Anpassungs-Möglichkeiten von Twenty Fifteen im Theme Customizer. (Screenshot: WordPress-Make-Blog)
Anpassungs-Möglichkeiten von Twenty Fifteen im Theme Customizer. (Screenshot: WordPress-Make-Blog)

Daneben bietet euch das Theme die Möglichkeit, das Aussehen über den Theme-Customizer anzupassen. Hier steht euch neben den Standard-Funktionen wie der Anpassung des Titels und der Beschreibung, dem Hinzufügen eines Header-Bilds (wird als Hintergrund des Sidebar-Bereichs eingerichtet) und eines Hintergrundbilds (ist dann der Hintergrund des Inhaltsbereichs) sowie dem direkten Zugriff auf Widgets und Menüs noch die Möglichkeit zur Verfügung, die Farben des Themes anzupassen.

Dazu könnt ihr aus fünf alternativen Farb-Schemata auswählen oder die Farben den Header-Text, die übrigen Sidebar-Texte sowie der Hintergrundfarbe für den Inhaltsbereich und den Sidebar-Bereich selbst wählen.

Twenty Fifteen: Im Dezember ist es soweit

Wie schon angesprochen soll Twenty Fifteen mit dem Release von WordPress 4.1 in der finalen Version veröffentlicht werden – er ist für den 8. Dezember geplant. Seit gestern steht das Theme zum Download zur Verfügung, wie im Blog des Make-Bereichs auf wordpress.org zu lesen ist. Wenn ihr helfen wollt, dass Bugs und andere Fehler behoben werden, könnt ihr einfach ein Ticket anlegen.

Was haltet ihr von diesem neuen Theme? Ist es euch zu schlicht oder genau das, worauf ihr gewartet habt?

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Florian Brinkmann
40 kostenlose WordPress-Themes für Responsive Design http://t3n.de/news/kostenlose-wordpress-themes-responsive-webdesign-376838/ 2014-10-14T16:30:24Z
Das Angebot an kostenlosen Templates für die eigene Website wächst stetig. Auch die Auswahl an Wordpress-Themes, die Responsive Webdesign unterstützen, ist inzwischen beachtlich.

Das Angebot an kostenlosen für die eigene Website wächst stetig. Auch die Auswahl an , die unterstützen, ist inzwischen beachtlich. Zur besseren Übersicht hier eine Auswahl von 40 kostenlosen und responsiven WordPress-Themes.

Responsive Design bei WordPress-Themes

Immer mehr Nutzer surfen über mobile Endgeräte im Internet. Ob unterwegs mit dem Smartphone oder auf der Couch mit dem Tablet: Neue Nutzungsgewohnheiten verändern die Anforderungen an Websites jedweder Machart. Mit einem responsiven WordPress-Theme verbessert ihr die Usability und Lesbarkeit eurer jetzigen und eurer zukünftigen Besucher.

Schon jetzt haben Notebooks und Smartphones den Desktop als beliebtesten Zugangsweg ins Internet hinter sich gelassen, wie die ARD/ZDF-Onlinestudie 2014 zeigt. Und auch der Anteil der Nutzer, die Internetinhalte über das Tablet abrufen, hat sich von 16 Prozent im Jahr 2013 auf 28 Prozent im Jahr 2014 gesteigert.

Vieles spricht daher für ein WordPress-Theme, das auch für mobile Endgeräte optimiert wurde.

40 WordPress-Themes für Responsive Design

Die folgenden WordPress-Themes sind durch Responsive Webdesign für alle Endgeräte optimiert. Wer auf eigene Faust eine responsive Website erstellen will, sollte sich stattdessen in die Einzelteile der folgenden Artikelserie einlesen:

  1. Responsive Webdesign, Teil 1: Layout- und Textdarstellung
  2. Responsive Webdesign, Teil 2: Das Navigationsmenü
  3. Responsive Webdesign, Teil 3: Darstellung von Galerien und Videos

1. Twenty Fourteen von WordPress

Responsive WordPress-Theme: Twenty Fourteen.
Twenty Fourteen, das diesjährige Default-Theme von WordPress, ist vollständig für responsive Websites ausgelegt. (Screenshot: Twenty Fourteen)

2. Twenty Thirteen von WordPress

Responsive WordPress-Theme: Twenty Thirteen.
Auch das 2013er WordPress-Theme Twenty Thirteen wartet mit responsiven Funktionalitäten auf. (Screenshot: Twenty Thirteen)

3. Codium Extend von CodeReduction

Responsive WordPress-Theme: Codium Extend. (Screenshot: Codium Extend)

4. Live Wire von Theme Hybrid

Responsive WordPress-Theme: Live Wire.
Das responsive WordPress-Theme Live Wire ist unter der Maßgabe Mobile First entwickelt worden. (Screenshot: Live Wire)

5. Pinboard von One Designs

Hinweis: Standardmäßig ist hier Infinite Scroll aktiviert, was mit einem Footer natürlich etwas unglücklich ist. Das kann in den Theme-Optionen umgestellt werden.

Responsive WordPress-Theme: Pinboard.
Responsive WordPress-Theme: Pinboard. (Screenshot: Pinboard)

6. Match von DoveThemes

Responsive WordPress-Theme: Match.
Schön für persönliche Webseiten: Das responsive WordPress-Theme Match. (Screenshot: Match)

7. Fictive von Automattic

Responsive WordPress-Theme: Fictive.
Das WordPress-Theme Fictive legt Wert auf Personalisierung – etwa durch Einbindung der Social Networks. (Screenshot: Fictive)

8. RestImpo von Tomas Toman

Responsive WordPress-Theme: RestImpo.
Das Theme RestImpo bietet unter anderem sechs vorgefertigte Farbschemata, 220 Schriftarten und Unterstützung für viele populäre Plugins. (Screenshot: RestImpo)

9. Superhero von Automattic

Responsive WordPress-Theme: Superhero. (Screenshot: Superhero)
Große Bilder und farbliche Akzente: Das kostenlose WordPress-Theme Superhero. (Screenshot: Superhero)

10. Spacious von ThemeGrill

Responsive WordPress-Theme: Spacious. (Screenshot: Spacious)
Spacious gehört zu den WordPress-Themes, die besonders aufgeräumt daher kommen. (Screenshot: Spacious)

11. Times von Rohit Tripathi

Responsive WordPress-Theme: Times. (Screenshot: Times)
Viele Content-News auf einen Blick: Das responsive Theme Times. (Screenshot: Times)

12. Radiate von ThemeGrill

Responsive WordPress-Theme: Radiate. (Screenshot: Radiate)
Mit Radiate holt ihr euch ein modernes WordPress-Theme im klaren Look ins Haus. (Screenshot: Radiate)

13. Perfetta von GavickPro

Responsive WordPress-Theme: Perfetta. (Screenshot: Perfetta)
Das Theme Perfetta wurde speziell für Gastronomen und Food-Blogger entwickelt. (Screenshot: Perfetta)

14. Influence von SiteOrigin

Responsive WordPress-Theme: Influence. (Screenshot: Influence)
Das Theme Influence bietet einen gewissen Hipster-Charme. (Screenshot: Influence)

15. Hemingway von Anders Norén

Responsive WordPress-Theme: Hemingway. (Screenshot: Hemingway)
Das responsive WordPress-Theme Hemingway kommt mit Vollbild-Header-Image und Parallax Scrolling. Fun Fact: Auch eine schwedische Übersetzung ist verfügbar. (Screenshot: Hemingway)

16. Baskerville von Anders Norén

Responsive WordPress-Theme: Baskerville. (Screenshot: Baskerville)
Baskerville kommt mit Widgets für Videos, Flickr und Dribbble. (Screenshot: Baskerville)

17. Wilson von Anders Norén

Responsive WordPress-Theme: Wilson. (Screenshot: Wilson)
Ein WordPress-Theme für Webworker: Wilson. (Screenshot: Wilson)

18. Lingonberry von Anders Norén

Responsive WordPress-Theme: Lingonberry. (Screenshot: Lingonberry)
Ein Hauch von Retina: Das WordPress-Theme Lingonberry bedient eure künstlerischen Ansprüche. (Screenshot: Lingonberry)

19. Pho von ThematoSoup

Responsive WordPress-Theme: Pho. (Screenshot: Pho)
Die Macher von Pho versprechen ein „leanes“ und schnelles responsives WordPress-Theme. (Screenshot: Pho)

20. Dice von Jens Törnell

Responsive WordPress-Theme: Dice. (Screenshot: Dice)
Responsive WordPress-Theme: Dice. (Screenshot: Dice)

21. Kubrick 2014 von John Wilson

Responsive WordPress-Theme: Kubrick 2014. (Screenshot: Kubrick 2014)
John Wilson hat einem Klassiker der WordPress-Themes ein responsives Update verpasst. (Screenshot: Kubrick 2014)

22. Adaption von Automattic

Responsive WordPress-Theme: Adaption. (Screenshot: Adaption)
Noch mehr responsive WordPress-Themes von Automattic – hier: Adaption. (Screenshot: Adaption)

23. Isola von Automattic

Responsive WordPress-Theme: Isola. (Screenshot: Isola)
Das WordPress-Theme Isola besticht durch seine Einfachheit. (Screenshot: Isola)

24. Bosco von Automattic

Responsive WordPress-Theme: Bosco. (Screenshot: Bosco)
Bei diesem responsiven Theme hat Automattic Wert auf außergewöhnliche Typographie gelegt. (Screenshot: Bosco)

25. Radar von wphigh

Responsive WordPress-Theme: Radar. (Screenshot: Radar)
Ein responsives WordPress-Theme im Flat-Desing-Stil: Radar. (Screenshot: Radar)

26. Forefront von Thomas Usborne (Child-Theme für GeneratePress)

Responsive WordPress-Theme: Forefront. (Screenshot: Forefront)
Responsive WordPress-Theme: Forefront. (Screenshot: Forefront)

27. Solon von aThemes

Responsive WordPress-Theme: Solon. (Screenshot: Solon)
Mit Solon nutzt ihr ein responsives WordPress-Theme, das persönlichen Blogs einen modernen Anstrich verleiht. (Screenshot: Solon)

28. Hudson von Michael Burrows

Responsive WordPress-Theme: Hudson. (Screenshot: Hudson)
Responsive WordPress-Theme: Hudson. (Screenshot: Hudson)

29. Eighties von Justin Kopepasah

Responsive WordPress-Theme: Eighties. (Screenshot: Eighties)
The Eighties are back! In Form eines Responsive-Themes für WordPress. (Screenshot: Eighties)

30. Editor von Array

Responsive WordPress-Theme: Editor. (Screenshot: Editor)
Ein besonders elegantes und minimalistisches WordPress-Theme findet ihr in Editor. (Screenshot: Editor)

31. Pictorico von Automattic

Responsive WordPress-Theme: Pictorico. (Screenshot: Pictorico)
Wer besonders viel mit Bildern arbeitet, sollte sich das responsive Theme Pictorico anschauen. (Screenshot: Pictorico)

32. Independent Publisher von Raam Dev

Responsive WordPress-Theme: Independent Publisher. (Screenshot: Independent Publisher)
Das Theme Independent Publisher erlaubt es euren Lesern, sich voll und ganz auf eure Texte zu konzentrieren. (Screenshot: Independent Publisher)

33. Ignite von Compete Themes

Responsive WordPress-Theme: Ignite. (Screenshot: Ignite)
Die Nutzer des WordPress-Themes Ignite loben vor allem den guten Support. (Screenshot: Ignite)

34. Drop von Compete Themes

Responsive WordPress-Theme: Drop. (Screenshot: Drop)
Responsive WordPress-Theme: Drop. (Screenshot: Drop)

35. Esperanza Lite von Qlue Themes

Responsive WordPress-Theme: Esperanza. (Screenshot: Esperanza)
Mit ihrem responsiven Theme wollen die Macher von Esperanza eine einfache, nahtlose Arbeitsumgebung für Blogger bieten. (Screenshot: Esperanza)

36. Hexa von Automattic

Responsive WordPress-Theme: Hexa. (Screenshot: Hexa)
Ein Hauch von Retro-Charme: Das responsive WordPress-Theme Hexa. (Screenshot: Hexa)

37. Ex Astris von Sarah Gooding (Child-Theme für Stargazer)

Responsive WordPress-Theme: Ex Astris. (Screenshot: Ex Astris)
Das responsive WordPress-Theme Ex Astris ist speziell für die Nutzer des Themes Stargazer entwickelt worden. (Screenshot: Ex Astris)

38. Zweig von Simon Vandereecken

Responsive WordPress-Theme: Zweig. (Screenshot: Zweig)
Wer es ein bisschen extravagant mag, kann sich vielleicht für das Theme Zweig begeistern. (Screenshot: Zweig)

39. Sorbet von Automattic

Responsive WordPress-Theme: Sorbet. (Screenshot: Sorbet)
Ein WordPress-Theme, das an den Sommer erinnert: Sorbet. (Screenshot: Sorbet)

40. Highwind von jameskoster

Responsive WordPress-Theme: Highwind. (Screenshot: Highwind)
Das schwerelose Design des responsiven Themes Highwind soll den richtigen Rahmen für eure Inhalte liefern. (Screenshot: Highwind)

Wir hoffen, dass wir euch einige neue Themes zeigen konnten. Übrigens: Bei der Erstellung eigener WordPress-Themes unterstützt euch diese t3n-Artikelreihe.

Kennt ihr weitere kostenlose WordPress-Themes, die responsive sind und hier nicht fehlen dürfen?

Letztes Update des Artikels: 12. Oktober 2014. Der Originalartikel stammt von Lars Budde.

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Florian Brinkmann
PHPStorm 8: Alle Features der neuen Version im Überblick http://t3n.de/news/jetbrains-phpstorm-8-ide-567597/ 2014-09-17T14:00:32Z
JetBrains hat PHPStorm 8 veröffentlicht. Die neue Version der beliebten Entwicklungsumgebung unterstützt jetzt PHP 5.6 und bringt unter anderem auch Support für WordPress und Drupal 8 mit.

JetBrains hat PHPStorm 8 veröffentlicht. Die neue Version der beliebten Entwicklungsumgebung unterstützt jetzt PHP 5.6 und bringt unter anderem auch Support für WordPress und Drupal 8 mit.

PHPStorm 8: JetBrains hat die neue Version ihrer Entwicklungsumgebung veröffentlicht. (Screenshot: PHPStorm 8)
PHPStorm 8: JetBrains hat die neue Version ihrer Entwicklungsumgebung veröffentlicht. (Screenshot: PHPStorm 8)

PHPStorm 8: JetBrains veröffentlicht neue Version der Entwicklungsumgebung

Die tschechische Softwareschmiede JetBrains hat ihre Entwicklungsumgebung PHPStorm in Version 8 veröffentlicht. Die IDE bietet jetzt vollständigen Support für PHP 5.6. Außerdem wurde das Language-Injection-Feature verbessert, mit dem sich SQL-Queries, JavaScript oder HTML einfach in den Arbeitsfluss integrieren lassen. Außerdem unterstützt PHPStorm 8 jetzt auch direkt die beiden Content-Management-Systeme WordPress und Drupal 8. Dadurch soll die Arbeit an den CMS schneller von der Hand gehen. TYPO3 Flow wird allerdings nicht unterstützt. Wer sich das wünscht, kann aber seine Stimme für das entsprechende Feature-Request abgeben.

Neu ist auch die Unterstützung für Remote-PHP-Interpreters. Damit kann der Code in einem produktionsähnlichen Umfeld ausgeführt werden. Außerdem wird auch die Template-Engine Blade vollständig unterstützt. Darüber hinaus gibt es jetzt auch eine Live-Console mit JavaScript- und NodeJS-Debugger. PHP und Javascript könnt ihr in PHPStorm 8 auch gleichzeitig debuggen.

PHPStorm 8: IDE bringt Unterstützung für AngularJS, Spy-JS und Grunt mit

PHPStorm 8 bietet zudem einen verbesserten Support für das beliebte AngularJS-Framework von Google. Auch JavaScript-Tracing mit Spy-JS wurde integriert. Wie das funktioniert, könnt ihr in einem Video der PHPStorm-Macher sehen, das wir unterhalb des Artikels eingebunden haben. Auch der JavaScript-Task-Runner Grunt wurde direkt in PHPStorm 8 integriert. Ihr könnt Tasks in der Entwicklungsumgebung auswählen und mit einem Klick starten.

PHPStorm 8 könnt ihr 30 Tage lang testen, danach wird der Erwerb einer kostenpflichtige Lizenz notwendig. Unternehmen zahlen 179 Euro, Privatpersonen 89 Euro. Darüber hinaus gibt es verschieden Rabattmöglichkeiten für Startups sowie für Studenten und Lehrer. Wer eine Lizenz nach dem 16. September 2013 erworben hat, bekommt das Update kostenlos.

]]>
Kim Rixecker
Schick, einfach und mit WordPress-Integration: So erzählt ihr Geschichten mit Storyform http://t3n.de/news/storyform-wordpress-566707/ 2014-09-12T08:47:54Z
Mit Storyform sollt ihr eure Artikel in kürzester Zeit richtig schick aufbereiten können. Das Tool gibt es als WordPress-Plugin, mit etwas mehr aufwand kann es aber auch mit anderen …

Mit Storyform sollt ihr eure Artikel in kürzester Zeit richtig schick aufbereiten können. Das Tool gibt es als WordPress-Plugin, mit etwas mehr aufwand kann es aber auch mit anderen Content-Management-Systemen genutzt werden.

WordPress-Plugin: Mit Storyform erstellte Artikel sehen einfach schick aus. (Screenshot: Storyform)
WordPress-Plugin: Mit Storyform erstellte Artikel sehen einfach schick aus. (Screenshot: Storyform)

Storyform: In wenigen Klicks zu einem schicken Artikel

Die New York Times hat es 2012 mit ihren Multimedia-Artikel „Snow Fall“ vorgemacht: Online-Artikel müssen nicht unbedingt einer starren Form folgen. Es gibt Alternativen zum einfachen Webseiten-Layout, bei dem der Text von oben nach unten verläuft und nur gelegentlich durch Bilder unterbrochen wird. Allerdings hat natürlich nicht jeder die notwendigen Ressourcen, um gleich einen sogenannten Scrollytelling-Artikel auf die Beine zu stellen.

Wer trotzdem nicht auf ein schickes, von Print-Magazinen inspiriertes Design verzichten möchte, für den gibt es mit Storyform eine einfache Möglichkeit, um genau das zu erreichen. Die damit erstellten Artikel setzen auf ansehnliche Typografie, nebeneinander angeordnete Spalten und großformatige Bilder. Außerdem lassen sich leicht Fullscreen-Videos integrieren und die verschiedenen Templates sind vollständig responsiv.

Storyform kann mit jedem beliebigen CMS genutzt werden. (Screenshot: Storyform)
Storyform kann mit jedem beliebigen CMS genutzt werden. (Screenshot: Storyform)

Storyform für WordPress oder für jedes andere CMS

Die einfachste Möglichkeit Storyform zu verwenden, ist das WordPress-Plugin. Das könnt ihr über WordPress.org installieren, oder indem ihr euch das Plugin direkt von der Storyform-Website als ZIP-Datei besorgt. Da findet sich auch eine Anleitung zur Erstellung von Storyform-Artikeln.

Alternativ zum WordPress-Plugin, könnt ihr Storyform auch in Kombination mit anderen Content-Managment-Systemen verwenden. Das ist aber logischerweise deutlich aufwendiger bei der Einrichtung und bei der Erstellung von Artikeln. Egal, für welche Plattform ihr euch entscheidet, um Storyform nutzen zu können, müsst ihr auf der Website des Anbieters einen App-Key beantragen. Dazu reicht die Eingabe eurer E-Mail-Adresse, eures Namens und der URL eurer Website.

via www.producthunt.com

]]>
Kim Rixecker
Der große t3n-Guide zum eigenen WordPress-Theme – Teil 3: Alternative Startseite und Galerie-Teaser http://t3n.de/news/t3n-guide-wordpress-theme-teil-3-alternative-startseite-galerie-teaser-558172/ 2014-09-10T09:38:38Z
Diese Artikelreihe dreht sich darum, ein WordPress-Theme zu erstellen – von Grund auf. Im dritten Teil geht es weiter mit der Entwicklung und wir kümmern uns um die ersten Details.

Diese Artikelreihe dreht sich darum, ein WordPress-Theme zu erstellen – von Grund auf. Im dritten Teil geht es weiter mit der Entwicklung und wir kümmern uns um die ersten Details.

Zuerst möchte ich darauf hinweisen, dass der letzte Teil ein wenig aktualisiert wurde und einige kleine Änderungen vorgenommen wurden (siehe dazu die Update-Box am Anfang des Artikels). Da der letzte Teil der Reihe doch ziemlich lang war habe ich mich dazu entschieden, lieber noch ein oder zwei Artikel mehr zu schreiben und dafür die einzelnen Teile kürzer zu halten. Deshalb werden wir in diesem Teil nicht mit allem inhaltlichen fertig werden (würden wir vermutlich auch nicht, wenn der Artikel so lang werden würde wie Teil zwei).

Wir wollen uns in diesem Teil zuerst um die verschiedenen Post-Format-Templates kümmern. Teilweise ist die Code-Darstellung hier in dem Artikel etwas unübersichtlich, da der Editor von WordPress die Einrückung zunichte macht und auch einige längere Zeilen dabei sind – ihr könnt euch den Code etwas übersichtlicher auf GitHub anschauen. Die langen Zeilen sind hier in dem Beitrag umgebrochen (zu erkennen an diesem Zeichen: ), weshalb die Zeilenangaben hier in dem Artikel nicht mit den Zeilen bei GitHub übereinstimmen.

Bei den meisten Post-Formaten, die wir in der functions.php ziemlich am Anfang aktiviert haben, sehe ich aktuell keinen Anlass, die Standardausgabe der content.php-Datei zu verändern. Anders sieht das bei der Galerie aus. Hier wollen wir ein großes Vorschaubild und noch einige kleine Vorschaubilder anzeigen lassen. Wenn der Artikel ein Featured Image gesetzt hat, werden wir dies als großes Bild darstellen. Gibt es das nicht, nehmen wir das erste aus der Galerie.

Ungefähr so soll eine Galerie in der Blog-Ansicht aussehen. (Fotos: Dennis Brinkmann)
Ungefähr so soll eine Galerie in der Blog-Ansicht aussehen. (Fotos: Dennis Brinkmann)

Kopieren wir zuerst den Inhalt der content.php-Datei in die neu erstellte content-gallery.php-Datei. Anschließend tauschen wir im Header den Aufruf der Funktion bornholm_the_post_header() gegen folgenden Schnipsel Code aus:

$images = bornholm_get_gallery_images( $post->ID );
bornholm_gallery_thumbnail_and_title('large', $images, 'h1');

Mit der Funktion bornholm_get_gallery_images() holen wir uns die Bilder der Galerie und speichern sie in der Variable $images.  Diese sieht wie folgt aus und wird an das Ende der functions.php-Datei geschrieben.

function bornholm_get_gallery_images( $post_id ) {
$post = get_post( $post_id );
// Den Beitrag gibt es nicht, oder er ist leer.
if ( ! $post || empty ( $post->post_content ) )
return array();
$galleries = get_post_galleries( $post, false );
if ( empty ( $galleries ) )
return array();
$ids = array();
foreach ( $galleries as $gallery ) {
if ( ! empty ( $gallery['ids'] ) )
$ids = array_merge( $ids, explode( ',', $gallery['ids'] ) );
}
$ids = array_unique( $ids );
if ( empty ( $ids ) )
return array();
$images = get_posts(
array (
'post_type'      => 'attachment',
'post_mime_type' => 'image',
'orderby'        => 'menu_order',
'numberposts'    => 999,
'include'        => $ids
)
);
if ( ! $images )
return array();
return $images;
}

An dieser Stelle zuerst vielen Dank an Thomas Scholz, der sich den von mir fabrizierten Code angeschaut und mir einige Tipps zur Verbesserung gegeben hat – unter anderem hat er mir die Funktion bornholm_get_gallery_images() geschrieben, da mein Weg nicht ganz zum Ziel geführt hat.

In der Funktion holen wir uns mit get_post() die Informationen zu dem Beitrag und speichern sie in der Variable $post. Wenn es den Post nicht gibt oder er leer ist, dann beenden wir die Funktion und geben nur ein leeres Array zurück. Anschließend speichern wir uns die Galerie-Informationen (unter anderem die IDs der Bilder aus der Galerie) in der Variable $galleries. An die Funktion get_post_galleries() übergeben wir neben dem Post-Objekt den booleschen Wert false, damit wir keinen HTML-Code zurückbekommen, sondern nur Daten in einem Array. Wenn keine Galerie oder Galerien vorhanden sind, dann beenden wir die Funktion wieder und geben ein leeres Array zurück.

In der nächsten Zeile initiieren wir ein Array und speichern es in der Variable $ids, das wir anschließend in einer foreach-Schleife befüllen. Wir durchlaufen die Galerien und befüllen das Array $ids mit den Werten aus dem Schlüssel ids des $gallery-Arrays. Nach Beendigung der Schleife entfernen wir doppelte Werte aus dem Array und prüfen, ob das Array leer ist. Ist das der Fall, beenden wir die Funktion wiederum mit der Rückgabe eines leeren Arrays.

Wenn das Array nicht leer ist, dann holen wir uns mit get_posts() die Informationen der Bilder, die wir später benötigen. Wenn wir keine Daten zurückbekommen, dann beenden wir die Funktion wieder vorzeitig und geben sonst das Ergebnis-Array mit den Informationen zu den Galerie-Bildern zurück.

An die Funktion bornholm_gallery_thumbnail_and_title() aus der content-gallery.php-Datei übergeben wir als Parameter die gewünschte Größe des Thumbnails, das Ergebnis der gerade besprochenen bornholm_get_gallery_images()-Funktion und die Überschriften-Ebene. Die Funktion schreiben wir wie folgt an das Ende der functions.php:

function bornholm_gallery_thumbnail_and_title($size, $images, $heading) {
global $post;
if ( $images ) :
$image = array_shift( $images );
$image_img_tag = wp_get_attachment_image( $image->ID, $size );
?>
<a href="<?php the_permalink(); ?>" ↵
title="<?php the_title_attribute( array( ↵
'before' => __( 'Permalink to: ', 'bornholm'), ↵
'after' => '' ) ); ?>" rel="bookmark">
<?php echo '<' . $heading .' class="entry-title">';
the_title();
echo '</' .$heading .'>'; ?>
<figure class="gallery-thumb">
<?php if ( has_post_thumbnail() ):
the_post_thumbnail($size);
else:
echo $image_img_tag;
endif; ?>
</figure><!-- .gallery-thumb -->
</a>
<?php else:?>
<?php echo '<' . $heading .' class="entry-title">';?>
<a href="<?php the_permalink(); ?>" ↵
title="<?php the_title_attribute( ↵
array( 'before' => __( 'Permalink to: ', 'bornholm'), ↵
'after' => '' ) ); ?>" rel="bookmark"><?php the_title();?></a>
<?php echo '</' .$heading .'>';
endif;
}

Wenn wir aus dem Aufruf der bornholm_get_gallery_images()-Funktion etwas zurückbekommen, speichern wir in der Variable $image das erste Element des Bilder-Arrays mittels der PHP-Funktion array_shift. In der nächsten Zeile speichern wir dann in der Variable $image_img_tag das Image-Tag des ersten Bildes. An die Funktion wp_get_attachment_image() übergeben wir die ID des ersten Bildes und die gewünschte Größe large, die wir als Parameter mit dem Funktionsaufruf übergeben haben.

Anschließend kommt bereits bekannter Code. Wir verlinken den Titel, bei dem wir die Ebene der Überschrift aus der Variable $heading holen, und das Featured Image oder, wenn kein Featured Image gesetzt ist, geben wir stattdessen das erste Bild aus. Falls aus irgendeinem Grund keine Bilder gefunden werden sollten, geben wir einfach den Titel aus.

Das war noch relativ einfach – problematisch wurde es als es daran ging, die ersten zwei Bilder aus der Galerie zu bekommen. Nach einiger Bastelei ist dann folgendes dabei herausgekommen, was wir an das Ende der functions.php-Datei schreiben:

function bornholm_small_gallery_thumbnails_and_picture_number($size, $images) {
global $post;
if ( $images ) :
$total_images = count( $images );
$small_images = bornholm_get_gallery_images( $post->ID );
if ( has_post_thumbnail() ):
$post_thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ));
$counter = 0;
$image_list = '<ul>';
foreach( $small_images as $single_image ):
$single_image_url = wp_get_attachment_image_src( $single_image->ID );
if($counter>=2):
break;
endif;
if($post_thumbnail[0]==$single_image_url[0]):
continue;
endif;
$image_list .= '<li>' . wp_get_attachment_image( $single_image->ID, $size ) . '</li>';
$counter++;
endforeach;
$image_list .= '</ul>';
echo $image_list;
else:
$counter = 0;
$image_list = '<ul>';
foreach( $small_images as $single_image ):
if($counter==0):
$counter++;
continue;
endif;
if($counter>=3):
break;
endif;
$image_list .= '<li>' . wp_get_attachment_image( $single_image->ID, $size ) . '</li>';
$counter++;
endforeach;
$image_list .= '</ul>';
echo $image_list;
endif;
?>
<p><em><?php printf( _n( 'This gallery contains ↵
<a %1$s>%2$s photo</a>.', 'This gallery contains ↵
<a %1$s>%2$s photos</a>.', $total_images, 'bornholm' ), ↵
'href="' . esc_url( get_permalink() ) . '" ↵
title="' . esc_attr( sprintf( __( 'Permalink to %s', 'bornholm' ), ↵
the_title_attribute( 'echo=0' ) ) ) . '" ↵
rel="bookmark"', number_format_i18n( $total_images )); ?> ↵
</em></p>
<?php endif;
}

Die ersten Zeilen der Funktion sind hier identisch mit der vorherigen. Nach der Überprüfung der Variable $images speichern wir die Anzahl der Bilder in der Variable $total_images. Anschließend durchlaufen wir die Bilder wie in dem oberen Code-Teil und speichern das Ergebnis in der Variable $small_images. Danach prüfen wir, ob es ein Featured Image gibt – ist das der Fall, müssen wir prüfen, welches das ist, damit wir nicht aus Versehen hier dasselbe Bild ein zweites Mal in klein ausgeben.

Wir holen uns mit der wp_get_attachment_image_src()-Funktion die Daten des Featured Image (unter anderem die URL an erster Stelle des Ergebnis-Arrays), indem wir die ID übergeben, die wir aus der get_post_thumbnail_id()-Funktion zurückbekommen, und speichern sie in der Variable $post_thumbnail. Anschließend setzen wir eine Zähler-Variable auf Null und widmen uns der Liste der kleineren Vorschaubilder.

Wir durchlaufen eine foreach-Schleife für jeden der Array-Werte aus der bornholm_get_gallery_images()-Funktion und speichern jedes Mal die Daten des Bildes in der Variable $single_image_url. Wenn der Counter größer oder gleich zwei ist, brechen wir die foreach-Schleife ab und machen danach weiter. Wenn die URL des aktuellen Bildes identisch mit der des Featured Image ist, brechen wir nur den aktuellen Durchlauf ab. Andernfalls hängen wir bei jedem Durchlauf an die Variable $image_list einen Listeneintrag mit dem aktuellen Bild an und erhöhen den Zähler um einen Wert.

Wenn kein Featured Image gesetzt ist, dann gehen wir etwas anders vor. Wenn der Counter auf Null steht, brechen wir den aktuellen Durchlauf der Schleife ab – also immer den ersten. Wenn der Counter größer oder gleich drei ist, dann brechen wir die komplette Schleife ab – andernfalls füllen wir die Variable mit einem weiteren Listenelement und erhöhen den Zähler. Abschließend schließen wir die Liste und geben per echo die Liste aus. Danach zeigen wir noch die Zahl der Bilder an, die wir anfangs in $total_images gespeichert haben.

Der Aufruf der Funktion sieht in der content-gallery.php-Datei dann so aus – damit ersetzen wir den Inhalt des div-Elements mit der Klasse entry-content:

bornholm_small_gallery_thumbnails_and_picture_number('thumbnail', $images);

Damit sieht die content-gallery.php nun so aus:

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<header class="entry-header">
<?php $images = bornholm_get_gallery_images( $post->ID );
bornholm_gallery_thumbnail_and_title('large', $images, 'h1');?>
</header><!-- .entry-header -->
<div class="entry-content">
<?php bornholm_small_gallery_thumbnails_and_picture_number('thumbnail', $images);?>
</div><!-- .entry-content -->
<footer class="entry-meta">
<?php bornholm_footer_meta() ?>
</footer><!-- .entry-meta -->
</article><!-- #post-<?php the_ID(); ?> -->

Und das war's auch erst mal mit dem Kapitel content-Dateien. Vielleicht werden wir hier später noch die Kamera-Informationen darstellen, die der Nutzer eingetragen hat, und einen prominenteren Hinweis auf die ganze Galerie platzieren aber für den Moment soll uns das so reichen.

Kümmern wir uns als nächstes um die alternative Startseite des Themes – den kleinen Ausschnitt aus dem Portfolio. Hier möchten wir zuerst grundlegend die neuesten zwei oder drei Galerien aus den verschiedenen Kategorien darstellen. Wenn mehr Galerien vorhanden sind, dann zeigen wir zusätzlich noch einen Link auf die Kategorie-Seite – im besten Fall hat der Nutzer eigene Kategorien für Galerien, damit der Besucher auch wirklich nur Galerien vorfindet.

So in etwa soll am Ende die alternative Startseite aussehen. (Fotos: Dennis Brinkmann)
So in etwa soll am Ende die alternative Startseite aussehen. (Fotos: Dennis Brinkmann)

Standardmäßig möchten wir außerdem, dass Galerien aus untergeordneten Kategorien auch direkt unter der übergeordneten Galerie-Kategorie aufgeführt werden. Wenn es also eine allgemeinere Galerie-Kategorie „Sport“ gibt, und dieser dann die Galerie-Kategorie „Leichtathletik“ untergeordnet ist, dann sollen die neusten Galerien aus „Leichtathletik“ direkt unter denen aus der Kategorie „Sport“ angezeigt werden. In dem Theme-Customizer werden wir dem Nutzer dann in einem späteren Teil noch die Möglichkeit geben, die ganzen Kategorien einfach alphabetisch sortiert auszugeben ohne die Hierarchie zu beachten.

Legen wir uns also die Datei alternative-home-page.php an und füllen sie mit ein wenig Inhalt:

<?php
/*
* Template Name: Alternative home page
* Description: A Page Template for the alternative home page. It displays a brief overview of the portfolio.
*/
get_header(); ?>
<main role="main">
<?php
$args = array(
'orderby' => 'name',
'parent' => 0
);
$categories = get_categories( $args );
foreach ( $categories as $cat ):
$galleries_args = array(
'category__in' => $cat->cat_ID,
'tax_query' => array(
'relation' => 'AND',
array(
'taxonomy' => 'category',
'field' => 'slug',
'terms' => $cat->slug
),
array(
'taxonomy' => 'post_format',
'field' => 'slug',
'terms' => 'post-format-gallery'
)
)
);
$galleries = get_posts( $galleries_args );
if( $galleries) :
$total_galleries = count($galleries);
$number_of_galleries = 3;
$gallery_counter = 0;?>
<div class="gallery-category">
<h2><?php echo $cat->name; ?></h2>
<?php foreach ( $galleries as $post ):
if($total_galleries > $number_of_galleries):
$gallery_counter++;
if($gallery_counter > $number_of_galleries):?>
<article>
<h3><a href="<?php echo esc_url(get_category_link( $cat->cat_ID )) ?>" ↵
title="<?php _e('All Posts from ', 'bornholm'); echo $cat->name ?>"> ↵
<?php _e('Display all', 'bornholm');?></a></h3>
</article>
<?php break;
endif;
endif;?>
<article>
<?php $images = bornholm_get_gallery_images( $post->ID );
bornholm_gallery_thumbnail_and_title('thumbnail', $images, 'h3'); ?>
</article>
<?php endforeach;
bornholm_get_child_category_galleries($cat, $number_of_galleries);?>
</div>
<?php endif;
endforeach;?>
</main>
<?php get_sidebar();
get_footer(); ?>

Zuerst kommt in dem Kommentar der Name und die Beschreibung des Templates, den der Nutzer dann auch zu sehen bekommt. Anschließend holen wir uns ganz normal den Header und öffnen das main-Tag. In Zeile neun befüllen wir ein Array mit den benötigten Angaben, nach denen wir anschließend die Kategorien aussuchen möchten. Wir sortieren nach dem Namen der Kategorien und geben per 'parent' => 0 an, dass wir nur die Kategorien der obersten Ebene haben möchten – wir erinnern uns: Die untergeordneten Kategorien möchten wir räumlich dicht bei den Oberkategorien ausgeben.

Im nächsten Schritt speichern wir die Informationen, die uns die get_categories()-Funktion zu den Kategorien liefert, in der Variablen $categories. Jede dieser Kategorien durchlaufen wir nun mit einer foreach-Schleife – die gerade aktuelle Kategorie wird dabei in der Variable $cat gespeichert. Nun müssen wir als nächstes die Beiträge auslesen, die in der Kategorie sind und das Post-Format „Galerie“ haben. Dafür bereiten wir ab Zeile 15 ein Array vor, dem wir die Parameter für die später aufzurufende get_posts()-Funktion übergeben.

Als Wert für 'category__in' übergeben wir mit $cat->cat_ID die ID der aktuellen Kategorie. Den Schlüssen category statt 'category__in' zu verwenden, wie es naheliegen würde, reicht hier nicht aus, da sonst auch die Beiträge der Unterkategorien ausgelesen werden würden. Dem Schlüssel 'tax_query' übergeben wir als Wert ein mehrdimensionales Array: Die Posts sollen einmal für die Taxonomie 'category' den slug haben, der mit dem Slug der aktuellen Kategorie übereinstimmt ('terms' => $cat_child->slug). Diese Bedingung verknüpfen wir mittels AND mit der zweiten, nämlich dass der Slug des Post-Formats mit dem Slug post-format-gallery übereinstimmen muss.

Die Posts, die diese Merkmale erfüllen, holen wir uns in Zeile 31 mit der get_posts()-Funktion und speichern sie in der Variable $galleries. Danach prüfen wir, ob wir Posts zurückbekommen haben – wenn das der Fall ist, dann zählen wir sie und legen die Zahl der anzuzeigenden Galerien ($number_of_galleries) fest. In der nächsten Zeile setzen wir einen Counter auf Null und geben danach als ersten Inhalt in dem div-Element den Namen der Kategorie aus. Nun folgt eine weitere foreach-Schleife, mit der wir die einzelnen Galerie-Beiträge durchlaufen.

Wenn die Anzahl der Galerien größer ist, als die Zahl, die wir anzeigen möchten, dann müssen wir ja entsprechend den Link zu der Kategorie ausgeben, damit der Nutzer auch die anderen Galerien anschauen kann. Wenn das also der Fall ist, erhöhen wir zuerst den Counter um eins und testen anschließend, ob der Wert des Counters größer ist als die Anzahl der Galerien, die wir anzeigen wollen. Ist dem so, geben wir innerhalb eines article-Elements als h3-Headline den Text „Display all“ als Link auf die Kategorie aus. Danach brechen wir die foreach-Schleife mit break ab.

Wenn der Counter noch nicht höher ist als die Anzahl der anzuzeigenden Galerien oder sowieso weniger Galerien vorhanden sind, dann geben wir ab Zeile 50 wiederum in einem article-Element mit der bornholm_gallery_thumbnail_and_title()-Funktion das Artikelbild oder das erste Bild der Galerie mit der Headline aus, wie wir das oben in der content-gallery.php-Datei schon gemacht haben.

Nachdem der Durchlauf der foreach-Schleife entweder durch das break abgebrochen oder normal beendet wurde, wenn weniger Galerien vorhanden sind als dargestellt werden sollen, rufen wir die Funktion bornholm_get_child_category_galleries() auf, um die Kategorien auszugeben, die der aktuellen Kategorie untergeordnet sind. Als Parameter übergeben wir die aktuelle Kategorie und die Nummer der anzuzeigenden Galerien. Danach werden einfach noch die Tags, Schleifen und Bedingungen geschlossen und beendet, die noch offen sind, und die Sidebar und der Footer auf altbekannte Weise eingebunden.

Die Funktion bornholm_get_child_category_galleries() gehört wieder in die functions.php und sieht so aus:

function bornholm_get_child_category_galleries($cat, $number_of_galleries) {
$category_children = get_term_children( $cat->term_id, 'category' );
if ( $category_children ):
foreach( $category_children as $cat_child ):
$cat_child = get_category($cat_child);
$child_galleries_args = array(
'category__in' => $cat_child->term_id,
'tax_query' => array(
'relation' => 'AND',
array(
'taxonomy' => 'category',
'field' => 'slug',
'terms' =>  $cat_child->slug
),
array(
'taxonomy' => 'post_format',
'field' => 'slug',
'terms' => 'post-format-gallery'
)
)
);
$child_galleries = get_posts( $child_galleries_args );
if( $child_galleries) :
$total_child_gallerys = count($child_galleries);
$gallery_child_counter = 0;?>
<div class="gallery-category child">
<h2><?php echo $cat_child->name; ?></h2>
<?php foreach ( $child_galleries as $post_child ) :
if($total_child_gallerys > $number_of_galleries):
$gallery_child_counter++;
if($gallery_child_counter > $number_of_galleries):?>
<article>
<h3><a href="<?php echo esc_url(get_category_link( $cat_child->cat_ID )) ?>" ↵
title="<?php _e('All Posts from ', 'bornholm'); echo $cat_child->name ?>"> ↵
<?php _e('Display all', 'bornholm');?></a></h3>
</article>
<?php break;
endif;
endif;?>
<article>
<?php $images_child = bornholm_get_gallery_images( $post_child->ID );
if ( $images_child ) :
$image_child = array_shift( $images_child );
$image_child_img_tag = wp_get_attachment_image( $image_child->ID, 'thumbnail' );
?>
<a href="<?php echo get_permalink( $post_child->ID ); ?>" ↵
title="<?php _e( 'Permalink to: ', 'bornholm'); echo $post_child->post_title ?>" rel="bookmark">
<h3 class="entry-title"><?php echo $post_child->post_title; ?></h3>
<figure class="gallery-thumb">
<?php if ( has_post_thumbnail($post_child->ID) ):
echo get_the_post_thumbnail($post_child->ID, 'thumbnail');
else:
echo $image_child_img_tag;
endif; ?>
</figure><!-- .gallery-thumb -->
</a>
<?php else:?>
<h3 class="entry-title"><a href="<?php echo get_permalink( $post_child->ID ); ?>" ↵
title="<?php _e( 'Permalink to: ', 'bornholm'); echo $post_child->post_title ?>" ↵
rel="bookmark"><?php echo $post_child->post_title; ?></a></h3>
<?php endif; ?>
</article>
<?php endforeach; ?>
</div>
<?php endif;
endforeach;
endif;
}

Das sieht zugegebenermaßen viel aus, aber einiges davon hatten wir eben in der alternative-home-page.php-Datei bereits in Verwendung. Zuerst holen wir uns mittels der get_term_children()-Funktion die untergeordneten Kategorien der aktuellen Kategorie und speichern das Ergebnis in der Variable $category_children. Wir übergeben als Parameter die ID der aktuellen Kategorie ($cat->term_id) und die Art des Terms, die wir zurückbekommen möchten, nämlich 'category'. Wenn wir hier untergeordnete Kategorien zurückbekommen, dann durchlaufen wir diese genauso, wie wir das mit den übergeordneten Kategorien in der alternative-home-page.php-Datei auch gemacht haben:

In der Variable $cat_child speichern wir uns äquivalent zu der Variable $cat die Informationen aus dem Aufruf der get_category()-Funktion – get_term_children() liefert uns nämlich nur die ID zurück. Bis Zeile 41 ist danach alles fast identisch mit dem Code aus der alternative-home-page.php, wir müssen lediglich die Variablen anpassen und brauchen nicht mehr die Anzahl der anzuzeigenden Galerien festzulegen, da wir das ja in der Variable $number_of_galleries bereits getan haben.

Bei meinem Versuch, auch einfach wie in der anderen Datei die Funktion bornholm_get_child_category_galleries() zu nutzen, trat dann allerdings ein Fehler auf. Es wurde nicht der korrekte Titel und Link ausgegeben, sondern der von der letzten Galerie aus der übergeordneten Kategorie – auch das Featured Image hat nicht gepasst.

Die Zeilen 42 bis 61 entsprechen also nur fast denen in der bornholm_get_child_category_galleries()-Funktion. Die Funktion the_permalink() ersetzen wir durch echo get_permalink( $post_child->ID );, die Funktion the_title_attribute() durch echo $post_child->post_title; und the_title() ersetzen wir durch echo $post_child->post_title. Der Funktion has_post_thumbnail() übergeben wir die ID des Posts und the_post_thumbnail('thumbnail'); ersetzen wir durch folgende Zeile:

echo get_the_post_thumbnail($post_child->ID, 'thumbnail');

Schon wieder ziemlich viel geworden – Schluss jetzt!

Das soll es dann auch mit diesem Teil gewesen sein. Die Code-Beispiele waren diesmal ziemlich lang, ich hoffe, es war noch okay so und ich konnte es verständlich erklären (Ich werde mein „Code-Design“ für den nächsten Teil anpassen, weshalb es sein kann, dass die Veröffentlichung etwas länger dauert (Einarbeitungszeit et cetera)). Wir haben jetzt also die Galerien in der Blog-Ansicht und die alternative Startseite grundlegend fertig.

Bei den Galerien in der Blog-Ansicht kommen, wie schon gesagt, vielleicht noch die Kamera-Informationen dazu, die der Autor angeben können soll. Bei der alternativen Startseite fehlt auf jeden Fall noch die Möglichkeit, ein großes Vorschaubild festzulegen, sowie die großen Widgets optional nach oben zu ziehen.

Alle Teile unseres Guides im Überblick:

]]>
Florian Brinkmann
WordPress 4.0 erschienen: Diese Funktionen bringt die neue Version http://t3n.de/news/wordpress-4-0-funktionen-neue-version-556971/ 2014-09-05T08:30:38Z
WordPress 4.0 „Benny“ ist erschienen. Die neue Major-Version bringt etliche neue Features mit, und verspricht vor allem beim Editor und Media-Modul viele neue Features.

4.0 „Benny“ ist erschienen. Die neue Major-Version bringt etliche neue Features mit, und verspricht vor allem beim Editor und Media-Modul viele neue Features.

WordPress liefert in Version 4.0 einige Verbesserungen, die das Leben der Nutzer erheblich vereinfachen können – darunter Änderungen der Medienansicht, bei der Einbindung von Videos, Tweets et cetera und vor allem eine deutliche Verbesserungen Nutzbarkeit des Editors.

WordPress 4.0: Viele hilfreiche neue Features

Doch der Reihe nach: In WordPress ist es seit Version 2.9 möglich, bestimmte Dienste einfach per Angabe der URL einzubinden – häufig genutzt wird beispielsweise die Einbindung von Tweets, die seit Version 3.4 unterstützt wird. In der kommenden Version 4.0 wird in den visuellen Editor eine Vorschau dieser Einbettungen integriert. Wenn ihr also in eine eigene Zeile die URL eines Tweets einfügt, dann bekommt ihr gleich die Vorschau angezeigt. Dasselbe funktioniert auch bei dem Punkt „Von URL einfügen“ unter „Dateien einfügen“.

Für mehr Übersicht und einen schnelleren Überblick in medienlastigen Backends sorgt die Grid-Ansicht, die – jedenfalls in der Beta – standardmäßig aktiv ist. Die „alte“ Listenansicht könnt ihr euch natürlich aber auch zurückholen, wenn ihr wollt.

Für den schnellen Überblick: Die neue Darstellung der Medien in WordPress 4.0. (Screenshot: eigene Installation)
Für den schnellen Überblick: Die neue Darstellung der Medien in WordPress 4.0. (Screenshot: eigene Installation)

Ebenfalls visuell verbessert wurde die Suche nach Plugins. Wenn ihr nach einem Plugin sucht, dann wird euch statt einer Liste jetzt eine übersichtlichere Kachelansicht der Ergebnisse angezeigt – zusätzlich zur Listenansicht wird euch hier auch gleich gezeigt, wann das Plugin zuletzt aktualisiert wurde und ob es bereits erfolgreich mit der WordPress-Version getestet wurde, die ihr nutzt. Wenn ihr euch dann die Details eines Plugins anschauen möchtet, öffnet sich in einem Overlay die Plugin-Seite aus dem WordPress-Plugin-Verzeichnis, wodurch ihr jetzt neben der ansprechenderen Gestaltung auch gleich Zugriff auf die Reviews habt, was in der vorherigen Ansicht nicht möglich war.

So sieht die Ergebnisseite nach einer Plugin-Suche aus. (Screenshot: eigene Installation)
So sieht die Ergebnisseite nach einer Plugin-Suche aus. (Screenshot: eigene Installation)

Die besten Änderungen erfolgen im Editor

„Die besten Änderungen“ ist natürlich rein subjektiv, doch wir denken, dass die Verbesserungen am Editor nicht nur uns sehr gut gefallen. Wie Mark Jaquith, einer der Lead-Developer von WordPress, es in seinem Ticket ganz richtig beschreibt:

„Die Höhe des Bildschirms wird nicht voll genutzt und das Bearbeiten ist eine frustrierende Situation aus einem scrollbaren Container innerhalb eines weiteren scrollbaren Containers mit vielen Ablenkungen.“

Dem kann man nur zustimmen. Hat man aus Versehen mal wieder zu weit „im äußeren Bereich“ gescrollt und die Werkzeugleiste oben nicht mehr sichtbar ist, muss man erst wieder nach oben scrollen, um beispielsweise ein Bild einfügen zu können. Befindet man sich mit dem Cursor im Artikel, muss man eventuell auch hier noch scrollen oder die Maus an den Rand bewegen. Das ändert sich jetzt endlich: Der Editor passt sich in WordPress 4.0 automatisch der Höhe des Inhalts an. Einen Scrollbalken gibt es im Editor damit nicht mehr. Wenn dann gescrollt wird und die obere Werkzeugeiste eigentlich aus dem sichtbaren Bereich verschwinden würde, wird sie einfach am oberen Rand fixiert. Gleiches gilt für die untere Leiste, in der Informationen wie die Wortanzahl und der zuletzt Bearbeitende angezeigt werden.

Meiner Meinung nach die beste Änderung: Die Überarbeitung des Editors. (Screenshot: eigene Installation)
Meiner Meinung nach die beste Änderung: Die Überarbeitung des Editors. (Screenshot: eigene Installation)

Fazit: WordPress 4.0 wird toll – vor allem der Editor!

Es sind zwar keine revolutionären Änderungen dabei, aber die mitgebrachten Verbesserungen sind gut überlegt und sinnvoll. Weitere Infos über den neuen Release findet ihr im offiziellen WordPress-Blog. Bestehende WordPress-Installationen weisen euch automatisch auf die Verfügbarkeit des neuen Updates hin. Wer sich WordPress 4.0 neu downloaden möchte, muss sich zukünftig nicht mehr für eine Sprachversion entscheiden. Diese Einstellung kann nun während der Installation ausgewählt werden.

via wordpress.org

]]>
Florian Brinkmann
Welches Theme ist das? Diese Tools identifizieren WordPress-Themes für euch http://t3n.de/news/wordpress-themes-identifizieren-564458/ 2014-08-28T09:10:33Z
Wir haben für euch drei Tools unter die Lupe genommen, die euch sagen, welches Theme ein WordPress-Blog einsetzt. Welches das beste Werkzeug dafür ist, verraten wir euch in unserem Artikel.

Wir haben für euch drei Tools unter die Lupe genommen, die euch sagen, welches ein WordPress-Blog einsetzt. Welches das beste Werkzeug dafür ist, verraten wir euch in unserem Artikel.

WordPres-Themes identifizieren: Wir stellen euch drei Tools vor, die euch sagen. welches Theme eine Seite nutzt. (Screenshot: WhatTheme)
WordPres-Themes identifizieren: Wir stellen euch drei Tools vor, die genau diese Möglichkeit liefern. (Screenshot: WhatTheme)

WordPress: Diese Tools identifizieren das eingesetzte Theme für dich

Ihr habt ein WordPress-Blog gesehen und würdet gerne wissen, welches Theme die Seite nutzt, findet aber keinen Hinweis darauf? Kein Problem, es gibt mittlerweile mehrere Tools, die das Theme einer WordPress-Seite identifizieren können. Wir haben uns drei solcher Werkzeuge für euch angeschaut und überprüft, wie gut die Tools arbeiten. In unserem kleinen Test haben wir einen Blick auf WordPress Theme Search, WPThemeDoctor und WhatTheme geworfen.

Im Bezug auf konnte uns WhatTheme leider am wenigsten überzeugen. Einige unserer Test-Seiten erkannte das Tool überhaupt nicht. Und wenn das Werkzeug ein Theme erkannte, lieferte es im Gegensatz zu den beiden anderen Tools nur den Namen und keine zusätzlichen Informationen. Dafür erkennt WhatTheme aber auch Joomla- und Drupal-Themes. Dadurch kann die Seite auch hilfreich sein, wenn ihr nicht wissen solltet, welches CMS eingesetzt wird. Zu Identifikation von WordPress-Themes würden wir trotzdem eines der beiden anderen Werkzeuge empfehlen.

WordPress Theme Search und WPThemeDoctor liefern euch zusätzliche Informationen zu erkannten WordPress-Themes. (Screenshot: WordPress Theme Search)
WordPress Theme Search und WPThemeDoctor liefern euch zusätzliche Informationen zu erkannten WordPress-Themes. (Screenshot: WordPress Theme Search)

WordPress-Themes identifizieren

Sowohl Theme Search als auch WPThemeDoctor funktionierten in unserem kleinen Test recht gut. Perfekt sind beide allerdings auch nicht. Tendenziell schien WPThemeDoctor geringfügig mehr Themes zu erkennen, lieferte aber zumindest in einem Fall auch ein falsche Ergebnis. Trotzdem ist die Trefferquote noch relativ hoch. Außerdem liefern sie zu allen erkannten WordPress-Themes zusätzliche Informationen zum Ersteller des jeweiligen Themes sowie einen Link und eine Kurzbeschreibung.

Auch wenn die Tools gewisse Schwächen haben, kann es sich durchaus lohnen, alle drei Werkzeuge in die eigenen Bookmarks aufzunehmen. Wer wirklich mal ein Theme identifizieren will, erspart sich damit möglicherweise viel Zeit.

via www.producthunt.com

]]>
Kim Rixecker
Exklusiv: LaterPay für alle! WordPress-Plugin für Paid-Content ab sofort kostenlos verfügbar [Update] http://t3n.de/news/laterpay-557417/ 2014-08-19T12:52:14Z
Das WordPress-Plugin des Münchener Startups LaterPay gilt als deutsche Hoffnung für die Finanzierung journalistischer Inhalte im Netz. Nach einer geschlossenen Testphase ist der Bezahldienst jetzt …

Das WordPress-Plugin des Münchener LaterPay gilt als deutsche Hoffnung für die Finanzierung journalistischer Inhalte im Netz. Nach einer geschlossenen Testphase ist der Bezahldienst jetzt für alle kostenlos nutzbar.

Update vom 19. August 2014: Das LaterPay-Plugin ist ab sofort im offiziellen Plugin-Release-Channel von WordPress.org zum Download erhältlich. Die Installation des Plugins zur Monetarisierung von Content auf Blogs und Webseiten sowie digitalen Gütern wird damit noch einmal erleichtert. Mit der aktuellen Versionsnummer 0.9.7.2 befindet sich das Plugin allerdings noch immer in einer offenen Testphase. Die Macher empfehlen weiterhin, LaterPay vor der kommerziellen Integration in einer separaten Testumgebung zu installieren.

LaterPay: WordPress-Plugin auf Github zum Download

Es ist soweit: Nach mehreren Monaten in der geschlossenen Testphase stellt das Münchner Startup LaterPay ab heute sein WordPress-Plugin zur Monetarisierung von digitalen Inhalten kostenlos zum Testen zur Verfügung. Alle Interessenten – ob Blogger, Journalisten oder Webseitenbetreiber – können sich das LaterPay-Plugin für WordPress über Github kostenlos runterladen und installieren.

Hinter dem Plugin steht die Idee, Leser und Konsumenten nur für jene digitalen Inhalte im Netz zahlen zu lassen, die sie auch tatsächlich gelesen haben. Der Preis für jeden Text wird individuell vom Urheber bestimmt, soll gemäß der Philosophie aber im Bereich einiger Cents bis hin zu wenigen Euro liegen. Die Zahlung wird erst dann veranlasst, wenn Leser Inhalte für insgesamt fünf Euro konsumiert haben. Neben der Möglichkeit, Paid-Content mit nur einem Klick einzusehen und zu bezahlen, können Nutzer die Zahlung für einen Text bei Nichtgefallen auch revidieren. Autoren, Verleger und Urheber wiederum werden mit einem Algorithmus vor Missbrauch dieser Funktion geschützt.

LaterPay-Nutzer wählen zwischen zwei Bezahlmodellen: dem Pay-per-use auf der einen, und dem Freemium-Modell auf der anderen Seite. Beim ersten Modell zahlen Leser beispielsweise für einen kompletten Artikel, beim zweiten Modell können kostenpflichtige und kostenlose Inhalte in Kombination angeboten werden – zum Beispiel kann ein Blogpost kostenlos, eine dazugehörige Infografik oder ein Video aber kostenpflichtig angeboten werden. Über die Preisstruktur bestimmen dabei die Seitenbetreiber.

LaterPay: Das WordPress-Plugin des gleichnamigen Münchener Startups ermöglicht das einfache Bezahlen journalistischer Inhalte im Netz. (Bild: LaterPay)
LaterPay: Das WordPress-Plugin des gleichnamigen Münchener Startups ermöglicht das einfache Bezahlen journalistischer Inhalte im Netz. (Grafik: LaterPay)

Das LaterPay-Plugin mit der aktuellen Versionsnummer 0.9.5.1 beinhaltet schon alle zum Verkauf von Content notwendigen Funktionen. Derzeit arbeite man aber beispielsweise noch an Videotutorials, Integrationsbeispielen und Testumgebungen, um die Nutzbarkeit des Bezahldienstes weiter zu verbessern. Als eine der wichtigsten Neuerungen als Ergebnis der geschlossenen Testphase preist LaterPay eine automatisierte Rechnungsstellung inklusive Umsatzsteuerausweis an. „Wir wissen aus viel Feedback, dass dies eine bei Bloggern, Journalisten und Content-Anbietern immer sehr wichtige Funktion ist“, sagt Daniel Raumer, verantwortlicher Produktmanager bei LaterPay.

Deutsches Startup mit dem Segen von Richard Gutjahr

Das Münchner Startup LaterPay unternimmt den Versuch, eine erste Antwort auf die schon seit Jahren schwelende Debatte um die künftige Finanzierung journalistischer Inhalte im Netz zu liefern. Während einige große deutsche Medien nach dem Vorbild von US-Verlagen eine allumfassende Bezahlschranke (Paywall) um ihre Inhalte errichten, hält der Großteil aus Mangel an entsprechenden Alternativen weiterhin an werbefinanzierten Geschäftsmodellen fest. Beide Lösungsansätze sind bei Lesern und Konsumenten jedoch umstritten.

Julian Assange und Richard Gutjahr, ConventionCamp 2012
Prominente Unterstützung bekommt LaterPay von Journalist und Blogger Richard Gutjahr. (Foto: ConventionCamp 2012)

Mit seinem WordPress-Plugin will LaterPay das ändern und weiß bekanntlich um prominente Unterstützung: Der Journalist und Blogger Richard Gutjahr hat bei dem 2010 von Cosmin-Gabriel Ene und Jonas Maurus gegründeten Unternehmen eine Beraterfunktion inne. Entsprechend wirbt Gutjahr für LaterPay, auf seinem Blog nutzt er das Plugin schon von Beginn an für die Monetarisierung seiner Inhalte. Neben Texten kann Laterpay zum Beispiel auch für die vereinfachte Bezahlung von Video-, Audio- und sogar Gaming-Inhalten im Netz genutzt werden.

So installierst du LaterPay auf deinem Blog

Es wird empfohlen, das LaterPay-Plugin zunächst in einer Testumgebung zu installieren, zu nutzen und erst danach in einer Produktivumgebung zu aktivieren. Losgelöst vom eigenen Blog lässt sich eine solche Testumgebung zum Beispiel über den Cloudhoster Digital Ocean fünf US-Dollar (circa 3, 60 Euro) monatlich einrichten. Neben der automatisierten Installation per Mausklick geschieht die anschließende Konfiguration des Plugins in drei Schritten: Zugangsdaten eingeben, Standardpreis festlegen und aktivieren. Eine Schritt-für-Schritt-Anleitung findet ihr in der nachfolgenden Bildergalerie.

Was Nutzer noch über LaterPay wissen müssen

Wie aber können Blogger, Journalisten und Content-Anbieter das LaterPay-Plugin zu gewerblichen Zwecken nutzen? Schließlich werden in der Testumgebung nur fiktive Zahlungen simuliert. Um reale Umsätze zu ermöglichen, müssen Nutzer ihre gültigen Live-API-Zugangsdaten im Plugin hinterlegen. Diese Daten erhält man, indem man einen sogenannten LaterPay-Händlervertrag ausfüllt und an das Startup zurückschickt.

Der Vertrag ermöglicht den Einsatz von LaterPay auf der Webseite, er verpflichtet jedoch nicht dazu. Fixkosten entstehen übrigens nicht, weder Registrierungs- noch Setup- oder Grundgebühren fallen bei LaterPay an. Nur für verkaufte Artikel führen Nutzer eine Provision in Höhe von 15 Prozent an Laterpay ab. Der Vertrag ist jederzeit monatlich und ohne Angabe von Gründen kündbar.

]]>
Daniel Hüfner
Multi-User-Unterstützung und mehr: Das bringt die neue Version 0.5 der Blog-Software Ghost http://t3n.de/news/mutli-user-unterstuetzung-mehr-562064/ 2014-08-12T12:02:00Z
Ghost ist die Software eines ehemaligen WordPress-Mitarbeiters und soll dem Nutzer in einer schlanken Lösung einfach nur das Bloggen ermöglichen. Gestern wurde Version 0.5 des Systems …

ist die Software eines ehemaligen WordPress-Mitarbeiters und soll dem Nutzer in einer schlanken Lösung einfach nur das Bloggen ermöglichen. Gestern wurde Version 0.5 des Systems veröffentlicht, und die bringt einige neue Features mit.

Ghost: Multi-User-Unterstützung, offene JSON-API und mehr

Ghost bringt in der neuen Version drei Kern-Veränderungen mit. Zuerst, und für den „einfachen Nutzer“ vermutlich am interessantesten, ist die Unterstützung für mehrere Autoren – dieses Feature haben die Macher auch gleich in ihrem Blogbeitrag zur neuen Ghost-Version genutzt. Das dürfte ein Feature sein, was viele Nutzer oder potenzielle Nutzer von Ghost bislang stark vermisst haben.

Wichtiges neues Feature: Multi-User-Unterstützung bei Ghost. (Screenshot: Ghost)
Wichtiges neues Feature: Multi-User-Unterstützung bei Ghost. (Screenshot: Ghost)

Als zweites Kern-Feature wurde eine öffentliche JSON-API eingeführt, mit der ihr Web-, Desktop-, Android- und iOS-Apps auf Basis eines Ghost-Blogs aufbauen könnt. Jedes Feature von Ghost ist damit für Entwickler von Drittanwendungen zugänglich. In naher Zukunft werden die Entwickler die Authentifizierung per OAuth öffnen.

Als drittes Feature wird das technisch überarbeitete Backend genannt, das komplett neu in Ember.js geschrieben wurde. Neben diesen Schlüssel-Features wurde unter anderem das Standard-Theme überarbeitet und liegt nun in Version 1.0 vor, es gibt OAuth-Support, neue Funktionen für Theme-Entwickler, automatische Gzip-Komprimierung im Produktiv-System und Verbesserungen für die Nutzung auf mobilen Geräten. Alle Änderungen könnt ihr auf Gist finden.

Ghost ab sofort mit einem neuen Update-Zyklus

Bisher hat es Ghost mit Updates ungefähr so gehalten wie andere Open-Source-Systeme und zwei bis drei pro Jahr veröffentlicht. Das ist den Machern von Ghost nicht agil genug, weshalb sie jetzt zu einem Update-Zyklus übergehen, der alle zwei bis vier Wochen ein Update bringt. Große Updates wie das zu Version 0.5 wird es damit nicht mehr geben.

]]>
Florian Brinkmann
Der große t3n-Guide zum eigenen WordPress-Theme – Teil 2: Das Grundgerüst [Update] http://t3n.de/news/grosse-t3n-guide-eigenen-wordpress-theme-das-grundgeruest-555808/ 2014-08-01T13:13:57Z
In dieser Artikelreihe geht es darum, ein WordPress-Theme zu erstellen – von Grund auf. Im zweiten Teil starten wir mit der Entwicklung und stellen die Grundfunktionalitäten des Themes sicher.

In dieser Artikelreihe geht es darum, ein WordPress-Theme zu erstellen – von Grund auf. Im zweiten Teil starten wir mit der Entwicklung und stellen die Grundfunktionalitäten des Themes sicher.

Update vom 1. August 2014: Thomas Scholz hat mir in der „WordPress Deutschland“-Community auf Google+ noch ein paar Verbesserungsvorschläge gegeben, die ich hier noch eingebaut habe. Zum Einen gibt es bei WP Test bessere Testdaten als die von Automattic, die ich von jetzt an verwenden werde. Außerdem habe ich das Einbinden der Pingback-URL in der header.php-Datei noch davon abhängig gemacht, ob sich der Nutzer gerade auf einer Einzelseite befindet und Pingbacks überhaupt erwünscht sind.Des Weiteren ist der Verweis auf die style.css aus dem Header verschwunden – in dieser style.css-Datei stehen nur die Informationen, die WordPress zur Erkennung des Themes braucht. Der CSS-Code wird dann in späteren Teilen in eine andere CSS-Datei geschrieben und diese mit der wp_enqueue_style()-Funktion eingebunden, damit es von Child-Themes oder Plugins leichter abgeschaltet werden kann.Schlussendlich habe ich die Einbindung der JavaScript-Datei, die für die Platzierung des Kommentarfeldes direkt unter dem zu beantwortenden Kommentar verantwortlich ist, aus dem head-Element entfernt. In einem späteren Teil werden wir das über die functions.php-Datei in den Footer integrieren.

Update vom 7. August 2014: Ich habe die Navigation für paginierte Artikel aus der Datei content.php entfernt – in der Einzelansicht reicht das meiner Meinung nach aus. Außerdem habe ich in allen Übersichtsseiten (content.php, archive.php, index.php, author.php, category.php, search.php, tag.php) die Seitennavigation angepasst, damit auf der ersten beziehungsweise auf der letzten Seite nicht ein leerer Listenpunkt angezeigt wird.

Im ersten Teil unseres Guides für die Erstellung eines WordPress-Themes haben wir euch kurz einen Ausblick auf die Reihe gegeben und euch vorgestellt, wie das WordPress-Theme am Ende ungefähr aussehen soll. Im zweiten Teil werden wir jetzt ganz kurz die lokale Installation von WordPress auf XAMPP anschneiden und anschließend mit der Entwicklung der Funktionen des Themes beginnen. Dabei werden wir uns in diesem Teil nur den Grundfunktionen widmen und Dinge wie Page-Templates, die verschiedenen Post-Formate, Widgets et cetera später behandeln.

WordPress lokal installieren

Da Leser darum gebeten haben, werde ich hier kurz und knapp auf die lokale Installation von WordPress mit XAMPP eingehen. Das ist eigentlich nicht schwer und in ein paar Schritten erledigt:

  1. Ladet euch XAMPP bei apachefriends.org für euer Betriebssystem runter.
  2. Installiert XAMPP – bei Windows müsst ihr darauf achten, dass ihr es direkt im obersten Verzeichnis installiert. Also in C: und nicht in C:/xampp.
  3. Ladet euch die neueste Version von WordPress runter – in Deutsch gibt es die bei de.wordpress.org.
  4. Entpackt WordPress in das htdocs-Verzeichnis von XAMPP.
  5. Startet bei XAMPP den Apache und MySQL – eventuell müsst ihr in den Einstellungen die Ports ändern, damit der Apache startet.
  6. Legt unter http://localhost/phpmyadmin eine neue MySQL-Datenbank an.
  7. Ruft mit einem Browser den Pfad auf, in dem WordPress liegt – wenn der Ordner „wordpress“ heißt also http://localhost/wordpress.
  8. Generiert die wp-config.php über das Webinterface – der Standard-MySQL-Bebnutzer ist root, standardmäßig ist kein Passwort für MySQL bei XAMPP gesetzt – das Feld also einfach leer lassen. Dann noch die Datenbank auswählen – das Tabellenpräfix könnt ihr für den lokalen Einsatz bei wp_ belassen. Im Produktiveinsatz solltet ihr das durch etwas Kryptisches ersetzen!
  9. Anschließend gebt ihr die Daten für euer Blog ein und werdet auf die Anmeldeseite weitergeleitet.

Testdaten importieren und nützliche Plugins installieren

Nachdem wir jetzt eine WordPress-Installation vorliegen haben, können wir uns nun schnell ein paar Beiträge, Seiten und andere Inhalte anlegen, indem wir die Testdaten von WP Test importieren.

Geht dafür im WordPress-Backend auf „Werkzeuge“ und „Import“ und wählt dort den Punkt „WordPress“ in der Tabelle aus. Anschließend werdet ihr aufgefordert, das entsprechende Plugin zu installieren und könnt danach die XML-Datei importieren, die sich in dem zip-Archiv befindet. Jetzt haben wir alles zusammen, um anständig mit der Entwicklung beginnen zu können.

Um das Theme während der Entstehung immer mal wieder auf Fehler zu überprüfen, installieren wir uns jetzt noch das Plugin „Theme Check“. Alle anderen Plugins solltet ihr deaktivieren, wenn es sich nicht um weitere Entwickler-Plugins handelt, damit ihr auf dem Stand seid, den ein Nutzer (oder Tester) hat.

Los geht's – Der erste Code

Bevor wir beginnen, Code zu schreiben, müssen wir uns zuerst einen Theme-Ordner anlegen. Ich nenne das Theme „Bornholm“ und lege deshalb unter wp-content > themes den Ordner bornholm an. Ab sofort werden wir uns nur noch in diesem Ordner bewegen.

Zuerst wollen wir die absolut notwendigen Dateien für ein WordPress-Theme anlegen. Das sind eigentlich nur zwei, nämlich die style.css und die index.php. Kümmern wir uns also zuerst um die style.css-Datei und fügen dort die Informationen über das Theme ein:

/*
Theme Name: Bornholm
Theme URI: http://example-theme-uri.com
Author: Florian Brinkmann
Author URI: http://example-author-uri.com
Description:
Version: 1.0
License: GNU General Public License v2
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags:
Text Domain: bornholm
*/

Zuerst kommt der Name des Themes, gefolgt von der URI, unter der nähere Informationen zum Theme zu finden sind, sowie der Namen des Entwicklers und der Website. Um die Beschreibung kümmern wir uns am Ende und lassen sie erstmal, genau wie die Tags, leer. Neben der aktuellen Versionsnummer kommen noch Informationen zur Lizenz hinzu. Die Tags sind dafür da, dass das Theme im WordPress-Theme-Directory nachher auch über die Tag-Suche gefunden werden kann. Text Domain ist die Zeichenkette, die wir für das Vorbereiten auf Übersetzungen brauchen. Mehr werden wir erstmal in der CSS-Datei nicht machen.

Widmen wir uns jetzt der index.php-Datei und legen sie an. Das war's auch schon, jetzt habt ihr schon ein funktionierendes Theme! Naja, funktionierend in dem Sinne, dass WordPress keinen Fehler wirft, wenn wir es im Backend aktivieren. So richtig zufriedenstellend ist es natürlich noch nicht, da im Frontend doch relativ wenig angezeigt wird. Nichts, um genau zu sein.

Das werden wir jetzt ändern und uns sozusagen von oben nach unten durcharbeiten. Wir wollen also zuerst damit anfangen, den Kopfbereich des Themes zu erstellen. Hier geht es sowohl um den sichtbaren, als auch den unsichtbaren Teil des Website-Heads, also auch die Einbindung von Stylesheets et cetera. Dafür gibt es in WordPress die Datei mit der passenden Bezeichnung header.php. Legen wir sie also an und füllen sie mit ein bisschen Inhalt – zuerst geht es um die nicht sichtbaren Informationen innerhalb des head-Elements:

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<title><?php wp_title(); ?></title>
<?php if ( is_singular() && pings_open() ):?>
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<?php endif;
wp_head(); ?>
</head>

Nach dem Doctype wird mit der language_attributes()-Funktion das lang-Attribut in das html-Tag integriert, das die Sprache ausgibt und sich dabei nach der Sprache der WordPress-Installation richtet. In unserem Fall wird also lang="de-DE" ausgegeben. Die bloginfo( 'charset' )-Funktion gibt den Zeichensatz aus – seit Version 3.5 von WordPress ist das standardmäßig UTF-8 und kann auch nicht mehr angepasst werden. Mit wp_title() wird der Titel der aktuellen Seite ausgegeben. Wie wir diese Ausgabe steuern und verändern können, werden wir in einem späteren Teil noch behandeln. Danach wird mit bloginfo( 'pingback_url' ) die Pingback-URL ausgegeben, falls die Funktion aktiviert ist und sich der Nutzer auf einer Einzel-Seite befindet.

Mit wp_head() wird jetzt noch alles ausgegeben, was WordPress irgendwie innerhalb des head-Elements unterbringen muss – das sind beispielsweise Skripte und Stylesheets von Plugins et cetera. Damit sind wir mit dem head-Element auch erst mal fertig. Schauen wir uns jetzt den sichtbaren Bereich an. Rufen wir dafür einmal den Header unseres Theme in Erinnerung:

So soll der Header unseres Themes später in etwa aussehen.
So soll der Header unseres Themes später in etwa aussehen.

Wir benötigen also ganz allgemein einen Logobereich und ein Menü. Das Menü ist keine große Sache – das Logo soll der Nutzer später logischerweise selbst auswählen können, und das wollen wir in den Theme-Customizer integrieren. Wir werden hier also für den Anfang das Logo statisch einsetzen und uns um diese etwas fortgeschrittene Technik erst im nächsten Teil kümmern. Wenn wir also erst mal diese Voraussetzungen nehmen, sieht der weitere Inhalt der header.php-Datei so aus.

<body <?php body_class(); ?>>
<header>
<img src="http://placehold.it/200x100">
<?php wp_nav_menu( array( 'theme_location' => 'header-menu', 'container' => 'nav', 'fallback_cb' => false ) ); ?>
</header>

Hinweis: Bei der Vergabe von Klassen und Ids bin ich erst mal lieber zurückhaltender und setze nur welche ein, wo ich mir bereits ziemlich sicher bin, dass wir sie gebrauchen können – vermutlich kommen später noch welche dazu, wenn es an das geht.

Zuerst integrieren wir in den body-Tag mit der body_class()-Funktion automatisch von WordPress erzeugte Klassen – hier wird beispielsweise home eingefügt, wenn wir uns auf der Startseite befinden. Als Logo nehmen wir wie besprochen erst mal einen Platzhalter. Für das Menü verwenden wir die wp_nav_menu()-Funktion und übergeben erst mal nur die nötigsten Parameter. Wir möchten das Menü darstellen, das mir der theme_locationheader-menu“ registriert wurde. Außerdem soll das Menü von einem nav-Element umschlossen sein und als Fallback, wenn dem Menü keine Seite zugeordnet ist, möchten wir nichts anzeigen. Die header.php-Datei können wir damit erst mal schließen.

Damit das Menü aus der header.php-Datei gefüllt werden kann, müssen wir es registrieren. Das passiert in der functions.php-Datei, die wir uns deshalb als nächstes etwas genauer anschauen und die grundlegenden Dinge festlegen – nicht erschrecken, es sieht schlimmer aus, als es ist:

<?php
add_action( 'after_setup_theme', 'bornholm_setup' );
if ( ! function_exists( 'bornholm_setup' ) ):
/**
* Sets up theme defaults and registers support for various WordPress features.
*
* Note that this function is hooked into the after_setup_theme hook, which runs
* before the init hook. The init hook is too late for some features, such as indicating
* support post thumbnails.
*
* To override bornholm_setup() in a child theme, add your own bornholm_setup to your child theme's
* functions.php file.
*
*/
function bornholm_setup() {
/* Make Bornholm available for translation.
* Translations can be added to the /languages/ directory.
* If you're building a theme based on Bornholm, use a find and replace
* to change 'bornholm' to the name of your theme in all the template files.
*/
load_theme_textdomain( 'bornholm', get_template_directory() . '/languages' );
$locale = get_locale();
$locale_file = get_template_directory() . "/languages/$locale.php";
if ( is_readable( $locale_file ) )
require_once( $locale_file );
add_theme_support( 'automatic-feed-links' );
add_theme_support( 'post-formats', array( 'aside', 'link', 'gallery', 'status', 'quote', 'image', 'video', 'audio', 'chat' ) );
add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption' ) );
add_theme_support( 'post-thumbnails' );
}
endif; // bornholm_setup

Hinweis: Eigene Funktionen sollten immer mit der Text-Domain des Themes als Präfix beginnen, wie hier bei bornholm_setup() geschehen. Nicht nur, weil das eine Voraussetzung für den späteren Upload in das WordPress-Theme-Directory ist, sondern auch der besseren Übersichtlichkeit halber.

Dieser Abschnitt kümmert sich um allgemeine Einstellungen des Themes. Die Funktion bornholm_setup() wird an den Hook after_setup_theme angehängt und damit noch während des Seitenaufbaus ausgeführt. In der Funktion wird dann zuerst von Zeile 21 bis 25 die Übersetzungsfähigkeit des sichergestellt und festgelegt, dass sich die Übersetzungen im Ordner languages befinden.

Anschließend werden für das Theme mittels add_theme_support verschiedene Funktionen aktiviert: Mit automatic-feed-links werden RSS-Links in das head-Element eingefügt. In der nächsten Zeile werden sämtliche Post-Formate aktiviert. Für die Kommentare, das Suchformular, Galerien und Bildunterschriften wird anschließend HTML5-Markup aktiviert und die Unterstützung von Post-Thumbnails wird eingeschaltet. Neben diesen Einstellungen gibt es noch einige mehr, die ihr im Codex finden könnt.

Doch kommen wir jetzt zum Menü. Den folgenden kurzen Code-Abschnitt fügt ihr einfach unter den vorherigen Code in die functions.php ein:

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

Hier registrieren wir das Menü header-menu (ihr erinnert euch, oben in der wp_nav_manu()-Funktion) und legen als englischen Titel „Header Menu“ fest (zu der komisch aussehenden Syntax im Hinweis-Kasten mehr). Mit add_action geben wir die Funktion anschließend weiter. Wenn ihr jetzt im Backend nachschaut, solltet ihr unter „Design“ den Punkt „Menüs“ vorfinden.

Hinweis: Da am Ende der Upload ins WordPress-Theme-Directory geplant ist, werden sämtliche Strings in englischer Sprache im Theme festgelegt und für die Übersetzung vorbereitet. Dazu bedienen wir uns der gettext()-Funktion, die ihr im oberen Code-Beispiel mit __( 'Header Menu', 'bornholm' ) schon im Einsatz gesehen habt. Der erste Parameter ist dabei immer der String, der übersetzt werden kann, der zweite Parameter ist die Text-Domain des Themes, also in unserem Beispiel bornholm. Wenn der zu übersetzende String wie hier schon in einer anderen PHP-Funktion steht, kommen vor der öffnenden runden Klammer zwei Unterstriche __. Stünde der Text alleine, würde das ganze so aussehen: <?php _e('Header Menu', 'bornholm'); ?>. Der zweite Unterstrich wird durch ein e ersetzt.

Jetzt können wir uns an die Darstellung des Blogs machen und gehen dafür in die noch leere index.php zurück und füllen sie mit Inhalt:

<?php get_header();?>
<main role="main">
<?php if ( have_posts() ) :
/* Start the Loop */
while ( have_posts() ) : the_post();
get_template_part( 'content', get_post_format() );
endwhile;
endif;?>
</main>
<?php if (  $wp_query->max_num_pages > 1 ) : ?>
<ul id="posts-nav">
<?php if(get_next_posts_link()):?>
<li class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">&larr;</span> Older posts', 'bornholm' ) ); ?></li>
<?php endif;
if(get_previous_posts_link()):?>
<li class="nav-next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">&rarr;</span>', 'bornholm' ) ); ?></li>
<?php endif;?>
</ul>
<?php endif;
get_sidebar();
get_footer(); ?>

Auch das sieht auf den ersten Blick schlimmer aus, als es ist. get_header liefert uns die header.php-Datei zurück. Anschließend prüfen wir, ob wir Artikel zum Darstellen haben. Wenn das der Fall ist, gehen wir die Posts mit einer while-Schleife durch. Mit the_post() wird der Index der Artikel durchlaufen, damit WordPress weiß, von welchem Post gerade Informationen gefragt sind. get_template_part( 'content', get_post_format() ); gibt, je nach Post-Format, die entsprechende Datei zurück. Bei einem ganz normalen Artikel ist das die content.php, bei einer Galerie die content-gallery.php und so weiter.

Anschließend prüfen wir nach dem schließenden main-Tag, ob die Anzahl der Seiten größer als 1 ist und geben dann eine Navigation aus, damit der Nutzer auch zu den älteren Beiträgen gelangen kann. Am Ende fügen wir – entsprechend der get_header()-Funktion – mit get_sidebar() die Sidebar ein und mit get_footer() den Footer. Wenn wir jetzt unsere Website aufrufen, sollte schon etwas zu sehen sein. Am auffälligsten ist vermutlich eine lange Liste von Links, die man sich eventuell nicht gleich erklären kann. Wenn wir in den erzeugten Quellcode schauen, wird klar: Das ist die Sidebar – WordPress fügt hier standardmäßig die Datei wp-includes/theme-compat/sidebar.php ein, wenn das Theme keine sidebar.php besitzt.

Beiträge sehen wir allerdings noch nicht – wie auch, es sind ja noch keine Dateien angelegt, die von der get_template_part( 'content', get_post_format() );-Funktion eingebunden werden könnten. In diesem Teil kümmern wir uns nur um die content.php-Datei, die auch von anderen Post-Formaten verwendet wird, wenn die spezifische Datei nicht vorhanden ist. Schauen wir uns vorher noch an, wie ein normaler Artikel in der Blog-Ansicht aussehen sollte:

So soll ein normaler Artikel mit Beitragsbild in der Blog-Ansicht aussehen. (Foto: Dennis Brinkmann)
So soll ein normaler Artikel mit Beitragsbild in der Blog-Ansicht aussehen. (Foto: Dennis Brinkmann)

Wenn kein Artikelbild festgelegt ist, fällt es einfach weg und die restliche Gestaltung bleibt gleich. Damit brauchen wir einen Header-Bereich, in den dann der Titel und das eventuell vorhandene Artikelbild integriert werden. Neben dem natürlich notwendigen Content-Bereich für den Inhalt beziehungsweise Auszug des Artikels kommen in einen Footer dann die Meta-Informationen zum Post. Und das sieht dann erst mal so aus:

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<header class="entry-header">
<?php bornholm_the_post_header() ?>
</header><!-- .entry-header -->
<div class="entry-content">
<?php the_content( __( 'Continue reading ', 'bornholm' ). the_title('“', '”', false) );
wp_link_pages( array( 'before' => '<ul class="page-link"><li>' . __( 'Pages:', 'bornholm' ) . '<ul>', 'after' => '</ul></div>', 'link_before' => '<li>', 'link_after' => '</li>', 'nextpagelink'     => __( 'Next page', 'bornholm' ), 'previouspagelink' => __( 'Previous page', 'bornholm' ), ) ); ?>
</div><!-- .entry-content -->
<footer class="entry-meta">
<?php bornholm_footer_meta() ?>
</footer><!-- .entry-meta -->
</article><!-- #post-<?php the_ID(); ?> -->

Wir kleiden den Artikel in ein article-Element und geben ihm mittels the_ID() die id des Artikels mit sowie mit der post_class()-Funktion einige Klassen, die je nach Ansicht und Typ des Artikels variieren können. Hier wird beispielsweise – je nachdem, um was für ein Post-Format es sich handelt – eine Klasse eingefügt, bei einer Galerie wäre das format-gallery. Wenn ihr eine eigene Klasse hinzufügen wollt, könnt ihr das einfach wie folgt tun: post_class('eigene-klasse'). Mehr Informationen findet ihr im Codex.

Den Kopfbereich des Artikels lagern wir in die noch zu erstellende bornholm_the_post_header()-Funktion aus, da er sich bei den verschiedenen Post-Formaten nicht unterscheiden wird – er besteht immer aus einem gegebenenfalls gesetzten Artikelbild und dem Titel. Mit der the_content()-Funktion holen wir uns den Inhalt des Artikels – gegebenenfalls nur bis zu einem eventuell gesetzten more-Tag. Als Parameter übergeben wir den Text, der als Link auf den kompletten Artikel angezeigt wird. Hier übergeben wir – wieder übersetzungsfähig – den String Continue Reading gefolgt von dem Titel des Posts in Anführungszeichen. Der erste Parameter von the_title() ist die Zeichenkette, die vor dem Titel ausgegeben wird und der zweite Parameter die Zeichenkette danach. Der dritte Parameter steuert, ob der Titel gleich ausgegeben wird (true) oder nur zur Verwendung in PHP bereitgestellt wird (false). Da wir die Funktion sowieso per echo ausgeben, wählen wir hier false.

Der optionale zweite Parameter von the_content() ermöglicht es, den Teaser auf der Einzelseite des Artikels zu verstecken. Standard ist hier false. Wenn ihr mehr über the_content() erfahren möchtet, schaut auch hier im Codex vorbei. Neben the_content() gibt es noch die the_excerpt()-Funktion. Damit wird der Auszug des Artikels ausgegeben, den ihr über ein Feld im Backend manuell eintragen könnt. Ist hier nichts eingetragen, werden einfach die ersten 55 Wörter angezeigt. Shortcodes, Bilder et cetera werden hier gefiltert und nicht angezeigt. Die Funktion könntet ihr beispielsweise auf der Suchergebnisseite oder in Archiven anzeigen – wir werden bei diesem Theme aber immer mit der the_content()-Funktion arbeiten. Nähere Details zu the_excerpt() findet ihr hier.

Mit der wp_link_pages()-Funktion geben wir die Seitenzahlen eines paginierten Artikels aus. Die verschiedenen Parameter sollten selbsterklärend sein: Wir geben etwas ganz am Anfang aus, am Ende sowie vor und hinter jedem einzelnen Link. Außerdem noch die Strings, die den Link zur nächsten beziehungsweise vorherigen Seite bilden sollen. Daneben sind noch ein paar anderen Parameter möglich. Theoretisch könnten wir die zwei Funktionen natürlich auch in eine eigene Funktion auslagern und in den anderen Dateien immer wieder aufrufen. Wir belassen es aber erst mal so.

Im Footer hingegen handhaben wir es wieder wie im Header und rufen die Funktion bornholm_footer_meta() auf, die uns die Meta-Informationen ausgeben soll. Als nächstes müssen wir jetzt natürlich diese beiden Funktionen auch erstellen, damit etwas angezeigt werden kann. Das machen wir – ihr habt es euch vielleicht schon gedacht – wieder in der functions.php-Datei. Öffnet also die Datei und schreibt ganz ans Ende folgendes:

function bornholm_the_post_header(){?>
<?php if ( has_post_thumbnail()) : ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute( array( 'before' => __( 'Permalink to: ', 'bornholm'), 'after' => '' ) ); ?>" rel="bookmark">
<h1 class="entry-title"><?php the_title();?></h1>
<figure class="featured-image">
<?php the_post_thumbnail();?>
</figure>
</a>
<?php else: ?>
<h1 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute( array( 'before' => __( 'Permalink to: ', 'bornholm'), 'after' => '' ) ); ?>" rel="bookmark"><?php the_title();?></a></h1>
<?php endif;
}

Wir prüfen zuerst mit der has_post_thumbnail()-Funktion, ob wir ein Featured Image haben. Wenn das der Fall ist, dann verlinken wir den gesamten Header-Bereich mit Bild und Überschrift – HTML5 sei Dank. Als Linkziel übergeben wir mit the_permalink() den Link zu der Einzelansicht des Artikels, das title-Attribut des Links füllen wir mit der „sauberen“ Form des Titels – the_title_attribute() filtert bestimmte Zeichen heraus, andere werden in ihre Entitys konvertiert – beispielsweise Anführungszeichen. Als Parameter übergeben wir eine Zeichenkette, die vor dem Titel angezeigt werden soll – danach soll nichts kommen.

Anschließend geben wir mit the_title() den Titel des Beitrags aus und mit the_post_thumbnail() das Featured Image. Wenn kein Featured Image gewählt wurde, geben wir einfach ganz normal den Titel als Link aus. Kommen wir jetzt noch zur Funktion bornholm_footer_meta().

function bornholm_footer_meta(){?>
<p>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute( array( 'before' => __( 'Permalink to: ', 'bornholm'), 'after' => '' ) ); ?>"><?php echo sprintf( __( '%1$s @ %2$s', 'bornholm' ), get_the_date(), get_the_time() )  ?></a>
<span class="sep"> · </span>
<?php $show_sep = false;
/* translators: used between list items, there is a space after the comma */
$categories_list = get_the_category_list( __( ', ', 'bornholm' ) );
if ( $categories_list ):
?>
<span class="cat-links">
<?php _e( 'Posted in ', 'bornholm' ); echo $categories_list;
$show_sep = true; ?>
</span>
<?php endif; // End if categories
/* translators: used between list items, there is a space after the comma */
$tags_list = get_the_tag_list( '', __( ', ', 'bornholm' ) );
if ( $tags_list ):
if ( $show_sep ) : ?>
<span class="sep"> · </span>
<?php endif; // End if $show_sep ?>
<span class="tag-links">
<?php _e( 'Tagged ', 'bornholm' ); echo $tags_list;
$show_sep = true; ?>
</span>
<?php endif; // End if $tags_list
if ( $show_sep ) : ?>
<span class="sep"> · </span>
<?php endif; // End if $show_sep ?>
<span class="author">
<?php _e( 'Author', 'bornholm' );?> <?php the_author(); ?>
</span>
<?php edit_post_link( __( 'Edit', 'bornholm' ), '<span class="edit-link"> ·  ', '</span>' ); ?>
</p>
<?php }

Das sieht jetzt schon ein wenig umfangreicher aus, ist aber auch halb so wild. Zuerst geben wir das Datum aus. An sprintf() übergeben wir als ersten Parameter das Format des gesamten Datums – zuerst kommt das Datum, dann ein @ und anschließend die Zeitangabe. Als weiteren Parameter übergeben wir get_the_date() und get_the_time(), die genau das machen, was sie versprechen.

Danach holen wir uns mit get_the_category_list() die Liste der Kategorien. Wir übergeben als Parameter den Seperator, der mit der Übersetzung auch geändert werden kann. Wenn wir Kategorien zurückbekommen, geben wir diese aus und setzen die Variable $show_sep auf true. Entsprechend verfahren wir im nächsten Schritt mit den Tags. Am Ende geben wir mit der the_author()-Funktion noch den Autor aus und mit edit_post_link() den Bearbeiten-Link ins Backend (wird natürlich nur angezeigt, wenn ihr eingeloggt seid). Als Parameter übergeben wir hier zuerst die Bezeichnung des Links und anschließend den Inhalt davor und danach. Das war's – damit sind wir mit der content.php-Datei und den dazugehörigen Funktionen fertig. Ein bisschen Feinschliff wird es vermutlich noch brauchen, aber grundsätzlich wird alles dargestellt, was wir wollen. Und jetzt sollten im Frontend auch schon Beiträge zu sehen sein.

Wir sind jetzt so weit, dass in der Blog-Übersicht die Artikel angezeigt werden. Aus Ermangelung spezifischer Dateien für die Post-Formate, wie die content-gallery.php-Datei, zieht sich WordPress die Informationen für die Darstellung ausnahmslos aus der content.php-Datei. Das soll uns in diesem Moment auch erst mal an Grundfunktionalität genügen, weshalb wir uns um die weiteren Post-Format-Dateien im nächsten Teil der Reihe kümmern werden.

Wenn wir jetzt in die Einzelansicht eines Artikels wechseln, dann passt das eigentlich größtenteils auch schon. Da wir hier später aber beispielsweise noch eine Autorenbox anzeigen wollen, legen wir jetzt schon mal die single.php-Datei an, die sich um die Darstellung der Einzelansicht kümmert. Das sieht dann so aus:

<?php get_header();?>
<main role="main">
<?php /* Start the Loop */
while ( have_posts() ) : the_post(); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<header class="entry-header">
<?php bornholm_the_post_header() ?>
</header><!-- .entry-header -->
<div class="entry-content">
<?php the_content();
wp_link_pages( array( 'before' => '<ul class="page-link"><li>' . __( 'Pages:', 'bornholm' ) . '<ul>', 'after' => '</ul></div>', 'link_before' => '<li>', 'link_after' => '</li>', 'nextpagelink'     => __( 'Next page', 'bornholm' ), 'previouspagelink' => __( 'Previous page', 'bornholm' ), ) ); ?>
</div><!-- .entry-content -->
<footer class="entry-meta">
<?php bornholm_footer_meta() ?>
</footer><!-- .entry-meta -->
</article><!-- #post-<?php the_ID(); ?> -->
<?php comments_template( '', true ); ?>
<?php endwhile; ?>
</main>
<?php get_sidebar();
get_footer(); ?>

Wenn ihr euch das etwas länger anschaut, werdet ihr feststellen, dass das lediglich eine Mischung aus der index.php-Datei und der content.php-Datei ist. Die einzige Besonderheit ist comments_template( '', true ), womit wir die Kommentarfunktion einblenden. Die Navigations-Links unten habe ich rausgenommen – eventuell integrieren wir eine Navigation für Links zum nächsten und vorherigen Post noch in einem späteren Teil. Ebenso in einem späteren Teil kommt der Part, in dem wir verschiedene Dateien für die Einzelansicht verschiedener Post-Formate laden werden – genau so, wie wir verschiedene content-Dateien für die Post-Formate brauchen, bei denen andere Inhalte ausgegeben werden sollen. So soll uns das als Vorbereitung aber erst mal genügen.

Wenn wir uns jetzt eine einzelne Seite anschauen, sehen wir, dass auch dort der Footer mit den Meta-Informationen geladen wird. Das brauchen wir hier nicht – niemand will wissen, wann das Impressum angelegt wurde – weshalb unsere page.php-Datei wie folgt aussieht:

<?php get_header();?>
<main role="main">
<?php /* Start the Loop */
while ( have_posts() ) : the_post(); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<header class="entry-header">
<?php bornholm_the_post_header() ?>
</header><!-- .entry-header -->
<div class="entry-content">
<?php the_content();
wp_link_pages( array( 'before' => '<ul class="page-link"><li>' . __( 'Pages:', 'bornholm' ) . '<ul>', 'after' => '</ul></div>', 'link_before' => '<li>', 'link_after' => '</li>', 'nextpagelink'     => __( 'Next page', 'bornholm' ), 'previouspagelink' => __( 'Previous page', 'bornholm' ), ) ); ?>
</div><!-- .entry-content -->
</article><!-- #post-<?php the_ID(); ?> -->
<?php comments_template( '', true ); ?>
<?php endwhile; ?>
</main>
<?php get_sidebar();
get_footer(); ?>

Wie ihr unschwer erkennen könnt, ist hier im Vergleich zur single.php nur der Footer mit den Meta-Informationen rausgeflogen – die Kommentarfunktion integrieren wir erst mal, vielleicht nehmen wir sie später noch raus. Widmen wir uns als nächstes der Archivseite und erstellen dafür die archive.php-Datei. Hier sollen die Beiträge so aufgeführt werden wie in der Blog-Übersicht – der einzige Unterschied ist eine Überschrift, die anzeigt, welches Archiv gerade angeschaut wird. Damit ist diese Datei der index.php sehr ähnlich:

<?php get_header();?>
<main role="main">
<?php if ( have_posts() ) : ?>
<header>
<h1>
<?php if ( is_day() ) :
printf( __( 'Daily Archives: %s', 'bornholm' ), '<span>' . get_the_date() . '</span>' );
elseif ( is_month() ) :
printf( __( 'Monthly Archives: %s', 'bornholm' ), '<span>' . get_the_date( _x( 'F Y', 'monthly archives date format', 'bornholm' ) ) . '</span>' );
elseif ( is_year() ) :
printf( __( 'Yearly Archives: %s', 'bornholm' ), '<span>' . get_the_date( _x( 'Y', 'yearly archives date format', 'bornholm' ) ) . '</span>' );
else :
_e( 'Blog Archives', 'fanoe' );
endif; ?>
</h1>
</header>
<?php /* Start the Loop */
while ( have_posts() ) : the_post();
get_template_part( 'content', get_post_format() );
endwhile;
endif; ?>
</main>
<?php if (  $wp_query->max_num_pages > 1 ) : ?>
<ul id="posts-nav">
<?php if(get_next_posts_link()):?>
<li class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">&larr;</span> Older posts', 'bornholm' ) ); ?></li>
<?php endif;
if(get_previous_posts_link()):?>
<li class="nav-next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">&rarr;</span>', 'bornholm' ) ); ?></li>
<?php endif;?>
</ul>
<?php endif;
get_sidebar();
get_footer(); ?>

Der Unterschied zur index.php-Datei beschränkt sich hier auf die Zeilen 4 bis 16. Hier stellen wir in einem header-Element die Überschrift dar. Per if-Bedingung gehen wir die verschiedenen Zeit-Archive durch: Mit is_day() prüfen wir, ob es sich um ein Tages-Archiv handelt und so weiter. Um die Überschrift auszugeben, arbeiten wir wie vorhin mit der printf-Funktion. Mit get_the_date() übergeben wir das Datum. Beim Tages-Archiv übergeben wir hier keinen Parameter, WordPress holt sich das Datum dann in dem Format, das vom Nutzer im Backend in den Einstellungen festgelegt wurde. Bei den Monats- und Jahres-Archiven übergeben wir als Parameter ein Standard-Format und machen es bereit für die Übersetzung.

Hinweis: Hier lernen wir die dritte Möglichkeit der gettext()-Funktion kennen. Mit _x() können wir als zweiten Parameter vor der Domain des Themes einen Hinweis hinterlegen, der den Übersetzern angezeigt wird.

Wenn ihr jetzt ein Archiv aufruft, solltet ihr je nach Archiv-Art die richtige Zeitangabe in der Headline vorfinden. Kümmern wir uns jetzt um die Kategorie- und Tag-Seiten. Vom Aufbau sind sie fast identisch mit der archive.php-Datei, wir tauschen nur den Inhalt des header-Elements aus. Legen wir also die category.php an, kopieren den Inhalt der archive.php hinein und tauschen den Teil im header-Element aus:

<h1>
<?php printf( __( 'Category Archives: %s', 'bornholm' ), '<span>' . single_cat_title( '', false ) . '</span>' );?>
</h1>
<?php
$term_description = term_description();
if ( ! empty( $term_description ) )
printf( '<div class="taxonomy-description">%s</div>', $term_description );
?>

Als Überschrift geben wir mit der single_cat_title()-Funktion den Namen der Kategorie aus. Anschließend überprüfen wir, ob eine Beschreibung für die Kategorie eingegeben wurde – diese holen wir uns per term_description()-Funktion. Mit der Tag-Seite gehen wir genauso vor: Kopieren wir uns also den Inhalt der category.php-Datei in die neu zu erstellende tag.php und tauschen den PHP-Code in dem h1-Element aus:

<?php printf( __( 'Tag Archives: %s', 'bornholm' ), '<span>' . single_tag_title( '', false ) . '</span>' );?>

Kümmern wir uns als nächstes um die Autoren-Übersicht, also die Seite, die aufgerufen wird, wenn alle Beiträge eines Autors angezeigt werden sollen – die author.php-Datei. Auch sie ist relativ ähnlich zu den anderen Archiv-Seiten, weshalb wir uns zuerst wieder den Inhalt aus der category.php-Datei hineinkopieren. Die Anpassung ist aber ein bisschen umfangreicher, weshalb wir das gesamte main-Element austauschen werden:

<main role="main">
<?php if ( have_posts() ) :
/* Queue the first post, that way we know
* what author we're dealing with (if that is the case).
*
* We reset this later so we can run the loop
* properly with a call to rewind_posts().
*/
the_post();?>
<header class="archive-header">
<h1>
<?php printf( __( 'All posts by %s', 'bornholm' ), get_the_author() );?>
</h1>
<?php if ( get_the_author_meta( 'description' ) ) : ?>
<div class="author-description"><?php the_author_meta( 'description' ); ?></div>
<?php endif; ?>
</header>
<?php
/* Since we called the_post() above, we need to
* rewind the loop back to the beginning that way
* we can run the loop properly, in full.
*/
rewind_posts();
/* Start the Loop */
while ( have_posts() ) : the_post();
get_template_part( 'content', get_post_format() );
endwhile;
endif;
?>
</main>

Die erste Änderung ist der Einsatz von the_post() in Zeile 9. Im Kommentar darüber steht es schon – wir müssen damit prüfen, um welchen Autor es sich überhaupt handelt. Anschließend geben wir ganz normal den Namen des Autors aus. Mit if ( get_the_author_meta( 'description' ) ) prüfen wir, ob eine Beschreibung eingegeben wurde und geben sie mit the_author_meta( 'description' ); aus. Die letzte „Besonderheit“ ist rewind_posts(). Bevor wir jetzt wieder in die Schleife gehen und die Beiträge ausgeben, müssen wir natürlich an den Anfang der Schleife springen, denn the_post() haben wir ja weiter oben schon eingesetzt.

Als letzte „Archiv“-Seite haben wir jetzt noch die Ergebnisseite der Suche auf unserer Liste. Hier müssen wir wieder nur den Code aus der category.php-Datei in die neu erstellte search.php-Datei kopieren und den Inhalt des h1-Elements anpassen:

<?php printf( __( 'Search Results for: %s', 'bornholm' ), get_search_query() );?>

Jetzt fehlen uns in diesem Teil noch die 404.php-, die footer.php- und die sidebar.php-Datei. Was die 404.php-Datei macht, ist klar: Sie wird dargestellt, wenn der Server einen 404-Fehler zurückliefert. Und die sieht bei uns so aus:

<?php get_header();?>
<main role="main">
<article id="post-0" class="post no-results not-found">
<header class="entry-header">
<h1 class="entry-title"><?php _e( 'Nothing Found', 'bornholm' ); ?></h1>
</header><!-- .entry-header -->
<div class="entry-content">
<p><?php _e( 'Apologies, but no results were found for the requested archive. Perhaps searching will help find a related post.', 'bornholm' ); ?></p>
<?php get_search_form(); ?>
</div><!-- .entry-content -->
</article><!-- #post-0 -->
</main>
<?php get_sidebar();
get_footer(); ?>

Wir entschuldigen uns einfach kurz für den Fehler und geben unter der Meldung mit get_search_form() das Suchformular aus, mit dem der Nutzer dann sein Glück versuchen kann. Die footer.php-Datei wird über die Funktion get_footer eingebunden, die wir ja schon mehrfach verwendet haben. Besonders viel Inhalt bekommt sie aktuell noch nicht mit:

<?php wp_footer();?>
</body>
</html>

Mit wp_footer() werden beispielsweise Skripte von Plugins geladen. Zu guter Letzt wollen wir jetzt noch die sidebar.php erstellen, die mit get_sidebar() ausgegeben wird:

<aside id="sidebar" role="sidebar">
<div id="sidebar-content">
<?php if ( is_active_sidebar( 'sidebar-1' ) ):
dynamic_sidebar( 'sidebar-1' );
endif; ?>
</div>
</aside>

Mit is_active_sidebar( 'sidebar-1' ) prüfen wir, ob die Sidebar mit der id sidebar-1 aktiv ist. Wenn das der Fall ist, geben wir sie mit dynamic_sidebar( 'sidebar-1' ) aus. Damit wir die Sidebar jetzt auch im Backend nutzen können, müssen wir sie noch registrieren – ähnlich wie das Menü ganz am Anfang. Dafür schreiben wir folgendes ganz ans Ende der functions.php:

function bornholm_sidebars() {
register_sidebar(array('name' => 'Sidebar',
'id' => 'sidebar-1',
'description' => '',
'before_widget' => '<div class="widget">',
'after_widget' => '</div>',
'before_title' => '<h3>',
'after_title' => '</h3>'));
}
add_action( 'init', 'bornholm_sidebars' );

Im Array übergeben wir als Namen der Sidebar Sidebar, als Id sidebar-1 an – die Id muss mit dem String aus dynamic_sidebar() übereinstimmen! Eine Beschreibung wollen wir erst mal nicht hinzufügen. Wir umschließen das Widget mit einem div-Element, und den Titel packen wir in eine h3-Überschrift.

Was kommt im nächsten Teil?

Das soll es mit diesem Teil dann auch gewesen sein. Wir haben jetzt ein grundlegend funktionierendes WordPress-Theme und ziemlich viel Text in diesem Artikel. Im nächsten Teil werde ich versuchen, den Rest des „Inhaltlichen“ abzuarbeiten, also unter anderem die Dateien für die verschiedenen Post-Formate erläutern, die Kommentarfelder und die Ausgabe der Kommentare anpassen und Widgets erstellen. Ob wir im nächsten Teil schon so weit kommen, dass wir im übernächsten in das Design einsteigen können? Ich weiß es nicht. Erst mal habe ich jetzt zwei Wochen Urlaub, weshalb der nächste Teil vermutlich etwas auf sich warten lassen wird. In der Zeit könnt Ihr das Grundgerüst ja schon mal fertigstellen ... ;)

Habt ihr Fragen zu einzelnen Details, die ich hier nicht ausreichend behandelt habe? Dann schreibt doch einfach einen Kommentar!

Alle Teile unseres Guides im Überblick:

]]>
Florian Brinkmann