One Pager in WordPress erstellen – One Page Layout

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.