Ce tuto est la première partie d’une suite qui vous permettra d’apprendre les points essentiels du développement WordPress.

J’ai voulu rendre la lecture de cette formation plus attractif en essayant de vous faire créer un plugin portfolio dynamique et paramétrable depuis l’admin.

1. Nouveau type de contenu (Custom Post Type)
2. Création d’un portfolio WordPress avec Isotope
3. Créer un plugin portfolio avec WordPress
4. Créer un shortcode WordPress

Les Custom Post Type sont présents depuis la version 3.x de WordPress.
Ils permettent de créer des entités, une sorte de nouveau type de contenu (des voitures, campings, type de produit…).

Ces entités utilisent la même structure que les articles de WordPress, sauf que vous allez pouvoir customiser vos “articles” comme bon vous semble, d’ailleurs “Custom Post Type” signifie “Type de poste (ou article) personnalisé”.

Vous allez pouvoir en faire quelque chose de plus léger (comme n’afficher que le titre et/ou le contenu) et surtout avoir un menu différent et ne pas tout mettre dans “article”.

Cas concret

Nous allons réaliser un nouveau type de contenu pour un portfolio avec un menu sur la gauche dans l’admin.

Nous afficherons l’image et le titre dans le fichier page.php (pour l’instant).

1. Allez dans le fichier function.php de votre thème, c’est dans ce fichier qu’on va pouvoir spécifier à WordPress qu’on souhaite ajouter, modifier ou supprimer certaines choses.

Copier ce code à la fin de votre fichier wp-content/themes/votretheme/functions.php

// Add Custom Post Type
function custom_post_type() {
 
 
    $labels = array(
        'name'                => ( 'Portfolio' ), // Le nom de mon menu
        'singular_name'       => ( 'Portfolio' ),
        'all_items'           => ( 'Tous les projets' ),
        'view_item'           => ( 'Voir le projet' ),
        'add_new_item'        => ( 'Ajouter un projet' ),
        'add_new'             => ( 'Ajouter' ),
        'edit_item'           => ( 'Editer un projet' ),
        'update_item'         => ( 'Mettre à jour' ),
        'search_items'        => ( 'Rechercher un projet' ),
        'not_found'           => ( 'Aucun résultat' ),
        'not_found_in_trash'  => ( 'Aucun résultat dans la corbeille' )
    );
    $args = array(
        'labels'              => $labels,
        'supports'            => array('title', 'thumbnail' ), // Permet de définir les éléments à ajouter pour notre type de contenu.
        'taxonomies'          => array( 'category' ),
        'public'              => true,
        'show_ui'             => true,
        'show_in_menu'        => true,
        'show_in_admin_bar'   => true, // Pour l'ajouter dans la barre d'admin en haut dans l'onglet "Créer"
        'menu_position'       => 2, // L'ordre d'affichage dans le menu à gauche
        'menu_icon'           => 'dashicons-format-gallery', // Nom de l’icône
        'can_export'          => true,
        'has_archive'         => true,
        'exclude_from_search' => false,
        'publicly_queryable'  => true,
        'capability_type'     => 'page', // Permet de spécifier que l'utilisateur possède les mêmes droits qu'il a sur les pages
    );
    register_post_type( 'portfolio', $args );

}
add_action( 'init', 'custom_post_type', 0 );
 
 

Le add_action, à la fin du code, est une fonction qui va faire appel à un hook de WordPress, dans ce cas il s’agit d’init (un événement qui est lancé après le chargement de wordpress).

Le second argument d’add_action (“custom_post_type”) fait appel à la fonction du dessus, vous pouvez le nommer comme bon vous semble du moment qu’il porte le même nom que votre fonction.

Pour l’icône de votre menu, je vous conseille d’aller sur ce site http://melchoyce.github.io/dashicons/ et d’indiquer le nom de l’icône souhaité pour l’argument ‘menu_icone’.

Dans mon cas, je veux quelque chose en rapport avec une image, donc dashicons-format-gallery correspond très bien 🙂

Je ne m’attarde pas trop sur l’explication des autres arguments, la documentation de WordPress est très bien faite. voir le codex

2. Ouvrez le fichier page.php de votre thème ou créez un nouveau modèle de page et ajouter/remplacer par ce code :

// Loop for Portfolio
<?php get_header(); ?>


<div id="primary">
    <div id="content" class="clearfix">
        <?php

        query_posts( array (
        'post_type' => 'portfolio',
        'posts_per_page' => -1
        ) );

        while ( have_posts() ) : the_post(); ?>

        <h2><?php the_title() ?></h2>
        <?php the_post_thumbnail('medium') ?>

			<?php endwhile; ?>

    </div><!-- #content -->
</div><!-- #primary -->


<?php get_footer(); ?>

En fait, il suffit d’ajouter qu’une seule chose à la classique boucle de wordpress, juste au dessus du while ou de votre if (have_posts()) il faut utiliser la fonction query_posts.

   query_posts( array (
                'post_type' => 'portfolio',
                'posts_per_page' => -1
            ) );

Par défaut, l’argument ‘post_type‘ vaut ‘post‘ mais on souhaite récupérer le type ‘portfolio‘, il suffit juste de l’indiquer à WordPress avec query_post.

La valeur -1 de ‘posts_per_page‘ signifie illimité.

Pour se qui concernant la boucle

            while ( have_posts() ) : the_post(); ?>

                <h2><?php the_title() ?></h2>
                <?php the_post_thumbnail('medium') ?>

            <?php endwhile; ?>

On peut traduire le code du dessus par, tant qu’il y a des articles dans ‘portfolio‘ tu fait ça :

the_post() -> Initialise l’article.
the_title() -> affiche le titre de l’article.
the_post_thumbnail(‘medium’) -> Affiche l’image à la une en taille moyenne.

3. Je vous conseille de mettre ou remettre à jour vos permaliens dans l’administration (généralement sur “Nom de l’article”).

Si vous allez sur l’une de vos réalisations dans portfolio et que vous demandez à WordPress d’afficher cette réalisation, vous allez arriver sur une url de ce genre : http://localhost/CPT/portfolio/image1/.

Le problème est que nous n’avons rien dans cette page, vu qu’on veux utiliser seulement le titre et l’image à la une.

Votre thème ne gère pas forcément ce cas de figure, et en plus, Google va référencer les pages de vos réalisations, alors que vous n’avez pas forcément envie.

Il faudrait donc désactiver ces pages et afficher une erreur 404, il faut revenir au code précédent et passer ‘publicly_queryable’=>true, à false.

4. Comment avoir une gestion des catégories exclusivement dédiées à notre portfolio ?

Il faut utiliser les taxonomys.

Voici une démarche de comment se débrouiller seul en utilisant le codex WordPress.

Maintenant que vous savez qu’il faut utiliser les taxonomys vous devriez être capable de finir seul 🙂 ou presque, une petite recherche google avec en mots clés “codex taxonomy” et hop, le premier lien http://codex.wordpress.org/Taxonomies semble déjà nous en apprendre plus.

Je remarque dans le menu de droite “3.2 Registering a taxonomy”, c’est exactement ce qu’il nous faut 🙂

WordPress nous indique qu’il faut utiliser la fonction register_taxonomy().

Voici au minimum ce que nous avons besoin :

// Add Custom Category
function portfolio_category() {
    register_taxonomy(
        'project-cat',
        'portfolio',
        array(
            'label' => __( 'Catégories' ),
            'rewrite' => array( 'slug' => 'project-cat' ),
            'hierarchical' => true,
        )
    );
}
add_action( 'init', 'portfolio_category' );

Maintenant que vous avez votre propre catégorie indépendante pour votre portfolio, il va falloir faire une petite modification, dans la fonction custom_post_type(), sinon vous allez avoir 2 gestionnaires de catégories pour votre portfolio.

Pour garder la catégorie (taxonomy) nouvellement ajouté, vous devez supprimer cette ligne:

        'taxonomies'          => array( 'category' ),

Quelques explications pour la fonction portfolio_category() :

“project-cat” fait référence à la taxonomy, c’est l’identifiant de votre taxonomy.

“portfolio” fait référence à votre custom post type, si vous remplacez “portfolio” par “post”, vous allez avoir 2 fois catégorie dans le menu des articles.

Le label est le nom qui sera affiché.

“rewrite” permet de définir une partie de l’url de vos catégories, par exemple http://monsite/portfolio/voiture

Hierarchical est une option assez importante, si c’est “true” alors vous allez avoir un gestionnaire de catégorie à droite dans vos projets ainsi qu’en sous menu de portfolio, mais vous pouvez mettre “false” pour voir ce que ça donne :), la gestion sera par mots clés (tags).

WordPress se charge de tout, si vous allez dans “Catégories”, vous allez voir que le bouton n’affiche plus “Ajouter une nouvelle catégorie” mais “Ajouter un nouveau mot-clé”.

On va rester avec l’attribut hierarchical à true pour notre portfolio.

1. Nouveau type de contenu (Custom Post Type)
2. Création d’un portfolio WordPress avec Isotope
3. Créer un plugin portfolio avec WordPress
4. Créer un shortcode WordPress