Was die Post Formats sind, die seit Einführung von WordPress 3.1 zur Verfügung stehen und wie man diese Klassen via CSS anpassen kann erklärte ich bereits in dem Artikel Post Formats via CSS anpassen.

Heute möchte ich eine weitere Möglichkeit aufzeigen die Darstellung eines Post Formats zu beeinflussen. Und zwar direkt über die Bearbeitung der Datei index.php. In dieser Datei steht der html-Code der Startseite aber auch der Code der Archivseiten und der Suchergebnisse wird über diese Datei festgelegt. Bei manchen Themes verweist die Datei index.php jedoch nur auf die Datei loop.php, in der dann der Content definiert wird. Da dies bei meinem Theme (eine Modifikation des Standardthemes twentyten) auch so ist gehe ich hier jetzt auf die Datei loop.php ein.

Der Code für Artikel denen beim schreiben im Backend das Post Format “aside” (bei eingedeutschten Blogs heißt das Post Format “Kurzmitteilung”) zugewiesen wurde sieht in meiner loop.php folgendermaßen aus:

<?php /* How to display posts of the Aside format. The asides category is the old way. */ ?>

 <?php elseif ( ( function_exists( 'get_post_format' ) && 'aside' == get_post_format( $post->ID ) ) || in_category( _x( 'asides', 'asides category slug', 'twentyten' ) )  ) : ?>
 <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

 <?php if ( is_archive() || is_search() ) : // Display excerpts for archives and search. ?>
 <div>
 <h2>
 <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
 </h2>
 <div>
 <?php twentyten_posted_on(); ?>
 </div>
 <img class="format-image" src="http://www.delijo.de/blog/wp-content/themes/twentyten-modified/images/format-aside.png" alt="Notiz" title="Notiz" />
 <?php the_excerpt( __( 'Continue reading <span>&rarr;</span>', 'twentyten' ) ); ?>
 </div><!-- .entry-summary -->
 <div>

 <span><?php comments_popup_link( __( 'Leave a comment', 'twentyten' ), __( '1 Comment', 'twentyten' ), __( '% Comments', 'twentyten' ) ); ?></span>
 <?php edit_post_link( __( 'Edit', 'twentyten' ), '<span>|</span> <span>', '</span>' ); ?>
 </div><!-- .entry-utility -->
 <?php else : ?>
 <div>
 <h2>
 <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
 </h2>
 <div>
 <?php twentyten_posted_on(); ?>
 </div>
 <img class="format-image" src="http://www.delijo.de/blog/wp-content/themes/twentyten-modified/images/format-aside.png" alt="Notiz" title="Notiz" />
 <?php the_content( __( 'Continue reading <span>&rarr;</span>', 'twentyten' ) ); ?>
 </div><!-- .entry-content -->

 <div>
 <?php if ( function_exists( 'get_post_format' ) && 'aside' == get_post_format( $post->ID ) ) : ?>
 <a href="<?php echo get_post_format_link( 'aside' ); ?>" title="<?php esc_attr_e( 'Notizen ansehen', 'twentyten' ); ?>"><?php _e( 'weitere Notizen', 'twentyten' ); ?></a>
 <span>|</span>
 <?php elseif ( in_category( _x( 'aside', 'aside category slug', 'twentyten' ) ) ) : ?>
 <a href="<?php echo get_term_link( _x( 'aside', 'aside category slug', 'twentyten' ), 'category' ); ?>" title="<?php esc_attr_e( 'View posts in the Aside category', 'twentyten' ); ?>">weitere Notizen</a>
 <span>|</span>
 <?php endif; ?>
 <span><?php comments_popup_link( __( 'Leave a comment', 'twentyten' ), __( '1 Comment', 'twentyten' ), __( '% Comments', 'twentyten' ) ); ?></span>
 <?php edit_post_link( __( 'Edit', 'twentyten' ), '<span>|</span> <span>', '</span>' ); ?>
 </div><!-- .entry-utility -->

 <?php endif; ?>

 </div><!-- #post-## -->

In den Zeilen 14 und 30 wird bei allen Artikeln mit der Klasse “aside” sowohl in Archiven als auch bei Suchergebnissen und der Startseite eine Grafik mit der Klasse “format-image” eingefügt, die über folgende CSS-Angaben in der Datei style.css definiert wird:

.format-image {
float:left;
display:inline;
height:150px;
width:150px;
padding:10px;
margin:0 30px 20px 0;
}

Es wird also nicht für das Post Format “aside” eine Hintergrundgrafik via CSS angegeben sondern im html-Code eine Datei eingefügt für das Post Format. Mit den CSS-Angaben wird nur festgelegt das die Grafik im Textfluss angezeigt wird, welche Größe sie hat und welche Abstände zum Text eingehalten werden sollen.

Diese Möglichkeit ist etwas aufwendiger als für die einzelnen Post Formats Hintergrundgrafiken via CSS fest zu legen, da in der index.php bzw. in der loop.php wesentlich mehr Code eingegeben werden muss. Im Zweifelsfall für jedes Post Format bei dem eine Grafik angezeigt werden soll.

Damit auch in der Einzelansicht eines Artikels die Grafik angezeigt wird muss natürlich auch die loop-single.php bearbeitet werden. In dieser Datei steht bei mir folgender Code:

<?php /* How to display posts of the Aside format. The asides category is the old way. */ ?>

<?php if ( ( function_exists( 'get_post_format' ) && 'aside' == get_post_format( $post->ID ) ) || in_category( _x( 'asides', 'asides category slug', 'twentyten' ) )  ) : ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<div>
<h2>
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</h2>
<div>
<?php twentyten_posted_on(); ?>
</div>
<img src="http://www.delijo.de/blog/wp-content/themes/twentyten-modified/images/format-aside.png" alt="Notiz" title="Notiz" />
<?php the_content( __( 'Continue reading <span>&rarr;</span>', 'twentyten' ) ); ?>
</div><!-- .entry-content -->
<?php if ( get_the_author_meta( 'description' ) ) : // If a user has filled out their description, show a bio on their entries  ?>
<div id="entry-author-info">
<div id="author-avatar">
<?php echo get_avatar( get_the_author_meta( 'user_email' ), apply_filters( 'twentyten_author_bio_avatar_size', 60 ) ); ?>
</div><!-- #author-avatar -->
<div id="author-description">
<h2><?php printf( esc_attr__( 'About %s', 'twentyten' ), get_the_author() ); ?></h2>
<?php the_author_meta( 'description' ); ?>
<div id="author-link">
<a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>">
<?php printf( __( 'View all posts by %s <span>&rarr;</span>', 'twentyten' ), get_the_author() ); ?>
</a>
</div><!-- #author-link    -->
</div><!-- #author-description -->
</div><!-- #entry-author-info -->
<?php endif; ?>

<div>
<?php twentyten_posted_in(); ?>
<?php edit_post_link( __( 'Edit', 'twentyten' ), '<span>', '</span>' ); ?>
</div><!-- .entry-utility -->
<!-- AddThis Button BEGIN -->
<br />
<div>
<a></a>
<a></a>
<a></a>
<a></a>
<a></a>
<a></a>
<a></a>
<a></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_clickback":true};</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=delijo"></script>
<!-- AddThis Button END -->
</div><!-- #post-## -->
<div id="nav-below">
<div><?php previous_post_link( '%link', '<span>' . _x( '&larr;', 'Previous post link', 'twentyten' ) . '</span> %title' ); ?></div>
<div><?php next_post_link( '%link', '%title <span>' . _x( '&rarr;', 'Next post link', 'twentyten' ) . '</span>' ); ?></div>
</div><!-- #nav-below -->

Ich weiß, alles sehr verwirrend. Darum biete ich interessierten Menschen die betreffenden Dateien hier einfach zum Download an. Da könnt ihr prima mit spielen und testen. Sie basieren wie Anfangs schon erwähnt auf dem Standardtheme twentyten.

Download loop-single-style.zip

verwandte Artikel

• Keywords sinnvoll den Artikeln zuordnen
• doch kein Genie
• [update] Download : Theme Yoko von Elmastudio modified
• Google + ist doof, Twitter gewinnt und ifttt ist genial
• Zusammenfassung : GEMA Virus vs. WordPress Installation