Lipaonline

Menu

Catégorie : Codex

Créer un plugin WordPress extensible

A la recherche des bonnes pratiques pour créer un plugin WordPress (je dois revoir le code d’un plugin que j’ai codé il y a +2ans.. à l’époque, j’étais loin de connaitre aussi bien WP que maintenant), je vais vous parler d’un concept au coeur de WordPress, et pourtant assez peu utilisé des développeurs : créer des hooks (filter et action) pour ces propres plugins, et les rendre ainsi extensible.

La littérature en la matière est assez pauvre, je suis tombé sur cette article, qui m’a donné des pistes pour aller plus loin…

Pourquoi créer un plugin extensible ?

Si vous connaissez le principe des thèmes enfants, cela a à peu près les mêmes avantages, celui de permettre à d’autres, de modifier le comportement de votre plugin, sans pour autant toucher au code du plugin, et risquer de tout perdre à chaque mise à jour du plugin.

Ne vous est-il jamais arrivé de trouver le plugin « presque parfait », avec juste un petit « truc » qui ne répond pas à votre besoin ? Que faire dans ce cas ? Demander au développeur qu’il fasse une modification ? Pas sur qu’il ait le temps ou l’envie de le faire… Le refaire développer ? Cela peut couter très cher selon la complexité des modifications… alors que si le créateur du plugin avait prévu des hooks à son plugin, cela aurait été beaucoup plus simple… et si c’est un plugin payant… il vient de bêtement perdre une vente… car OUI, rendre un plugin extensible, c’est vraiment très simple !

Un exemple courant, arrivé très récemment : Sur la homepage du site d’un client, il y a un shortcode de slider reprenant les derniers articles, dans l’admin, on peut choisir de ne sélectionner qu’une catégorie, et le nombre d’article. Mais c’est tout ! Si le client veut filtrer sur une autre taxonomie, ou un Custom Post Type… cela n’est pas possible sans modification du code.

Comment écrire un plugin extensible ?

Pour cela, nous allons utiliser 4 fonctions déjà très utilisées si vous êtes un fan de Captain Hook : add_filter/apply_filter et dans une moindre mesure add_action/do_action. Pour être exhaustif, il y a aussi has_filter/remove_filter, has_action/remove_action, mais il n’est pas nécessaire d’en parler ici, pour expliquer comment cela fonctionne.

Les filtres : add_filter/apply_filter

C’est le concept le plus simple. Un filtre permet de manipuler des données (nombre, chaine, tableau…), typiquement l’exemple du slider, on va pouvoir filtrer les données qui nous intéresse. Cela peut être utile aussi pour modifier un shortcode. Dans l’article COMMENT AFFICHER VOS CUSTOM POST TYPE ? , on utilise le filtre pre_get_posts de la fonction get_posts de WordPress.

Les actions : add_action/do_action

Cette fois, on ne manipule pas des données, mais on réalise de réelles actions ( envoi d’un email, suppression d’un utilisateur, affichage d’un bouton…).

Passons à un cas concret, c’est souvent plus simple. Admettons que vous venez de créer un plugin pour gérer un petit catalogue de livres. Vous avez créé une widget pour afficher une liste de livres, le code pourrait ressembler à cela:

function widget_show_books() {
 
    $query_args = array(
        // récupérer les paramètres dans $options[] ... 
    );
 
    $books = new WP_Query( $query_args ) ;
   if( $books->have_posts() ) :
 
        echo '<div class="widget_books">';
 
            while( $books->have_posts() ) : $books->the_post()
 
                echo '<div class="widget_book">';
 
                    echo '<h3 class="widget_book_title">' . get_the_title() . '</h3>';
 
                echo '</div>';
 
            endwhile;
 
        echo '</div>';
 
    endif;
    wp_reset_postdata();
 
}

Avec ce type de code, il va falloir prévoir tous les cas de figures dans la configuration de la widget (ce qui est assez fastidieux), et le code d’affichage n’est pas modifiable. Nous allons ajouter des filtres et des actions partout ou cela semble nécessaire (vaut mieux en mettre trop que pas assez, mais pas la peine d’en mettre la où cela semble vraiment superflu.. de plus, rien ne vous empêche de faire des mises à jour de votre plugin (ou thème, cette méthode est aussi utilisable pour vos fonctions personnelles de votre thème), avec de nouveaux filtres/actions

Voici ce que nous allons « hooker » (la liste n’est pas exhaustive):

  • Modifier les paramètres de la requête WP_Query (-> filtre)
  • Ajouter du code HTML avant chaque livre, pour ajouter une vignette ( -> action)
  • Ajouter du code HTML après chaque livre, pour ajouter l’auteur ( -> action)
  • Modifier <h3 class= »widget_book_title »> , pour le SEO  (-> filtre)
function widget_show_books() {
 
    $query_args = array(
        // mettre les paramètres par défaut ... 
    );
 
    $books = new WP_Query( apply_filters( 'widget_books_query',$query_args) ) ;
   if( $books->have_posts() ) :
 
        echo '<div class="widget_books">';
 
            while( $books->have_posts() ) : $books->the_post()
                
 
                echo '<div class="widget_book">';
                do_action( 'widget_extra_data_before', get_the_ID() );
 
                    echo apply_filters( 'widget_books_title_before','<h3 class="widget_book_title">') . get_the_title() . apply_filters( 'widget_books_title_after','</h3>');
 
                do_action( 'widget_extra_data_after', get_the_ID() );
                echo '</div>';
 
            endwhile;
 
        echo '</div>';
 
    endif;
    wp_reset_postdata();
 
}

Maintenant, si on veut afficher les livres d’un auteur en particulier :

//
//Code à ajouter dans votre functions.php ou votre plugin 
//
function widget_alter_books_query( $args ) {
    $args['author'] = 3;
    return $args;
}
add_filter( 'widget_books_query', 'widget_alter_books_query' );

Pour ajouter une vignette à chaque livre

function widget_show_book_image( $book_id ) {
    echo get_the_post_thumbnail( $book_id, 'thumbnail' );
}
add_action( 'widget_extra_data_before', 'widget_show_book_image' );

Voila, maintenant à vous de jouer, plus aucune excuse pour ne pas écrire des plugins extensifs… le plus chiant fastidieux est d’écrire une documentation claire pour que les utilisateurs puissent se servir au mieux de votre plugin.

Tips WordPress : Comment afficher vos Custom Post Type ?

Pour améliorer votre blog/site, vous avez créé des Custom Post Type (avec ou sans Pods), c’est très bien.. si si je vous assure ! 😉

Maintenant, à moins que vous vouliez être le/la seul(e) à les voir (pourquoi pas ?), il va falloir les afficher non ?

Avant, je fonçais tête baissée (pas sur que ça aille plus vite mais bon…) dans le code du template pour modifier les « loop » de WordPress…

Mais ça c’était avant que je devienne pote avec Captain Hook ! 🙂

Oui, avant faire quoique se soit sous WordPress, pensez à regarder si un hook pourrait vous rendre service !

Et c’est bien sur le cas pour nos CPT…

Il s’agit du hook « pre_get_posts« , qui va nous permettre de reprendre la main, avant que WordPress ne lance sa requête.

add_filter( 'pre_get_posts', 'my_get_posts' );
 
function my_get_posts( $query ) {
 
	
		$query->set( 'post_type', array( 'post', 'livre' ) ); // livre is our Custom Post Type
 
	return $query;
}

A noter que la fonction set nous permet de modifier n’importe quel paramètre de notre requête, pour plus de détails, reportez-vous à la classe WP_Query

Le problème avec ce code, c’est qu’il va modifier toutes les requêtes de votre site ! Il faut ajouter des restrictions à l’emploi de cette fonction.

ex: afficher les CPT uniquement sur la Home, et n’affecter que la requête principale (il peut y avoir plusieurs requêtes sur une même page !)

add_filter( 'pre_get_posts', 'my_get_posts' );

function my_get_posts( $query ) {

	if ( is_home() && $query->is_main_query() )
		$query->set( 'post_type', array( 'post', 'livre' ) );

	return $query;
}

Pour ajouter nos CPT à notre flux RSS, on ajoutera la condition is_feed()… ( Conditional Tag)

Vous trouverez certainement une utilisation de ce hook… c’est une bombe non ?? 🙂

WordPress Tips : Taille des images par défaut

Lorsqu’on ajoute une image dans un article ou une page dans WordPress, il est fastidieux à chaque de devoir changer les options de cette image : avec ou sans lien, vignette ou taille normale, alignement centré ou à gauche etc…

Heureusement TooWP vous propose un petit hook pour cela 🙂

add_action( 'after_setup_theme', 'default_attachment_display_settings' );
/**
 * Set the Attachment Display Settings "Link To" default to "none"
 *
 * This function is attached to the 'after_setup_theme' action hook.
 */
function default_attachment_display_settings() {
	update_option( 'image_default_align', 'left' );
	update_option( 'image_default_link_type', 'none' );
	update_option( 'image_default_size', 'large' );
}

Explication :

image_default_align : configure l’alignement ; valeurs : left,right,center,none

image_default_link_type : pour le lien ; valeurs : file, post,custom,none

image_default_size : pour la taille de l’image ; valeurs : thumbnail, medium, large, full

La manière la plus simple de profiter de cette astuce, est d’ajouter ces lignes dans le fichier functions.php de votre thème… bientôt je vous proposerai d’autres méthodes 🙂