Das eigene WordPress Template “ Schritt für Schritt “ Teil 3 “ WP-Theme

Der Entwurf steht und wir können mit der Umsetzung beginnen. Ich persönlich halte codex.wordpress.org für ein wichtige Adresse was Wordpress Themes angeht. Daher werde ich in diesem Beitrag zu vertiefenden Informationen auf Codex WP.org verlinken. Wer sich daher gerne erst einmal tiefer in die Materie einlesen möchte findet mit den Kategorie Seiten Templates und Design and Layout zwei gute Übersichtsseiten. Interessant ist ebenfalls die Abschnitte “Designing Your WordPress Site” und “Template Files” unter Wordpress Lessons. Von WordPress gibt es CSS Coding Standards und WordPress Coding Standards welche für Plugins und Templates verwendet werden soll. Bei Wordpress gibt es keinen Unterschied zwischen Template und Theme. Der Begriff “Theme” wird jedoch auf den meisten Seiten verwendet, im Englischen wie auch im Deutschen. Ich verstehe unter Template den Entwurf und die Vorlage für das Theme. Im Folgenden könnt ihr aber davon ausgehen das unter Theme und Template, das gleiche zu verstehen ist.

Schritt 1 - Theme Ordner

Zuerst müsst ihr nun einen Ordner erstellen in dem die Dateien für das Theme gespeichert werden. Wenn ihr Lokal einen Webserver mit Wordpress laufen habt, könnt ihr diesen Ordner direkt unter wp-content\themes erstellen. Damit seht ihr auch immer gleich eure Änderungen auf den Wordpress Blog. Der Name des Ordners sollte dem eures Template Namen entsprechen. Leerzeichen im Theme Name könnt ihr beim benennen eures Ordners durch “_” ersetzen. In diesen Ordner könnt ihr einen Unterordner mit dem Namen “images” erstellen. Dort kommen später dann alle Bilder die ihr in eurem Template verwendet rein. Evtl. könnt ihr, je nach Bedarf, noch einen weiteren Unterordner für Icons erstellen. Das wird aber nur dann benötigt wenn ihr viele Icons und Bilder habt und aus Gründen der Übersicht diese aufteilen wollt.

Schritt 2 - CSS-Datei

Die CSS-Datei style.css beinhaltet nicht nur die Stylesheets eures Theme, sondern auch die Informationen zu eurem Theme. Diese Informationen bestehen aus:

  • Template Name - Dieser Name ist der Name des Templates und wird unter Administrations Panel >> Design >> Templates unter dem Bild eures Templates angezeigt
  • Template URI - Hier könnt ihr die URL zum Template angeben. Diese Url kann eure Webseite, die Seite wo man evtl. das Template herunterladen kann oder wo das Template beschrieben ist.
  • Description - Die Description erscheint ebenfalls unter Administrations Panel >> Design >> Themes , direkt unter dem Theme Name und beschreibt das Theme
  • Author - Hier kannst du den Namen des Autors des Templates eintragen, in diesem Fall also dein Name
  • Author URI - Hier könnt ihr die URL eurer Webseite eintragen
  • Version - Die Version des Templates. Aktuell wäre es 0.1, wenn das Template fertig ist - dann könnt ihr dort 1.0 eintragen.
  • Tags - Tags die das Template beschreiben, dies wird benötigt wenn ihr euer Template z.B. auf wordpress.org zum Download bereitstellt und jemand es über die Suche finden möchte. Die Tags werden aber auch, wie Template Name und Description, auf der Themes Seite eurer Wordpress Seite angezeigt.
  • License - Die Lizenz unter der euer Blog steht, es wird eine 100% GPL Licence oder eine kompatible Lizenz erwartet, >>Licensing .
  • License URI - Url zur gewählten Lizenz

Es ist möglich z.B. in der Description HTML Tags zu verwenden um Links oder Zeilenumbrüche einzubauen. Meine style.css sieht hat nun folgenden Anfang:

/*
Theme Name: Default Wordpress Template
Theme URI: https://gnetos.de/
Description: Das Standard Template für das Wordpress Tutorial
Template Schritt für Schritt
Author: Tobi
Author URI: https://gnetos.de/
Version: 0.1
Tags: default, custom

License: GNU General Public License v2.0
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

Schritt 3 - Header Datei

Die PHP-Datei für den Header müsst ihr header.php nennen. Dadurch könnt ihr mit der Funktion

< ?php get_header(); ?>

die header.php überall schnell und einfach einbinden. Aber was beinhaltet bzw. was soll diese Datei beinhalten ? Da euer Theme später evtl. neben der index.php, noch eine single.php und vielleicht auch noch eine page.php hat, ist es mühsam jedesmal den Header neu zu schreiben. Zudem könnten dadurch schnell Fehler und unterschiede im Header der einzelnen Dateien enstehen. Daher kommt in die header.php der Bereich von Doctype bis body. Je nach Template Entwurf ist es sinnvoll die Navigation oder eine Header Grafik in die header.php aufzunehmen. Wenn z.B. eine Grafik und darunter eine Navigation auf jeder Seite am Anfang steht, sollten diese beiden Dinge in die header.php. Auch falls z.B. die page.php diese beiden Dinge nicht enthalten soll, denn es ist möglich mit Hilfe von PHP Funktionen einfach abzufragen ob ihr auf einer Seite, dem Frontend, einer Kategorie, einem Beitrag etc. seit. Wer Informationen zum designen des Headers such findet unter >> Designing Headers einen guten Beitrag zu diesem Thema. Mein Header sieht ohne Header Grafik und Navigation, also nur der Teil zwischen <DOCTYPE und <body folgermaßen aus:

<!DOCTYPE html>

<html <?php language_attributes(); ?>>



<?php wp_title(); ?> <?php bloginfo( ‘name’ ); ?>

<meta name=”copyright” content=”© date(“Y”) Tobi Gafner”>

" />



<?php wp_head(); ?>



DOCTYPE <!DOCTYPE html> steht für den HTML 5 Doctype, dieser ist deutlich einfacher zu schreiben. Am Anfang jeder Webseite muss ein DOCTYPE stehen. Meta Angaben

robots wird hier nicht eingebaut, da WordPress dies automatisch über die Funktion wp_head(); aufgrund der Einstellung unter Privatsphäre einbaut. description ist zwar für Suchmaschinen Platzierungen kein Kriterium mehr, aber es wird für Anzeige der Suchergebnisse bei Suchmaschinen berücksichtigt. Der PHP Code hinter content=” sorgt dafür das Standardmäßig der Seiten Titel und die Blogbeschreibung ausgegeben werden, außer man befindet sich auf einer einzelnen Beitragsseite - dann wird der Titel des Beitrags verwendet.
keywords, sollten eure Webseite im Sinne von Tags beschreiben. Auch hier wäre es möglich, z.B. bei single Artikeln die Tags des Artikels auszugeben. wp_head(); diese, als Hook, bezeichnete Funktion ermöglicht es, das Plugins die von ihnen benötigten Skripte, Styles etc. automatisch in den Header schreiben können und keine Anpassung durch den Benutzer mehr notwendig ist.

* stylesheet, hier wird das default Stylesheet style.css eingebunden. Die Url zur Datei style.css bekommt man mit Hilfe der Funktion

bloginfo( ‘stylesheet_url’ );

Den Pfad zum Template könnt ihr mit

< ?php bloginfo(‘template_directory’); ?>

abrufen. Weitere Informationen findet ihr dazu unter [bloginfo](http://codex.wordpress.org/Template_Tags/bloginfo "bloginfo") oder [get_bloginfo](http://codex.wordpress.org/Function_Reference/get_bloginfo "get_bloginfo").

Um für Meta-Tags und Suchmaschinen gibt es einige WordPress Plugins.

Schritt 4 - Footer Datei
————————

Die Datei für den Footer trägt die Bezeichnung footer.php und kann durch.

get_footer()

eingebunden werden. In diesr Datei befindet sich das Ende der Seite. Aus diesem Grund werden in die footer.php die End-Tags für body und html geschrieben. Wichtig ist, das ihr im Footer die Funktion

wp_footer();

aufruft. Da viele Plugins diesen Hook verwenden um JavaScript Code am Ende der Seite einzubinden S0lltet ihr daher diese Funktion nicht einbauen, könnte es passieren das einige Plugins nur teilweise oder überhaupt nicht funktionieren. Mein Footer sieht daher folgendermaßen aus:


<?php wp_footer(); ?>

Schritt 5 - Sidebar

Bei der Sidebar, ist es wie mit dem header und dem footer, die Datei heißt sidebar.php und kann durch

get_sidebar();

eingebunden werde. Es gibt aber auch die Möglichkeit mehrere Sidebars zu verwenden. Dazu könnt ihr entweder die PHP Funktion include

<?php include (‘sidebar2.php’); ?>

verwenden, oder bei eurem Template weitere Sidebars “registrieren”. Dazu müsst ihr in eurem Template Ordner die Datei functions.php anlegen. Dort tragt ihr dan den folgenden Code ein

<?php if ( function_exists (‘register_sidebar’)) {
register_sidebar (‘right’);
} ?>

Dabei wird eine Function aus der Wordpress Datei widgets.php verwendet. Diese “registriert” eure Sidebar in eurem Theme, in diesem Fall muss der Dateiname der Sidebar sidebar-right.php heißen. Und einbinden könnt ihr diese dann mit

<?php get_sidebar (‘right’); ?>

Wenn ihr weitere Sidebars verwenden wollt, müsst ihr nur das right im Namen der Datei und bei registrieren entsprechend ändern.