Easy + simple: die Postformate in WP 3.1

WP 3.1 bietet neue Postformate. Damit kann man während des Veröffentlichens bereits bestimmen wie und auch wo der geschriebene Artikel erscheinen soll.

Weil dies alles sehr theoretisch klingt, zeige ich hier wie man diese Postformate im bestehenden Theme aktiviert. Wie man die CSS Klasse des jeweiligen Postformats erkennen kann und wie Du es selbst machen kannst.

Postformate im WordPress Theme ermöglichen

Die functions.php des verwendeten Themes mit einem Texteditor öffnen und relativ weit oben folgendes hineinkopieren oder abtippen:

add_theme_support( 'post-formats', 
    array( 
       'aside', 
       'chat', 
       'gallery', 
       'image', 
       'link', 
       'quote', 
       'status', 
       'video', 
       'audio' ) );

Die functions.php speichern und in den richtigen ThemeOrdner hochladen.

Wichtig:

  1. 1. Du musst natürlich nicht alle Postformate angeben.
  2. 2. Beachte, dass nach dem letzten Postformat kein Koma mehr stehen darf. – für alle, die nicht so mit PHP vertraut sind. ;-)
  3. 3. Einfach neue Postformate kann man so nicht definieren.

Was können diese Postformate in WP 3.1

  • Aside – Asides landen meist in der Sidebar und sind wenig Text – ohne Überschrift.
  • Image Gallery – viele Bilder im Galerie Format.
  • Link – ein einzelner Link.
  • Image – ein einziges Bild.
  • Quote – für ein Zitat mit Autorenangabe.
  • Status – ähnlich wie Twitter oder Facebook Status Angaben.
  • Video – ein einziges Video.
  • Audio – ein einziger AudioClip – z.B.: Podcast .
  • Chat – für ein Chatprotokoll .
Postformate bei WP 3.1
Postformate bei WP 3.1

Vermutlich ist es nötig den Browsercache (strg/F5) zu leeren und dann sieht beim beim Erstellen eines neuen Artikels auf der rechten Seite eine neue Box mit dem Titel: „Format“.

Hier hakst Du einfach das gewünschte Postformat an. Magst Du kein spezielles musst Du gar nichts machen. „Standard“ ist automatisch aktiv.

die CSS Klassen der Postformate in WP 3.1

Nutzt Du-


<?php post_class(); ?>


findest Du im Quelltext -bei dem den Artikel umgebenden div oder html5 Tag – die von WP 3.1 erstellten Postformat CSS-Klassen:

.format-standard{}
.format-aside {}
.format-chat {}
.format-gallery {}
.format-image {}
.format-link {}
.format-quote {}
.format-status {}
.format-video {}
.format-audio {}

Bei der Einzelansicht -also in der single.php findest Du diese CSS-Klassen beim body Tag:

.single-format-standard{}
.single-format-aside {}
.single-format-chat {}
.single-format-gallery {}
.single-format-image {}
.single-format-link {}
.single-format-quote {}
.single-format-status {}
.single-format-video {}
.single-format-audio {}


Dies läßt das Herz jedes CSS Freaks natürlich höher schlagen, sind damit doch wirklich sehr viele Möglichkeiten zum Gestalten geschaffen worden.

Änderungen beim Loop in WP 3.1

Du kannst nun die einzelnen Postformate anders darstellen. Magst Du in der einen Spalte jenes Postformat nur anzeigen und im FooterBereich vielleicht nur den Postformat *Gallery* musst Du den Loop ändern.

der Conditional Tag has_post_format() hilft dabei

Abfragen, ob das Postformat *aside* da ist:

<?php if(has_post_format('aside')) { ?>

<?php } ?>

Abfragen, ob das Postformat *gallery* nicht vewendet wird:

<?php if(!has_post_format('gallery')) { ?>
<h2 class="nixgallery"><?php the_title(); ?></h2>
<?php } ?>

Den Artikeltitel und Inhalt je nach Postformat anders gestalten:

Die Postformate *aside*,*quote* und *status* zeigen bei meinem Beispiel gar keinen Titel an.

Die CSS Klassen habe ich sehr eindeutig benannt ;-)

Dieses Beispiel ist natürlich ausbaubar, es soll nur Gusto machen und erklären wie es geht.


<div id="post-<?<span class=">php the_ID(); ?>" ></div>
<?php  //kein Titel bei Aside
if ( has_post_format( 'aside' )) {
echo the_content();
}

elseif ( has_post_format( 'chat' )) {
echo '<h3 class="chatheader">';
echo the_title();
echo '</h3>';
echo the_content();
}

elseif ( has_post_format( 'gallery' )) {
echo '<h3 class="galleryheader">';
echo the_title();
echo '</h3>';
echo the_content();
}

elseif ( has_post_format( 'image' )) {
echo '<h3 class="imageheader">';
echo the_title();
echo '</h3>';
 echo the_post_thumbnail('medium');
echo the_content();
}

elseif ( has_post_format( 'link' )) {
echo '<h3 class="imagelink">';
echo the_title();
echo '</h3>';
echo the_content();
}

elseif ( has_post_format( 'quote' )) { //ohne Titel
echo the_content();
}

elseif ( has_post_format( 'status' )) { //ohne Titel
echo the_content();
}

elseif ( has_post_format( 'video' )) {
echo '<h3 class="videoheader">';
echo the_title();
echo '</h3>';
echo the_content();
}

elseif ( has_post_format( 'audio' )) {
echo '<h3 class="audioheader">';
echo the_title();
echo '</h3>';
echo the_content();
}

else {
echo '<h3 class="elsewhereheader">';
echo the_title();
echo '</h3>';
echo the_content();
}
?>
</div>
php endwhile; else: endif; ?>
</div>


Weiterführende Links für Freaks und Coder:

12

12 Beiträge zu “Easy + simple: die Postformate in WP 3.1

  1. Kommentar Autor
    wemaflo
    Kommentar

    Ui, ja danke! Wollte mich damit schon seit längerem beschäftigen, jetzt hast du hier ein paar schöne Beispiele geliefert.

  2. Kommentar Autor
    sascha
    Kommentar

    Super genau das was ich gesucht habe.

    2 Dinge sind mir noch nicht ganz klar.

    A) Mein Theme (devision von Themshift.com ) hat keine loop.php !
    Geh ich recht in der Annahme das dieser Code dann in die Index.php gehört?

    B) warum wird innerhalb der else Klammern alles mit echo ausgegeben.
    Kann ich so etwas wie

    (<?php the_title('‘, “); ?>)

    an der Stelle nicht verwenden ?

    Gruss Sascha

  3. Kommentar Autor
    Monika
    Kommentar

    zu B)
    völlig verkürzt und vielleicht konfus erklärt:
    diese ganze wenn -dann -sonst Geschichte (if else…) hat zu Beginn bereits < ?php... d.h. php arbeitet bereits, .. nutzt man innerhalb von sowas wieder
    daher nutzt man dann *echo* und alles bleibt OK

    zu A) ja genau ;)

  4. Ping Die Linkschleuder 18: WordPress, Facebook und Web | perun.net

  5. Kommentar Autor
    Rudolf
    Kommentar

    Auf den ersten Blick sieht das ja sehr kompliziert aus. Ich werde mich aber heute abend nochmal genauer damit auseinandersetzen. Vielen Dank für den Tipp.

  6. Kommentar Autor
    Heiner
    Kommentar

    Das Thema steht schon lange auf meiner ToDo Liste. Dank Deines Beitrags bin ich jetzt wieder motiviert und vor allem: ich muss nicht bei Null anfangen.
    Daher: Vielen Dank!
    BG Heiner

  7. Ping Netzfundstücke vom 10.3.2011 | EGM Weblog

  8. Kommentar Autor
    Andycam
    Kommentar

    Super Post! Danke für die infos!

    Und auch so geschrieben dass jeder es verstehen kann!

  9. Kommentar Autor
    Tim
    Kommentar

    WordPress wird immer besser. Ich liebe einfach die leichten Anpassungen. Echt toll. Vielen Dank für den Tipp.

  10. Kommentar Autor
    Detektiv
    Kommentar

    wp wird schon immer umfangreicher. bald wird es das web dominieren .. obwohl ich ja immer noch ab und zu mal einen html-css seite mache.
    Eigentlich um es nicht zu verlernen ;)

  11. Kommentar Autor
    frau
    Kommentar

    Ich finde, Deine Idee ist wirklich eine tolle Lösung. Vielen Dank für die ausführliche Erklärung.

  12. Kommentar Autor
    Mike
    Kommentar

    Super Artikel! WordPress wird zwar von der Bedienung immer besser, aber es ist toll wenn man hier aktuelle Lösungen findet die einem sinst doch ein wenig Kopfzerbrechen bereiten. Sehr schön erklärt, das spart Stunden an rumfummelei und bringt einen so schneler zurück zu eigentlichen Arbeit im eigenen Blog. Also Danke dafür