In diesem Tutorial zeige ich, wie die Blog Seite von WordPress im Masonry Layout erstellt werden kann.

Masonry Layout

Das Masonry Layout wurde im Webdesign maßgeblich durch Pinterest populär. Das charakteristische „mauerwerkartige“ Layout wird allgemein für das Stapeln von Content-Boxen verwendet. z.B. bei Bilder-Galerien wie hier bei Pinterest:

Pinterest im typischen Masonry Layout

Masonry

Masonry ist der Name einer Grid-Layout Bibliothek in JavaScript. Sie sorgt dafür, dass Elemente der Website in einer bestimmten Ausrichtung zueinander positioniert werden. Damit lassen sich mauerwerkartige Grid-Layouts erzeugen, die mit purem CSS nicht bzw. nur annähernd erreicht werden können.

Anleitung

Die Anleitung erkläre ich am Beispiel von Twenty Sixteen. Bei Twenty Sixteen solltet Ihr die Umbauten natürlich nicht direkt im Theme erledigen, sondern ein Child-Theme anlegen.

Normale Twenty Sixteen Blog Seite ohne Masonry

Für die Umsetzung dieses Tutorial sind grundlegende Kenntnisse in HTML, CSS und last not least WordPress Themes nötig, weil die Anpassungen direkt im Theme vorgenommen werden.

Darüber hinaus ist es essentiell, sich mit der Masonry Bibliothek vertraut zu machen. Ich werde hier nur ein ganz einfaches Layout-Beispiel zeigen. Mit Masonry lassen sich viel kniffeligere Grid-Layouts umsetzen. Dazu ist aber das Wissen um die Optionen, Methoden usw. nötg.

Ich hatte zum Umbau eine normale WordPress-Installation benutzt. Die Einstellungen im WordPress waren im „Werkszustand“. Den Dummy-Content hatte ich mit FakerPress erzeugt. Weitere Plugins waren nicht im Einsatz.

Masonry einbinden

WordPress hat bereits Masonry im Gepäck. Es muss lediglich in der twentysixteen-child/functions.php eingebunden werden:

// Masonry Skript unter "home" aus dem Core laden.
if (is_home()) {
    wp_enqueue_script('masonry');
}

Damit wird zur Zeit die Version 3.2.2 von Masonry geladen. Diese Version ist allerdings veraltet. Für unsere Zwecke macht das nichts aus. Es gilt lediglich einen kleinen Unterschied bei der Initialisierung der Bibliothek zwischen der alten Version 3 und der aktuellen Version 4 zu beachten: Ich benutze hier in der Anleitung den Code für die 3er Version. Die Version 4 ist mit der alten „3er-Schreibweise“ kompatibel.

Masonry Initialisieren

In der Masonry-Dokumentation sind drei Möglichkeiten beschrieben, wie sich die Bibliothek initialisieren lässt. Ich habe hier die HTML-Variante bevorzugt.

Nun wird im Theme Masonry initialisiert und der Container festgelegt, in dem das Masonry wirken soll. Damit das Theme sauber bleibt, hatte ich die bestehende twentysixteen/index.php als twentysixteen-child/home.php kopiert. Laut Theme-Konvention wird dann dieses Template benutzt, wenn die Blog-Seite angezeigt wird.

In der neuen home.php findet sich ein main-Element, welches sich gut als Masonry Container verwenden lässt. Der Container wird durch die CSS-Klasse .js-masonry initialisiert:

// Vorher:
<main id="main" class="site-main" role="main">

// Nachher:
 <main id="main" class="site-main js-masonry" role="main">

Kind-Elemente des Containers festlegen

Innerhalb von .js-masonry können nun die Kind-Elemente festgelegt werden, welche im „Mauerwerk“ verwendet werden sollen. Dazu bekommt das Kind-Element die CSS-Klasse .grid-item zugewiesen.

Um das im Twenty Sixteen zu erreichen, bieten sich die <article> Tags an.

Vorher müssen wir die Datei twentysixteen/template-parts/content.php als twentysixteen-child/template-parts/content-home.php kopieren. In content-home.php wird dann folgendes eingetragen:

// Vorher:
 <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

// Nachher:
 <article id="post-<?php the_ID(); ?>" <?php post_class( 'grid-item' ); ?>>

Nicht vergessen, damit das richtige Template-Teil geladen wird, muss in der home.php natürlich noch der Include angepasst werden:

// Vorher:
get_template_part( 'template-parts/content', get_post_format() );

// Nachher:
get_template_part( 'template-parts/content', 'home' );

Optionen

Auch für die Optionen stehen wieder drei Möglichkeiten zur Wahl. Ich bleibe beim HTML:

// Vorher:
<main id="main" class="site-main js-masonry" role="main">

// Nachher:
<main id="main" class="site-main js-masonry" role="main" data-masonry-options='{ "percentPosition": true }'>

Die einzige Option, die in diesem Beispiel zum Einsatz kommt, ist percentPosition. Wenn auf true gestellt, ermöglicht die Option, eine prozentuale Festlegung der Spaltenbreite. Damit lässt sich das Masonry-Layout für Responsive Layouts verwenden.

Sonstige Anpassungen im Theme

Die Breite der Spalten (bzw. der Kind-Elemente) wird durch CSS festgelegt. Dazu schreiben wir in die twentysixteen-child/style.css:

.grid-item {
    width: 33%; <!-- Dreispaltig -->
}

Jetzt ist die Blog Seite im dreispaltigen Masonry-Layout. Allerdings sieht sie noch nicht wirklich gut aus:

Masonry mit drei Spalten. Aber schön geht anders…

Das Layout lässt sich natürlich nach belieben anpassen und aufhübschen. Dann sieht es z.B. so aus:

Ein paar Handgriffe im CSS. Schon besser! :-)

Alles schön und gut, aber geht das nicht einfacher mit einem Plugin?

Selbstverständlich finden sich im Plugin-Repository etliche Masonry-Plugins. Ich habe im Rahmen der Recherche ein Plugin beispielhaft rausgepickt und ausprobiert. Mit dem Plugin ließ sich für mich in der Tat im Handumdrehen irgendein(!!!) Masonry-Layout erstellen.

Dennoch finde ich, sind Masonry-Layout Plugins keine wirkliche Alternative. Weil:

1. Ohne mein genaues Hintergrundwissen über die Masonry-Bibliothek, die dem Layout ja zu Grunde liegt, ist die Konfiguration des Masonry-Layouts eine schwierige Herausforderung.
2. Zudem ließen sich viele Features des Plugins (bzw. der Bbliothek) nicht nutzen, weil die Aktivierung der Pro-Version des Plugins vorbehalten war. Und selbst mit dem Pro-Version hätte ich nicht genau das Layout erhalten, was ich gewollt hätte. Dazu hätte ich in jedem Fall von Hand das Theme bearbeiten müssen.
3. Frontend Design – in diesem Fall Masonry Layout – ist zu komplex, als dass es sich mit einem Plugin „erschlagen“ ließe. Es ist also nur eine gewisse Vereinheitlichung des Layouts und damit der Gestaltungsoptionen möglich.