mysudo

free speech, not free beer!

Nützliche Tools für die Entwicklung von eigenen WordPress Themes

Hinterlasse einen Kommentar

Bevor Du einfach damit beginnst, ein eigenes WordPress Theme zu entwickeln, solltest Du ein paar entsprechende Entwicklungs-Tools einer näheren Betrachtung unterziehen.

In diesem Artikel kannst Du Dir einen kurzen Überblick verschaffen und wir werden uns gemeinsam Schritt für Schritt eine eigene WordPress Testumgebung zusammenstellen.

Der lokale Test Server: XAMPP oder MAMP

Am besten ist es, seine eigenen WordPress Themes in einer lokalen Testumgebung zu entwickeln, d.h. offline, lokal auf dem eigenen Computer. Damit das funktioniert, müssen wir aber unseren Computer zuerst in einen lokalen Server verwandeln. Dazu brauchen wir den Apache Server, eine MySQL Datenbank und PHP. Wenn wir alle diese drei Komponenten auf unserem Computer installiert haben, können wir auch WordPress lokal installieren.

Alle diese Komponenten einzeln auf dem Computer zum Laufen zu bringen, kann auch für erfahrene Anwender eine Herausforderung darstellen, aber glücklicherweise gibt es hier eine, oder besser gesagt, zwei Abhilfen, die uns diese komplizierte Angelegenheit abnehmen:

Wenn Du einen Windows Computer hast, dann ist XAMPP für Dich die richtige Wahl.

Für Mac User heisst die entsprechende Alternative MAMP.

WordPress

Natürlich brauchen wir dann noch WordPress selber! Die aktuellste Version kannst Du einfach und schnell auf der Seite von WordPress herunterladen.

Wenn Du XAMPP benutzt, dann folge diesen Anleitungen wie man WordPress unter XAMPP installiert.

Wenn Du MAMP benutzt, dann folge diesen Anleitungen wie man WordPress unter MAMP installiert.

Wir brauchen Inhalt – Dummy Content!

Damit wir nun anfangen können, die Darstellung der Inhalte anzupassen, brauchen wir natürlich zuerst einmal Inhalte. Diese Inhalte werden auch dummy Content genannt. Das sind Beispielinhalte, die alle möglichen Formatierungen enthalten, damit wir beim Erstellen unseres eigenen Themes auch gleich sehen, wie unsere Inhalte später aussehen werden.

Solchen dummy Content kannst Du Dir gleich auf WPCandy Sample Content herunterladen und via WordPress Importer in Deinen frisch installierten Blog laden.

Es ist zu empfehlen, dass Du möglichst viele Inhalte auf ihre Darstellung testest, wenn Du ein eigenes Theme für WordPress entwickelst. Wenn Du der Meinung bist, dass Du fertig bist mit Deinem Theme, dann browse durch Deine eigene Seite und schau Dir alle möglichen Darstellungen wie z.Bsp. Archive, Kategorieansichten usw. nochmal genau an. Mit gutem dummy Content wirst du es sofort feststellen, solltest Du etwas vergessen haben Deinem Theme anzupassen.

Ich rate Dir auch echten, eigenen Content zu erstellen. Denn erst bei der Verwendung Deiner eigenen Bilder oder Texte wird klar, wie denn Dein Theme so wirklich wirkt!

Der Text Editor

Du brauchst keine teure, spezielle Software, damit Du damit beginnen kannst, Deine eigenen Themes für WordPress zu entwickeln. Alles was Du brauchst, ist ein guter, alter Texteditor. Hier kann ich Dir nur Notepad++ ans Herz legen – wirklich, damit kannst Du alles machen!

Einen Browser

Du kannst einen beliebigen Browser für die Webentwicklung verwenden. Zwei möchte ich jedoch an dieser Stelle hervorheben:

Firefox

Die erste Wahl, wenn es um die Entwicklung von Webseiten geht. Mit folgenden zwei Add-ons wird Dir Dein Alltag enorm erleichtert, wenn es um die Gestaltung von WordPress Themes geht.

Das Web Developer Add-on für Firefox fügt dem Browser eine Toolbar hinzu, die es Dir ermöglicht, alle erdenklichen Optionen zu steuern, damit Du Dir ein genaues Bild über den Code Deiner Seite machen kannst.

Das Firebug Add-on für Firefox ist ein unverzichtbarer Helfer. Mit Firebug kannst Du mit einem simplen Rechtsklick auf ein Seitenelement herausfinden, wie der Quellcode (CSS und HTML) aussieht. Du kannst aber auch direkt in diesen Code eingreifen und z.Bsp. das CSS für ein entsprechendes Element quasi WYSIWYG modifizieren, um anschliessend die entsprechenden Änderungen im eigenen Stylesheet vorzunehmen.

Die neuen Versionen von Firefox haben ein ähnliches Tool bereits von Haus aus mit dabei – dieses Tool ersetzt aber in keinster Weise die unzähligen Optionen, die Du mit dem Firebug steuern kannst.

Chrome

Falls Du nichts mit dem Firefox anfangen kannst, ist Chrome eine ernstzunehmende Alternative. Auch Chrome besitzt Entwicklungswerkzeuge, die denen von Firefox sehr ähnlich sind. Um mehr über diese Tools von Chrome zu erfahren, kannst Du Dir einfach mal die Dokumentation über die Entwicklungswerkzeuge von Chrome durchlesen.

HTML und CSS

Es wäre gelogen zu behaupten, dass Du keine Grundkenntnisse in HTML und CSS brauchst, um mit der Entwicklung Deines eigenen WordPress Themes zu starten. Ich lege Dir dazu das HTML Beginner Tutorial und das CSS Beginner Tutorial ans Herz. Ebenfalls lohnt sich ein Besuch der Seite W3Schools des W3C Konsortiums – dort findest Du ausführliche Angaben zu beiden Themen.

PHP

Was Du ebenfalls brauchst, ist ein gewisses Verständnis über die Grundzüge von PHP. Du brauchst kein PHP Experte zu sein, um Dein eigenes Theme zu schreiben, aber eine gewisse Vorstellung davon, was PHP ist und wie es läuft, schadet auf keinen Fall!

Dieser Artikel ist bei ThemeShaper in der Reihe „The ThemeShaper WordPress Theme Tutorial: 2nd Edition“ auf englisch erschienen und von mir an dieser Stelle frei ins Deutsche übersetzt. Einige der Links habe ich angepasst, da es auch deutsche Anleitungen dafür gibt. In dieser Schritt für Schritt Anleitung von ThemeShaper wird ausführlich auf die Erstellung eines eigenen WordPress Themes eingegangen. Kann ich nur empfehlen!

Advertisements

Autor: Thom

Abenteurer, Outdoorfreak, Webworker, Linuxer, WordPresser, SysAdmin, Tech-Geek, Fotograf, Makrofetischist, Alpinwanderer, Mountainbiker, Reisender, Seilbähnler, Skiliftler, Gärtner, Autoflicker, Naturliebhaber, Selbstversorger, Gipfelstürmer, Lebenskünstler - ich bin flexibel, situativ und variabel verfügbar!

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s