Wordpress Performance Wordpress SEO Wordpress Security Wordpress Themes Wordpress Hosting Mein Setup Das Buch

Ersten Artikel anders darstellen

Ersten Artikel anders darstellen WordPress

Den ersten Post stylen

In WordPress gibt es eine Menge Möglichkeiten, um den ersten Beitrag anders zu designen/stylen, doch viele funktionieren nur über Umwege oder machen anderswo Probleme. Eine einfache Lösung wird hier in diesem Blog genutzt, die nennt sich Loopcounter und fügt lediglich eine kurze Zeile hinzu. Der Vorteil liegt auf der Hand, denn statt einem Slider, wird einfach immer der erste Post vergrößert bzw. verändert dargestellt. Um dieses Ergebnis zu erreichen, muss der Loop im Theme entsprechend angepasst werden, auch die CSS-Datei braucht einige neue Zusätze. Als erstes gilt es aber eben den Loop der index.php anzupassen, natürlich kann der Code auch in der Category.php verwendet werden, oder an anderer Stelle, wo der erste Post in WordPress verändert dargestellt werden soll.

So sieht der Loop in den meisten aktuellen Themes aus:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

Den oberen Code mit diesem ersetzen:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); $loopcounter++; ?> <?php if ( $loopcounter == 1 && is_home() && !is_paged() ) { ?>

			<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('full'); ?></a>
			<div class="post_first"><h2><a href="<?php the_permalink() ?>"><?php if (mb_strlen($post->post_title) > 58) { echo mb_substr(the_title($before = '', $after = '', FALSE), 0, 55) . '...'; } else {the_title();} ?></a></h2></div>

		<?php } else { ?>

Weitere Hinweise

Unter dem Code folgt dann die normale Darstellung, also der Ausschnitt der angezeigt wird, wenn es sich nicht um den ersten Artikel handelt. Dort muss dann ebenfalls noch einmal der Code hinzugefügt werden, ebenfalls mit Thumbnail und Titel, also alles was für die Darstellung erwünscht ist. Anschließend entsprechende Divs in der CSS-Datei hinzufügen, um so ersten Post nach belieben zu stylen.

Vorteil durch Performance

Auch bei diesem Snippet geht es letztendlich wieder um die reine und pure Performance. Hier auf FastWP.de war zum Beispiel ein spezieller Slider in Benutzung, welcher jQuery, aber auch die Slides.js voraussetzte. Nun wurde dies geändert, denn statt ausgewählten Posts, zeigt das obere große Bild nun einfach den aktuellsten Beitrag vergrößert an. Die User wird dies kaum stören, der Vorteil durch Performance ist aber extrem. Statt zwei Javascripte zu laden, wird nun kein einziges mehr für die Anzeige dort benötigt. All dass geschieht über den Loop von WordPress, extra Ballast ist demnach überflüssig. So werden zwei Scripte gespart, bei anderen Slidern sind dies sogar noch mehr bzw. größere Dateien. Vorteil durch Performance wird immer wichtiger, Slider dagegen wurden noch nie so wirklich benötigt. Am Ende muss jeder selbst entscheiden, doch auf zwei große Scripte zu verzichten, kann schon eine Menge Ladezeit ausmachen.



Wordpress Performance eBook