Wer Linux verwendet, stellt fest - das er immer mal wieder Programme von Windows benötigt. Unter Linux gibt es, ich vermute fast immer, verschiedene Alternative Programme. Schwierig wird es wenn die Lösung z.B. bei einer Hausaufgabe oder beim Studium nur akzeptiert wird, wenn sie mit einem bestimmten Programm gemacht wurde. Dann kann man mit Wine versuchen, das Programm zum laufen zu bringen oder ein Windows mit Hilfe von einem VMware Player unter Linux starten. Die zweite Lösung ist besonders dann die bessere, wenn der Anwender sich nicht so gut mit Linux auskennt und davon ausgegangen werden kann das noch weiter Windows Programe benötigt werden. Die aktuelle VMware Player Version ist Nummer 4, diese ist jedoch auch in der 32bit Version nur auf 64bit Rechnern lauffähig. Daher wird für ein 32bit Rechner, die Version 3.1.5 benötigt, die ebenfalls auf der Seite des Herstellers heruntergeladen werden kann. Ich habe versucht die Version 3.1.5 auf Ubuntu 11.10 zum laufen zu bringen. Die Installation verlief ohne Probleme, beim Starten des Players ist jedoch der folgende Fehler aufgetaucht: SPIN_LOCK_UNLOCKED Nach einer Recherche im Internet bin ich auf die folgende Lösung gestoßen: http://weltall.heliohost.org/wordpress/2011/05/14/running-vmware-workstation-player-on-linux-2-6-39-updated/ Wer diesen Patch mit der Version 3.1.5 verwenden möchte, muss aber noch folgendes anpassen: Die Datei vmware2.6.39patchv3.tar herunterladen und entpacken. Dann die Datei patch-modules_2.6.39.sh öffnen und die player Version auf 3.1.5 ändern. Danach kann der Patch mit folgendem installiert werden: Mit der Konsole folgendes im entpackten Ordner aufrufen

bash patch-modules_2.6.39.sh

Bei mir lief danach der Player ohne Probleme. Den Warnhinweis, das der Kernel 3.0.12 verwendet wird und der Player nur für 2.6 gedacht ist, kann ignoriert werden. Ich konnte bei meiner Virtuellen Maschine keine Probleme durch die höhere Kernel Version Festellen. Falls ihr eine Virtual Maschine, die mit der Version 4 erstellt wurde, mit dem Player in Version 3 verwenden wollt - muss in der *.vmx Datei folgendes angepasst werden: virtualHW.version = “8” in virtualHW.version = “6” ändern. Dann könnt ihr die Virtual Maschine ohne Probleme mit dem 3.1 Player starten.

Auf WP-Magazine.ch habe ich am Wochenende einen interessanten Beitrag entdeckt. Für jeden der sich für das Erstellen von WP Themes interessiert,dürfte dieser Beitrag interessant sein. Pascal Birchler schreibt über die Template Hierarchie, welche für Wordpress Theme Dateien existiert. Wer eine gute Übsersicht aller Template Dateien und deren Hierarchie sucht, findet in diesem Artikel die passende Antwort. >> WordPress Template Hierarchie 2.0

Schritt 7 - Page, Archive … Templates

Es gibt für Wordpress Themes drei Standard Page Templates.

• page.php => Zeigt den Inhalt einer Seite an
• archives.php => Ignoriert den Inhalt einer Seite und zeigt stattdessen Monats oder andere Archive an
• links.php => Ignoriert ebenfalls den Inhalt und zeigt die Links des Blogs an

Für Seite kann man zudem eigene Templates verwenden. Dadurch sind mehrere Templates für Seiten in einem Theme vorhanden. Wordpress verwendet die Templates nach der folgenden Reihenfolge:

• Seiten Template, dass der Seite im Editiermodus zugeordnet wurde
• page.php
• index.php

Wenn keine Seiten Templates einer Seite zugeordnet sind und auch keine page.php vorhanden ist, nimmt Wordpress die index.php. Wenn kein Unterschied zwischen den Seiten und den Artikel im Aussehen vorhanden sein soll, muss keine page.php Seite im Theme angelegt werden.

<?php
/**
* Template Name: TestTemplate Template
* Description: A Page Template for TEST
*/
get_header();
?>

Test Bereich

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>

<div <?php if ( function_exists(‘post_class’) ){ echo “class=’post’”;}else{ echo “class=’post’”;} ?> id=”post-<?php the_ID(); ?>”>

<?php endwhile; ?>
<?php endif; ?>
<?php get_footer(); ?>

Dieser Code zeigt ein Seiten Template. Ich habe es testtemplate.php genannt. Wichtig in diesem Code ist folgender Teil:

Template Name: TestTemplate Template

Der Name der hier angeben wird, wird später im Adminbereich unter Seite erstellen/bearbeiten >> Attribute >> Template als Name des Templates dargestellt. Der Inhalt eures Seiten Templates und deren Aufbau, wie auch der Aufbau der Archive Seite hängt von eurem Entwurf ab. Ich empfehle, das Wordpress Standard Theme Twenty Eleven, näher anzuschauen. Es würde an dieser Stelle zu lange dauern, alle Funktionen von Wordpress zu erklären und ihre Verwendung zu beschreiben. Besonders wichtig sind aber die Conditional Tags. Mit diesen Tags wird z.B. geprüft ob eine Seite die Frontpage ist oder ein Post ein sticky (Posts die oben angepinnt werden) ist. Eine Auflistung aller Conditional Tags findet man unter http://codex.wordpress.org/Conditional_Tags. Das wichtigste sind aber die Wordpress Funktionen, unter http://codex.wordpress.org/Function_Reference findet man eine Auflistung aller Funktionen die in Wordpress bereitstehen. Je nach Kenntnisse kann man auch mit Hilfe der functions.php oder von Plugins selbst Funktionen schreiben und diese verwenden. Für Templates sind von den Funktionen besonders die Template Tags wichtig, diese findet man unter http://codex.wordpress.org/Template_Tags. In dem Seiten Template “TestTemplate Template” seht ihr eine while Schleife mit dieser wird über die Beiträge einer Seite iteriert, die Anzahl der Beiträge hängt von der Seite ab. Auf der index.php sind immer soviel Beiträge vorhanden, wie unter Einstellungen eingestellt wurden. Unter ?id=345 oder eines entsprechenden Permalinks ist nur ein Beitrag in vorhanden. In der Schleife stehen euch dann verschiedene Wordpress “Post Functions” zur Verfügung. Die Funktion the_content() gibt den Inhalt eines Beitrags oder Seite aus. An dieser Stelle beende ich meine Schritt für Schritt Anleitung. Mit Hilfe der Links weiter oben und der Wordpress Standard Themes, welche in jeder Wordpress Installation vorhanden sind, könnt ihr euer Template nach eurem Entwurf aufbauen. Bei einzelnen Details helfen auch die Foren von Wordpress.org und Wordpress Deutschland weiter oder andere Blogs im WWW. PS: Wer noch Fragen hat kann gerne ein Kommentar hinterlassen oder eine Nachricht an mich schicken.

Wer in Facebook für ein Event eine große Anzahl Freunde einladen möchte, muss dazu mehrere Klicks machen. Dies kann ab einer bestimmten Anzahl von Events mühsam und werden. Dagegen gibt es aber eine Lösung, mit Hilfe von Javascript kann man automatisch alle checkboxen anklicken. Im Internet gibt es einige Code Snippets, welche dies ermöglichen. Ich habe das folgende verwendet:

javascript:var elms=document.getElementsByName(“checkableitems[]“);for(var count=0;count<elms.length;count++){var t = setTimeout(“elms[“+count+”].click()”,100)}

Und so könnt ihr es ihn euren Browsern verwenden:

• Firefox Das Plugin Firebug installieren und dann F12 drücken.
• Internet Explorer Bei IE sind seit Version 8 Entwicklertools dabei, dieser aktiviert ihr ebenfalls mit F12.
• Chrome Beim Chrome sind ebenfalls Entwicklertools dabei, welche ihr mit F12 aktivieren könnt.
• Opera Bei Opera ist das Tool Dragonfly dabei, dieses aktiviert ihr, wenn überrascht es, mit F12.

Dann den Reiter / Button “Console (Konsole)” auswählen und den Javascript eingeben. Danach noch auf Enter drücken und eure Freunde werden markiert.

Schritt 6 - Widgets/Sidebar

Das Feature “widgets” das vor einigen Versionen eingeführt wurde ist im Bereich Usability ein sehr guter Helfer. Dadurch ist es möglich das Anwender, welche das Theme in ihren Blog verwenden, selbst entscheiden können - welche Elemente in der Sidebar oder im Footer angezeigt werden sollen. Es muss somit nicht für jede Änderung das Theme im Editor angepasst werden, sondern kann einfach über das Menü Element Widgets entsprechend konfiguriert werden. Dazu muss ein Theme aber Widget fähig sein. Folgender Code ist notwendig um zwei Sidebars (Bereiche für Widgets) zu erstellen und muss in die functions.php eingefügt werden:

function own_theme_widgets_init() {

register_sidebar( array(
    'name' => __( 'NameDerSidebar'),
    'id' => 'sidebar-$',
    'before_widget' => '',
    'after_widget' => "",
    'before_title' => '<h3>',
    'after_title' => '</h3>',
) );

register_sidebar( array(
    'name' => __( 'NameDerSidebar2'),
    'id' => 'sidebar-$',
    'description' => __( 'The description, you seet it on widget area in admin area'),
    'before_widget' => '<span id="%1$s">',
    'after_widget' => "</span>",
    'before_title' => '<h3>',
    'after_title' => '</h3>',
) );

}
add_action( ‘widgets_init’, ‘own_theme_widgets_init’ );

Die Methode “add_action()” ist eine Wordpress Methode und sorgt dafür, dass die Sidebars im Adminbereich unter Widgets verwendet werden können. Die Funktion

own_theme_widgets_init

enthält dabei 2 Sidebars, der Name der Funktion kann sich jeder frei überlegen. Wichtig ist nur, das ihr den selben Namen für die add_action Methode verwendet. Die Methode register_sidebar in der Funktion “own_theme_widgets_init” sorgt für die eigentliche Registrierung der Sidebar. Dieser Funktion kann als Parameter ein Array mit den folgenden Werten übergeben werden:

• name => Name der Sidebar, wird Adminbereich unter Widgets angezeigt
• id => Die Id der Sidebar, über diese Id wird die Sidebar eingebunden - WICHTIG die ID muss eindeutig sein
• description => Beschreibung der Sidebar, wird Adminbereich unter Widgets angezeigt
• before_widget => HTML Code, welcher vor den einzelnen Widgets verwendet werden soll
• after_widget => HTML Code, welcher nach den einzelnen Widgets verwendet werden soll
• before_title => HTML Code, welcher vor den Titel der einzelnen Widgets verwendet werden soll
• after_title => HTML Code, welcher hinter den Titel der einzelnen Widgets verwendet werden soll

Wer mehrere Sidebars auf einmal erzeugen möchte, welche alle das gleiche HTML Gerüst haben sollen - kann einfach register_sidebars() verwenden:

<?php register_sidebars( $number, array(
‘name’ => ‘Sidebar %d’,
‘id’ => ‘sidebar-$i’,
‘description’ => __( ‘The description, you seet it on widget area in admin area’),
‘before_widget’ => ‘‘,
‘after_widget’ => ““,
‘before_title’ => ‘

‘,
‘after_title’ => ‘

‘,
) );
?>

$number muss dabei durch die Anzahl der gewünschten Sidebars ersetzt werden. Mit Hilfe von $i, wird automatisch eine Zahl hochgezählt und für jede Sidebar im Attribute id die nächste Nummer verwendet. Beim ersten Beispiel ist somit sidebar-1 und sidebar-2 vorhanden. Die nun vorhandenen Sidebars müssen noch in das Theme eingebaut werden. Der folgenden Code baut die beiden Sidebars vom Anfang des Artikels in das Theme ein, der Ort an dem ihr diesen Code platziert entspricht dem Ort wo die Sidebars angezeigt werden:

<?php if ( is_active_sidebar( ‘sidebar-1’ ) ) :
dynamic_sidebar( ‘sidebar-1’ );
endif; ?>

<?php if ( is_active_sidebar( ‘sidebar-2’ ) ) :
dynamic_sidebar( ‘sidebar-2’ );
endif; ?>

Die Prüfung mit “is_active_sidebar” ist wichtig, falls die gewünschte Sidebar nicht vorhanden ist - wird dadurch kein Fehler auf eurer Webseite geworfen. Eine Prüfung ob die Funktion “dynamic_sidebar” existiert ist nur bei abwärts kompatiblen Themes notwendig, falls dies der Fall sein sollte, erfolgt eine Prüfung mit:

function_exists(‘dynamic_sidebar’)

Wer sich in das Thema vertiefen möchte oder weitere Informatione benötigt, findet auf wordpress.org die richtigen Antworten:

• register_sidebar
• register_sidebars
• dynamic_sidebar
• Widgets API

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(); ?>>





<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.

“Zeichne zuerst und entwickle erst später. Dies spart nicht nur Zeit sondern auch Ärger”

Wer seine Idee vom geplanten Template zuerst auf ein Blatt Papier zeichnet spart sich Zeit und Ärger. Zum einen können Striche wieder wegradiert werden, zum anderen kann so das Bild von der geplanten Seite überall schnell und einfach dagestellt werden.

Schritt 1 - Wie stelle ich ein solches Template dar, bzw. wie zeichne ich es

Beim Zeichnen sind euch natürlich keine Grenzen gesetzt. Ihr könnt einfach ein Bild von der Webseite zeichnen, wie sie nach der Erstellung des Templates aussehen soll. Was es euch einfacher macht ist, wenn ihr berücksichtigt wie man ein solches Template später umsetzen kann. Grundsätzlich besteht jedes Template aus einer Struktur von Elementen. Dabei möchte ich auf zwei verschiedene Arten von Strukturen für Templates eingehen:

• 960 Grid System Wieso 960 ? Es wird davon ausgegangen das 960px die best möglichste Breite ist, für die Anzeige einer Webseite. Eine Einführung und ein Tutorial, das euch hilft einen Überblick zu bekommen und die Anwendung dieses Systems zu verstehen findet ihr unter http://blog.florenz.co.uk/tutorial/960-gridsystem-einfuehrung-tutorial-anleitung/.
• Spalten / Box Layout Ihr stellt euch euer geplantes Template als Seite mit Spalten und Boxen vor. Z.B. könnt ihr eine Box als Header über die gesamte Seite haben, dann darunter befinden sich zwei Spalten, eine für Content und eine für die Sidebar. Ihr überlegt euch also die Struktur eurer Seite, was es später vereinfacht das Template zu erstellen. Yaml ist ein Framework mit dessen Hilfe ein flexibles Layout auf Basis einer float-Umgebung erstellt werden kann. Yaml verwendet dabei Boxen und Spalten und bietet einen riesigen Baukasten an. In einer ausführlichen Dokumentation wird erklärt wie Yaml verwendet und eingesetzt werden kann. Durch die vorhandenen Bausteine, kann man sich so schnell und einfach eine Struktur für eine Webseite bauen. Layout Beispiele von Yaml findet ihr unter http://www.yaml.de/fileadmin/examples/index.html und mit dem Yaml Builder, könnt ihr euch ein Layout durch klicken zusammenbauen. Bitte beachtet: Solltet ihr das Framework verwenden, ist zur kostenlosen Nutzung eine Rückverlinkung in der Fußzeile oder im Impressum nötig. Mehr zur nicht kommerziellen und kommerziellen Verwendung des Frameworks findet ihr unter Yaml Lizenz.

Schritt 2 - Das geplante Template zeichnen

• Ich habe mit diesem Schritt immer gute Erfahrung gemacht, so konnte ich schnell erkennen ob das Bild was ich mir vorstelle auf Papier überhaupt gut aussieht. Ein Template kann man natürlich auch ohne Zeichnung auf einem Papier erstellen.

• Danach geht es darum, den Entwurf zu digitalisieren. Dies ist nur der Fall, wenn ihr den Entwurf verfeinern wollt oder / und ihn anderen Person präsentieren wollt.

• Bildbearbeitung Eine Möglichkeit ist es, das geplante Template durch mehrere Bilder mit einem Bildbearbeitungsprogramm zu erstellen. Meiner Meinung nach ist das aber viel Arbeit und besonders im privaten Bereich in der Betrachtung von Zeit/Ergebnis nicht sinnvoll.

• Wireframe oder Mock-Up Programme Mit diesen Programmen ist es möglich Prototypen von GUIs oder Webseiten zu erstellen. Meisten sind eine große Reihe an HTML-Elementen vorhanden, die man einfach als Bilder an die gewünschte Stelle verschieben kann. Damit müsst ihr die HTML-Elemente wie in der Bildbearbeitung nicht selber erstellen.Pencil ist ein solches Programm, welches kostenlos ist und als Plugin für Firefox existiert. Daneben existiert aber auch eine Standalone Version.

Schritt 3 - Das geplante Template als HTML umsetzen

An diesem Punkt wisst ihr wie eure Webseite aussehen soll und habt entweder eine Zeichnung oder eine Grafik von eurem Layout. Um nicht vom Ziel abzuweichen, solltet ihr bei diesem Schritt eure Zeichnung oder Grafik immer wieder mit dem Umgesetzten vergleichen. Damit verhindert ihr, dass eure Umsetzung sich zu weit von eurem Entwurf entfernt. Bevor jetzt aus dem Entwurf ein Template mit PHP-Dateien wird, solltet ihr den Entwurf zuerst als eine einzige HTML-Seite umsetzen. Falls ihr unterschiedliche Seiten - was auch die Struktur angeht - für Startseite und z.B. Kategorieseite habt dann wäre es am besten für jede eine HTML-Seite umzusetzen. Der Vorteil bei einer HTML-Seite ist in diesem Fall, falls euch die Seite von der Struktur nicht gefällt, könnt ihr schnell und einfach die Struktur ändern. Wenn ihr das Layout schon auf die einzelnen WP Template Dateien verteilt habt, wird es deutlich schwieriger das Layout zu ändern. Zudem befindet sich dann evtl. schon PHP Code in den Seiten, wodurch das Editieren noch aufwendiger wird. Solltet ihr euch entschieden haben Yaml einzusetzen und z.B. eines der Standard-Layouts eurem Entwurf grob entspricht, dann könnt ihr auch einfach dieses verwenden und entsprechend anpassen. An diesem Punkt ist jetzt ein Entwurf vorhanden und eine Umsetzung davon als HTML Seite. Es ist klar, dass der Entwurf und die Umsetzung auch voneinander abweichen können. Zum Beispiel könnte ein bestimmter Teil aus dem Entwurf nicht realisiert werden, wodurch sich die Umsetzung im Aussehen natürlich verändert. Aber durch das Prüfen des Entwurfes mit der Umsetzung während man bei der Umsetzung ist, geht man sicher das am Ende nicht ein Apfel raus kommt, wenn eine Birne entworfen wurde.

Es gibt eine riesige Anzahl von Wordpress Templates, diese sind entweder kostenlos oder kommerziell. Die Template Suche in Wordpress - unter “Design>>Themes” und “Themes installieren” - bietet mit Hilfe von Filtern die Möglichkeit die Anzahl Templates einzuschränken und so das passende Template zu finden. Der Themenpool auf WP Deutschland bietet ebenfalls Filter zum verfeinern der Suchergebnisse. Wer aber dort kein passendes Template findet, der kann sich sein eigenes Template machen - ebenso natürlich auch jeder der Lust darauf hat sich sein eigenes Template zu erstellen. Bevor man aber anfängt Dateien zu erstellen und mit Inhalt zu füllen, möchte ich erst auf die Werkzeuge zum Erstellen eines Templates eingehen. Zum Bearbeiten der Dateien wird ein Editor benötigt. Dabei reicht der Windows Editor oder Vim für Linux natürlich aus, aber ein gutes Syntax Highlighting und eine Autovervollständigung haben natürlich gewisse Vorteile. Ich verwende z. B.:

• PSPad Einfacher Editor mit Syntax Highlighting für viele verschiedene Sprachen und eine Vielfalt an Plugins. Es gibt natürlich auch extra Editoren nur für PHP.

• Eclipse Für Java verwende ich als IDE Eclipse, daher bietet es sich für mich an die gleiche IDE auch für PHP zu verwenden. Eine IDE bietet mehr Möglichkeiten als ein einfacher Editor. Das PHP Plugin für Eclipse findet ihr unter http://www.eclipse.org/projects/project.php?id=tools.pdt. Die Netbeans IDE ermöglicht ebenfalls das Bearbeiten von PHP, die Netbeans PHP IDE kann hier heruntergeladen werden.

Um die PHP-Dateien auch lokal anzeigen zu lassen, benötigt ihr einen PHP Interpreter und Webserver. Das Xampp Projekt bietet einen kompletten Webserver der zum lokalen Testen von Webanwendungen verwendet werden kann. Die Standard-Version sollte aber aufgrund von ihren default Einstellungen nicht produktiv verwendet werden. Die Xampp Installation enthält dabei alles was man für Wordpress und der Template-Erstellung benötigt. Einen Apache Webserver, PHP, MySql und die Datenbank Verwaltungsanwendung phpMyAdmin. Darüber hinaus sind in der aktuellen Version noch ein FTP-Server und ein Tomcat für Java Webanwendungen enthalten.

• Die aktuelle Xampp Version könnt ihrhierherunterladen. Es gibt sie für Windows, Linux, Mac OS X und Solaris kostenlos.

Wer eine History seiner Änderungen an seinen Dateien benötigt oder mit mehren Personen zusammen ein Template entwickelt, für den ist eine Versionsverwaltung sehr hilfreich. Es gibt verschiede Versionsverwaltungsprogramme. Auf zwei werde ich im folgenden näher eingehen. Diese beiden haben einen hohen Verbreitungsgrad und es gibt viele Informationen dazu:

• SVN (Subversion) Subversion ist ein zentrales System, bei dem das Repository auf einem Server liegt und jeder User ein Workspace auschecken kann. Wie ihr Subversion für Windows und Linux installieren könnt, findet ihr unter “Subversion unter Windows installieren“. Wer Linux als Betriebssystem hat, kann einfach die Subversion Pakete für sein Derivat installieren und dann der Anleitung “Subversion unter Linux einrichten“ folgen.
• Git Git ist ein Verteiltes System, bei dem jeder seine eigene Arbeitskopie hat und es findet eine weite Verbreitung vor allem im OpenSource Bereich. Weitere Informationen dazu gibt es in meinem Beitrag zu Git.

Euer Template sollte natürlich auch in möglichst vielen Browser funktionieren. Besonders der IE bereitet dabei oft Probleme, vor allem können nicht mehrere Versionen gleichzeitig installiert sein, wie es z.B. beim Firefox durch Profile möglich ist. Auch benötigt das Installieren einer anderen IE Version unter Windows jedes mal einen Neustart des Rechners. Mit Hilfe eines IE Testes kann man dieses Problem umgehen, der IE Tester bietet die Möglichkeit das Template in verschiedenen IE Version zu betrachten (IE Tester downloaden). Alternativ kann die Entwicklungsumgebung des IEs verwendet werden um andere IE Versionen zu testen. Im nächsten Teil geht es um das Grundlayout und die Default Dateien eines Templates.

Neben den Sendern in den Beiträgen Webradio ohne Werbung und Swissjazz und Swissclassic habe ich weitere Webradios ohne Werbung und Nachrichten gefunden. Unter http://my.liveireland.com/page/radio-1 gibt es nette irische Musik ohne Werbeunterbrechung, dafür leider ohne Playliste. Wer gerne klassische Filmmusik hört, findet auf dem Movie Channel von Klassikradio das richtige (wenn ihr den Link öffnet, müsst ihr noch extra Movie Channel auswählen). Nachteil ist, man kann es nur über den Browser hören und es ist keine Playliste für den Movie Channel vorhanden.

Heise.de hat einen 2-Klick-Empfehlungsbutton entworfen. Dieser Button unterscheidet sich von den normalen gefällt mir Button, durch ein 2-Klick Prinzip. Der User muss zuerst den Button des Social Networks aktivieren und kann dann auf den Button klicken. Dadurch wird verhindert, das die Social Networks schon durch das einbinden der Buttons Daten abrufen. Dadurch, dass dieses Vorgehen auf jeder Seite erneut vorgenommen werden muss, ist sichergestellt das nur diese Daten übertragen werden welche vom User gewünscht sind. Durch die Zustimmung mit dem aktivieren der Buttons stimmt der User dem Abrufen von Daten zu, der Webseitenbetreiber lässt somit den User entscheiden ob dieser seine Daten bereitstellen möchte oder nicht. Dies ist in Betrachtung der aktuellen Datenschutz Diskussionen ein wichtiger Punkt. Damit der User aber nicht auf jeder Seite seine Zustimmung geben muss, kann dieser einzelne oder alle Buttons dauerhaft aktivieren. Heise.de hat ein Jquery Plugin namens “socialshareprivacy” veröffentlicht. Es sind darin 2-Klick-Empfelungsbuttons für Twitter, Facebook und Google+ vorhanden. Den Code findet ihr unter: http://www.heise.de/extras/socialshareprivacy/