Internetkurse Köln

Die Startseite des neuen Standardthemes Twenty Seventeen lässt sich durchaus als Hingucker bezeichnen. Sofern im Design > Customizer aktiviert, bietet sie die Darstellung von vier Seiten der Website im Sinne des Featured Contents. Untereinander zeigt sie dann immer erst das Beitragsbild der jeweiligen Seite an, gefolgt von deren Inhalt. Dieser Inhalt erscheint, entsprechend der Grundeinstellung in den Theme-Optionen, entweder als Ein- oder als Zwei-Spalter auf weißem Grund. Doch wie wäre es mit farblich alternierenden Panels, die vielleicht sogar das Headerbild als Hintergrundbild durchscheinen lassen? Wie wäre es zudem mit der Verlinkung auf die Seiten, die dort dargestellt werden? Dazu braucht es nicht allzu viel. Bearbeiten wir also die Twenty Seventeen Startseite Panels!

Wer bestimmt das Aussehen der Startseite?

Für die Darstellung der Startseite sind zwei Vorlagen zuständig: die content-front-page.php und die content-front-page-panels.php. Beide Dateien finden Sie im Unterverzeichnis /pages, auf das Sie allerdings nur per FTP zugreifen können. Solange Sie im Design > Customizer unter Theme-Optionen den Startseiten-Abschnitten keine Seiten zuordnen, entscheidet allein die Vorlage content-front-page.php über das strukturelle Erscheinungsbild. Wählen Sie hingegen die Darstellung mit einzelnen Startseiten-Abschnitten, arbeitet nun auch die Vorlage content-front-page-panels.php für Sie. Für beide gibt es CSS-Definitionen, die es nun zu verändern gilt.

Beachten Sie bitte: Sofern Sie Ihre Blog-Seite im Rahmen eines Panels anzeigen lassen wollen, funktioniert das folgende Vorgehen nur bedingt gut.

Farblich alternierende Panels erstellen

Wenn Sie einzelne Seiten für die Startseiten-Abschnitte hinterlegen, erhält jedes Panel automatisch eine eigene ID. Dies folgt dem simplen Prinzip #panel1, #panel2, #panel3 und #panel4. Somit lässt sich jedes Panel einzeln ansprechen. Für die farbliche Abwechslung (in meinem Fall ein helles Lila und ein sehr helles Grau) braucht es zudem eine Neudefinition für den Container mit der Klasse .panel-content. Der ist für den kompletten Content der Startseite verantwortlich. Es reicht also, #panel1 und #panel3 den Lilaton zu geben und den Rest über die Definition des .panel-content zu regeln. Dieses Vorgehen sorgt auch dafür, dass der eigentliche Content der Startseite genauso eingefärbt ist wie Panel 2 und Panel 4.

Für mein Vorgehen wähle ich eine halb-transparente Hintergrundfarbe. Schließlich habe ich noch vor, ein Hintergrundbild durscheinen zu lassen.

/* Panels alternierende, halb-transparente Hintergrundfarbe geben */
#panel1, #panel3 {background: rgba(160,100,220,0.5); }
.panel-content {background: rgba(220,220,220,0.7); }

Hintergrundfarbe für den Textbereich festlegen

Damit nun der Text der jeweiligen Panels gut lesbar ist, hinterlegen wir ihn mit einer entsprechenden Hintergrundfarbe. Wieder entscheide ich mich für eine Halb-Transparenz, damit auch hier das geplante große Hintergrundbild noch sanft durchscheint. Ein Padding sorgt dabei für genug Innenabstand.

/* Content-Bereich der Startseite, halb-transparente Hintergrundfarbe definieren */
.panel-content .entry-content {background: rgba(250,250,250,0.7); padding: 50px;}

Möglich: Die Panelhöhe festlegen

Schließlich könnte man noch die Höhe der einzelnen Panels festlegen. Momentan richtet sich die Höhe nach der Menge des Textes. Sie können aber auch festlegen, dass es auf jeden Fall die Höhe des Browserfensters nutzen soll. Dann allerdings gilt zu beachten, dass die geplante Textmenge nicht viel mehr oder viel weniger Platz benötigt.

/* Die einzelnen Panels an Fensterhöhe anpassen */
.panel-content .wrap .entry-content
{width: 100%; height:100vh;}

Das Hintergrundbild für die Startseite definieren

Da die Startseite ein fensterfüllendes Headerbild hat, würde es mir gut gefallen, wenn dieses, ebenso fensterfüllend, auch als Hintergrundbild der gesamten Seite erscheint.

/* Hintergrundbild für Startseite definieren */
.twentyseventeen-front-page .site-content {
margin: 0;
background: url(http://link-zu-dem-Bild-Ihrer-Wahl) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;}

Das Vorgehen sieht übrigens auch dann gut aus, wenn Sie für jede Seite, die hier als Startseiten-Abschnitt erscheint, ein Beitragsbild wählen.

Schriftgröße der Seitentitel verändern

Schließlich finde ich die Schriftgröße der Seitentitel ein bisschen arg klein. Daher mache ich sie einfach ein bisschen größer.

/* Seitenttitel auf Startseite etwas größer darstellen */
.page .panel-content .entry-title
{font-size: 20px;}

Die Seitentitel der Panels anklickbar machen

Bislang war es nicht nötig, auch nur irgendetwas in den PHP-Dateien zu verändern. Alle CSS-Definitionen lassen sich problemlos über das zusätzliche CSS des Themes hinterlegen.

Wenn Sie nun aber die Seitentitel der Panels klickbar machen wollen, so braucht es ein Child Theme. Ansonsten wäre die folgende Änderung nicht updatesicher!

Wir werden nun also eine Änderung in der Datei content-front-page-panels.php vornehmen. Dafür nutzen Sie einen einfachen Texteditor. Immer wieder gut für solche Zwecke ist das kleine Programm Notepad++. Auf keinen Fall nutzen Sie Textprogramme wie Word.

In der content-front-page-panels.php finden Sie in der Zeile 33 den Aufruf des Seitentitels. Dieser lautet wie folgt:

<?php the_title( '<h2 class="entry-title">', '</h2>' ); ?>

Verändern Sie den Eintrag, wie im Folgenden dargestellt:

<?php the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' ); ?>

Speichern Sie die Änderung ab und laden Sie (sofern Sie die Bearbeitung lokal durchgeführt haben) die Datei wieder hoch in den pages-Ordner. Somit ist der Seitentitel eines jeden Panels fortan anklickbar.

Auf der Twenty Seventeen Startseite Kategorieseiten verlinken

Für die einzelnen Startseiten-Abschnitte lassen sich nur Seiten hinterlegen, keine Beiträge oder gar Kategorieseiten. Aber gerade Letzteres wäre schon sinnvoll. Wenn Sie eine Kategorieseite im Rahmen der Twenty Seventeen Startseite Panels verfügbar machen möchten, schlage ich folgenden Workaround vor:

1. Sie definieren zuerst eine Seite, geben ihr einen passenden Titel und formulieren den Text, der auf dem Panel erscheinen soll.
2. Dann nutzen das Plugin Page Links To, über das ich hier schon einmal geschrieben habe. Mittels dieses Plugins hinterlegen Sie für diese Seite den Permalink der Kategorieseite, um die es geht. Der Klick auf den Seitentitel führt Ihre Leser entsprechend zu dieser Kategorieseite.

Beitragsbilder: Britta Kretschmer