Ein eigenes WordPress-Theme erstellen mit underscores.me

Einleitung:

Im Teil Lokale Entwicklung eines WordPress-Blogs. Einrichtung des lokalen Servers XAMPP + WordPress + Datenbank habe ich gezeigt, wie man lokal mit WordPress arbeiten kann.

Das Starter Theme:

In diesem Teil geht es darum, wie man sein eigenes WP-Theme erstellt. Dazu nehme ich die Website  underscores.me. Man kann sich das aktuelle Starter-Theme, hier generieren lassen. Es ist hervorragend dazu geeignet sein eigenes Theme zu erstellen. Im generierten Theme wurde sich auch um eine mobile Navigation gekümmert, die die Desktopnavigation ersetzt, sobald ein Brakepoint, via Media-Query, erreicht ist. Zwei Layoutarten sind ebenso von Anfang an mit dabei. Dies wären Sidebar rechts oder Sidebar links. Dazu muss man nur den betreffenden CSS-Code kopieren.

Um zu starten, muss man nur einen Namen für sein Theme eingeben und den Button „Generate“ drücken. Der Download startet automatisch. Nun habt ihr eine Zip, die entpackt werden muss.

Geht in den ausgepackten Ordner rein, und kopiert den Ordner der alle Dateien enthält. Dies ist euer Theme-Ordner.

das gerade generierte und ausgepackte theme von underscores
das gerade generierte und ausgepackte theme von underscores

Diesen Ordner kopiert ihr in das Theme-Verzeichnis eures lokalen WordPress. Bei mir ist das C:/xampp/htdocs/wordpress/wp-content/themes

ordner-themes-wordpress
Ordner Themes WordPress

Starter Theme aktivieren

Um das Theme nun zu benutzen und um sich einen ersten Eindruck zu verschaffen, müssen wir das frische Theme auch in unseren lokalen WordPress aktivieren. Dazu meldet Ihr euch ins Backend von WordPress an. Dazu muss vorher XAMPP laufen und Apache und MySQL gestartet sein. Um sich im Backend anzumelden, gebt bitte Folgendes in den Browser ein. localhost/wordpress/wp-login.php. In meine Fall da wordpress bei mir unter htdocs liegt. Je nachdem wo euer WordPress liegt, muss die URL anders lauten.

Seid Ihr angemeldet geht links auf Design -> Themes. Hier sollte, wenn Ihr alles wie ich gemacht habt, euer Starter-Theme erscheinen. Aktiviert es nun.

wordpress-backend-themes
WordPress Backend Themes

Im Frontend sieht es dann folgendermaßen aus.

wordpress-frontend-starter-theme
WordPress Frontend Starter-Theme

Nicht schön aber alles funktioniert. Nun ist es an euch, was ihr aus diesem „Starter-Theme“ mit Hilfe von CSS und ein wenig PHP Wissen anstellt.

Die Sidebar aktivieren

Was ich abschließend noch zeigen möchte, wie man die Sidebar aktiviert. Default kommt die Sidebar unter dem Main-Content, da alles auf Width 100%  gesetzt ist. Um nun die Sidebar neben den Inhalt zu bekommen, je nach dem wo die Sidebar stehen soll, kopiert das CSS aus dem Ordner layouts. In meinen Fall: content-sidebar.css in eure style.css.

Wie man mit Frameworks und WordPress arbeitet? Dazu wird auch noch ein Artikel erscheinen. Dies soll nur eine Grundlage für Interessierte sein, für die, die sich in die Materie einarbeiten wollen.

Viel Spaß mit euren neuen WordPress Theme. Happy Coding!

Auf welchen Techniken beruht diese Website und dieser Blog

Heute möchte ich klären, auf welche Techniken und Tools ich gesetzt habe, um diesen Blog und seine Unterseiten zu realisieren.

Zuerst ist da WordPress als CMS. Ich habe mich für WordPress entschieden, weil ich schon seit 2009, seit ich angefangen habe mich mit dem Web zu beschäftigen, mich mit diesem CMS auseinandersetze. Heute ist WordPress eines der größten und beliebtesten CMS der Welt und auch unter Entwicklern sehr beliebt. Ich habe mich bewusst entschieden, ein eigenes Thema für WordPress aufzusetzen, da ich einige WordPress-Themes selbst schon geschrieben habe und durch die Jahre an Erfahrung im Umgang mit WordPress-Themes gesammelt habe.

Ich habe begonnen mir das Starterthema von Automattic, den Machern hinter WordPress.com und einigen anderen schönen Projekten, runter zu laden. Danach habe ich mir XAMMP runtergeladen und installiert und einen Ordner für mein Projekt angelegt, in dem ich dann WordPress lokal installiert habe und das Theme auch Lokal entwickelt habe.

Weiterlesen „Auf welchen Techniken beruht diese Website und dieser Blog“