Ce tuto est la seconde 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

Objectif : Créer un portfolio WordPress avec Isotope

Réaliser un portfolio avec un design assez sympa et permettre de filtrer dynamiquement par catégorie.

Pour ce tuto on va utiliser la librairie isotope, c’est une librairie qui permet de filtrer dynamiquement, elle propose des options vraiment très puissante, je vous laisse la découvrir tranquillement et voir les exemples possible sur le site dédié.

1. On va commencer par réaliser un modèle de page pour éviter de modifier le fichier page.php du thème.

Pour créer un nouveau modèle de page, c’est très simple, il suffit de copier le fichier page.php puis le renommer comme vous voulez ( généralement en template-lenom.php )

Pour moi se sera template-portfolio.php.

Ajouter en haut de votre fichier le commentaire suivant :

<?php
/*
* Template Name: Portfolio
*/
?>

La syntaxe est très importante, si par exemple vous faite un espace entre Name et : comme “Name :” la page ne pourra pas être utilisée en tant que modèle de page.

Créez une nouvelle page et sélectionnez portfolio en tant que modèle de page.

2. Il faut maintenant charger la librairie Isotope.

Pour charger un nouveau fichier javascript avec WordPress il faut utiliser la fonction wp_enqueue_script (wp_enqueue_style pour le css).

Je vous conseil de faire un nouveau fichier php pour ne pas trop encombrer le fichier function.php de votre thème.

Personnellement je fais un dossier hadouweb à la racine de mon thème wp-content/themes/montheme/hadouweb.

Je créer un fichier portfolio.php et je copie dedans le code que j’avais précédemment effectué pour le custom post type ( tuto précédent ).

Il faut ajouter cette ligne dans le function.php de votre thème pour charger votre fichier portfolio.php.

/** Load Custom portfolio WordPress */
require_once( get_template_directory() . '/hadouweb/portfolio.php' );

Créez un nouveau dossier js dans votre dossier principal et un nouveau fichier vide nommé isotope.min.js. ( wp-content/themes/votretheme/votredossier/js/isotop.min.js ).

Copiez dans ce fichier le code de cette page : http://isotope.metafizzy.co/isotope.pkgd.min.js

Maintenant vous devez ajouter ce bout de code (dans portfolio.php ) pour charger la librairie :

/** Load Scripts portfolio WordPress */
function portfolio_scripts() {
    wp_enqueue_script( 'isotope', get_template_directory_uri() . '/hadouweb/js/isotope.min.js', array(), '2.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'portfolio_scripts' );

remplacer hadouweb par votre dossier si vous avez un autre nom.

3. On va récupérer les catégories de nos projets pour s’en servir comme filtre.

Pour récupérer les catégories du type “portfolio” il faut utiliser ce code :

            $filters = get_terms( 'project-cat' );
            foreach ($filters as $filter ) {
                echo $filter->name;
            }

Si vous utilisé les catégories par défaut de WordPress il suffit de remplacer project-cat par category, category est une taxonomy par défaut dans wordpress.

Voila le code que je vais utiliser pour mes filtres :

            <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>

Dans la boucle il faut ajouter un peu de code html et surtout récupérer nos catégories ( project-cat ), pour récupérer les taxonomys lié à nos articles. voici se qu’il faut rajouter :

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

Au final, le contenu de votre fichier devrait ressembler à ça :

<?php
/*
* Template Name: Portfolio
*/
?>
<?php get_header(); ?>
    <div id="primary">
        <div id="content" class="clearfix">
            <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->slug.'">'.$filter->name.'</button>';
                } ?>
            </div>
            <div class="isotope">
                <?php query_posts( array (
                    'post_type' => 'portfolio',
                    'posts_per_page' => -1
                ) );
                while ( have_posts() ) : the_post();
                    $filter = wp_get_post_terms( $post->ID, 'project-cat', array("fields" => "names")); ?>
                    <div class="element-item transition <?php echo $filter[0] ?>" data-category="transition">
                        <?php the_post_thumbnail('medium') ?>
                    </div>
                <?php endwhile; ?>
            </div>
        </div><!-- #content -->
    </div><!-- #primary -->
<?php get_footer(); ?>

4. Ajouter le javascript pour animer notre portfolio WordPress.

Ajouter un nouveau fichier js au même niveau que la librairie isotope.min.js.

Je le nomme portfolio.js

Le but de ce tuto n’est pas de vous expliquer comment fonctionne isotope, il y a vraiment beaucoup d’options et c’est l’une des meilleurs librairie voir la meilleur à ma connaissance qui permet de gérer des filtres, elle peu paraitre complexe au vu des exemples du site mais pas d’inquiétude.

Pour notre portfolio WordPress on à juste besoin de ce code :

(function( $ ) {
    $( function() {

        var $container = $('.isotope').isotope({
            itemSelector: '.element-item',
            layoutMode: 'fitRows'
        });

        $('#filters').on( 'click', 'button', function() {
            var filterValue = $( this ).attr('data-filter');
            $container.isotope({ filter: filterValue });
        });

    });
})(jQuery);

N’oubliez pas de charger ce fichier portfolio.js en ajoutant cette ligne dans la fonction portfolio_scripts()

    wp_enqueue_script( 'portfolio-script',  get_template_directory_uri() . '/hadouweb/js/portfolio.js', array(), '0.1', true );

5. Pour finir voici un petit code css qui permet d’avoir quelque chose de potable.

Charger le css en ajoutant cette ligne dans la fonction portfolio_scripts() :

wp_enqueue_style( 'portfolio-css', get_template_directory_uri() . '/hadouweb/css/portfolio.css', array(), '0.1', true );

Et copier ce code dans portfolio.css :

#filters .button{
    margin: 5px;
    background-color: #0FBE7C;
    border: 0 none;
    border-radius: 3px;
    color: #FFFFFF;
    cursor: pointer;
    display: inline-block;
    font-size: 16px;
    padding: 5px 25px;
    -webkit-transition: all 400ms linear;
    -moz-transition: all 400ms linear;
    -ms-transition: all 400ms linear;
    -o-transition: all 400ms linear;
    transition: all 400ms linear;
}
#filters {
    text-align: center;
}
#filters .button:hover {
    box-shadow: 0px 15px 10px -3px #000;
}
.isotope {
    margin-top: 20px;
}
.isotope .element-item {
    margin: 1%;
    width: 31%;
    height: auto;
    border-radius: 10px;
}
.isotope .element-item img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    -webkit-transition: all 400ms linear;
    -moz-transition: all 400ms linear;
    -ms-transition: all 400ms linear;
    -o-transition: all 400ms linear;
    transition: all 400ms linear;
}
.isotope .element-item:hover img {
    box-shadow: 0px 10px 10px #000;

}

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