Ce tutoriel est la 4eme partie d’une suite qui vous permettra d’apprendre les points essentiels au 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

A ce stade notre plugin n’est pas encore autonome et seules les personnes ayant des bases dans le développement WordPress serait capable de s’en servir.

Objectif : Créer un shortcode WordPress pour notre portfolio

Transformer le modèle de page template-portfolio.php en shortcode, directement utilisable depuis une page ou un article.

1. Comment créer un Shortcode ?

Vous vous en doutez surement maintenant mais c’est encore du code à ajouter dans le function.php du thème, sauf qu’on est dans un plugin…

Il va donc falloir l’ajouter dans le fichier php principal du plugin, c’est à dire le fichier qui porte le même nom que le dossier (hadouweb-portfolio.php).

Voici à quoi ressemble la syntaxe :

function hafolio_func( $atts ) {
    $a = shortcode_atts( array(
        'cat' => 'cat1, cat2',
        'nbr' => '20',
    ), $atts );

    $result = "
        cat = ".$a['cat']."<br />
        nbr = ".$a['nbr']
    ;

    return $result;
}
add_shortcode( 'hafolio', 'hafolio_func' );

Pour la fonction “add_shortcode” le premier élément correspond au shortcode qu’il va falloir utiliser dans les pages/articles de votre site, “[hafolio]”.

Le second élément appel votre fonction, elle va recevoir en paramètre les attributs du shortcode, elle pourrait très bien être vide si votre shortcode n’a pas de paramètre.

On pourra donc indiquer quelles catégories on souhaite utiliser et combien de réalisations on veut afficher, se qui pourrait donner quelque chose de ce genre:

[hafolio cat=cat1,cat2 nbr=50]

Pour finir il faut retourner le résultat attendu, en gros il va falloir faire retourner notre template-portfolio.php

2. Intégrer template-portfolio.php dans la fonction

On aura donc besoin de cette partie :

        <div id="filters" class="button-group">
            <button class="button is-checked" data-filter="*">Tous</button>

            <?php $filters = get_terms( 'project-cat' );
            foreach ($filters as $filter ) {
                echo '<button class="button" data-filter=".'.$filter->name.'">'.$filter->name.'</button>';
            } ?>

        </div>

        <div class="isotope">

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

            while ( have_posts() ) : the_post();

                $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );
                $filter = wp_get_post_terms( $post->ID, 'project-cat', array("fields" => "names"));

                $search  = array("'", " ");
                $replace = array('-', '-');
                $filter = str_replace( $search, $replace, $filter);
                ?>

                <div class="element-item transition <?php echo $filter[0] ?>" data-category="transition">
                    <a class="fancybox" rel="all" href="<?php echo $url ?>">
                        <?php the_post_thumbnail('medium') ?>
                    </a>
                </div>

            <?php endwhile; ?>

        </div>

J’en profite ici pour faire une petite parenthèse, il s’agit de la query WordPress, dans mon modèle de page, j’utilise query_post, se qui n’est pas gênant en soit, car sur cette page, on ne devrait pas avoir d’autres requêtes, mais, pour vous expliquer la query_post, il s’agit d’une fonction qui va modifier la requête principal, c’est à dire la requête en cours.

L’avantage c’est que c’est plus rapide, ça évite d’avoir plusieurs requêtes sur la base de donnée, par contre il faut faire attention aux conflits.

Dans un shortcode, c’est à ne surtout pas utiliser, car un shortcode c’est typiquement le genre d’élément qui doit être autonome, si, par exemple, juste après notre shortcode, le template fait une query_post, et bien le shortcode risque de faire planter la prochaine query_posts

J’en profite pour vous donner un lien intéressant, le site de TweetPress.fr, il y a un article qui parle des boucles secondaires et de query_post.

http://tweetpress.fr/screencast/boucles-secondaires-wordpress/

Pour conclure il est préférable d’instancier un nouvel objet query, il faut utiliser WP_Query.

Voici se que donne la boucle seule :

    $args = array (
        'post_type' => 'portfolio',
        'posts_per_page' => $nbr
    );

    $query = new WP_Query( $args );

        if ( $query->have_posts() ) :

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

                // Ici le contenu

            endwhile;

            wp_reset_postdata();

            $result .= '</div>';

        endif;

Voici l’intégration dans la fonction du shortcode :

function hafolio_func( $atts ) {


    $a = shortcode_atts( array(
        'cat' => '',
        'nbr' => '',
    ), $atts, 'hafolio' );

    $cats = explode( ',', $a['cat'] );
    $nbr = $a['nbr'];

    if (!empty($cats)) {
        foreach ($cats as $cat ) {
            $filters[$cat] = get_term_by('slug', $cat, 'project-cat');
        }
    }else{
        $filters = get_terms( 'project-cat' );
    }

    if (empty($nbr)) {
        $nbr = '-1';
    }

    $result = '<div id="filters" class="button-group">
                    <button class="button is-checked" data-filter="*">Tous</button>';

    foreach ($cats as $cat ) {
        $result .= '<button class="button" data-filter=".'.$filters[$cat]->slug.'">'.$filters[$cat]->name.'</button>';
    }

    $result .= '</div>';

    $result .= '<div class="isotope">';

    $args = array (
        'post_type' => 'portfolio',
        'posts_per_page' => $nbr
    );

    $query = new WP_Query( $args );

        if ( $query->have_posts() ) :

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

                $url = wp_get_attachment_url( get_post_thumbnail_id($query->post->ID) );
                $filter = wp_get_post_terms( $query->post->ID, 'project-cat');

                $result .= '<div class="element-item transition '.$filter[0]->slug.' data-category="transition">
                                    <a class="fancybox" rel="all" href="'.$url.'">
                                        '.get_the_post_thumbnail($query->post->ID, 'medium').'
                                    </a>
                                </div>';

            endwhile;

            wp_reset_postdata();

            $result .= '</div>';

        endif;

    return $result;
}
add_shortcode( 'hafolio', 'hafolio_func' );

A ce stade vous avez déjà un shortcode utile et fonctionnel, si vous ajoutez [hafolio] dans un article ou une page vous allez avoir votre portfolio, mais vous allez également avoir toute les catégories et un nombre illimité de réalisation.

3. Utiliser les paramètres du shortcode.

Le but est de pouvoir faire un shortcode comme ceci [hafolio cat=cat1,cat2 nbr=50]

Pour ça il faut déclarer les attributs comme ci-dessous :

    $a = shortcode_atts( array(
        'cat' => '',
        'nbr' => '',
    ), $atts );

    var_dump($a);

Notre fonction va recevoir les arguments, on peu facilement tester avec le var_dump($a).

Ce qui nous donne :

Dans un premier temps, je recommande toujours de préparer une valeur par défaut si jamais l’utilisateur ne souhaite pas utiliser cat ou nbr, il faut quand même afficher quelque chose.

    $cats = explode( ',', $a['cat'] );

    if (!empty($cats)) {
        foreach ($cats as $cat ) {
            $filters[$cat] = get_term_by('slug', $cat, 'project-cat');
        }
    }else{
        $filters = get_terms( 'project-cat' );
    }

Si l’attribut cat du shortcode contient bien quelque chose alors la variable $filters utilisera les valeurs de cat, sinon, filters reprendra TOUTE les catégories du portfolio.

Il faut récupérer le terme complet de la catégorie, l’utilisateur va saisir le slug dans le shortcode et dans notre fonction on ne pourrait utiliser que ce slug (my-categorie) alors qu’on a besoin du nom pour un affichage plus sympa (My catégorie).

Donc pour pouvoir faire $filters->name il nous faut avant utiliser la fonction get_term_by pour récupérer le terme complet.

Même principe pour l’attribut nbr de notre shortcode.

    if (empty($nbr)) {
        $nbr = '-1';
    }

Dans le prochain tutoriel, nous allons améliorer notre plugin avec plusieurs petit détails, comme par exemple faire un bouton dans l’éditeur pour notre shortcode.

Télécharger le plugin

[download id=”324″]

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