WordPress Theme erstellen für Anfänger Teil2: Toolbox kennen lernen

So heute kommen wir zum zweiten Teil der am letzten Donnerstag gestarteten Artikelserie zum Thema ‚Wordpress Theme erstellen für Anfänger‚.
Hierbei gebe ich begleitend zu meinem momentan in Arbeit stehendem Redesign des Blogs Tipps geben um ein möglichst individuelles Template für einen Blog oder eine mit WordPress betriebene website zu erstellen.
In diesem Teil gebe ich einen Überblick über die einzelnen möglichkeiten mithilfe von ‚Toolbox‘ und reinem CSS seinen Blog etwas zu gestalten.

Was ist Toolbox eigentlich genau?

Diese Frage ist natürlich nicht außer Acht zu lassen.
Toolbox ist eigentlich schon ein fertiges Theme für WordPress.
Theoretisch könnte man es einfach installieren und mit dem Bloggen loslegen.
Allerdings sähe der Blog sann nicht gerade schön aus und die Bedienelemente(Menüs, Buttons etc.) wären komplett auf Englisch verfasst.
Hier liegt nämlich das Geniale an ‚Toolbox‘.
Es gibt alle Inhalte die WordPress so liefert(Blogposts, Seiten, Menüs, Widgets) als reines HTML mit einigen Grundlagen-Styles aus und überlässt einem selber das Gestalten des Themes.
Leider ist das Theme komplett auf Englisch gehalten was allerdings kein größeres Problem darstellt, da man es relativ leicht übersetzen kann(hierzu folgt noch ein Artikel in dieser Serie).
Das ausgegebene HTML lässt sich dank bereits gesetzter Klassen relativ leicht mithilfe von CSS gestalten.

Toolbox einrichten

Um sich ideale Bedingungen zu schaffen um mit Toolbox zu arbeiten sollte man sich auf seinem Computer einen lokalen Webserver installieren. Das geht sehr gut mit XAMMP.

Auf diesem lokalen Webserver kann man dann WordPress ganz normal installieren.

Nun muss man erstmal Toolbox installieren.
Dass kan man über das WordPress-Userinterface problemlos machen.

Wenn Toolbox installiert ist findet man alle Dateien die das Design des Blogs bestimmen in dem Verzeichnis

wordpressinstallationsverzeichnis/wp-content/themes/toolbox.

Die für unser Projekt hauptsächlich wichtige Datei ist die style.css, in der alle Styles für das gesamte Theme festgehalten sind.
Aber auch auf die Dateien header.php, index.php, footer.php und functions.php werde ich im Verlauf der Artikelserie genauer eingehen.

Allerdings ist es im Moment hauptsächlich wichtig zu wissen dass die Inhalte als pures, mit Klassen versehenes HTML ausgegeben wird und somit leicht nach allen Regeln des Webdesigns gestaltet werden kann.

Klassen-Referenz

Das klingt jetzt etwas trocken aber ich denke eine Referenz aller Klassen die man zum gestalten des Themes benötigt ist hierfür sehr hilfreich.
Die CSS-Klassen kann man einfach in der style.css notieren und dazu mit den gewünschten Styles versehen.
Die Referenz ist logisch nach folgenden Punkten und Unterpunkten aufgebaut:

  • Inhalt
    • Wrapper
    • Überschriften
    • Links
    • Zitate
    • Adressen
  • Menü
    • Wrapper
    • Menütitel
    • Link zum Inhalt
    • Menüpunkte
    • Submenüpunkte
  • Sidebar
    • Wrapper
    • Überschriften
    • Widgets

Inhalt

 

NameArtKlasse/IDBeschreibung
Wrapperdiv#contentDer div-Container der die Blogposts beinhaltet.
Überschriftenh1.entry-titleUmfasst alle Überschriften von den Blogpostsdie auf der Startseite angezeigt werden
LinksakeineLinks werden keine besonderen Klassen übergeben.
ZitateblockqoutekeineZitaten werden ebenfalls keine besonderen Klassen übergeben.
AdressenaddresskeineAdressen werden keine besonderen Klassen übergeben.

Menü

 

NameArtKlasse/IDBeschreibung
Wrappernav#accessBeinhaltet ein div mit allen Menüpunkten sowie eine h1-Überschrift welche den Namen des Menüs beinhaltet und ein div mit Link ‚zum Inhalt springen‘
Menütitelh1.assistive-text.section-headingHier wird der Titel des Menüs ausgegeben.Im wrapper #access.
Link zum Inhalta/div.skip-link.screen-reader-textIst defaultmäßig nicht sichtbar.Klassen werden einem div übergeben der den Link beinhaltet.Klasse .screen-reader-text wird allen Elementen übergeben die nur für Maschinen, nicht für Menschen sichtbar sein sollen.
Menüpunkteli.page_item.page-item-iIn einem div-Wrapper innerhalb von #acces.Menü wird als unsortierte Liste(ul) ausgegeben.i enstspricht der Nummer der Seite.Das heißt .page-item-2 wird dem Menüpunkt übergeben der den Link beinhaltet der zu der Seite führt die man als zweites erstellt hat.
Submenüpunkteli.page_item.page-item-iSubmenüpunkte werden innerhalb einer verschachtelten ul-Liste ausgegeben.Klassen werden gleich vergeben wie bei Menüpunkten.ul-Liste erhält die Klasse .children

Sidebar

 

ArtKlasse/IDBeschreibung
Wrapperdiv#secondary.widget-areaBBeinhaltet alle Elemente der Sidebar.
Überschriftenh1.widget-titleJeder Titel eines Widgets erhählt diese Klasse.
Widgetsaside.widgetJedes Widget erhählt diese Klasse.Zusätzlich können Widgeteigenen Klassen übergeben werden.

 

Fazit

So ich hoffe damit konnte ich euch schonmal einen guten Überblick über Toolbox verschaffen.
Falls die Referenz irgendwo unvollständig ist könnt ihr es mir gerne in den Kommentaren oder per E-Mail melden und ich ergänze noch etwas. 🙂
Bei Fragen gilt das gleiche.
Entschuldigung dass dieser Artikel erst jetzt kommt aber ich war letzte Woche doch ziemlich im stress(Klausuren über klausuren 🙁 ).
Die nächsten Teile der Artikelserie kommen aber ganz sicher pünktlich immer Donnerstags. 😉

Kommentar verfassen