<?php
//
// FUNCTIONS
//

$post_id    = get_the_id();
$blog_title = get_bloginfo( 'name' );

$thumbnail_id        = get_post_thumbnail_id( $post_id );
$thumbnail_html      = lh_attached_thumbnail( $thumbnail_id, $post_id );

//
// TEMPLATE
//
?>
	<article>
		<div class="uk-grid post f-post f-teaser">
			<div class="uk-width-medium-2-3 f-post__media f-teaser__media">
				<?php echo $thumbnail_html; ?>
			</div>
			<div class="uk-width-medium-1-3 f-post__media f-teaser__media">
			 	<h2>
			 		<a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title_attribute();?> | <?php echo $blog_title; ?>">
			 			<?php the_title(); ?>
			 		</a>
			 	</h2>
			</div>
		</div>
	</article>
Template-File : Im ersten Block werden alle Werte generiert und im zweiten Block steht nur noch die Ausgabe der Korrekten Werte 
<?php

//
// $id = Bild ID des Thumbnails
// $link_to = alternative ID (Beitrag) wo das Bild hinlinken soll
//
function lh_attached_thumbnail( $id = false, $link_to = false, $tpl = 'default' ) {
	if( !$id ) { return false; }; 

	//
	// Template
	//	
	$tpl_item = array();
	
	$tpl_item['default'] = "
		<figure id=\"image-%ID%\" style=\"\" class=\"f-image f-image__wrapper wp-caption\">
			<a href=\"%URL%\" class=\"f-image__link\"  title=\"%TITLE% | %BLOG_TITLE%\">
				<img src=\"%IMAGE_URL%\" class=\"f-image__item\" alt=\"%TITLE% | %BLOG_TITLE%\"/>
				<figcaption class=\"f-image__caption wp-caption-text\">
					%TITLE%
				</figcaption>
			</a>
		</figure>
	";
	
	//
	// GET DATA
	//
	$image_id         = $id;
	$image_title      = ( $link_to ) ? get_the_title( $link_to )   : get_the_title( $id );
	$image_excerpt    = ( $link_to ) ? get_the_excerpt( $link_to ) : get_the_excerpt( $id );
	$image_page       = ( $link_to ) ? get_permalink( $link_to )   : get_permalink( $id );
	$image_url_large  = wp_get_attachment_image_src( $id, 'large' );
	$blog_title       = get_bloginfo( 'name' );
	
	//
	// HTML Generation
	//			
	$html_items = "";
	$tpl_item_data = array(
		"%ID%"         => $image_id,
		"%TITLE%"      => $image_title,
		"%CAPTION%"    => $image_excerpt,
		"%URL%"        => $image_page,
		"%IMAGE_URL%"  => $image_url_large[0],
		"%BLOG_TITLE%" => $blog_title,
	);
	
	$tpl = isset( $tpl_item[$tpl] ) ? $tpl : 'default' ;
	$html_items .= strtr( $tpl_item[$tpl], $tpl_item_data );
	
	return $html_items;
};
HTML Function-File : Hier sind es drei Teile - HTML Template (mit Platzhaltern), Daten-Generierung & setzen von Daten ins Template 
<?php
//
// FUNCTIONS
//

$post_id    = get_the_id();
$blog_title = get_bloginfo( 'name' );
$post_date = get_the_date();

$thumbnail_id        = get_post_thumbnail_id( $post_id );
$thumbnail_html      = lh_attached_thumbnail( $thumbnail_id );
// Medien Files, die zum Post hoch geladen wurden
$attached_media      = get_attached_media( 'image', $post_id ); 
$attached_media_html = lh_attached_media( $attached_media, $thumbnail_id );

// Falls es ein Post mit Code ist
$code_blocks_options = lh_get_post_option( 'lh_code_snippets', false);
$code_blocks_html    = "";

if( $code_blocks_options ) {
	// generieren die Code-Blöcke als HTML	
	foreach ( $code_blocks_options as $option_key => $option_block ) {
		$args = array(
			'code'       => $option_block['snippet_code'],
			'highlight'  => $option_block['snippet_highlight'],
			'title'      => $option_block['snippet_title'],
			'source'     => $option_block['snippet_source'],
		);	
		
		$code_blocks_html .= html_code_block( $args );
	}
}


//
//
// TEMPLATE
//
?>

	<article>
		<div class="uk-grid post f-post f-teaser">
			<div class="uk-width-medium-2-3 f-post__media f-teaser__media hover-scales-images">
				<?php echo $thumbnail_html; ?>
				
				<?php echo $code_blocks_html; ?>
				
				<?php echo $attached_media_html; ?>
			</div>
			<div class="uk-width-medium-1-3 f-post__media f-teaser__media">
			 	<h1>
			 		<a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title_attribute();?> | <?php echo $blog_title; ?>">
			 			<?php the_title(); ?>
			 		</a>
			 	</h1>
			 	<div class="f-post__content">
			 		<?php the_content(); ?>
			 	</div>
			 	<p class="postmetadata f-post__meta">
			 		<?php echo $post_date; ?> | <?php the_category( ', ' ); ?>
			 	</p>
			</div>
		</div>
	</article>
Dies ist der Code, wie ich in diesem Blog einzelne Posts darstelle. Man kann recht leicht raus finden wo z.B. die Code-Snippets generiert werden und wie diese im HTML angezeigt werden

Übersichtliche Struktur für WordPress-PHP Code

Ordnung in Template- & Funktions-Dateien zu halten ist bei größeren Projekten schwer und bei längeren Projekt enorm wichtig. Um Ordnung zu halten trenne ich meine Dateien in ‚Daten‘ & ‚Template‘.

Oft wird man mit fremden Templates oder eigenen Templates aus düsterer Vergangenheit konfrontiert und ärgert sich, dass man sich nicht zu recht findet. Kleinste Änderungen am HTML Markup oder wenn Daten aus einer zusätzlichen Quelle ( z.B. Post-Options, oder Theme-Settings ) kommen sollen, machen einem das Leben schwer. Vor allem macht es unübersichtlichen Code noch unübersichtlicher.

Mein System, um Ordnung zu halten ist die Trennung in verschiedene Bereiche. In Template Files sieht sie Trennung so aus:

  1. Daten & Inhalte generieren
  2. Inhalte in ein HTML Template setzen

und in Funktions Files (z.B. um HTML Snippets, wie Bildern zu generieren):

  1.  Template(s) als String mit Platzhaltern
  2. Daten & Inhalte generieren
  3. Inhalte ins HTML Template setzen

Hier sind zwei Code-Beispiele wie das in der Praxis aussieht. An einem einfachen Beispiel: Ich will einen Blog-Post Teaser generieren, mit einem Thumbnail und dem Post Title als Link. Zu erst speichere ich mir die Post-ID auf eine Variable & den Blog Title. Danach speichere ich mir auf verschiedene Variablen die HTML-Blöcke für die Vorschau-Bilder ( Thumbnails ). Wenn ich alle korrekten Daten habe, setze ich sie in HTML Gerüst am Ende der Datei ein. Hier gibt es keine IF’s oder LOOPS mehr, nur noch die echten Daten. Wenn ich jetzt später an den Daten oder am HTML was ändern muss, sehe ich sehr leicht wo ich ansetzen muss.

Im zweiten Beispiel ist der Code drin, wie ich den HTML Block für das Bild-Snippet generiere. Zu erst habe ich eine HTML-Template Variable, diese ist meistens ein ARRAY() das ich später zwischen verschiedenen Template wählen kann – in dem Beispiel ist es jetzt nur ein Template. In diesem sind PLACEHOLDER drin, z.B. %IMAGESOURCE% – diese werden später durch entsprechende Werte ersetzt. Nach dem Template generiere ich wie im Beispiel davor alle meine Daten und speichere diese auf klar benannten Variablen ab. Im dritten Teil ersetze ich per strtr() alle PLATZHALTER im Template durch meine generierten Daten und gebe per return mein HTML Snippet aus.

Dies sind jetzt einfache Beispiele, aber lassen sich aber sehr komplex skalieren. Sie sind vor allem Sinnvoll, wenn mit vielen Eingaben des Nutzers über Meta-Boxen, Post-Options, oder Theme-Settings rechnen muss. Oder es viele IF-Entscheidungen und LOOPS gibt.

Das dritte Beispiel unten, ist wie ich in diesem WordPress-Blog einen einzelnen Post generiere. Hier muss es Abfragen geben wie:

  • Was ist der Post-Thumbnail
  • Welche weiteren Bilder wurden hoch geladen
  • Entferne aus den weiteren Bildern das Thumbnail (das es keine Dopplung gibt)
  • Prüfe ob es Code-Blöcke gibt und gib diese auch mit den Media-Dateien aus

Und mit der oben beschriebenen Struktur, ist es aber auch nach einem Jahr oder für fremde Personen leicht, heraus zu finden, wo sie bei einer Änderung ansetzen müssen – Und vor allem: Ohne die Code-Struktur kaputt zu machen!

1. September 2017 | Wordpress