One Pager mit Bordmitteln

Ein Template-Experiment

Vortrag von Peter Singewald
Erstellt in reveal.js von Hakim El Hattab / @hakimel

Worüber ist dieser Vortrag?

  • Vorstellung eines Templates.
  • Einführung in ein paar WordPress mechanismen.
  • Einführung in die Theme-Erstellung.

Die Idee

  • Ein One-Pager-Template bauen.
  • Es soll beliebig viele unterschiedliche Texte enthalten können.
  • Die Reihenfolge der Texte soll beliebig festgelegt werden können.
  • Es soll beliebig häufig in einer Web-Page verwendet werden können.
  • Es soll mit Bordmitteln funktionieren (kein PlugIn, keine besonderen Funktionen)

Vorüberlegungen

  1. Welche Mechanismen gibt es in WP, die es mir erlauben, die Reihenfolge von Seiten festzulegen?
  2. Wie bringe ich ein One-Pager als Template unter/ muss ich ein komplettes Theme erstellen?

1. Die Mechanismen

  • Das Menü
    • Es kann beliebig viele Seiten in einen Zusammenhang stellen.
    • Man kann die Seiten in eine beliebige Reihenfolge bringen.
    • Es kann beliebig viele von ihnen geben.

2. Wie bringt man ein One-Pager-Template unter?

  • Für Seiten gibt es den Mechanismus, ein spezielles Layout anzuwählen.
  • Dazu muss in eine Template-Datei ein spezieller Header geschrieben werden 
    <?php 
/*
		Template Name: OnePager
*/
?>
  • Der Template-Name muss eindeutig sein.
  • Diese Datei muss im Verzeichnis des ausgewählten Themes liegen.

Vorgehen in WordPress

Wir legen eine Seite/ Page mit Text an (im folgenden MainPage genannt). Dieser Text wird später als Einleitungstext verwendet.
Außerdem werden von dieser Seite alle Einstellungen übernommen (z.B. Metainformationen) aber vor allem das angegebenen Template.

Wir wählen unser One-Pager-Template aus.

Wir legen beliebig viele Seiten mit Inhalt an. Die Überschriften sind unbedeutend.

Wir gehen in Design/ Menü und legen ein Menü mit MainPage als erstem Element an.

Alle weiteren Seiten werden als Kindelement von MainPage angelegt. Die Reihenfolge nach gut Dünken festlegen.

Aufbau des Templates: Head

Das Template lädt nicht den Standard-Head des Themes, da es das Layout einschränken würde. Ist aber denkbar. 

<!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js">
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<!--[if lt IE 9]>
<script 
src="<?php echo esc_url(get_template_directory_uri());?>/js/html5.js">
</script>
<![endif]-->
<?php wp_head(); ?>
<?php $post = get_post( );  ?>
<style>
html {margin-top: 0px !important;}
body::before {width:0px;}
.build-block {height:auto;border: 1px solid grey;overflow:hidden;}
</style>
</head>

  • <?php language_attributes(); ?> legt die sprache und damit die Schreibrichtung festzulegen
  • <?php bloginfo( 'charset' ); ?> gibt den für das System festgelegen Zeichensatz aus
  • <?php bloginfo( 'pingback_url' ); ?> gibt die pingback-url aus (eigentlich nur für Blogs)
  • <?php echo esc_url( get_template_directory_uri() ); ?> gibt den Pfad zum Theme-Verzeichnis aus
  • <?php wp_head(); ?> WP-Hook für angaben, die in den Head geschrieben werden sollen, wie z.B. Javascript/ Css-Aufrufe, Metatags uvm. wird u.a. von WP selbst und von Plugins verwendet
  • <?php $post = get_post( ); ?> Liest aus der Datenbank eine Seite oder einen Beitrag aus, der für den Aufruf dieser URL vorgesehen ist.
  • alle CSS-Angaben dienen in diesem Fall dazu, das Default-Verhalten des Themes zu überschreiben.

Aufbau des Bodies 1

Das Template lädt nicht den Standard-Head des Themes, da es das Layout einschränken würde. Ist aber denkbar. 

<body>
<div id="page">
		<header id="masthead" role="banner">
			<div>
				<?php echo $post->post_content; ?>
			</div>
		</header>
		
		<?php // get_sidebar(); ?>

  • <?php echo $post->post_content; ?> gibt den Inhalt der Seite aus
  • <?php // get_sidebar(); ?> Würde den Inhalt einer Sidebar ausgeben, auskommentiert, um die Gestaltung nicht zu behindern.

Aufbau des Bodies 2

Das Template lädt nicht den Standard-Head des Themes, da es das Layout einschränken würde. Ist aber denkbar.

die eigentliche Magie: 

<?php	
$args	= array(
	'order'		=> 'ASC',			'orderby'   => 'menu_order',
	'post_type' => 'nav_menu_item',	'post_status' => 'publish',
	'output'	=> ARRAY_A,			'output_key'	=> 'menu_order',
	'nopaging'	=> true,			'update_post_term_cache' => false
);
$items = wp_get_nav_menu_items( $post->post_title, $args ); 
$counter = count($items);

if ($counter > 0){
	$parentId = $items[0]->ID;
	$elItems = array();
	$menu = array();
	for ($i = 1; $i < $counter; $i++){
		if ($items[$i]->menu_item_parent != $parentId) continue;
		$elItems[] = array (
			'id' => $items[$i]->object_id,
			'title' => $items[$i]->title
		);
		$menu[] = '<li><a href="#' . $items[$i]->title . '">' 
		. $items[$i]->title . '</a></li>';
	}
	echo '<ul>' . implode ('', $menu) . '</ul>';
}
?>

  • wp_get_nav_menu_items( $post->post_title, $args ) holt anhand des Titels der Seite und der übergebenen Parameter ($args) die Menüeinträge, die wir angelegt haben.
  • Der Rest des Codes legt eine Liste der Menüeinträge als Anker-Links (Sprungmarken) an, damit man auf der Seite navigieren kann.

Aufbau des Bodies 3

Das Template lädt nicht den Standard-Head des Themes, da es das Layout einschränken würde. Ist aber denkbar.

die eigentliche Magie: 

<br />
	<div id="content">
	<?php foreach ( $elItems as $element ) : $post = get_post($element['id']); ?>
	
	   <div class="post  build-block">
			<a name="<?php echo $element['title']; ?>"></a>
			<?php echo $post->post_content ?>
	   </div> 
	   <div style="clear:all"></div>
	   <br/>
	<?php endforeach; ?>
	</div>

  • Durchläuft erneut die Elemente des Menüs und liest für jeden Menüeintrag mit get_post($element['id']) die zugehörigen Seiten aus.
  • mit <a name="<?php echo $element['title']; ?>"></a> werden die Sprungziele gesetzt.
  • mit <?php echo $post->post_content ?> die jeweiligen Texte ausgegeben.

Aufbau des Footers

Das Template lädt nicht den Standard-Head des Themes, da es das Layout einschränken würde. Ist aber denkbar. 

<br />
	</div>
	<footer id="colophon" class="site-footer" role="contentinfo">
	</footer>
</div><!-- .site -->
<?php wp_footer(); ?>
</body>
</html>

Der Rest der Seite:
<?php wp_footer(); ?> ähnelt wp_head und ist ein hook für alles, was am Ende der Seite ausgegeben werden soll.

Fragen?

  • ENDE