WordPress Anpassungen – Beitragsbild, Startseite und Quellcode-Anzeige

Nachdem wir das Blog auf WordPress umgestellt haben, stellen sich einige Fragen wie bestimmte Dinge erledigt werden und es bedarf doch einiger Anpassungen.

Hier drei Beispiele:

Beitragsbild

Ein Beitragsbild oder Featured Image ist in WordPress getrennt vom eigentlichen Inhalt. Jeder Artikel kann ein Beitragsbild enthalten, dem dann, wie allen Bilderm, ein Titel, eine Bildunterschrift, ein Alternativtext und eine Beschreibung zugeordnet werden kann.

Das Beitragsbild wird dann prominent auf der Website angezeigt. Dummerweise aber ohne die Bildunterschrift. Ich benutze manchmal Creative Commons Fotos im Beitragsbild. Beim ersten WordPress Artikel habe ich so ein Foto genommen und prompt erhielt ich auf Facebook die Rückmeldung:

das Bild kommt mir irgendwie bekannt vor … 🙂

Ich habe das Bild verwendet, aber keine Lizenzinformationen angezeigt. Beim Kollegen Kriegel war das nun kein Problem aber bei den anderen Artikeln gibt es ja auch solche Bilder und so forschte ich, wie ich das Verhalten ändern kann.

Die „provisorische“ Lösung war dann, in der Theme-Datei content-single.php unter der Zeile mit der twentysixteen_post_thumbnail() Funktion, den folgenden Code einzutragen.

<?php if ( $caption = get_post( get_post_thumbnail_id() )->post_excerpt ) : ?>
    <p class="caption"><small><em><?php echo $caption; ?></em></small></p>
<?php endif; ?>

Die zwei Zeilen sind insofern interessant, weil sie die Vorgehensweise in WordPress gut widerspiegeln.

Hier die Erklärung:

• get_post(parameter) liefert ein Array der Werte eines Artikel zurück. get_post(10) macht das für die Artikel-ID 10.
• Das Beitragsbild heisst intern thumbnail. Die Funktion get_post_thumbnail_id() liefert die Artikel-ID zurück.
• Wenn man beides kombiniert, erhält man die Werte des Beitragsbildes
  get_post(get_post_thumbnail_id()). Mich interessiert nur die Bildunterschrift (Caption), die intern post_excerpt heisst
• Kombiniert sieht es dann so aus
  $caption = get_post( get_post_thumbnail_id() )->post_excerpt )
• Das if/endif drumherum stellt sicher, dass die nächste Zeile nur ausgeführt wird, wenn in der Variable $caption ein Wert steht.
• Die nächste Zeile enthält das Markup und die Art der Darstellung. Da es schnell gehen sollte, habe ich die HTML Tags <small> und <em> verwendet, damit der Text kleiner als der folgende Text dargestellt wird.

Nun kann man darüber meckern und die Lösung in der Abteilung quick&dirty einordnen, aber ich hatte das Problem in 5 Minuten gelöst und in diesem Fall zählte Schnelligkeit.

Mittlerweile habe ich gesehen, das abhängig vom Screen, die Zeile manchmal nicht so gut aussieht, aber sie ist da und ich kann mich mit der Lösung des Problems in Ruhe beschäftigen 🙂

Startseite

Im TwentySixteen Theme werden auf der Startseite alle Artikel in voller Länge angezeigt. Das ist auf der einen gut, weil man sie dann nacheinander lesen kann, aber bei sehr langen Artikeln ist es doch unübersichtlich.

Es gibt in WordPress in Einstellungen > Lesen, die Möglichkeit eine Kurzfassung anzuzeigen, die Einstellung gilt aber nur für das Newsfeed. Auf die Startseite hat es leider keinen Einfluss.

Auch hier ein kleiner „Hack“. Diesmal müssen wir das in der content.php machen. Ersetze einfach diesen Programmcode

<div class="entry-content">
		<?php
			/* translators: %s: Name of current post */
			the_content( sprintf(
				__( 'Continue reading %s', 'twentysixteen' ),
				the_title( '<span class="screen-reader-text">', '</span>', false )
			) );
 
			wp_link_pages( array(
				'before'      => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentysixteen' ) . '</span>',
				'after'       => '</div>',
				'link_before' => '<span>',
				'link_after'  => '</span>',
				'pagelink'    => '<span class="screen-reader-text">' . __( 'Page', 'twentysixteen' ) . ' </span>%',
				'separator'   => '<span class="screen-reader-text">, </span>',
			) );
		?>
	</div><!-- .entry-content -->

durch diesen

<div class="entry-content">
		<?php
		if ( is_single() ) :
			/* translators: %s: Name of current post */
			the_content( sprintf(
				__( 'Continue reading %s', 'twentysixteen' ),
				the_title( '<span class="screen-reader-text">', '</span>', false )
			) );

			wp_link_pages( array(
				'before'      => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentysixteen' ) . '</span>',
				'after'       => '</div>',
				'link_before' => '<span>',
				'link_after'  => '</span>',
				'pagelink'    => '<span class="screen-reader-text">' . __( 'Page', 'twentysixteen' ) . ' </span>%',
				'separator'   => '<span class="screen-reader-text">, </span>',
			) );
			else :

			/* translators: %s: Name of current post */
			the_excerpt( sprintf(
				__( 'Continue reading %s', 'twentysixteen' ),
				the_title( '<span class="screen-reader-text">', '</span>', false )
			) );

			wp_link_pages( array(
				'before'      => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentysixteen' ) . '</span>',
				'after'       => '</div>',
				'link_before' => '<span>',
				'link_after'  => '</span>',
				'pagelink'    => '<span class="screen-reader-text">' . __( 'Page', 'twentysixteen' ) . ' </span>%',
				'separator'   => '<span class="screen-reader-text">, </span>',
			) );
			endif;
		?>
	</div><!-- .entry-content -->

Im neuen Code, wird unterschieden, ob wir es mit einem einzelnen oder vielen Artikeln zu tun haben.
if ( is_single() ) :
...
else :
...
endif;
Im if Fall wird the_content() aufgrufen, also der gesamte Artikel, im else Fall dagegen die Kurzfassung the_excerpt(). Als Ergebnis erscheint auf der Startseite nun die Kurfassung und ein Link mit der Beschriftung Weiterlesen.

Damit der Quellcode oben übrigens so schön farbig formatiert wird, habe ich noch das Plugin SyntaxHightlighter Evolved installiert.

Fazit

Es ist wirklich einfach in WordPress Anpassungen vorzunehmen. Welche Auswirkungen solche Anpassungen aber beispielsweise auf die Performance der Site haben, ist eine ganz andere Frage.

Fragen

1. Gibt es eine bessere/elegantere Lösung als die beschriebenen Wege?
2. Habt ihr eine Idee, wie die Ausgabe der Bildunterschrift verbessert werden kann, am besten bereits in der Thumbnail Funktion?
3. Welche Plugins nutzt ihr um Quellcode darzustellen?

Tl;dr: Wir passen unser WordPress Blog an