One Page Layout in WordPress

Single Page Layouts sind aus der Weblandschaft kaum noch wegzudenken. Diese Form des Layouts eignet sich besonders gut, wenn man eine Geschichte erzählen oder auch ein Portfolio präsentieren möchte. Ein Marketinginstrument, das auf sehr vielen Landingpages Anwendung findet.

Für alle, die es eilig haben, haben wir hier die fertige Datei zum Download. Allen anderen wünschen wir viel Spaß beim lesen.

Single Page Layout in WordPress erstellen

In unserem letzten Projekt wollten wir die Seite in WordPress als one Page Layout darstellen. Zwar existieren zu dieser Thematik unzählige Einträge, jedoch war keine der dargestellten Lösungsansätze zufriedenstellend und meist zu kompliziert.

Nach einigen Überlegungen und ein wenig Recherche in anderem Templates entschieden wir uns dazu, eine Seite mit dem Namen Home zu erstellen, um anschließend die Unterseiten als Inhalt für den Onepager zu verwenden.

Die Seite Home selbst ist eine leere Seite, und dient lediglich dazu, den Inhalt der Unterseiten auszugeben. Dies ist notwendig, möchte man die einzelnen Seiten mit einem separaten Styling versehen und auch einzeln editieren.

Wer sich schon ein wenig mit der WordPress Template Hierarchie auseinandergesetzt hat, weiß, dass man mit dem page-home.php eine Seiten Template erstellt, dass ausschließlich beim Aufruf der Home Seite greift. In dieser Seite wird nun folgender Code eingefügt.

Im ersten Schritt wird also die Seite Home abgefragt, der Grund hierfür wird im nächsten Schritt deutlich.

<?php $post = get_page_by_title( 'Home' ); ?>

<?php setup_postdata( $post ); ?>
  <?php $parent = $post->ID; ?>
<?php wp_reset_postdata(); ?>

Für die weitere Abfrage benötigt man nun alle Child-Elemente der Seite Home. $parent ist die ID der Home Seite. Mit folgendem Codeschnipsel erhält man alle Seiten, die eine Unterseite dieser Seite sind.

<?php $home_post = get_pages ( array ( 'child_of' => $parent, 'sort_column' => 'menu_order' ) ); ?>

Mit sort_column, sagt man WordPress, dass die Reihenfolge der Seiten aus dem Admin Menü übernommen werden soll. Standardmäßig werden Seiten chronologisch sortiert. Auf diese Weise hat man die Möglichkeit, die Reihenfolge der einzelnen Blöcke im Onepage Layout nachträglich noch umzustellen.

Im nächsten Schritt folgt nun eine foreach Schleife. Eine Anweisung, was mit jeder Unterseite von Home passieren soll. In diesem Fall wird für jedes Child-Element der Titel der Unterseite, das Beitragsbild sowie der Content der Seite ausgegeben.

<?php foreach ( $home_post as $post ) { ?>
   <?php setup_postdata( $post ); ?>
   <?php the_title(); ?>
   <?php the_post_thumbnail(); ?>
   <?php the_content(); ?>
<?php } ?>
<?php wp_reset_postdata(); ?>

Für das Beispiel wurde nur eine einfache Abfrage ohne Styling und divs gewählt. Natürlich sind hier komplexe Layouts möglich. Die Seite von Studio Bleu basiert auf diesem Schema und jeder der Blöcke und Einheiten wird durch eine einzelne Seite gesteuert, die wiederum ihr eigenes Styling besitzt.

Single Page Layout ohne Unterseiten

Wer noch mehr kreative Freiheit für das Styling der einzelnen Seiten und Bereiche haben möchte, erstellt auch wieder eine leere Seite. Der Unterschied zu dieser Vorgehensweise ist jedoch, dass nicht die Unterseiten abgefragt werden, sondern dass man die gewünschten Seiten direkt über ihren Namen einbindet. Auf diese  Folgender Abschnitt zeigt, wie der Content der Seiten About und Portfolio einzeln abgefragt werden kann.

<?php $post = get_page_by_title( 'About' ); ?>
<?php setup_postdata( $post ); ?>
 
 <?php the_title(); ?>
 <?php the_post_thumbnail(); ?>
 <?php the_content(); ?>
 
<?php wp_reset_postdata(); ?>
<?php $post = get_page_by_title( 'Portfolio' ); ?>
<?php setup_postdata( $post ); ?>
 
 <?php the_title(); ?>
 <?php the_post_thumbnail(); ?>
 <?php the_content(); ?>
 
<?php wp_reset_postdata(); ?>

Solltet ihr noch Fragen oder Anregungen haben oder Unterstützung bei eurem nächsten Projekt benötigen, könnt ihr uns gerne kontaktieren.

Camillo

Mehr zum Thema:

& & &

nunovo Relaunch Website

Relaunch der neuen nunovo Website für Ulm, München und Berlin.

Augsburg Cocktail Map

In enger Zusammenarbeit mit No7 und Spin & Gin haben wir die Augsburg Cocktail Map ins Leben gerufen.

Spin & Gin Webseite

Spin & Gin ist keine Bar im klassischen Sinne, sondern eine Bar die zu euch nach Hause, auf eure Events oder ins Büro kommt. Gerne auch mit dem schicken Landrover Oldtimer unter freiem Himmel.

Koch APL-Systems

Design und Umsetzung der Webseite für Koch APL-Systems.

Trailtoys Relaunch

Die neue Page von trailtoys geht online.

equalrides Playground

Manche Projekte sind eine Spielwiese.

equalrides Webseite

Das Screendesign für die equalrides Webseite.

Flyer und Plakate

Ein paar Plakate und Anzeigen unter anderem für das Schwarze Schaf, Glyzerin Klub und die neue Szene.

Luxodian Holding

Corporate Design und Webseite

Glyzerin Klub

Das Herzstück des Klubs

Bicicletta da Corsa Augusta

Losfahren und sehen wohin es gehen soll

Glyzerin Flyer

Paji und Julian under Fux Flyer

Klub Glyzerin Programm

Monatsprogramm, Plakate und Anzeigen.