WordPress, les Custom Post Types par l’Exemple

Catégorie de l'article : How To WordPress   |   9 Commentaires  |  8  212 Vues

custom-post-types-wordpress
Les Custom Post Types, qui pourrait se traduire par Types de Billet Personnalisé, sont une notion qui a été introduite avec la version 3 de WordPress. Il s’agit de créer une interface de gestion et de présentation de votre contenu qui corresponde à 100% de vos besoins. La présentation d’une équipe peut se reposer, par exemple, sur un Custom Post Type, vous permettant de gérer de façon centralisée cette page.

Mais avant de parler de type de contenu personnalisé, il faut savoir que WordPress se base sur 5 formats de contenus majeurs :

  • Les billets – Post
  • Les pages - Page
  • Les médias – Attachment
  • Les révisions d’articles – Article revision
  • Les menus de navigation – Nav menus

Pour connaitre la liste complète, n’hésitez pas à lire la page du codex.

Tous les types de contenu sont stockés dans la table wp_posts, au nom de colonnes commençant par post_type.

Voila pour la présentation très généraliste des types de contenu sous WordPress. Pour mon premier article sur Inside da WeB, je vais vous présenter comment créer votre propre type de contenu personnalisé sous WordPress.  La théorie, c’est bien, mais le concret, c’est plus pratique. Je vais donc m’appuyer sur la création d’un type de contenu particulier pour vos présenter par l’exemple les Custom Post Types dans WordPress.

Custom Post Types, par l’Exemple

Pour comprendre comment fonctionne les CPT, je vais vous présenter la création d’un CPT fait pour gérer une page équipe par service, sur son site WordPress. Nous appellerons ce Custom Post Types en insérant un shortcode dans la page voulue.

Avant d’aller plus loin, voici comment ce tutoriel ce décompose :

  • Pré-développement
  • Créer les fichiers plugin
  • Enregistrer son CPT
  • Enregistrer ses taximonies
  • Créer ses champs personnalisés
  • Enregistrer les champs personnalisés
  • Créer le shortcode
  • Tester le résultat

Une fois que nous serons arrivé à la fin de ce tutoriel sur les Custom Post Types WordPress, voici ce que nous obtiendrons comme rendu :

Pré-Développement, Custom Post Types WordPress

Avant de se lancer à corps perdu dans le développement d’un Custom Post Type pour gérer la page équipe de votre site WordPress, encore faut-il avoir quelque chose à mettre dedans. La première des choses est donc de collecter les informations qui seront utilisés par notre Custome Post type; il s’agit ici de données professionnelles comme :

  • Un nom
  • Une photo
  • Un court texte d’introduction
  • L’adresse courriel
  • Le poste

Une fois les données collectés, vient la question fondamentale, vais-je faire les choses rapidement mais salement ou vais-je prendre 15 minutes pour faire du travail de qualité ? En effet, deux façons d’implémenter une telle page existe, soit passer par le fichier functions.php, soit créer un plugin séparé.

En plus de vous permettre de continuer à mettre à jour votre thème sans venir effacer votre précédent travail, l’approche qui consiste à créer un plugin est la voie de la réutilisabilité. Ainsi, vous pourrez utiliser ce plugin dans d’autres projets WordPress.

Créer les Fichiers Plugin, Custom Post Types WordPress

Vous débutez dans l’écriture de plugin sous WordPress ? Alors avant d’aller plus loin, il vous faut lire cette page du codex.

La création de plugin n’est pas un mystère pour vous ?  Première chose à faire, créer votre fichier dans la racine /wp-content/plugins et nommé le idw-team-management.php, par exemple ;).

Quel que soit le nom du fichier que vous allez créer, prenez l’habitude de le préfixer, cela vous évitera des problèmes de compatibilité avec des plugins que vous utilisez ou utiliserez sur votre site WordPress. Ici, nous utilisons le préfixe idw.

Ouvrez le fichier dans votre éditeur de texte favori. Afin que notre plugin soit fonctionnel, il va nous falloir inclure des informations dans l’entête :

/*
Plugin Name: Nom du plugin
Plugin URI: URI de la page d'information sur le plugin
Description: Description courte
Version: La version du plugin
Author: Nom du plugin
Author URI: URI de l'auteur.
License: Votre licence, la GPLv3, bien entendu !
*/

L’information minimale demandée étant le nom du plugin, voici ce que donnerait un en-tête simplifié.

Plugin Name: IDW Team Management
Description: CPT for team management
Author: Inside da Web
Author URI: http://insidedaweb.com

Sauvegarder votre fichier – sur votre serveur – et rendez-vous sur la page des extensions.

Vous verrez que votre plugin fait maintenant parti de la liste.

Enregistrer CPT, Custom Post Types WordPress

Pour que notre CPT fonctionne, encore faut-il qu’il soit appelé par WordPress à son initialisation, et nous allons pour se faire utiliser le hook add_action, ce qui donnera plus ou moins cela :

add_action( 'init', 'idw_team_management_register’ );

Lorsque WordPress s’initialise, il fera maintenant appel à la fonction idw_team_management_register qui utilise la fonction register_post_type pour enregistrer un nouveau type de page.

register_post_type( $post_type, $args );
$post_type – Nom du type de page
$args – arguments pour définir le CPT

Dans notre cas, voici ce que cela donnera :

add_action('init', 'idw_team_management_register');
function idw_team_management_register(){
    $args = array(
        'label' => __( 'Team Management' ),
        'singular_label' => __( 'Team Member' ),
        'public' => true,
        'show_ui' => true,
        'capability_type' => 'post',
        'hierarchical' => true,
        'has_archive' => true,
        'supports' => array( 'title', 'editor', 'thumbnail' ),
        'rewrite' => array( 'slug' => 'idw-team', 'with_front' => false ),
        );

    register_post_type( 'idw-team' , $args );
}

Si  on enregistre notre fichier avec le contenu ci-dessus, et que l’on active le plugin, une nouvelle entrée va faire son apparition dans votre interface de gestion.

Si l’on souhaite ajouter une personne dans sa page dédiée, voici ce que l’on obtient :

On peut donc insérer le nom dans la partie titre, la description dans le champ de texte, et la photo par l’image à la une.

Enregistrer Taxinomies, Custom Post Types WordPress

Le mot taxinomie n’est pas propre à WordPress, loin s’en faut. Wikipédia nous dit que la taxinomie (ou taxonomie) est la science qui a pour objet de décrire les organismes vivants et de les regrouper en entités appelées taxons afin de les identifier puis les nommer et enfin les classer.

On l’aura compris, les taxinomies sous WordPress, c’est ni plus ni moins que vos catégories et mots-clés. Pour notre CPT, les custom taxonomies seront ce qui nous permettra de classer notre équipe de choc.

Retour à la fonction idw_team_management_register pour ajouter notre taxinomie personnalisée.

Il faut ajouter une ligne du type :

register_taxonomy($taxonomy, $object_type, $args);

Ce qui nous donnera :

register_taxonomy( "idw-team-department", array( "idw-team" ), array("hierarchical" => true, "label" => "Departments", "singular_label" => "Department", "rewrite" => true, "slug" => 'idw-department’ ) );

Une fois le fichier sauvegardé, retour dans l’interface d’administration pour voir apparaitre nos services sous formes de taxinomies.

On peut aussi remarquer que dans l’interface de création du billet, l’on retrouve maintenant nos services, ou departments en anglais.

Maintenant que nous avons implémenté la gestion des taxinomies pour notre CPT,

Créer Champs Personnalisés, Custom Post Types WordPress

Pour que cette page de gestion réponde à 100% de nos besoins, il va falloir ajouter les champs courriel et poste occupé. On appel ce type d’information post metadata et on peut les retrouver dans la table postmeta.

Comme d’habitude, on appel la fonction de hook add_action pour ajouter nos metadatas lors de l’initialisation de l’interface d’administration.

add_action( 'admin_init', 'idw_team_management_meta_box' );

Notre fonction idw_team_management_meta_box va créer ces metaboxes grâce à la fonction add_meta_box qui ressemble à cela :

add_meta_box( $id, $title, $callback, $post_type, $context, $priority, $callback_args );

Et dans notre cas, voici ce que cela donnera :

function idw_team_management_meta_box(){
   add_meta_box( 'iwb-team-meta-box', __( 'Aditional Info' ), 'idw_team_management_meta_options', 'idw-team', 'normal', 'high' );
}

Maintenant, il nous faut définir la fonction de rappel – callback – qui se chargera d’afficher nos champs dans les metas.

function idw_team_management_meta_options(){
    global $post;

    wp_nonce_field( 'add-myfields_' . $post->ID, 'idw_nonce' );

    $idw_team_custom = get_post_custom( $post->ID );
    $idw_team_mail = ( isset( $idw_team_custom['idw_team_mail'][0] ) ) ? $idw_team_custom['idw_team_mail'][0] : '';
    $idw_team_position = ( isset( $idw_team_custom['idw_team_position'][0] ) ) ? $idw_team_custom['idw_team_position'][0] : '';


    echo '<div>';
    echo '<div><label>' . __( 'Position' ) . '</label><input type="text" name="idw_team_position" value="' . esc_attr( $idw_team_position ) . '"></div>';
    echo '<div><label>' . __( 'E-mail' ) . '</label><input type="email" name="idw_team_mail" value="' . esc_attr( $idw_team_mail ) . '"></div>';
    echo '</div>'; 
}

Il est possible de personnaliser l’affichage grâce aux CSS; ce qui donnerait par exemple :

echo '<style>
        .iwb-team-extras label{
            display: inline-block;
            width: 10%;
        }
        .iwb-team-extras input{
            width: 40%;
        }
    </style>';

Après avoir sauvegardé le fichier, retour sur la création d’un membre de votre équipe, etOh magie, vos champs personnalisés sont apparues.

Enregistrer les Champs Personnalisés, Custom Post Types WordPress

Maintenant que l’on peut saisir des informations dans nos champs personnalisés, reste à les enregistrer lorsque nous enregistrons notre billet. Encore une fois, la fonction de hook add_action va nous être d’une grande utilité.

add_action( 'save_post', 'idw_team_management_meta_save' );

Permettons à notre CPT de sauvegardé ces informations en créant la fonction idw_team_management_meta_save, qui viendra stocké les informations dans la base de donnée. Ce stockage d’information se fait par l’entremise d’une requête de type POST, qui se base sur la fonction update_post_meta.

function idw_team_management_meta_save(){
    global $post;
    if ( defined('DOING_AUTOSAVE') && DOING_AUTOSAVE ){
        return $post_id;
    }else{

        if ( !isset( $_POST['idw_nonce'] ) || !check_admin_referer( 'add-myfields_' . $post->ID, 'idw_nonce' ) )
        return $post_id;

        update_post_meta( $post->ID, 'idw_team_position', $_POST['idw_team_position'] );
        update_post_meta( $post->ID, 'idw_team_mail', $_POST['idw_team_mail'] );
    }
}

Créer son Shortcode, Custom Post Types WordPress

Pour mémoire, WordPress a mis en place les shortcodes avec la version 2.5. les shortcodes sont une manière simple d’insérer des fonctionnalités dans du contenu, qui normalement demanderait beaucoup de code.

Le but de notre création de shortcode est ici de pouvoir insérer le shortcode [idw_team_members] dans une page ou un billet, et que celui-ci affiche notre liste d’employés.

La première des choses à faire est de définir notre shortcodes grâce à la fonction add_shortcode.

add_shortcode( $tag , $func );

Ce qui donnera chez nous :

add_shortcode( 'idw_team_members', 'idw_print_team_members' );

La première des choses, définir une variable dans laquelle on va socker l’information d’affichage.

$output = '';

La fonction idw_print_team_members permet de lister tous les services avec ses membres. Il nous faut donc commencer par avoir la liste des services. Nous utiliserons la fonction get_categories.

get_categories( $args );

Cette fonction retour un tableau de type objet catégorie, qui correspondra avec nos paramètres d’entrés.

Les arguments que nous allons utiliser sont :

$departmant_args = array(
		'taxonomy' => 'idw-team-department ',
		'hide_empty' => '1',
		'orderby' => 'id'
	);

Il faut utiliser une boucle de type foreach pour boucler dans la liste des services.

$iwb_team_departmants = get_categories( $departmant_args );
    foreach( $iwb_team_departmants as $departmant ):
        $output .= '<h2>' . $departmant->name. '</h2>';
    endforeach;

Maintenant, notre shortcode peut afficher le nom des services qui ont bien un membre, en H2.

Ensuite, nous allons ajouter du code dans notre boucle foreach afin d’afficher les membres de chaque service. Nous nous baserons sur la fonction standard WP_Query.

Créons notre requête :

$members_args = array(
    'post_type' => 'idw-team',
    'showposts' => -1,
    'post_status' => 'publish',
    ‘idw-team-department' => $departmant->slug
    );

$team_members = new WP_Query( $members_args );

Bouclons dans la liste des membres et stockons ces informations dans une variable d’affichage :

$output .= '<ul>';

        while ( $team_members->have_posts() ) : $team_members->the_post();

            $output .= '<div>' . get_the_post_thumbnail( get_the_ID(), 'thumbnail' ) . '</div>';
            $output .= '<div>';
            $output .= '<h3>' . get_the_title() . '</h3>';
            $output .= '<p><b>' . get_post_meta( get_the_ID(), 'idw_team_position', true ) . '</b>';
            $output .= '<br>' . get_post_meta( get_the_ID(), 'idw_team_mail', true ) . '</p>';
            $output .= '</div>';

        endwhile;

            $output .= '</ul>';

Ensuite, finissons en avec notre WP_query personnalisé en utilisant la fonction de reset :

wp_reset_postdata();

Pour finir, affichons le résultat :

echo $output;

Il est bien entendu possible d’améliorer le rendu avec un peut de CSS.

$output .= '<style>
		ul.idw-team-members{
			list-style: none;
			margin: 0;
			padding: 0;
		}
		.idw-team-member-img{
			display: inline-block;
			width: 50px;
			height: 50px;
			overflow: hidden;
		}
		.idw-team-member-img img{
			width: 100%;
			height: auto;
		}
		.idw-team-member-infos{
			display: inline-block;
			width: 200px;
			font-size: 12px;
		}
		.idw-team-member-infos h3{
			font-size: 14px;
		}
	</style>';

Bien entendu, notre exemple est plutôt léger dans l’utilisation des CSS. Vous pourrez par exemple le rendre plus responsive ou encore penser à ajouter des déclarations conditionnelles pour l’affichageinline-block pour toutes les versions d’IE inférieurs à la version 8.

Tester le Résultat, Custom Post Types WordPress

Pour conclure cette introduction aux CPT par l’exemple, rien de mieux que de voir le résultat de notre travail. Alors avant de voir le résultat, on partira du principe que vous avez ajouté des membres et des services. Une fois la chose faite, insérez votre shortcode dans un billet ou un article.

Vous pouvez aussi passer par l’insertion dans le code de cette manière :

<?php echo do_shortcode( '[idw_team_members]' ); ?>

Maintenant que tout est en place, voyons le rendu de cette page.

Et voila, notre CPT est maintenant en place.

Une fois que l’on sait comment s’y prendre, les CPT sont d’une simplicité déconcertantes à utiliser, c’est aussi ça la magie de WordPress.

Merci de nous aider à nous faire connaitre ;)

Il suffit de cliquer sur l'un de ces boutons :



          


Inscrivez-vous à notre Newsletter

 
Mots Clés Référencement : Article Astuces WordPress Conseils WordPress Débutant WordPress Formation WordPress Guide Wordpress

Qui à écrit l'article "WordPress, les Custom Post Types par l’Exemple" ?

Je suis développeur web depuis 5 ans, et j'ai découvert WordPress en 2010 pour un projet personnel et sa simplicité de prise en main m'a déconcerté. J'ai choisi de me spécialiser sous WordPress lorsque j'ai intégré l'équipe de développement d'Inside Da WeB. Depuis, je me suis consacré à me perfectionner sur la création d'interfaces personnalisées et de l'intégration du design sous WordPress. ?

Voir tous les billets écrits par

9 Commentaires pour "WordPress, les Custom Post Types par l’Exemple"

  1. Julio Potier (BoiteAWeb) 24 septembre 2012 à 8 h 50 min · Répondre

    Bonjour

    Je ne te connais pas, d’où sors-tu ? ;)
    Très bon tuto, complet comme il faut, rien d’inutile. Je partage de suite sur Twitter !
    Ca va servir à pas mal de monde je suis sûr !

    Par contre, j’ai quelques points à te signaler niveau sécurité ou choses bizarres (mon dada !)
    1) Dans la fonction de meta_box, cette ligne ne sert à rien  » if ( defined( ‘DOING_AUTOSAVE’ ) && DOING_AUTOSAVE ) return $post_id; » ça doit être un reste de copier/coller d’une fonction servant à un ‘save_post’.
    2) Tu utilises le hook « admin_init » pour la meta_box, hors « add_meta_boxes » est là pour ça.
    3) Si je n’ai encore rien entré dans le champ de meta box, la ligne « $idw_team_custom['idw_team_mail'][0] » va retourner une notice car la clé 0 de ce tableau n’existe pas.
    4) get_post_custom() pourrait être remplacé par « post_custom( ‘idw_team_mail’ ); » ou « get_post_meta( $post->ID ) » qui depuis WP 3.4 accepte un seul paramètre car est devenue un wrapper de « get_metadata() ».
    5) Dans les input tu fais `value= »‘ . $idw_team_position . ‘ »` mais cette variable vient de la BDD est n’est pas sanitisée, il te faut faire : value= »‘ . esc_attr( $idw_team_position ) . ‘ » sinon une faille XSS existe.
    6) Lors des « update_post_meta() » il te manque un token de sécurité, pour se faire, ajoute « wp_nonce_field( ‘add-myfields_’ . $post->ID, ‘idw_nonce’ ); » dans ta fonction qui imprime les input de meta box puis dans le save posst vérifie avec « check_admin_referer( ‘add-myfields_’ . $post->ID, ‘idw_nonce’ ); ».
    7) Un « $output .= ‘… » qui se trouve en plein milieu du contenu ? Berk :p 9a se mets dans le header ça ;)

    Merci encore, n’hésite pas à me poser des questions ici ou sur skype (julio.boiteaweb)
    Julio Potier (BoiteAWeb) Articles récents..Les 10 commandements pour bien choisir son plugin WordPressMy Profile

  2. Chauvel 5 octobre 2012 à 11 h 12 min · Répondre

    Bonjour,

    Merci pour ce tutoriel.
    Je bloque sur « Enregistrer les Champs Personnalisés, Custom Post Types WordPress »

    J’ai repris tout le code, par contre les champs personnalisés ne s’enregistrent pas ?
    Si vous pouviez m’aider.

    Merci

    Eric

  3. Pierrault 6 novembre 2012 à 11 h 45 min · Répondre

    Bonjour je suis en train de refaire le site de mon boulot (bureau de production) et je suis tombé sur ton tuto. Ni 1 ni 2 je me suis dis c’est génial pour afficher les infos de nos artistes, et par groupe en plus c’est génial.

    Petit hic j’ai un bug ( « unexpected T_STRING ») à la ligne 15… soit la première que tu donnes. J’ai eu beau bricoler un peu du haut de mes faibles connaissances, rien à faire.

    J’ai même réessayé en ne faisant que des copier-coller de ton code… Dans ce cas le message d’erreur devient :
    « L’extension a généré 719 caractères d’affichage inattendu lors de l’activation » :(

    As tu une idée de la manip à faire ?

  4. developpeur 23 mai 2013 à 16 h 37 min · Répondre

    merci pour le tuto. A noter que (je ne sais pas si ca passera avec l’editeur) que dans le workflow [code]register_taxonomy( "idw-team-department" [/code] ne passe pas, ca renvoie une erreur « Call to a member function add_rewrite_tag() on a non-object in », il faut passer via la pile et l’enregistrer dans une fonction : [code] function register_my_taxonomy(){
    register_taxonomy( "idw-team-department",
    "idw-team" ,
    array("hierarchical" => true,
    "label" => "Departments",
    "singular_label" => "Department",
    "rewrite" => true, // a true, ca ne marche pas
    "slug" => 'idw-department' )
    );
    }

    add_action( 'init', 'register_my_taxonomy' );
    [/code]
    Merci pour le coup de pouce. A ++

  5. Communiqués de presse gratuits 21 juillet 2013 à 11 h 40 min · Répondre

    Bonjour,

    Ce tutoriel est en effet complet et bien réalisé, cependant je me demande s’il est bien utile de créer un plugin juste pour présenter son équipe ou alors, j’ai loupé quelque chose, non?
    En effet, ne dit-on pas que l’excès de plugins nuit aux plugins et surtout à la vitesse de chargement de votre site?
    Alors, je vous remercie de m’éclairer sur la réelle utilité de créer un tel plugin, car je n’ai pas la science infuse.

    Cordialement,

    Bruno
    Communiqués de presse gratuits Articles récents..Pourquoi acheter un thème premium pour son WordPress?My Profile

Ils en parlent sur le Web

  1. WordPress, les Custom Post Types par l'Exemple - Blog WordPress | Quand la communication passe au web | Scoop.it
  2. WordPress, les Custom Post Types par l’Exemple | Veille WordPress - MonBlogPro.fr | Scoop.it
  3. WordPress, les Custom Post Types par l'Exemple - Blog WordPress | Agence WordPress | Scoop.it
  4. Wordpress | Pearltrees

Laisser un commentaire

CommentLuv badge

comm comm comm