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.