Comment élaborer un WordPress + abouti avec CPT UI ?

A l’origine, WordPress a été conçu pour être une plateforme de blogging. D’ailleurs, sur une installation WordPress vierge, nous ne trouvons que deux types de contenus : les articles et les pages, ainsi que deux types de taxonomies : les catégories et les tags. Le strict nécessaire pour bloguer.

Mais si aujourd’hui ce célèbre CMS fait tourner plus d’un quart des sites de la planète – blogs, sites vitrines, portfolios, e-commerces et autres –, c’est qu’en réalité, il propose bien plus. Oui mais comment ? On ne peut pas créer un e-commerce avec des articles de blog et des pages ?

C’est donc là que j’interviens avec mon plugin magique, CPT UI.
Attends, tu as dit CPT quoi ?

 

Les Custom Post Type de WordPress

Explications. Les Custom Post Type sont des types de contenu que l’on peut ajouter à WordPress, en plus des articles et des pages (les contenus natifs de WordPress). Et ces types de contenu, il est possible de les personnaliser comme bon vous semble, grâce au plugin Advanced Custom Field (ACF pour les intimes), déjà présenté dans cet article.

Le combo CPT UI et ACF vous permettra de faire de grandes choses ! Vous pourriez par exemple, avec le plugin CPT UI, ajouter un type de contenu “Portfolio”, lui attribuer des Custom Taxonomies pour les classer (Logo, Webdesign, Flyer, etc). Et avec ACF, vous pourriez créer de nouveaux champs personnalisés, propres à votre contenu Portfolio : nom du client, adresse du site web, durée de la prestation, etc.

Avec un e-commerce, ça nous donnerait un nouveau type de contenu “Produit”, pour des T-shirt par exemple, avec des Custom Taxonomies Enfant, Homme, Femme, et on peut imaginer des champs personnalisés : Taille, couleur, description, images du T-shirt, etc. A votre imagination de faire le reste, car les possibilités sont illimitées !

Oui, mais comment on fait ? Je vais vous proposer un cas pratique pour éclaircir tout ça. La théorie, c’est bien, la pratique, c’est mieux.

Créer un Custom Post Type

Pour commencer, il vous faut installer l’extension gratuite Custom Post Type UI, soit en la téléchargeant ici et en mettant le fichier zip en ligne dans : Extensions → Ajouter → Mettre en ligne. Ou bien en l’ajoutant directement depuis le catalogue d’extensions : Extensions → Ajouter, vous la trouvez ensuite en tapant son nom dans la barre de recherche. Une fois installée, il faudra penser à l’activer.

C’est là que les choses sérieuses commencent. Avant de vous lancer, il faut que vous ayez déjà une idée précise de ce que vous souhaitez faire. C’est-à-dire : du type de contenu dont vous avez besoin, la manière dont vous voulez trier vos données, et des informations que vous voudrez communiquer à vos internautes / clients. L’idéal, c’est de mettre toutes vos idées sur papier, de schématiser l’agencement de vos contenus et de noter toutes les informations que vous souhaitez afficher. Une fois vos besoins identifiés, vous pourrez mettre en place votre contenu de façon plus efficace.

Par exemple, pour un site de critiques de films, il nous faudrait un type de contenu “Films” et on créerait ainsi une fiche pour chaque film critiqué. Pour les trier, il faudrait créer une taxonomie “genre” (polar, historique, western, drame, comédie, dessins animés, etc.) et une taxonomie réalisateur. On pourrait également créer une taxonomie pour l’année de sortie du film. Ensuite, quelles informations souhaiterions-nous afficher dans notre fiche film ? Le résumé, la date de sortie exacte, les acteurs principaux, la bande-annonce, une galerie photo et la critique. On peut même imaginer vouloir mettre un lien vers le DVD sur Amazon.

On commence par créer notre type de contenu Films. Dès que vous avez activé CTP UI, un onglet CPT UI est apparu à gauche dans votre tableau de bord. Cliquez sur Add / Edit Post Types.

Il faut ensuite renseigner le slug, c’est-à-dire l’identifiant de votre CPT, ainsi que son nom au pluriel et au singulier. Après, vous avez de très nombreuses options, mais vous n’êtes pas obligés d’y prêter attention. En effet, si vous validez votre CPT en ne remplissant que le premier encadré, il fonctionnera très bien et disposera automatiquement de bons réglages.

Cependant, faisons un tour rapide de certaines options utiles. Les “additional labels” permettent de traduire les éléments liés à votre CPT dans votre backoffice. Si vous laissez vide, cela restera en anglais. Cependant, si votre tableau de bord WordPress est en français, certaines choses seront traduites automatiquement. Bref, pour gagner du temps, je conseille de laisser tout vide. Même si quelques termes restent en anglais, vous vous en sortirez, et surtout, ça ne se verra pas sur votre site !

Ensuite, en scrollant tout en bas, vous trouvez l’option très utile “Supports”. C’est tout ce que vous pouvez intégrer dans l’interface d’édition de votre CPT. On retrouve les éléments de base, propres à WordPress – déjà présents sur l’interface d’édition des articles et/ou des pages. Les trois essentiels sont cochés, mais vous pourriez par exemple ajouter l’auteur, si vous êtes plusieurs rédacteurs sur le site, ou le nombre de révisions de l’article.

Vous venez donc de créer votre type de contenu “Films”. On peut maintenant créer la taxonomie “genre”, qui permettra de classer les films.

Créer une Custom Taxonomie

Dans l’onglet CPT UI, il faut cliquer sur Add / Edit Taxonomies. Même principe que pour le CPT, on définit un identifiant et un nom de taxonomie, au pluriel et au singulier. Ensuite, il faut cocher le CPT “Films” pour lui attribuer la taxonomie que l’on va créer.

Plus bas, dans les options, vous avez une ligne “Hierarchical”, qui est importante. Si elle est réglée sur False, votre taxonomie se présentera sous forme de Tags, sans hiérarchie possible. Si elle est réglée sur True, à l’instar des catégories, vous pourrez définir des éléments parents / enfants et ainsi créer une hiérarchie dans votre classement. Par exemple, dans “Comédie”, vous pourriez mettre des sous-catégorie “Comédie romantique”, “Comédie française”, etc.

Et voilà, votre CPT et votre taxonomie personnalisée sont créés !

Oui, c’est bien, mais pour le moment on ne peut pas mettre beaucoup d’informations sur le film… C’est là que le génial ACF intervient ! Je ne vais pas rentrer dans les détails, je vous invite donc à (re)lire le tutoriel consacré à ACF.

Au final, avec ACF PRO, qui offre plus de possibilités, on peut arriver à un résultat très poussé. Voyez par vous-même ce que ça peut donner dans le backoffice.

Intéressant, non ?!

Afficher le CPT et la taxonomie sur votre site

Tout est prêt dans votre backoffice, mais il reste une étape importe : l’affichage de votre CPT, de vos taxonomies et des champs personnalisés ACF sur votre site ! Plusieurs options s’offrent à vous, mais je vous propose d’en découvrir une que j’apprécie pour sa souplesse : créer un modèle de page et une boucle personnalisée pour afficher votre CPT. Là, on va mettre un peu les mains dans le code. Vous me suivez ?

A l’aide de votre éditeur de code préféré (Notepad++, Sublime Text, Brackets…), créez un nouveau fichier, nommez-le page-films.php et ajoutez cette ligne pour créer un modèle de page :

<?php
/*
Template Names: Films
/*

get_header(); ?>

Ensuite, nous allons créer la boucle personnalisée qui permettra d’afficher la liste de vos films (comme un blog affiche la liste de vos articles).

<?php
/*
Template Name: Films
*/

get_header(); ?>

 <?php $loop = new WP_Query( array( 'post_type' => 'films', 'posts_per_page' => 5, 'paged' => $paged) ); ?>

 <?php while ( $loop->have_posts() ) : $loop->the_post(); ?>

 <?php the_title( '<h2 class="entry-title"><a href="' . get_permalink() . '" title="' . the_title_attribute( 'echo=0' ) . '" rel="bookmark">', '</a></h2>' ); ?>

 <div class="entry-content">
 <?php the_content() ; ?>
 </div>

 <?php endwhile ; ?>
<?php get_footer(); ?>

La ligne 8 est importante ! Il faut bien penser à mettre, après post_type => l’identifiant de votre CPT. Rappelez-vous, vous l’avez choisi lorsque vous avez créé le CPT (Post Type Slug). Ensuite, vous pouvez choisir le nombre de posts à afficher par page. La suite du code permet d’afficher le titre du film, ainsi que le contenu.

Attention, il s’agira du contenu ajouté dans l’éditeur de texte de WordPress, il faudra ensuite rajouter manuellement les champs ACF que vous souhaiterez afficher sur cette page. En cas de besoin, je vous invite à consulter la documentation ACF, qui est très complète.

Pour afficher la taxonomie du film, donc dans ce cas son genre, voici le code à insérer à l’endroit où vous souhaitez l’afficher – attention, TOUJOURS le mettre dans la boucle.

<?php while ( $loop->have_posts() ) : $loop->the_post(); ?>

 <?php the_title( '<h2 class="entry-title"><a href="' . get_permalink() . '" title="' . the_title_attribute( 'echo=0' ) . '" rel="bookmark">', '</a></h2>' ); ?>

 <?php the_terms( $post->ID, 'genre', 'Genre : ' ); ?>

 <div class="entry-content">
 <?php the_content() ; ?>
 </div>
 <?php endwhile ; ?>

Pour parfaire le tout, il suffit juste d’ajouter un plugin qui permettra de créer une pagination pour vos CPT. Il s’agit de WP PageNavi. Vous devez l’installer et l’activer.

Puis vous pouvez faire quelques réglages si vous le souhaitez. C’est simple et intuitif, vous verrez.

Enfin, il vous faut ajouter ce petit bout de code à la suite de votre boucle.

<?php endwhile; ?>
<?php wp_pagenavi( array( 'query' => $loop ) ); ?>
<?php get_footer(); ?>

Voilà, vous avez maintenant une page qui affiche vos films ! Il vous reste à envoyer cette page à la racine du dossier de votre thème, à l’aide de votre client FTP (FileZilla par exemple). Ensuite, pour la créer dans votre backoffice, c’est tout simple. Vous créez une nouvelle page puis lui attribuez le modèle “film” que vous venez de créer.

Il vous faut également créer la page qui affiche le contenu de la fiche d’un film, single-films.php. Dedans, vous pouvez insérer le contenu de la page single.php, en ajoutant le code nécessaire pour afficher vos champs personnalisés ACF bien sûr.

Pour aller plus loin : le champ “Relation” de ACF

La combinaison CPT UI et ACF permet de faire des choses encore plus poussées ! Par exemple, imaginez que vous vouliez créer une fiche complète pour chaque réalisateur : vous pouvez y inclure sa biographie, sa filmographie, des photos, etc.

Au lieu de créer une simple taxonomie “réalisateur”, vous pourriez créer un deuxième CPT réalisateurs et l’agrémenter des champs personnalisés dont vous auriez besoin. Vous auriez donc une fiche complète pour un film et une fiche complète pour son réalisateur (vous pourriez envisager de faire la même chose pour les acteurs aussi).

Ensuite, ACF vous permettra de lier tous ces CPT grâce à son champ personnalisé “Relation”. Vous créez donc un champ “Relation” et choisissez ensuite dans les options le CPT que vous voulez afficher.

Dans votre backoffice, sur votre page d’édition films, vous verrez que vous pouvez choisir un réalisateur. Sur votre site, après avoir ajouté le petit bout de code suivant dans vos pages page-films.php et single-films.php, vous aurez donc un lien qui renverra vers la fiche du réalisateur.

<?php
 $posts = get_field('realisateur');
 if( $posts ): ?>
 <ul>
 <?php foreach( $posts as $post): ?>
 <?php setup_postdata($post); ?>
 <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
 <?php endforeach; ?>
 </ul>
 <?php wp_reset_postdata(); ?>
 <?php endif; ?>

C’est un système assez complexe qui oblige à coder pas mal (il faut bien penser à créer les pages page-nomducpt.php et single-nomducpt.php, ajouter la boucle personnalisée dans chaque page-nomducpt.php et ajouter les champs ACF dans toutes ces pages, en fonction de ce que vous voulez afficher ou non, ce qui représente un peu de taf !).

Mais une fois que vous maîtrisez les morceaux de code à ajouter pour CPT UI et ACF (ce sont les mêmes qui reviennent systématiquement, c’est une habitude à prendre), vous pourrez créer un site très riche et très complet, sans aucune limite !