WordPress Theme für Individualisten: Bushwick

von

am

|

geschätzte Lesezeit:

6 Minuten

Disclaimer: Dieser Beitrag ist älter als zwei Jahre. Es könnte also sein, dass auch sein Inhalt in Teilen bereits veraltet ist.

Wenn man den Fokus auf den grundsätzlichen Aufbau von Startseiten wirft, stellt man schnell fest, dass es nur wenige Grundstrukturen gibt. Recht deutlich zeigt dies wordpress.com: Wer hier eine Website einrichten möchte, muss sich bei Schritt 2 für die Struktur der Startseite entscheiden. Drei Optionen stehen zur Auswahl.

Drei übliche Startseiten Strukturen bei wordpress.com
Bei wordpress.com entscheiden Sie sich noch vor der Kontoeinrichtung für die Startseiten Struktur

Wer es etwas individueller mag, schaut erst einmal in die Röhre. Doch ist die kleine Auswahl nicht allzu verwunderlich. HTML arbeitet mit einzelnen Bereichen, und die haben im Allgemeinen Namen wie Header (Kopfbereich), Main (Hauptbereich) mit Content (Inhalt) und Sidebar (Seitenleiste) sowie Footer (Fußbereich). In diesem Kontext wäre es seltsam, wenn der Kopfbereich plötzlich unterhalb des Fußbereiches läge. Und doch gibt es Themes, die diese Bezeichnungen nicht allzu ernst nehmen. So verlegt das Theme Bushwick aus dem Hause Automattic seinen Header in die Sidebar. Das ist besonders dann günstig, wenn Sie mit Bildern arbeiten, die eher hoch denn breit sind. Dies ist zum Beispiel bei Porträtfotos meist der Fall ist. Das allein schon macht Bushwick zu einem guten WordPress Theme für Individualisten und Freiberufler.

Der Header in der Sidebar

Schon das Standardtheme Twentyfifteen kam mit einem Header als Sidebar an. Diesen Weg geht auch Bushwick. Das ist nicht nur in Hinblick auf Bilder im Hochformat günstig. Monitore haben heutzutage ein Seitenverhältnis von 16:9 oder 16:10 (früher waren sie mal 4:3, aber das ist schon lange her…). Das heißt, sie sind erheblich breiter als hoch. Text lässt sich aber nur gut lesen, wenn die Zeilenlänge nicht allzu lang ist. Nicht umsonst arbeiten Zeitungen und Zeitschriften mit recht schmalen Spalten. Wenn das Theme also im Sinne der Lesbarkeit ohnehin nicht die komplette Breite für den Inhalt ausnutzen sollte – wozu dann die ganze freie Fläche rechts und/oder links des Hauptbereiches?

Bushwick vertauscht nun Header und Sidebar. Links vom Hauptbereich gibt das Theme das Kopfzeilenbild aus und bietet – zugänglich über einen Button – die Sidebar oberhalb der Hauptnavigation. Über diese Raumaufteilung stellt es sicher, dass der Text Ihrer Beiträge und Seiten immer gut lesbar ist. Es sorgt aber auch dafür, dass auch endlich mal Porträts oder andere Fotos im Hochformat richtig gut zur Geltung kommen. Dies gilt sowohl für das Headerbild als auch für alle Beitragsbilder, die Bushwick auch im Rahmen dieser Sidebar anzeigt. Einzig Bilder, die Sie direkt im Text einbinden, werden im Contentbereich ausgegeben.

Nun zeigt Bushwick aber auch auf allen Seiten den Blogtitel und die Blogbeschreibung in der Sidebar an, und zwar über dem Bild liegend. Auf Beitragsseiten verzichtet es auf die Ausgabe von Blogtitel und Blogbeschreibung und gibt hier, über dem Beitragsbild liegend, den Beitragstitel, den Autoren, das Veröffentlichungsdatum und die Blognavigation aus. Das gefällt nicht jedem, lässt sich aber natürlich ändern.

Gehen wir die Aufgabe schrittweise an.

Bedenken Sie bitte, dass Sie die folgenden Änderungen unbedingt im Rahmen eines Child Themes vornehmen sollten, sonst sind sie nach dem nächsten Theme-Update verschwunden.

Blogtitel und Blogbeschreibung ausblenden…

WordPress Theme für Individualisten: Bushwick
Blogtitel und Blogbeschreibung stehen auf Seiten in der Sidebar

Bushwick bietet die Option, Blogtitel und Blogbeschreibung einfach auszublenden. Dies realisieren Sie unter Design > Anpassen > Website-Informationen per Wegnehmen des entsprechenden Häkchens. Nun allerdings gibt es diese beiden nicht unwesentlichen Informationen gar nicht mehr aus. Deshalb ist es sinnvoll, sie an anderer Stelle anzeigen zu lassen. Eine gute Position wäre als Vorzeile zum Seiten- beziehungsweise Beitragstitel.

…und im Mainbereich als Vorzeile wieder einblenden

Die einfachste Möglichkeit, dies zu realisieren, ist als Überschrift H3 mit einer entsprechenden Klasse – nennen wir sie „vorzeile“ –, über die Sie das Aussehen dieser Überschrift definieren können. HR erstellt eine Linie unterhalb dieser Vorzeile.

<h3 class=“vorzeile“>Name Ihrer Website &middot; Beschreibung Ihrer Website</h3><hr />

Diese Zeile müssten Sie insgesamt in sechs Templates (PHP-Dateien) einfügen, und zwar immer direkt vor der vorhandenen H1. Die sechs betroffenen Dateien sind:

  • page.php
  • content-single.php
  • content-none.php
  • archive.php
  • search.php
  • 404.php

So ist sichergestellt, dass Besucher Ihrer Website immer wissen, wo sie sich befinden.

Beitragstitel, Autor, Datum und Blognavigation in den Contentbereich umziehen

Bushwick Beitragseite im Orignial
Bushwick gibt Beitragstitel, Autor, Datum und Blognavigation in der Sidebar aus

Tatsächlich ist es auch nicht allzu schwer, Beitragstitel, Autor, Datum und Blognavigation in der Sidebar auszublenden. Das Theme arbeitet mit einem Template namens sidebar-single.php, dort könnten Sie die entsprechenden Angaben einfach löschen. Besser aber: Ersetzen Sie in der style.css die entsprechende Definition durch ein schlichtes display: none.

.site-header .site-title,
.site-header .site-description,
.site-header .entry-header .entry-title,
.site-header .entry-header .entry-meta a,
.site-header .entry-header .post-navigation a {
/*           color: #fff;
               text-shadow: 0 1px 5px rgba(0, 0, 0, 0.3); */
display:none;
}

Schon wird Ihr Beitragsbild in der Sidebar nicht länger durch die Textausgabe abgedeckt. Allerdings müssen Sie nun noch dafür sorgen, dass die entsprechenden Elemente an anderer Stelle erscheinen. Zwar gibt es Kontexte, in denen Sie vielleicht auf die Ausgabe Autor und Datum verzichten möchten. Einen Beitrag ohne seinen Titel auszugeben erscheint jedenfalls gar nicht sinnvoll. Auf die Blognavigation sollte man meines Erachtens auch nicht verzichten.

Den Beitragstitel im Contentbereich einblenden

Wahrscheinlich hatte der Theme-Autor ursprünglich vor, den Beitragstitel oberhalb seines Textes anzuzeigen, hat sich dann aber anders entschieden. Die entsprechende Definition ist in der style.css jedenfalls noch vorhanden und besagt display:none. Daraus machen Sie nun ein display: block.

.single .hentry .entry-title
{display: block;}

Autor und Datum in content-single.php kopieren

Die Kategorien, Schlagwörter und der Permalink erscheinen im Footer eines einzelnen Beitrags. Dort lassen sich nun auch Autor und Veröffentlichungsdatum gut unterbringen. Die entsprechende Angabe finden Sie in der Datei sidebar-single.php. Mit einer Modifikation (Zeilenumbruch nach dem Autoren fällt weg) lautet sie wie folgt:

<div class="entry-meta">
<?php
printf(
'<span class="author vcard"><a class="url fn n" href="%1$s" title="%2$s" rel="author">%3$s</a></span>',
esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ),
esc_attr( sprintf( __( 'View all posts by %s', 'bushwick' ), get_the_author() ) ),
get_the_author()
);
?>
<?php
printf(
'<a href="%1$s" title="%2$s" rel="bookmark"><time class="entry-date" datetime="%3$s">%4$s</time></a>',
esc_url( get_permalink() ),
esc_attr( get_the_time() ),
esc_attr( get_the_date( 'c' ) ),
esc_html( get_the_date() )
);
?>
</div><!-- .entry-meta -->

Untergebracht im Footer der content-single.php, bestenfalls oberhalb der Angaben für Kategorien, Schlagwörter und Permalink, verfügt nun jeder Beitrag über die Information seines Autoren und des Datums.

Bushwick Beitragsseite angepasst
Beitragstitel, Metaangaben und Blognavigation im Contentbereich

Blognavigation im Beitragsfooter

Schließlich braucht der einzelne Beitrag auch noch eine Blognavigation. Dabei gefällt mir die vorhandene (zu finden in der template-tags.php) nicht. Weshalb ich das folgende sehr basale Vorgehen bevorzuge, das allerdings die Besonderheit hat, innerhalb von Beiträgen derselben Kategorie zu navigieren:

<div class="navigation1">
<div class="alignleft">
<?php previous_post_link( '%link', '&larr; Vorheriger Beitrag', TRUE); ?>
</div>
<div class="alignright">
<?php next_post_link( '%link', 'Nächster Beitrag &rarr;', TRUE  ); ?>
</div></div>

Fügen Sie diese Definition in der content-single.php unterhalb der Angaben für die Ausgabe von Kategorie, Schlagwörter und Permalink ein und vergeben Sie für die Klasse navigation1 in der style.css noch die Definition für etwas Abstand ober- und unterhalb:

.navigation1 {margin: 2.5em 0;}

Kleine Verschönerung der archive.php

Früher gab Bushwick Beiträge auf einer Archivseite, also zum Beispiel auf der Kategorie-Seite, als Volltext beziehungsweise als Auszug mit einem Weiterlesen-Button (sofern der More-Link im Beitrag gesetzt ist) aus. Mit einem Theme-Update kam die Änderung. Nun zeigen die Archivseiten nur noch eine Liste der Beitragstitel mit einem Lesen-Button. Ich persönlich finde das nicht schön. Aber auch das ist leicht zu ändern. In der archive.php finden Sie im Kontext des Loops die Angabe:

get_template_part( 'content', 'preview');

Ändern Sie diese wie folgt:

get_template_part( 'content', get_post_format() );

Nun verhält es sich wie früher: Sofern Sie beim Erstellen eines Beitrags daran denken, den More-Link zu setzen, erscheinen Ihre Beiträge auf Archivseiten als Auszug mit Weiterlesen-Button. Ohne More-Link zeigen Archivseiten den Volltext.

Bushwick im wahren Leben

Erst jüngst haben wir im Rahmen eines Einzelcoachings zu Bushwick geraten und es zusammen mit der Kundin für den Einsatz angepasst. Das unter anderem wegen seiner schönen Fotos, die sich in der Sidebar außerordentlich gut machen, sehr ansprechende Ergebnis finden Sie unter www.angelowski.de


Beitragsbild: Britta Kretschmer

Schreibe einen Kommentar

Die im Rahmen der Kommentare angegebenen Daten werden von mir dauerhaft gespeichert. Cookies speichere ich nicht. Für weitere Informationen siehe bitte meine Datenschutzerklärung.

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert