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.
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…
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 · 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
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.
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', '← Vorheriger Beitrag', TRUE); ?> </div> <div class="alignright"> <?php next_post_link( '%link', 'Nächster Beitrag →', 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