Ein eigenes WordPress Theme erstellen – die Vorbereitungen und Grundlagen – mit diesem Artikel beginne ich eine neue Serie und möchte hier meine ersten Schritte auf dem Weg von einer einfachen statischen Webseite mit reinem HTML und CSS, bis hin zu meinem ersten eigenen WordPress Theme beschreiben. Wichtige Meilensteine auf dem Weg werden Punkte, wie HTML5 und CSS sein – die Unterschiede und die neuen Funktionen, aber auch der Aufbau eines WordPress Themes.
Dabei werden ich Fragen beantworten, wie – “Welche Dateien benötige ich für ein WordPress Themes?” und wie fange ich am besten an?
Es sind relativ viele Fragen, teilweise für mich auch noch absolut neu, aber ich werde mich einlesen und hier berichten und für Euch eine BlogPost Serie zu schreiben, die für Anfänger und Einsteiger eine Basis und ein Grundlagen-Tutorial bietet. Von den ersten Schritten, bis hin zum fertigen WordPress Themes.
Ein eigenes WordPress Theme erstellen – die Vorbereitungen und Grundlagen
Nachdem ich lange Zeit die verschiedensten WordPress Themes anderer Anbeiter genutzt habe, ist es an der Zeit ein eigenes WordPress Themes zu erstellen, zu entwicklen, zu entwerfen und zu designen. Ich möchte auf meinem Blog in Zukunft mein eigenes Design, meine eigenen Ideen etwas mehr in den Vordergund rücken, noch mehr die Gesamtheit und die Möglichkeiten, die uns WordPress mitbringt verstehen und begreifen. Es gibt so unglaublich viele – wunderschöne, anspruchsvolle WordPress Themes, aber mein Ziel ist ein eigenes.
Die ersten Schritte auf dem Weg zu einem eigenen WordPress Theme:
Eine statische Webseite mit HTML und CSS erstellen
Die Vorbereitung und Auswahl des Editor
Ich benutze als Editor Notepad++, diesen Editor habe ich schon für einige andere kleinere Webseiten verwendet und bin sehr zufrieden mit der Funktionalität. Es gibt allerdings noch eine Vielzahl an anderen Editoren. Zum einen möchte ich hier auf den Editor “Webocton – Scriptly” und auf den WYSIWYG-Editor “Blue Griffon” hinweisen. Ich hatte beide bereits im Einsatz, war aber nie ganz zufrieden, entscheiden und testen, muss es jeder für sich.
Eine Webseite aus HTML und CSS erstellen
Ich habe mir einen Ordner auf meinem Desktop angelegt, diesen habe ich einfach “Theme” genannt. Der Name selbst spielt an dieser Stelle noch keine Rolle, Ihr könnt den Ordner nach Belieben benennen. In diesem Ordner habe ich dann zwei neue Dateien erstellt. Die erste Datei ist die index.html und die zweite Datei ist die style.css. Beide Dateien bilden die Basis für meine Vorlage, bzw. Grundlage für die Aritkelserie – ein eigenes WordPress Themes erstellen.
Die Grundlagen und die Entwicklung von HTML kann man auf diversen anderen Seiten nachlesen.
So sind oft Fragen nach dem zu verwendeten DOCTYPE im Raum. Ich werde an den passenden Stellen auf die entsprechenden Seiten verlinken und und die Informationen in Form von weiterführenden Links zu diesem Thema zusammengetragen und werde diese Informationen nicht einzeln wiederholen. In einigen, besonders wichtigen Punkten werde ich die dann die Arbeitsschritte und die Beschreibung, das Tutorials und die Anleitung dann hier detailiert erklären. Aber beginnen wird mit nun mit den Grundlagen von HTML, den Neuigkeiten in HTML5 und dem semantischen Aufbau. Ein sehr informative Seite zu HTML Grundlagen ist die Webseite “HTML Seminar”. Die Seite bringt die Informationen einfach und verständlich und sehr gut strukturiert geordnet – für die Laien und Anfänger sehr gut geeignet.
Die Einführung zu HTML5 und die HTML5 Grundlagen, sowei der semantische Aufbau bietet eine kurze Übersicht über das HTML5 Grundgerüst mit Begriffserklärung HEADER, SECTION, NAV, ASIDE, FOOTER. Im Schwerpunkt werden Punkte wie HTML5 Markup, Hinweise zum DOCTYPE und der semantische Aufbau erklärt.