10 Punkte zum perfekten WordPress Theme

Die Zeiten ändern sich.

Dieser Beitrag scheint älter als 15 Jahre zu sein – eine lange Zeit im Internet. Der Inhalt ist vielleicht veraltet.

WP Logo

So der Titel eines Beitrags von Joost de Valk, den ich so aber nicht stehen lassen würde, denn einige Punkte sind doch zu starr und sollten durch den Autor im Vorfeld berücksichtigt und überlegt werden.
Daher habe ich einfach mal drüber nachgedacht und meine Gedanken und das Vorgehen beim Entwickeln eines neuen Themes in diesem Artikel abgebildet. Ergänzungen und Diskussion ist erwünscht und bereichert in meinen Augen nur den Wert eines solchen Artikels.

Checkliste; prüfe dein Arbeit

  1. Template-Dateien überlegt ?
  2. style.css inklusive der Kommentare ?
  3. Hooks gesetzt ?
  4. Suche notwendig, wenn ja – ist sie vorhanden ?
  5. Widgetfähig ?
  6. Pluginintegration ?
  7. Lesbarer & valider Code ?
  8. Browsertests ?
  9. Trackbacks ?
  10. Title ?

Hintergründe & Informationen zur Checkliste

  1. Welche Template Dateien im Theme?

    WordPress unterstützt eine ganze Reihe von Templates im Theme und zusätzlich kann man diese noch durch diverse Funktionalitäten erweitern.
    Trotzdem und gerade weil man WordPress in den unterschiedlichsten Anforderungen einsetzt, ist es erforderlich im Vorfeld über die notwendigen Templates nachzudenken. Wirklich zwingend ist nur die index.php. Als Empfehlung gilt jedoch, nutze mindestens die

    • index.php
    • header.php
    • footer.php – Wenn es einen Footer-Bereich gibt.
    • sidebar.php – Nur wenn es auch einen extra Bereich gibt, der diesem Template entsprechen würde.
    • single.php – Soll eine alternative Darstellung zur Startseite erstellt werden, dann ist dieses Template pflicht
    • page.php – Wird es statische Seiten geben und unterscheiden sich diese von der Darstellung mit Hilfe der index.php.
  2. Stylesheet inkl. Kommentaranweisung?

    WordPress benötigt eine style.css. Ohne diese Datei inklusiver der folgenden Kommentare, kann WordPress das Theme nicht erkennen und benutzen.
    Diese Datei kann gern auf andere Stylesheet-Dateien verweisen, diese können dann auch in Ordnern sein, in der dann die eigentlichen Anweisungen für das Stylesheet stehen.

    
    @charset 'UTF-8';
    
    /*
    Theme Name: Basis
    Theme URI: https://bueltge.de/basis-theme-fuer-wordpress/411/
    Description: Basis style to start a new theme
    Version: 0.1
    Author: Frank Bueltge
    Author URI: https://bueltge.de/
    */
    
    @import url(css/style.css);
    
  3. Hooks im Theme?

    Eine ganze Reihe von Plugins und auch WordPress selbst greift auf die Hooks im Theme zu. Es sind drei Hooks, die als Minimum im Theme angesehen werden können.

    • In die header.php oder index.php, je nach Aufbau des Themes, gehört: wp_head();. Der Hook muss im head-Abschnitt sein, am besten direkt oberhalb des schließenden head-Tags.
      
      	<?php wp_head(); ?>
      
      
      
    • Ähnlich sollte es einen Hook im Footer-Bereich der Website geben. Daher bietet sich die Implementierung in der footer.php oder index.php an, wenn es keine footer.php gibt.
      Je nach dem, was per Hook implementiert wird, empfiehlt es sich, den Hook innerhalb des Layouts zu haben, also im übergreifenden div. Dies aber nur als Empfehlung, denn das kann man nicht verallgemeinern.

      
      		<?php wp_footer(); ?>
      	</div>
      
      </body>
      </html>
      
    • Den dritten Hook benötigt man innerhalb der Kommentarmöglichkeit, daher ist er auch nur notwendig ist, wenn es diese Möglichkeit gibt. Dies ergibt sich aber in der Regel durch die Implementierung der Kommentarmöglichkeit und die damit verwendete comments.php. Hier nur der Hinweis, verweist das Theme auf die Möglichkeit der Kommentare (comments_template();) und die comments.php ist nicht vorhanden, dann wird sie aus dem default-Theme gezogen!
      Gibt es also die Möglichkeit der Kommentare, dann ist der Hook do_action('comment_form', $post->ID); unterzubringen. Ich verwende ihn in der Regel unterhalb des textarea. Wichtig ist, er ist innerhalb des form.

      
      	<textarea name="comment" id="comment" cols="60" rows="5" tabindex="4"></textarea>
      	
      	<?php do_action('comment_form', $post->ID); ?>
      
      	<input name="submit" type="submit" id="submit" tabindex="6" value="<?php _e('Kommentar absenden', 'basis'); ?>" />
      	<input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" />	
      </form>
      

    Es kann mehr geben, dann sind sie aber von Plugins zur Verfügung gestellt und sind auch dort bzw. beim Autor des Plugins dokumentiert.

  4. Suche vorhanden?

    Anwender sind es mittlerweile gewohnt, dass eine Suchfunktion vorhanden ist. Nicht immer ist die aber sinnvoll. Setzt man WordPress als kleines CMS ein, ob sinnvoll oder nicht sei hier nicht das Thema, dann ist die Suche nicht immer sinnvoll oder würde die Zielgruppe vor eine Herausforderung stellen.

    Daher gilt, überlege, ob die Suche ein Mehrwert für den Kunden ist. Kannst du diese Frage mit Ja beantworten, dann integriere die Suche auch und verstecke sie nicht vor dem Nutzer.

    Es empfiehlt sich, dass man dann auch ein eigenes Template, die search.php, dafür verwendet und die Ausgabe der Suche mit nützlichen Inhalten versorgt.

    Alternativ kann man eine Open Search – Suche anbieten, die via Add on für diverse Browser zur Verfügung steht und somit können „Poweruser“ der entsprechenden Website direkt aus ihrer gewohnten Umgebung suchen. Wie man das macht, das steht im Tutorial „OpenSearch – Suchfeld für Mozilla und Internet Explorer mit WordPress anbieten

  5. Ist das Theme widgetized?

    In WordPress gibt es eine Möglichkeit, neue Funktionen in die Oberfläche zu integrieren, ohne manuell in den Code einer Template-Datei eingreifen zu müssen. Das Aktivieren und Positionieren wird per Drag&Drop erledigt. Dies erleichtert dem Anwender das Anpassen des Sidebar an die persönlichen Anforderungen enorm. Diese Technologie nennt man Widget.

    Zum Thema Widgets unterscheide ich für meinen Teil ganz klar, will der Nutzer diese verändern oder ist eine Integration ohne Widget-Funktionalität besser für den Anwender. In der Regel klärt das sich sehr schnell bei einem Gespräch.

    Wird die Funktionalität benötigt, dann sollte das Tutorial von Automattic helfen.
    Im Grunde muss der folgende Syntax in die sidebar.php.

    
    <div id="sidebar">
    	<ul>
    		<?php 	/* Widgetized sidebar, if you have the plugin installed. */
    			if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
    
    ...
    
    		<?php }
    		endif; // End Widgets
    		?>
    	</ul>
    </div>
    

    Zusätzlich muss die functions.php des Theme gefüttert werden.

    
    // widget function
    if ( function_exists('register_sidebars') )
    	register_sidebars(0);
    
    function my_widget_register() {
    	if ( function_exists('register_sidebar') ) {
    		register_sidebar(array(
    			'name' => 'Sidebar',
    		'before_widget' => "ntt" . '
    <li id="%1$s" class="widget %2$s">',
    			'after_widget' => '</li>
    
    ',
    			'before_title' => "nt" . '
    <h3 class="widgettitle">',
    			'after_title' => '</h3>
    
    ',
    		));
    	}
    }
    
    add_action('widgets_init', 'my_widget_register', 1);
    

    Es gibt aber eine ganze mehr Möglichkeiten und Anpassungslösungen, so dass man die Widgets viel besser an das Design anpassen kann, aber dies soll hier kein Thema sein.

  6. Plugin-Funktionalitäten integriert?

    Vielen Funktionen und der resultierende Mehrwert werden mit Hilfe von Plugins realisiert. Wenn man dies tut, dann ist es zwingend, dass das Theme die jeweilige Funktion im Vorfeld auf Vorhandensein prüft. Ansonsten kann es zu Problemen kommen, beispielsweise, wenn das Plugin nicht aktiv ist oder bei einem Update sich der Funktionsname ändert.
    Die Prüfung ist leicht implementiert, je nach dem ob man ein Funktion oder Klasse einbindet.

    
    if ( function_exists('FUNKTIONS_NAME') ) 
    
    if ( class_exists('KLASSEN_NAME') )
    

    Näheres dazu wurde auch schon in der Vergangenheit von mir erklärt, siehe Beitrag „Abfrage einer PHP-Funktion, bzw. WP-Plugins“.

  7. Valides, lesbares Markup und CSS

    Auch für WordPress Themes gelten die Richlinien, Webstandards beginnen bei validem Code. Das Prüfen des Themes ist unumgänglich.
    Gutes Design ist sicher wichtig, aber ebenso gehört sauberes und übersichtliches Markup zum Theme. Damit meine ich nicht nur, dass der Validator keine Fehler meldet, sondern auch übersichtlich, strukturiert und lesbares Markup in den Templates. Denke daran, der Code kann von jedem gelesen werden, der Zugriff auf das Theme hat oder über die Oberfläche. Jeder halbwegs versierte User weis, wie man den Code lesen kann.
    Soll das Theme eventuell zum Download angeboten werden, dann ist es um so wichtiger und macht die folgende Arbeit sehr viel angenehmer.
    Sollte das Thema Webstandards in deinem Sprachgebrauch auf Unverständnis stoßen, dann nutze das Web und lerne.

  8. Browsertests ?

    Ohne ein Diskussion zu starten, der Test auf unterschiedlichen Systemen in unterschiedlichen Browsern gehört zu einem guten Theme. Jeder mag zum Thema Browserunterstützung eine andere Sicht haben; ein Mindestmaß an Browsern sollte jedeoch unterstützt werden.

    Bewegt man sich im Umfeld eines Unternehmens oder Intranets, so kann die Auswahl sicher eine andere sein, als wenn man ein Theme für die Community oder eine Kunden im Web schreibt.
    Erstellt man ein Theme nach den Regeln des Webstandards, dann ist man sicher schon auf dem richtigen Weg. Nicht immer ist das aber ausreichend, denn so manche Browser wollen nicht verstehen.

    Als nützliches Hilfsmittel haben sich Webservices wie browsershots.org und diverse Installationen von unterschiedlichen Browsern bewährt. Um das große Problemfeld zu testen, kann man den IETester nur wiederholend empfehlen.

  9. Unterstützung für Trackbacks?

    Als Trackback wird eine Funktion bezeichnet, mit der Weblogs Informationen über Backlinks in Form von Reaktionen bzw. Kommentaren durch einen automatischen Benachrichtigungsdienst untereinander austauschen können.
    Wikipedia

    Soll das Theme Trackbacks unterstützen, dann gehört ein WordPress Template Tag innerhalb des Loop, vor endwhile, auskommentiert für HTML.
    <!-- <?php trackback_rdf(); ?> -->

    Dem entsprechend gehört es also in das Template, welches die Möglichkeit der Kommentare schaft, kann also index.php, single.php oder page.php betreffen.

    Diese Anweisung wird nicht benötigt, wenn an anderer Stelle des Templates auf Trackbacks verwiesen wird. Es ist aber nötig, wenn es keine Ausgabe zu Trackbacks im Template gibt.

  10. Title nutzerfreundlich?

    Der Title des Blog und der jeweiligen Seiten ist ein wichtiges Element und das nicht nur aus der Sicht von Suchmaschinen. Ich wünschte mit manchmal, dass einige Webseiten mehr für den Leser als für die Suchmaschine optimiert werden.

    Ähnlich verhält es sich beim Title-Tag, denn dieser wird auch verwendet, wenn man eine Seite als Favorit ablegt. Es ist also für den Nutzer sehr schön, wenn er nicht in den ersten Zeichen über den Title des Blog, sondern über den Title des Beitrags.
    Weitere Information gibt es in den entsprechenden Artikeln „WordPress Titel ändern“ und „WordPress 2.5 und der neue Title Template Tag“.

    Eine Lösung wäre zum Beispiel:

    
    <title><?php if ( is_archive() ) { _e('Kategorie'); } wp_title('-', true, 'right'); bloginfo('name'); ?></title>
    

Mit diesem kleinen Ausflug erschlägt man sicher nicht alle Punkte, aber es ist ein Anhaltspunkt und wie immer steht die Kommentarfunktion der Diskussion offen.

Von Frank Bültge

bueltge.de [by:ltge.de] wird von Frank Bültge geführt, administriert und gestaltet. Alle Inhalte sind persönlich von mir ausgewählt und erstellt, nach bestem Gewissen und Können, was die Möglichkeit von Fehlern nicht ausschließt.