Ce tuto est la 3eme 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 – Plugin portfolio dynamique

Dans ce tuto nous allons créer une première version fonctionnel pour un plugin portfolio, puis nous allons l’améliorer au fur et à mesure des tutos.

1. Pour créer un plugins WordPress, il faut un dossier dans wp-content/plugins (pas obligatoire si le plugins peu tenir dans un seul fichier php) puis dans ce dossier il faut créer un fichier php avec le même nom que le dossier.

Veuillez bien choisir un nom unique pour éviter les conflits de plugins, n’utilisez pas “Portfolio” par exemple, vous pouvez reprendre votre pseudo partiellement ou complétement.

Pour moi c’est hadouweb-portfolio.

Donc dans le fichier php (hadouweb-portfolio/hadouweb-portfolio.php).

Il faut ajouter ça :

<?php
/**
 * Plugin Name: Hadouweb Portfolio Isotope
 * Plugin URI: hadouweb.fr
 * Description: Un portfolio dynamique avec Isotope et Fancybox.
 * Version: 0.1
 * Author: Nicolas Le Breton
 * Author URI: https://hadouweb.fr
 * License: GPL2
 */

Je vous laisse changer les informations. Il ne faut rien d’autre pour avoir votre premier plugin 🙂 allez voir dans “Extensions“, vous devriez voir quelques choses de ce genre :

2. Maintenant, toujours dans ce fichier il va falloir rajouter tout ce qu’on devait charger dans le fichier fonction.php ou portfolio.php

Ce qui nous donne ça :

<?php
/**
 * Plugin Name: Hadouweb Portfolio Isotope
 * Plugin URI: hadouweb.fr
 * Description: Un portfolio dynamique avec Isotope et Fancybox.
 * Version: 0.1
 * Author: Nicolas Le Breton
 * Author URI: https://hadouweb.fr
 * License: GPL2
 */

function custom_post_type() {

    $labels = array(
        'name'                => ( 'Portfolio' ),
        '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' ),
        'public'              => true,
        'show_ui'             => true,
        'show_in_menu'        => true,
        'show_in_admin_bar'   => true,
        'menu_position'       => 2,
        'menu_icon'           => 'dashicons-format-gallery',
        'can_export'          => true,
        'has_archive'         => true,
        'exclude_from_search' => false,
        'publicly_queryable'  => false,
        'capability_type'     => 'page',
    );
    register_post_type( 'portfolio', $args );

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


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


function portfolio_scripts() {
    wp_enqueue_script( 'isotope',  plugins_url() . '/hadouweb-portfolio/js/isotope.min.js', array(), '2.0.0', true );
    wp_enqueue_script( 'portfolio-script',  plugins_url() . '/hadouweb-portfolio/js/portfolio.js', array(), '0.1', true );
    wp_enqueue_style( 'portfolio-css',  plugins_url() . '/hadouweb-portfolio/css/portfolio.css' );
}
add_action( 'wp_enqueue_scripts', 'portfolio_scripts' );

N’oubliez pas de copier le dossier css et js dans votre dossier plugin et de changer l’url des fichiers à charger.

Je vous remet ici les fichiers :

isotope.min.js : voir l’url ici

portfolio.js

(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);

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;

}

3. Ajouter fancybox pour ouvrir les images en popup.

Fancybox n’est pas forcément la librairie la plus légère pour les lightbox mais elle à le mérite d’être stable et connus.

Tout comme Isotope, il faut télécharger et charger la librairie dans notre plugin.

1. Télécharger le zip ici.

2. Copier le fichier jquery.fancybox.pack.js dans le dossier js, je le renomme en fancybox.min.js pour que ce soit plus pratique.

3. Faite la même chose avec jquery.fancybox.css et les images/sprites.

4. Il va falloir modifier le fichier fancybox.css, les images sont chargées à la racine du fichier css, sauf que c’est mieux de mettre les images dans un dossier image ou img, vous pouvez facilement faire une modification général avec notepad par exemple en utilisant le raccourcie ctrl+h :

Rechercher : url(‘ et remplacer par url(‘../img/

5. Pour finir il faut charger le js et le css de fancybox :

function portfolio_scripts() {
    // Scripts
    wp_enqueue_script( 'isotope',  plugins_url() . '/hadouweb-portfolio/js/isotope.min.js', array(), '2.0.0', true );
    wp_enqueue_script( 'portfolio-script',  plugins_url() . '/hadouweb-portfolio/js/portfolio.js', array(), '0.1', true );
    wp_enqueue_script( 'fancybox-script',  plugins_url() . '/hadouweb-portfolio/js/fancybox.min.js', array(), '2.1.5', true );

    // Styles
    wp_enqueue_style( 'portfolio-style',  plugins_url() . '/hadouweb-portfolio/css/portfolio.css' );
    wp_enqueue_style( 'fancybox-style',  plugins_url() . '/hadouweb-portfolio/css/fancybox.css' );
}
add_action( 'wp_enqueue_scripts', 'portfolio_scripts' );

4. Modifier la vue pour ajouter le lien de la popup.

Dans votre modèle de page repérer la boucle et ajouter le lien :

            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")); ?>

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

            <?php endwhile; ?>

Ajouter ce petit code jQuery pour dire que vous voulez appeler fancybox sur la classe fancybox

Vous pouvez placer ce code dans le fichier portfolio.js à la suite de celui sur le on click

/**
 * Created by Nicolas on 17/06/2014.
 */
(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 });
        });

        // Fancybox
        $(".fancybox").fancybox({
            maxWidth	: 800,
            maxHeight	: 600,
            fitToView	: false,
            width		: '70%',
            height		: '70%',
            autoSize	: false,
            closeClick	: false,
            openEffect	: 'elastic',
            closeEffect	: 'elastic'
        });

    });
})(jQuery);

5. Pour conclure on va travailler la navigation de notre portfolio quand l’image est ouverte en grande.

La version simple.

Ajouter l’attribut rel=”all” sur le lien :

<a class="fancybox" rel="all" href="<?php echo $url ?>">

Maintenant vous pouvez naviguer de gauche à droite dans TOUT votre portfolio.

Le problème c’est que vous voulez pouvoir naviguer dans la catégorie en cours.

Par exemple si vous sélectionné le filtre “Logo” et que vous ouvrez en grand l’un des logos, vous ne voulez pas voir apparaitre une réalisation de site internet juste après…

Il va falloir faire un petit script pour changer le “rel” dynamiquement.

        $("#filters button").click(function(){
            var filter = $(this).data( "filter" );
            var item = $('.isotope').find('.element-item' + filter);
            $(item).find('.fancybox').attr('rel', filter);
        });

Dans le prochain tuto nous allons remplacer le modèle de page par un shortcode pour avoir un plugin portfolio réutilisable facilement.

En bonus le plugin WordPress en version 0.1

[download id=”148″]

Pour utilisez ce plugin il faut une vue, voici le code d’un modèle de page à utiliser dans votre thème :

<?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();

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

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

                <?php endwhile; ?>
            </div>
        </div><!-- #content -->
    </div><!-- #primary -->
<?php get_footer(); ?>

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