Tutoriel et guide sur les post formats de WordPress

Les custom post formats de WordPress permettent de transformer un blog WordPress classique en véritable plateforme ludique de publication à la Tumblr. Voyons comment cela fonctionne !

Définition des Post formats

Post formats : késako ?

Les post formats de WordPress constituent une nouvelle fonctionnalité introduite après la sortie de la version 3 du CMS de blogging le plus connu au monde. Il s’agit d’une fonction permettant de subdiviser les articles en plusieurs types, de manière à les présenter différemment sur votre blog en fonction de ce qu’ils sont.

Avec les custom post formats, vous pouvez rendre votre blog interactif, vivant et diversifié autant sur le contenu que sur la forme. Voici la liste de formats d’articles fournis pour le moment par WordPress :

[list style= »list1″ color= »gray »]

  • Par défaut : article normal.
  • aside (En passant) : article rapide.
  • chat : dialogue.
  • gallery (galerie) : galerie photos.
  • link (lien) : un ou plusieurs liens externes.
  • image : simple image.
  • quote (citation)
  • status (état) : Un statut comme sur Facebook ou Twitter par exemple.
  • video
  • audio

[/list]

Inspirée de Tumblr, fournisseur de blogs interactifs et ludiques, cette fonctionnalité permet ainsi de dynamiser un blog ou un magazine classique en lui conférant la possibilité d’afficher du contenu de manière différente en fonction du type de sujet traité. Le thème Tumble Ten par exemple (cf image de gauche) montre très explicitement ce qui est possible avec les Post formats.

En effet, le côté ludique ici est de fournir une icône spécifique à chaque type de contenu, ainsi que des éléments de l’article différents. On peut par exemple choisir de n’afficher qu’un lien, qu’un titre, ou seulement le contenu de l’article sans le titre, ou bien encore une vidéo ou une galerie photos.

Sur le plan de la fidélisation, c’est un pas en avant vers l’amélioration de l’attractivité d’un blog, qu’il soit un blog corporate, de divertissement, personnel ou journalistique. Ce genre de fonctionnalités permet ainsi de réunir en un seul blog des statuts à la Twitter, des articles ou éditos détaillés, des vidéos, etc…

Différence entre les Post formats et les Custom Post Types

Beaucoup de gens ne comprennent pas la distinction entre les custom post types et les post formats, deux fonctions qui à priori font doublons. En vérité, les custom post types créent de nouveaux types de contenu qui ne sont pas des articles. En effet, les articles d’un côté, et les pages de l’autre par exemple, sont deux types différents de contenu. Ainsi, en créant un custom post type, vous créez un nouveau type de contenu. Ce peut être par exemple des critiques de film, des fiches, des produits, des stagiaires, etc…

A l’inverse, les post formats sont des types de posts (donc des types d’articles) : ils ont la particularité d’être standards donc moins customizables (autrement dit, la liste de post formats fournit là-haut est telle quelle, elle ne peut être modifiée à priori), et sont affichés comme des posts partout sur le blog.

 

Installer les Post formats sur son blog WordPress

L’installation des post formats sur votre blog nécessite de suivre les étapes suivantes. Celles-ci ne constituent pas un référentiel, et plusieurs méthodes d’implémentation existent.

Activer les custom post formats

Pour activer les custom post formats sur votre thème WordPress, rendez-vous sur le fichier functions.php de votre thème afin d’y ajoutez les lignes ci-dessous. Vous pouvez supprimer les formats d’article que vous ne souhaitez pas utiliser.

[icon style= »chain » color= »red »]functions.php[/icon]

[code]
add_theme_support(
‘post-formats’, array(
‘aside’,
‘chat’,
‘gallery’,
‘image’,
‘link’,
‘quote’,
‘status’,
‘video’,
‘audio’
)
);
[/code]

Vous devez maintenant voir la petite boîte relative aux formats d’articles dans votre admin WordPress, plus précisément à droite de votre formulaire de publication de posts :

Maintenant que les post formats sont activés, cela ne veut pas dire que vous allez voir illico presto une différence sur votre blog. En effet, même en sélectionnant par exemple « Chat » pour l’un de vos articles, celui-ci ne s’affichera pas sous forme de chat avant que vous n’ayiez modifié le code de votre fichier d’articles, et accessoirement votre fichier CSS.

En effet, la fonction add_theme_support installe les fonctions de base des custom post formats, mais c’est à vous de rendre votre thème compatible. Mais ne vous inquiétez pas, je vais vous montrer comment faire !

has_post_format() VS get_template_part

Deux possibilités s’offrent à vous pour rendre vos fichiers thème compatibles avec les post formats. La première est une solution simple pour comprendre le principe si vous débutez et que vous n’êtes pas très à l’aise avec le code PHP, la seconde est la solution la plus propre.

La fonction has_post_format()

WordPress a fourni cette fonction à implémenter à l’endroit où s’affichent vos posts afin de personnaliser ce que vous avez envie de montrer pour chaque format d’article. Cette méthode est conseillée seulement si vous n’avez que peu de formats d’articles et que vous voulez bâcler le travail 🙂

[icon style= »chain » color= »red »]loop.php et single.php[/icon]

[code]if (has_post_format(‘aside’)) {
//afficher le code relatif aux articles rapides
} elseif (has_post_format(‘chat’)) {
//afficher le code relatif aux articles chat
} elseif (has_post_format(‘gallery’)) { //afficher le code relatif à la galerie photo de l’article
} else { //afficher le code standard de votre thème pour l’affichage de vos articles
}[/code]

Attention : ce code est tout de même à utiliser dans tous les cas sur le fichier single.php, même si vous choisissez la méthode ci-dessous.

La fonction get_template_part()

Dans un fichier de thème bien garni et rempli de structures conditionnelles, la méthode citée ci-dessus n’est pas très méthodique. Nous allons donc diviser le code afin qu’il soit le plus clair possible.

[icon style= »chain » color= »red »]loop.php[/icon]

[code]if (have_posts()) :
while (have_posts()) : the_post();
if(!get_post_format()) {
get_template_part(‘format’, ‘standard’);
} else {
get_template_part(‘format’, get_post_format());
}
endwhile;[/code]

Autrement dit : si l’article actuellement dans la boucle ne présente pas de format particulier d’articles, lancer alors le thème standard, sinon, lancer le thème relatif au format de post.

Avec ce code, il nous faut donc créer les fichiers standard et particuliers. Pour ce faire, rien de plus simple, il vous suffit de créer un fichier format-standard.php contenant la boucle standard, puis un fichier format-video.php qui contiendrait le code relatif à l’affichage d’articles vidéo, puis un fichier format-aside.php qui contiendrait le code relatif à l’affichage d’articles « en passant », etc…

 

La fonction post_class()

Particulièrement intéressante, cette fonction va permettre d’implémenter une classe au format d’article, de manière à le personnaliser via le fichier CSS par la suite. Zoomons ainsi sur le format aside par exemple :

[code]if (has_post_format(‘aside’)) {
<div id= »post-<?php the_ID(); ?> » <?php post_class(); ?>>
<?php the_content();?>
</div>
} else { //afficher le code standard de votre thème pour l’affichage de vos articles
}[/code]

La fonction post_class() va affilier la classe .format-aside à votre post « en passant » par exemple.

 

Personnaliser le style des formats d’article via le fichier CSS

Comme nous venons de le voir juste ci-dessus, le format aside est caractérisé par la classe .format-aside. Il ne vous reste donc plus qu’à aller styliser ce format dans le fichier CSS ! Exemple :

[code]

.format-aside h2 {font-size: 2em}
.format-aside {
background: url(images/aside.png) -118px 14px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding: 15px 20px 5px;
position: relative; }

[/code]

Via ce code, nous indiquons aux posts de type « en passant » d’afficher un fond d’écran spécifique, une taille de titre spécifique et une bordure arrondie, de quoi mettre esthétiquement en valeur ce genre de contenu. Vous pouvez vous laisser aller à votre imagination et ajouter toutes sortes de styles, puis généraliser la procédure à tous les formats de posts !

[framed_box rounded= »true »]

Exemple récapitulatif

Voici un code clé-en-main récapitulatif afin de bien remettre les idées en place :

[icon style= »chain » color= »red »]Dans le fichier loop.php (ou index.php) à l’endroit où le contenu est affiché :[/icon]

[code]if (have_posts()) :
while (have_posts()) : the_post();
if(!get_post_format()) { get_template_part(‘format’, ‘standard’);
} else { get_template_part(‘format’, get_post_format());
}
endwhile;
endif;[/code]

[icon style= »chain » color= »red »]format-standard.php :[/icon]

Le contenu par défaut de votre thème pour l’affichage de vos articles.

[icon style= »chain » color= »red »]format-aside.php :[/icon]

[code]<div id= »post-<?php the_ID(); ?> » <?php post_class(); ?>>
<?php the_content();?>
</div>[/code]

[/framed_box]

 

Exclure certains post formats des flux RSS

Utile lors de la publication de certains formats d’articles brefs ou relatifs à des instants d’humeur – je pense notamment aux statuts, a-side, chat, etc.. – cette fonctionnalité découverte ici va vous permettre de ne pas « polluer » votre flux RSS avec du contenu alternatif. En effet, si vous avez beaucoup de lecteurs qui suivent votre flux RSS, ils risquent vite d’être décontenancé face à un afflux de brèves issues des post formats.

Remplacer « post-format-status » ou « aside » par les post formats que vous souhaitez exclure.

[icon style= »chain » color= »red »]functions.php :[/icon]

[code]
// Excure certains post formats des flux RSS:
function exclude_post_formats_from_feeds( &$wp_query ) {

// Si feed query:
if ( $wp_query->is_feed() ) {

// Array des post formats à exclure, par slug,
// exemple: « post-format-{format} »
$post_formats_to_exclude = array(
‘post-format-status’,
‘post-format-aside’
);

// Extra query to hack onto the $wp_query object:
$extra_tax_query = array(
‘taxonomy’ => ‘post_format’,
‘field’ => ‘slug’,
‘terms’ => $post_formats_to_exclude,
‘operator’ => ‘NOT IN’
);

$tax_query = $wp_query->get( ‘tax_query’ );
if ( is_array( $tax_query ) ) {
$tax_query = $tax_query + $extra_tax_query;
} else {
$tax_query = array( $extra_tax_query );
}
$wp_query->set( ‘tax_query’, $tax_query );
}
}
[/code]

10 réponses

  1. Hello,
    je prends le temps de te laisser un commentaire pour te féliciter pour la qualité de ce post : je viens de découvrir les posts formats (mon thème n’étant pas compatible, je n’avais pas été alerté sur cette nouvelle fonctionnalité), et ton tuto répond exactement, simplement et précisément aux questions que je me posais. Chapeau 🙂

    1. Mille fois merci, ça fait plaisir de voir un travail récompensé par des retours positifs ! 😉

  2. De rien; j’en rajoute une couche, mais le blog de votre agence se distingue vraiment par sa qualité – sans compter du design vraiment maîtrisé. Franchement le jour où j’ai besoin d’un presta je songerai sérieusement à vous parler de mon projet. Idem si je croise quelqu’un qui cherche une agence.

    1. Merci infiniment Baptiste, nous travaillons depuis longtemps sur Internet mais ce site est très récent, et je veille à y ajouter du contenu pertinent et complémentaire par rapport à ce qui se trouve déjà sur le net 😉 Le thème en revanche est signé par un excellent graphiste WordPress, dispo sur la toile, bien que customizé par mes soins en ce qui concerne les posts formats justement 🙂
      En tous cas merci à toi de relayer notre contenu, ironie du sort, je faisais de même auprès de mes amis lorsque j’ai vu naître ton forum il y a quelques années…!

  3. Bonjour,

    Justement j’ai un thème avec plein de format différent pour les articles mais que je choisi l’un ou l’autre ça ne change pas sauf le format galerie mais je ne vois que l’image et non l’extrait de l’article
    C’est bizarre car sur un autre blog j’ai choisi le format galerie et j’ai bien photo avec l’extrait de l’article
    Merci pour votre aide

  4. Bonjour,

    Impossible d’activer les post format avec mon thème.
    J’ai tout éssayer , tellement éssayer que j’ai fais une mauvaise manip et le blog entier à été supprimer.
    J’ai tout perdu mais je reste déterminer, je veux mettre le format gallery pour mes post mais je n’y arrive vraiment vraiment pas .
    J’ai suivi votre tutoriel mais je galère.

    Svpppp aidez moi

  5. hello,bonjour

    Votre article me parait tres claire , mais j’ai la posibilité de choisir des modes de format dans mes articles de blog d’electricité , en revanche rien ne se produit lorsque j’active un format !

  6. Bonjour, savez-vous si cette fonctionnalité des posts formats permet d’ouvrir les posts dans une letterbox directement depuis leur thumbnail sur la page d’accueil ?

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.