Ein eigenes WordPress Theme erstellen 11 – Basis Styling, Theme Screenshot hinzufügen und das Theme testen

In dieser Tutorial-Serie haben wir viel über den Grundaufbau von einem WordPress Theme erfahren. Zum Abschluß werden wir noch einige Basis Styles hinzufügen und eine Theme Screenshot-Datei, um dem Theme auch im Dashboard von WordPress einen individuellen Touch zu verleihen.

Anschließend kann diese erstellte Theme Basis natürlich auch kostenlos heruntergeladen werden und den wünschen entsprechend angepasst werden.

Beginnen wir mit dem Basis-Styling

Es gibt doch mittlerweile schon einige verschiedene Browser, die jedoch auch leider die Angewohnheit haben so manches etwas unterschiedlich Darzustellen. Für solche Fälle bietet sich ein sogenannter CSS-Reset an.

Wie überall gibt es auch hier wieder mehrere Möglichkeiten und auch schon mehrere bereits fertige CSS-Resets zu Download, wie zB Eric Meyer’s CSS Reset 2.0, die modifizierte Version vom HTML5 Doctor oder normalize.css von Nicolas Gallagher um nur einige Beispiele zu nennen.

Ich habe mich hier für normalize.css entschieden und den gesamten Code einfach mal in die style.css Datei des Themes hinzugefügt – einfach kopieren und einfügen. WordPress verwendet allerdings schon einige CSS-Klassen standardmäßig und auch diese können wir schon in unserer Basis stylen. Natürlich werden wir auch für diesen Bereich im WordPress Codex fündig und erhalten schon eine grundlegende Empfehlung – https://codex.wordpress.org/CSS. Auch diesen CSS-Code einfach hinzufügen oder dementsprechend anpassen.

Durch den HTML5 Standard bei Gallerien, den wir in der functions.php festgelegt haben, müssen wir auch diese jetzt per Hand stylen. Hierzu ein Code-Beispiel auf dem Aufgebaut werden kann.

/* Boxsizing */
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* Gallery */
.gallery {
    display: block;
    text-align: center;
    overflow: hidden;
    margin: 0 auto;
    width: 90%;
    clear: both;
}

.gallery-item {
    display: block;
    overflow: hidden;
    float: left;
    margin: 0;
    padding: 1em;
    text-align: center;
}

.gallery-icon img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: .5em;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

.gallery-icon img:hover {
    opacity: .7;
    filter: alpha(opacity=70); /* LTE IE8 */
}

/* Gallery Columns */
.gallery-columns-1 .gallery-item {
    width: 100%;
}

.gallery-columns-2 .gallery-item,
.gallery-columns-3 .gallery-item,
.gallery-columns-4 .gallery-item,
.gallery-columns-5 .gallery-item,
.gallery-columns-6 .gallery-item,
.gallery-columns-7 .gallery-item,
.gallery-columns-8 .gallery-item,
.gallery-columns-9 .gallery-item {
    width: 50%;
}

@media screen and (min-width: 480px) {
    .gallery-columns-3 .gallery-item,
    .gallery-columns-4 .gallery-item,
    .gallery-columns-5 .gallery-item,
    .gallery-columns-6 .gallery-item,
    .gallery-columns-7 .gallery-item,
    .gallery-columns-8 .gallery-item,
    .gallery-columns-9 .gallery-item {
        width: 33.33%;
    }
}

@media screen and (min-width: 600px) {
    .gallery-columns-4 .gallery-item,
    .gallery-columns-5 .gallery-item,
    .gallery-columns-6 .gallery-item,
    .gallery-columns-7 .gallery-item,
    .gallery-columns-8 .gallery-item,
    .gallery-columns-9 .gallery-item {
        width: 25%;
    }
}

Und so weiter ….

Soweit mal zu den Grundstyles. Je nach Lust und Laune bzw. den optischen Wünschen und/oder Anforderungen, kann oder können die CSS-Datei(en) durchaus schon einiges enthalten. In diesem Tutorial wars das aber mit dem Stylen.

Theme Screenshot

Als erstes stellt sich mal die Frage, für was dieser Screenshot überhaupt gut ist. Nun, wer sich seine Themes selber für sich schreibt oder ohnehin nur eines verwendet, der wird einen Screenshot nicht brauchen.

Sollte man aber mehrere Themes installiert haben, so ist dies durchaus zwecks Übersichtlichkeit interessant. Für den kommerziellen Einsatz würde ich es ohnehin empfehlen, es sieht einfach im Dashboard von WordPress professioneller aus.

Ich habe mir zwar für dieses Theme nichts angetan, einfach ein Bild mit Text erstellt, aber ich verkaufe hier ja auch nichts 🙂

Welche Größe sollte die Screenshot-Datei haben und welches Dateiformat?

Hierzu brauchen wir eigentlich wieder nur im WordPress Codex an der geeigneten Stelle nachlesen – https://codex.wordpress.org/Theme_Development#Screenshot.

Kurz und bündig zusammengefasst:

Dateiformat -> PNG
Dateiname -> screenshot.png
empfohlene Auflösung -> mittlerweile 1200 x 900 Pixel

Unzähliges würde sich noch in das Theme einbauen bzw. individualisieren lassen. Ob das jetzt der Kommentarbereich, Gästebuch, eigenes Template für Kategorien oder sonst was ist, der Fantasie sind hierbei so gut wie keine Grenzen gesetzt.

Download

Für all jene, die sich für dem Download des in diesem Tutorial erstellten Basis Themes interessieren, habe ich sämtliche Dateien inkl. Beispielcodes hier zusammengestellt. Viel Spaß beim anpassen und erweitern!

Download – zoechbauer-basis-theme