Wie du eine Single Page mit Seiten und Unterseiten realisieren kannst

einfachste Single Page mit Child Pages erstellt
einfachste Single Page mit Child Pages erstellt

Es gibt jede Menge an wunderschönen Single Pages im WWW. Manch einer mag sein Portfolio, sein Angebot etc als Single Page darstellen. Auch Landingpages kann man mit dieser Technik realisieren.

Ob du eine ganze einfache Single Page haben magst oder mit vielen CSS- und Scriptspielereien ist dir überlassen, ich zeige hier nur auf wie du dies technisch mit WordPress umsetzen kannst.

Eine ähnliche Frage im forum.wpde.org brachte mich auf diese Artikelidee und so stelle dir eine Lösung mit einer statischen Seite und ihren Unterseiten inclusiver eines benutzerdefinierten Feldes vor. Biete dir die Templates zum Anschauen und Nachmachen an. Außerdem suchte und fand ich einige wenige Scripte und andere Plugins.

Unterschied Single Page klassische Website

Um eine Single Page zu erstellen ist auch wichtig zu verstehen was sie so anders macht.

Eine Single Page ist ein einziges HTML Dokument dessen Inhalte dynamisch nachgeladen werden.
Die klassische Website besteht aus vielen HTML Dokumenten, die untereinander verlinkt sind.

Das bedeutet: Auf einer Single Page navigiert man innerhalb des Dokuments, auf einer klassischen Website navigiert man zu den einzelnen Dokumenten aus denen eine Website besteht.


Single Page Navigation

Wenn man innerhalb einer Seite navigieren mag braucht man sogenannt Ankerlinks auch Sprunglinks genannt. Diese kannst du mit einem benutzerdefinierten Feld und dem benutzerdefinierten Menü erstellen.

Suchmaschinen mögen Ankerlinks, daher kannst du mit dieser Lösung deinen bevorzugten AnkerlinkText schreiben.

Ein Ankerlink sieht zb so aus deinedomain.tld/#portfolio dabei ist #portfolio der Anker der auf eine ID zeigt/linkt. D.h. du brauchst irgendwo im HTML eine ID mit einem ganz bestimmten Namen, damit du so einen Ankerlink erstellen kannst.

benutzerdefiniertes Feld erstellen
benutzerdefiniertes Feld erstellen

das benutzerdefinierte Feld erstellen
Unterhalb des Schreibfeldes kannst du benutzerdefinierte Felder erstellen. Siehst du diese Möglichkeit nicht, dann findest du rechts Oben in der Nähe deines Log-In Namens „Optionen“. Klicke die an und hak die benutzerdefinierten Felder an.

Der Name des Feldes ist in meinem Beispiel child_anchor und der Wert ist der Ankertext für den Sprunglink. In meinem Beispiel childpage01. Bitte keine Großbuchstaben oder Sonderzeichen bei diesen Ankerlinks. Das führt meist zu Komplikationen.


dieses Feld im Template ausgeben
Du hast das benutzerdefinierte Feld erstellt und nun muss es im Template ausgegeben werden.

$my_anchor = get_post_meta( get_the_ID(), 'child_anchor', true);
  if( ! empty( $my_anchor ) ) {
  echo '<a class="anchor" id="' . $my_anchor . '"></a>';
 }

Damit kannst du dir den Wert des benutzerdefinierten Feldes child_anchor anzeigen lassen und zwar nur dann, wenn dieser Wert nicht leer ist. Gestalten kannst du diesen Ankerlink mit der CSS Klasse anchor. Er ist normalerweise unsichtbar, aber es kann sein, dass er zu nah am Inhalt liegt, dann kann es passieren, dass Inhalte abgeschnitten werden. Dies hängt von deinem CSS ab.

Menü erstellen mit Links, wegen der Anker
Menü erstellen mit Links, wegen der Anker

das Single Page Menu erstellen
Dashboard => Design => Menu
Zuerst gibts du dem Menü einen Namen, dann fügst du Links ein.
Die URL des Links beginnt mit einer Raute und dem Wert des benutzerdefinierten Feldes für den ersten „Sprung“. zb . Als Linktext kannst du schreiben was du magst und wie du magst.


Die Unterseiten also Child Pages ausgeben

Mit diesem Loop kannst du die Child Pages ausgeben. Es werden alle verfügbaren Unterseiten angezeigt. Sie werden nach ihrer Reihenfolge (Menu Order) angezeigt und zwar in aufsteigender Reihenfolge (ASC).
Die Reihenfolge findest du unter Dashboard => Seite => erstellen/bearbeiten => auf der rechten Seite unter Attribute => Reihenfolge.

global $post;
 $child_pages_query_args = array(
'post_type'     =>  'page',
'post_parent'   =>   $post->ID,
'post_status'   =>  'publish',
'orderby'       =>  'menu_order',
'order'         =>  'ASC',
'posts_per_page'=>   -1,
'nopaging'  =>  true
);
$child_pages = new WP_Query( $child_pages_query_args );
if ( $child_pages->have_posts() ) :   
  while ( $child_pages->have_posts() ) : 
    $child_pages->the_post();
get_template_part( 'content', 'child' ); 
endwhile;
endif;  
wp_reset_postdata(); // maybe there is more than one loop   

Wie du die Ausgabe des Inhalts gestaltest bleibt dir überlassen. In meinem Beispiel steht dies in der content-child.php:

(get_template_part( 'content', 'child' ) )

Du kannst dir eine mögliche Ausgabe von einer content-page.php eines Standard Themes abschauen.

Templates als Download

Ich machte für das Theme Twenty Thourteen Templates für so eine Single Page. Es sind nur die Templates mit den nötigen Code Beispielen im Download – keine CSS und keine Scripte. :-)
Du findest eine front-page.php, damit du eine statische Seite als Startseite nutzen kannst. Sowie die content-child.php und die content-page.php.

Download der Templates in einer .zip Datei. Single Page Code Beispiel Templates.

andere hilfreiche Plugins und Scripte

Von Takayuki Miyauchi ist Child Page Shortcode. Die Dokumentation dieses Plugins ist sehr genau. Damit kannst du die Unterseiten anzeigen lassen.

Gleichzeitig kannst du auch die Ausgabe (Template) bestimmen und dort wirst du dann den Anker für die Navigation reinschreiben müssen. Das Menü dazu erstellst du wiederum unter Dashboard => Design => Menu.

Parallax One Page Builder WordPress Plugin => dieses Plugin ist nicht kostenfrei und daher von mir nicht getestet. Ich habe mir die Kommentare durchgelesen und die waren durchwegs positiv.

Page Scroll To ID, damit kannst du die AnchorTags ansteuern und schöners Scrollen ermöglichen. Plugin Autor ist Malihu

Sticky Navigation mit Scrolleffekt bietet SMINT, dies ist aber kein Plugin für WordPress, sondern muss von dir implementiert werden.

Magst du dir dein One Page Scroll Plugin schreiben, dann lies nach beim Smashing Magazin wie das funktioniert.

weitere Artikel zum Thema ChildPages, die Unterseiten

  1. child pages auf einer Unterseite anzeigen
  2. Childpages – die Unterseiten beim Klick auf die Hauptseite anzeigen
  3. Wie du eine Single Page mit Seiten und Unterseiten realisieren kannst
Wenn du eine Single Page hast, dann zeig sie mir :-) und war der Beitrag hilfreich freu ich mich über ein +1.
2

2 Beiträge zu “Wie du eine Single Page mit Seiten und Unterseiten realisieren kannst

  1. Kommentar Autor
    Jürgen Christoffers
    Kommentar

    … ich bin erstaunt über so viel Fachwissen. Chapeu :)
    Fange selber erst mit WP und einer Erstellung über das Theme „Catch Base“ an und hexe noch hin und her. Komme mit den Widgets, Menues, Kategorien usw. noch nicht klar. Aber ich bleibe hartnäckig dran.

    Gruß aus Meppen.
    Jürgen Christoffers

  2. Kommentar Autor
    Monika
    Kommentar

    grüß Dich Jürgen,
    na dann lies dich hier rauf und runter und quer => das könnte dein Wissen ziemlich sicher erweitern

    und bei Fragen einfach fragen => am besten per E-Mail, wenn die Kommentare bereits zu sind