WordPress Themes mit Yaml erstellen – Tutorial Teil 2

Kommentare erlauben

In WordPress können Kommentare für Artikel und Seiten zugelassen werden. Auch hier bietet WordPress schon fertig Lösungen an. Außerdem wollen wir hier ein weiteres Konzept von WordPress lernen, die Conditional Tags. Wir wollen folgende Punkte prüfen:

• Hat der Artikel Kommentare?
• Sind Kommentare vorhanden?
• Anzeigen der Kommentare
• Sind Kommentare möglich?
• Anzeigen des Antwortformulars

Wir erstellen eine Datei comments.php mit folgendem Inhalt:

<!-- Gibt es Kommentare? -->
<?php if (have_comments()): ?>
    <?php wp_list_comments(); ?>
<?php endif; ?>

<!-- Darf kommentiert werden? -->
<?php if (comments_open()): ?>
	 <?php comment_form(); ?> 
<?php endif; ?>

In der index.php fügen wir an gewünschter Stelle, z.B. direkt nach the_content() im Loop folgende Zeile ein:

<!-- Kommentare -->
<?php comments_template(); ?> 

Sieh Dir das Ergebnis an, damit steht nämlich bereits alles. Natürlich können wir jetzt noch mittels Yaml alles etwas veschönern. Dazu akzeptiert wp_list_comments() eine callback Methode, allerdings würde das den Rahmen dieses kurzen Tutorials übersteigen.

Eine Sidebar

Um unseren Inhalt etwas übersichtlicher zu gestalten, wollen wir eine kleine Sidebar anlegen, z.B. für die Navigation der Artikel und eine Tagcloud. Das kann WordPress natürlich und mittels Yaml wird das ansehnlich. Zuvor müssen wir aber auf einen absolut grundlegenden Punkt in WordPress zu sprechen kommen: die Template Hierarchie. Nicht erschrecken: WP-Templates

Eigentlich ist es ganz einfach: jeder Inhalt in WordPress, egal ob Post, Page, Bild, Kommentar, etc. ist in einer Taxonomie. Z.B. hat ein Blog Post eine ID, einen Autor, eine Kategorie (oder mehrere) und so weiter. Die Hierachie lest Ihr von links nach rechts:

1. Was für eine Art von Inhalt wollt Ihr darstellen (hier: Singular Page)?
2. Was für eine Art von Seite soll es werden (hier: Single Post Page)?

In unserem Fall sind wir damit nämlich schon fertig. Wir müssen eine Datei single.php anlegen. WordPress arbeitet nämlich ebenfalls von links nach rechts. Immer wenn es Inhalt anzeigen soll sucht es nach einer Datei mit entsprechendem Namen, z.B. nach author-globaladmin.php (für Artikel, die ich geschrieben habe). Wenn es diese Datei findet nutzt es diese als Template, sonst wandert es weiter nach rechts, bis es letztlich bei der index.php ankommt; als default.

single.php

 <?php get_header(); ?>

        		<div id="main"> 
							
					
				</div>
									
	<?php get_footer(); ?>

Sofort sind die Artikel leer, die Seiten aber noch wie gewohnt gefüllt. Räumen wir auf und erstellen erstmal eine neue Datei.

navigation-top.php

<?php 
    $args = array(
		   'menu'     			=> 'Masterhead',
			'theme_location'	=> 'primary',
			'container' 		=> 'nav',
			'container_class' 	=> 'ym-hlist',
			'echo'				=> '0'
		);
	$nav = str_replace('current-menu-item', 'active', wp_nav_menu( $args ));
	
	
	$searchform = get_search_form(false); 
	$searchform = str_replace('<form', '<form class="ym-searchform my-searchform"', $searchform);
	$searchform = str_replace('id="s"', 'id="s" class="ym-searchfield"', $searchform);
	$searchform = str_replace('id="searchsubmit"', 'id="searchsubmit" class="ym-searchbutton"', $searchform);
	
	$searchform = str_replace(__('<div>', '</div>'), '', $searchform);
	
	/*Anpassung fuer Column Design*/
	echo str_replace(('</nav>'), $searchform, $nav);
	echo '</nav>';
				

In unsere single.php fügen wir nun eine Zeile über dem main Container ein und die Navigation funktioniert wieder.

<?php get_template_part( 'navigation', 'top' ); ?>

Um die index.php aufzuräumen, machen wir das gleiche auch noch einmal für den loop mit einer Datei loop-index.php

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<!-- Der Title als Link auf den Artikel -->
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>

<!-- Datum und Author -->
<small><?php the_time('F jS, Y') ?> by <?php the_author_posts_link() ?></small>

<!-- Inhalt des Artikels -->
<div class="entry">
    <?php the_content(); ?>
</div>
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>

Die index.php können wir damit ausmisten:

   <?php get_header(); ?>

    			<?php get_template_part( 'navigation', 'top' ); ?>
   
    			<div id="main"> 
				
					<?php get_template_part( 'loop', 'index' ); ?>
					
					<!-- Kommentare -->
					<?php comments_template(); ?> 
					
				</div>
									
	<?php get_footer(); ?>

Die single.php setzten wir ebenso neu zusammen. Allerdings müssen wir zuerst Platz für die Sidebar machen. Dazu nutzen wir die columns von Yaml.
style.css

/*
* |-------------------------------------------------------|
* | sidebar | content |
* | col 3 | fixed | col 1 | flexible |
* | | |
* |-------------------------------------------------------|
*/
.ym-column {
    display: block;
    overflow: hidden;
    padding-left: 250px; /* column width */
    width: auto;
}
.ym-col1 { /* content */
    position: relative;
    float: left;
    width: 100%;
}
.ym-col3 { /* sidebar */
    position: relative;
    float: left;
    width: 250px; /* column width */
    right: 250px; /* column width */
    _right: 0px; /* fix for ie6 */
    margin: 0 0 0 -100%;
}

Aus der single.php wird nach Einfügen der Columns:

 <?php get_header(); ?>

    			<?php get_template_part( 'navigation', 'top' ); ?>
 
    			<div id="main"> 
				
				<div class="ym-column">

					<div class="ym-col1">
						<div class="ym-cbox">
						
							<?php get_template_part( 'loop', 'index' ); ?>
					
							<!-- Kommentare -->
							<?php comments_template(); ?> 
						
						</div>
					</div>

					<div class="ym-col3">
						<div class="ym-cbox">
						
							<h3>Hallo im Blog</h3>
						
						</div>
					</div>
					
				</div>				
					
				</div>
									
	<?php get_footer(); ?>

Hier könnt Ihr natürlich noch die Spaltenbreiten, etc. anpassen, mehrere Sidebars einbauen, responsive columns nehmen. Yaml bietet hierzu vieles an. Aber jetzt sollten wir die Sidebar mit Leben füllen; zurück in die functions.php.

    $i = "blog";
    $args = array(
	'name'          => sprintf( __( 'Sidebar %s' ), $i ),
	'id'            => "sidebar-$i",
	'description'   => '',
	'class'         => '',
	'before_widget' => '<li id="%1$s" class="widget %2$s">', //default Wert, kann z.B. auf ein zweispaltiges Grid gesetzt werden
	'after_widget'  => "</li>\n",
	'before_title'  => '<h2 class="widgettitle">',
	'after_title'   => "</h2>\n",
	);
	
	register_sidebar( $args );

Damit taucht der Menüpunkt Widgets im Admin Bereich auf und wir erstellen uns unsere Sidebar, z.B. mit den letzten Artikeln und Kommentaren. Anschließend packen wir die Sidebar in unsere single.php, direkt unter unser Hallo:

<?php dynamic_sidebar('sidebar-blog'); ?>

Das sollte erstmal zum Basteln reichen. Teil 3 ist in Arbeit.

Hier ist das lauffähige Theme als zip Datei. Wenn Ihr Yaml in Projekten verwenden wollt, achtet bitte auf deren Lizenzbedingungen (CC-BY 2.0), insb. den Backlink, wenn Ihr keine Lizenz kaufen möchtet.