Dans ce tutoriel, nous allons vous guider à travers la création d’une extension ou plugin WordPress simple mais fonctionnel. Un autre chapitre, plus abordable pour les débutants, est accessible pour apprendre à coder un plugin WordPress simple.
Ce plugin WordPress permettra aux utilisateurs de voter « J’aime » ou « J’aime Pas » sur les articles, à la manière de Reddit. Nous aborderons toutes les étapes nécessaires, depuis la configuration de l’environnement de développement jusqu’à la mise en œuvre des fonctionnalités et l’intégration avec l’interface utilisateur.
L’ensemble des scripts de ce plugin WordPress sont consultable et téléchargeable depuis mon dépôt GitHub : https://github.com/crea-troyes/wp-reddit
- 1. Introduction au plugin WordPress
- 2. Étape 1 : Création du plugin WordPress
- 3. Étape 2 : Création de la base de données pour stocker les votes
- 4. Étape 3 : Ajout des fonctionnalités du plugin
- 5. Étape 4 : Affichage des résultats sur l'article
- 6. Étape 5 : Optimisation du plugin et SEO
- 7. Étape 6 : Test et déploiement
- 8. Étape 7 : Personnalisation et Amélioration du Plugin
- 9. Étape 8 : Intégration avec les thèmes WordPress
- 10. Étape 9 : Déploiement et Mise à Jour du Plugin
- 12. Étape 10 : Optimisation SEO du Plugin
- 14. Étape 11 : Ajouter une interface d'administration pour le plugin
- 16. Étape 12 : Sécuriser le Plugin WordPress
- 17. Étape 13 : Étendre le Plugin WordPress
- 18. Conclusion sur les fonctionnalités avancées
1. Introduction au plugin WordPress
Un plugin WordPress est un module complémentaire qui permet d’ajouter des fonctionnalités supplémentaires à un site WordPress. Dans ce tutoriel, nous allons créer un plugin WordPress qui permet aux visiteurs de voter « J’aime » ou « J’aime Pas » sur les articles d’un blog.
Cette fonctionnalité est populaire sur de nombreux sites de contenu, notamment Reddit, et permet d’engager les utilisateurs de manière ludique. Vous allez apprendre à coder un plugin WordPress à partir d’un cas concret.
Pourquoi créer un plugin pour WordPress ?
Créer un plugin personnalisé permet de répondre à des besoins spécifiques qui ne sont pas couverts par les plugins existants. En développant votre propre plugin, vous avez un contrôle total sur son fonctionnement et son intégration dans votre site WordPress.
2. Étape 1 : Création du plugin WordPress
2.1. Créer un dossier pour votre plugin
La première étape consiste à créer un dossier dans le répertoire wp-content/plugins de votre installation WordPress. Nommons ce dossier like-dislike-plugin.
/wp-content/plugins/like-dislike-plugin/2.2. Créer le fichier principal du plugin
À l’intérieur de ce dossier, créez un fichier PHP qui contiendra le code principal de votre plugin. Nommons-le like-dislike-plugin.php.
Voici le code de base pour ce fichier :
<?php
/*
Plugin Name: Like Dislike Plugin
Description: Ajoute un système de "J'aime / J'aime Pas" aux articles WordPress.
Version: 1.0
Author: Alban GUILLIER
License: GPL2
*/
// Code du plugin viendra ici
?>Ce code de base est essentiel pour que WordPress reconnaisse votre plugin.
3. Étape 2 : Création de la base de données pour stocker les votes
Dans cette étape, nous allons créer une table dans la base de données de WordPress pour stocker les votes « J’aime » et « J’aime Pas ».
3.1. Activation du plugin
Nous allons utiliser une fonction d’activation pour créer la table dans la base de données lorsque le plugin est activé. Ajoutez au fichier like-dislike-plugin.php les lignes de codes suivantes :
register_activation_hook( __FILE__, 'ldp_create_table' );
function ldp_create_table() {
global $wpdb;
$table_name = $wpdb->prefix . 'like_dislike_votes';
// SQL pour créer la table
$charset_collate = $wpdb->get_charset_collate();
$sql = "CREATE TABLE $table_name (
id INT NOT NULL AUTO_INCREMENT,
post_id INT NOT NULL,
user_ip VARCHAR(100) NOT NULL,
vote ENUM('like', 'dislike') NOT NULL,
PRIMARY KEY (id),
UNIQUE KEY user_vote (post_id, user_ip)
) $charset_collate;";
// Exécute la requête
require_once( ABSPATH . 'wp-admin/includes/upgrade.php' );
dbDelta( $sql );
}3.2. Explication du code
register_activation_hook: Cette fonction permet de lancer la fonctionldp_create_tablelorsque le plugin est activé.dbDelta: Une fonction de WordPress qui gère la création ou la mise à jour des tables dans la base de données. Elle garantit que la table est correctement créée.vote ENUM('like', 'dislike'): Cette colonne permet de stocker le type de vote (J’aime ou J’aime Pas). En savoir plus sur Le type ENUM en SQL.user_ip: Pour éviter que le même utilisateur ne vote plusieurs fois, nous enregistrons l’adresse IP de l’utilisateur.
4. Étape 3 : Ajout des fonctionnalités du plugin
4.1. Création des boutons « J’aime / J’aime Pas »
Dans cette étape, nous allons ajouter les boutons « J’aime » et « J’aime Pas » sur les articles. Pour ce faire, nous devons ajouter un code qui insère ces boutons dans le contenu de chaque article.
function ldp_add_buttons($content) {
if (is_single()) {
global $post;
$post_id = $post->ID;
$like_button = '<button class="ldp-like" data-post-id="' . $post_id . '">J\'aime</button>';
$dislike_button = '<button class="ldp-dislike" data-post-id="' . $post_id . '">J\'aime Pas</button>';
// Ajoute les boutons après le contenu de l'article
$content .= $like_button . ' ' . $dislike_button;
}
return $content;
}
add_filter('the_content', 'ldp_add_buttons');4.2. Explication du code
is_single(): Cette fonction vérifie si nous sommes sur une page d’article.- Nous ajoutons deux boutons à l’article, avec des classes
ldp-likeetldp-dislike, qui permettront de distinguer les actions de vote.
4.3. Gestion des votes
Nous allons maintenant ajouter la logique pour enregistrer les votes lorsque les utilisateurs cliquent sur les boutons.
Ajoutez ce code pour gérer les votes :
function ldp_handle_vote() {
if (isset($_POST['post_id']) && isset($_POST['vote'])) {
global $wpdb;
$post_id = intval($_POST['post_id']);
$vote = sanitize_text_field($_POST['vote']);
$user_ip = $_SERVER['REMOTE_ADDR'];
$table_name = $wpdb->prefix . 'like_dislike_votes';
// Vérifier si l'utilisateur a déjà voté
$existing_vote = $wpdb->get_var($wpdb->prepare(
"SELECT vote FROM $table_name WHERE post_id = %d AND user_ip = %s",
$post_id, $user_ip
));
if ($existing_vote) {
// L'utilisateur a déjà voté, on met à jour le vote
$wpdb->update(
$table_name,
['vote' => $vote],
['post_id' => $post_id, 'user_ip' => $user_ip]
);
} else {
// L'utilisateur n'a pas encore voté, on insère un nouveau vote
$wpdb->insert(
$table_name,
['post_id' => $post_id, 'user_ip' => $user_ip, 'vote' => $vote]
);
}
// Renvoi une réponse JSON
echo json_encode(['status' => 'success']);
}
wp_die();
}
add_action('wp_ajax_ldp_vote', 'ldp_handle_vote');
add_action('wp_ajax_nopriv_ldp_vote', 'ldp_handle_vote');4.4. Explication du code
$_POST['post_id']et$_POST['vote']capturent l’ID du post et le type de vote envoyé par l’utilisateur. En savoir plus sur Les variables super globales.wp_ajax_ldp_voteetwp_ajax_nopriv_ldp_votegèrent respectivement les requêtes AJAX pour les utilisateurs connectés et non connectés.wpdb->prepare(): Cette fonction protège contre les injections SQL en sécurisant la requête.
5. Étape 4 : Affichage des résultats sur l’article
Enfin, nous devons afficher le nombre de votes « J’aime » et « J’aime Pas » sur chaque article.
Ajoutez ce code pour récupérer et afficher les résultats :
phpCopierModifierfunction ldp_display_vote_count($content) {
if (is_single()) {
global $post;
$post_id = $post->ID;
global $wpdb;
$table_name = $wpdb->prefix . 'like_dislike_votes';
// Récupérer les votes "J'aime" et "J'aime Pas"
$likes = $wpdb->get_var($wpdb->prepare("SELECT COUNT(*) FROM $table_name WHERE post_id = %d AND vote = 'like'", $post_id));
$dislikes = $wpdb->get_var($wpdb->prepare("SELECT COUNT(*) FROM $table_name WHERE post_id = %d AND vote = 'dislike'", $post_id));
$content .= '<p><strong>J\'aime : </strong>' . $likes . ' | <strong>J\'aime Pas : </strong>' . $dislikes . '</p>';
}
return $content;
}
add_filter('the_content', 'ldp_display_vote_count');6. Étape 5 : Optimisation du plugin et SEO
Afin d’assurer une bonne optimisation SEO, nous devons prendre en compte plusieurs points :
- Utilisation de balises sémantiques : Par exemple, l’affichage des résultats peut être contenu dans une balise
<p>ou<div>appropriée. - Cache des résultats : Utiliser un système de cache pour éviter de faire trop de requêtes à la base de données pour chaque chargement de page.
7. Étape 6 : Test et déploiement
Avant de déployer votre plugin sur un site en production, testez-le localement et dans un environnement de développement. Assurez-vous que toutes les fonctionnalités fonctionnent comme prévu, en particulier l’enregistrement des votes et l’affichage des résultats.
8. Étape 7 : Personnalisation et Amélioration du Plugin
8.1. Ajouter des fonctionnalités supplémentaires
Maintenant que le plugin de base fonctionne, nous pouvons ajouter quelques améliorations pour le rendre plus complet et personnalisé.
8.1.1. Autoriser l’affichage des résultats uniquement après un vote
Dans sa version actuelle, les résultats des votes sont affichés avant même que l’utilisateur ait voté. Nous pourrions restreindre l’affichage des résultats pour qu’ils ne soient visibles qu’après que l’utilisateur ait effectué un vote. Voici comment vous pourriez modifier le code pour cela :
function ldp_display_vote_count($content) {
if (is_single()) {
global $post;
$post_id = $post->ID;
global $wpdb;
$table_name = $wpdb->prefix . 'like_dislike_votes';
// Vérifier si l'utilisateur a voté
$user_ip = $_SERVER['REMOTE_ADDR'];
$user_vote = $wpdb->get_var($wpdb->prepare(
"SELECT vote FROM $table_name WHERE post_id = %d AND user_ip = %s",
$post_id, $user_ip
));
if ($user_vote) {
// Si l'utilisateur a voté, afficher les résultats
$likes = $wpdb->get_var($wpdb->prepare("SELECT COUNT(*) FROM $table_name WHERE post_id = %d AND vote = 'like'", $post_id));
$dislikes = $wpdb->get_var($wpdb->prepare("SELECT COUNT(*) FROM $table_name WHERE post_id = %d AND vote = 'dislike'", $post_id));
$content .= '<p><strong>J\'aime : </strong>' . $likes . ' | <strong>J\'aime Pas : </strong>' . $dislikes . '</p>';
}
}
return $content;
}Ce code vérifie si l’utilisateur a déjà voté avant d’afficher les résultats. Cela évite de donner l’impression que les résultats sont manipulés.
8.1.2. Ajouter un message de confirmation
Une autre amélioration utile pourrait être d’afficher un message de confirmation ou une animation pour informer l’utilisateur que son vote a bien été pris en compte. Vous pouvez ajouter une petite notification après le vote, avec un peu de JavaScript :
function ldp_enqueue_scripts() {
wp_enqueue_script('ldp-vote', plugin_dir_url(__FILE__) . 'js/ldp-vote.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'ldp_enqueue_scripts');Ensuite, dans le fichier ldp-vote.js (à créer dans le dossier du plugin), vous pouvez ajouter du code pour afficher une notification de confirmation :
jQuery(document).ready(function($){
$('.ldp-like, .ldp-dislike').on('click', function() {
var post_id = $(this).data('post-id');
var vote = $(this).hasClass('ldp-like') ? 'like' : 'dislike';
$.post(ajaxurl, {
action: 'ldp_vote',
post_id: post_id,
vote: vote
}, function(response) {
if (response.status === 'success') {
alert('Votre vote a été pris en compte !');
}
});
});
});Avec cette fonctionnalité, chaque fois qu’un utilisateur clique sur un bouton de vote, un message de confirmation s’affichera pour lui assurer que son action a été enregistrée.
8.2. Sécuriser le plugin
Il est important de sécuriser votre plugin, surtout lorsqu’il interagit avec la base de données et qu’il traite des données utilisateurs (comme les adresses IP).
8.2.1. Sécuriser les requêtes AJAX
Nous avons déjà utilisé wp_nonce_field() dans le formulaire pour sécuriser les requêtes AJAX. Si ce n’est pas le cas, voici comment l’ajouter pour empêcher les attaques de type CSRF (Cross-Site Request Forgery) :
Dans le fichier like-dislike-plugin.php, ajoutez cette ligne pour générer un nonce lors de l’enregistrement du vote :
wp_nonce_field('ldp_vote_nonce', 'ldp_nonce');Ensuite, dans la fonction de gestion des votes (ldp_handle_vote), vérifiez que le nonce est valide avant de continuer :
if (!isset($_POST['ldp_nonce']) || !wp_verify_nonce($_POST['ldp_nonce'], 'ldp_vote_nonce')) {
die('Permission refusée');
}Cette vérification garantit que seul le formulaire valide peut envoyer des requêtes pour voter.
9. Étape 8 : Intégration avec les thèmes WordPress
9.1. Ajouter les boutons de vote dans les templates
Si vous souhaitez avoir plus de contrôle sur l’endroit où les boutons « J’aime » et « J’aime Pas » apparaissent dans votre thème, vous pouvez intégrer ces boutons directement dans vos fichiers de templates.
Par exemple, dans le fichier single.php de votre thème, vous pouvez ajouter ce code à l’endroit où vous souhaitez que les boutons apparaissent :
<?php
if (function_exists('ldp_add_buttons')) {
echo ldp_add_buttons();
}
?>Cette méthode vous permet de placer les boutons de vote à un emplacement spécifique sur vos pages d’articles.
10. Étape 9 : Déploiement et Mise à Jour du Plugin
10.1. Préparer le plugin pour le déploiement
Avant de mettre votre plugin en ligne, assurez-vous qu’il est bien testé et qu’il n’y a pas d’erreurs dans le code. Vous pouvez également compresser le dossier du plugin en un fichier .zip pour le rendre plus facile à installer via l’interface d’administration de WordPress.
10.2. Mettre à jour le plugin
Lorsque vous mettez à jour votre plugin, veillez à :
- Vérifier la compatibilité avec les nouvelles versions de WordPress.
- Ajouter un numéro de version dans les commentaires en haut du fichier
like-dislike-plugin.phppour savoir quelle version est installée. - Tester toutes les nouvelles fonctionnalités avant de les déployer sur un site en production.
Vous avez maintenant un plugin WordPress complet qui permet d’ajouter un système de votes « J’aime » et « J’aime Pas » sur vos articles, comme sur Reddit. Ce plugin vous offre de nombreuses possibilités de personnalisation et peut être facilement intégré à n’importe quel site WordPress. Vous avez appris comment :
- Créer un plugin WordPress de base.
- Ajouter des fonctionnalités de votes avec gestion des résultats.
- Sécuriser et personnaliser le plugin.
- Optimiser le code pour améliorer l’expérience utilisateur et la performance.
En suivant ce tutoriel, vous avez acquis les bases nécessaires pour développer vos propres plugins WordPress et ajouter des fonctionnalités uniques à vos sites. N’hésitez pas à explorer d’autres idées et à étendre ce plugin avec encore plus de fonctionnalités selon vos besoins. Allons plus loin …
12. Étape 10 : Optimisation SEO du Plugin
12.1. Optimiser les performances du plugin
Un plugin mal optimisé peut nuire à la performance de votre site WordPress, ce qui peut affecter négativement le référencement naturel (SEO). Voici quelques astuces pour améliorer les performances de votre plugin de votes.
12.1.1. Utiliser des requêtes SQL optimisées
Lors de l’accès à la base de données, vous pouvez optimiser vos requêtes pour éviter des appels inutiles. Par exemple, lorsque vous récupérez les votes pour un article, il est préférable d’utiliser COUNT() directement dans la requête SQL au lieu de récupérer tous les votes et de les compter en PHP. Cela permet de réduire la charge sur votre serveur et d’améliorer la vitesse du plugin.
$likes = $wpdb->get_var($wpdb->prepare("SELECT COUNT(*) FROM $table_name WHERE post_id = %d AND vote = 'like'", $post_id));
$dislikes = $wpdb->get_var($wpdb->prepare("SELECT COUNT(*) FROM $table_name WHERE post_id = %d AND vote = 'dislike'", $post_id));12.1.2. Ajouter du cache pour les résultats des votes
Une autre astuce pour améliorer la vitesse de votre plugin est d’ajouter du cache. Vous pouvez utiliser les fonctionnalités de cache de WordPress (par exemple, wp_cache_set() et wp_cache_get()) pour stocker les résultats des votes pendant un certain temps, afin d’éviter des requêtes répétées vers la base de données.
Voici un exemple pour utiliser le cache avec les résultats des votes :
function ldp_get_vote_count($post_id) {
$cache_key = 'ldp_vote_count_' . $post_id;
$vote_count = wp_cache_get($cache_key, 'ldp');
if ($vote_count === false) {
global $wpdb;
$table_name = $wpdb->prefix . 'like_dislike_votes';
// Récupérer les résultats depuis la base de données
$likes = $wpdb->get_var($wpdb->prepare("SELECT COUNT(*) FROM $table_name WHERE post_id = %d AND vote = 'like'", $post_id));
$dislikes = $wpdb->get_var($wpdb->prepare("SELECT COUNT(*) FROM $table_name WHERE post_id = %d AND vote = 'dislike'", $post_id));
$vote_count = array('likes' => $likes, 'dislikes' => $dislikes);
// Mettre en cache les résultats pour 12 heures
wp_cache_set($cache_key, $vote_count, 'ldp', 12 * HOUR_IN_SECONDS);
}
return $vote_count;
}Cela permet de réduire le nombre de requêtes SQL effectuées et d’améliorer la réactivité du site, ce qui est un facteur clé pour le SEO.
Des formations informatique pour tous !
Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…
Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.
Découvrez mes formations Qui suis-je ?12.2. Ajouter des balises sémantiques pour améliorer le SEO
L’optimisation du SEO ne se limite pas aux performances. Il est également important d’améliorer la structure HTML de votre plugin pour que les moteurs de recherche puissent mieux comprendre son contenu. Vous pouvez ajouter des balises sémantiques et des microdonnées pour rendre les résultats de votes plus visibles pour les moteurs de recherche.
12.2.1. Ajouter des balises aria-* pour l’accessibilité
Les balises aria-* sont utiles pour améliorer l’accessibilité et la sémantique de votre plugin, ce qui peut également influencer positivement votre référencement. Par exemple, vous pouvez ajouter des balises aria-label aux boutons « J’aime » et « J’aime Pas » pour que les utilisateurs de lecteurs d’écran comprennent facilement leur fonction.
<button class="ldp-like" data-post-id="<?php echo get_the_ID(); ?>" aria-label="Voter J'aime pour cet article">
<span class="ldp-icon">👍</span>
<span class="ldp-count"><?php echo $likes; ?></span>
</button>
<button class="ldp-dislike" data-post-id="<?php echo get_the_ID(); ?>" aria-label="Voter J'aime Pas pour cet article">
<span class="ldp-icon">👎</span>
<span class="ldp-count"><?php echo $dislikes; ?></span>
</button>12.2.2. Ajouter des données structurées
Les données structurées, comme les microdonnées ou le format JSON permettent aux moteurs de recherche de mieux comprendre le contenu d’une page. Pour un plugin WordPress de votes, vous pouvez envisager d’ajouter un balisage schema.org pour afficher les résultats de votes de manière plus visible dans les résultats de recherche.
Voici un exemple pour ajouter du balisage JSON-LD aux résultats des votes :
function ldp_add_schema_markup() {
if (is_single()) {
global $post;
$vote_counts = ldp_get_vote_count($post->ID);
$schema = array(
"@context" => "https://schema.org",
"@type" => "Article",
"headline" => get_the_title(),
"url" => get_permalink(),
"aggregateRating" => array(
"@type" => "AggregateRating",
"ratingValue" => $vote_counts['likes'],
"worstRating" => $vote_counts['dislikes'],
"bestRating" => $vote_counts['likes'],
"ratingCount" => $vote_counts['likes'] + $vote_counts['dislikes'],
),
);
echo '<script type="application/ld+json">' . json_encode($schema) . '</script>';
}
}
add_action('wp_head', 'ldp_add_schema_markup');Cela ajoute un balisage de notation agrégée qui peut être utilisé par Google et d’autres moteurs de recherche pour afficher les résultats directement dans les résultats de recherche.
12.3. Optimiser le texte et le contenu du plugin pour le SEO
L’optimisation du contenu de votre plugin pour le SEO est également importante. Vous devez veiller à utiliser les bons mots-clés, y compris des variantes de votre mot-clé principal « plugin WordPress », pour attirer l’attention des moteurs de recherche.
12.3.1. Optimisation des textes du plugin
Par exemple, vous pouvez optimiser le texte affiché lorsque l’utilisateur vote ou lorsque les résultats sont montrés. Utilisez des phrases contenant des mots-clés comme « système de vote WordPress », « plugin de notation », ou « plugin de j’aime et j’aime pas ». Voici un exemple :
$content .= '<p><strong>Résultats du vote :</strong> Vous avez ' . ($likes > $dislikes ? 'aimé' : 'détesté') . ' cet article. J\'aime : ' . $likes . ' | J\'aime Pas : ' . $dislikes . '</p>';De plus, en ajoutant des titres et des descriptions dans les paramètres du plugin, vous pouvez renforcer la pertinence SEO du contenu.
Nous avons couvert les étapes suivantes :
- La création du plugin WordPress.
- La gestion des votes et des résultats.
- L’optimisation des performances pour le SEO.
- L’ajout de balises sémantiques et de données structurées pour améliorer la visibilité du plugin dans les moteurs de recherche.
Vous pouvez maintenant personnaliser davantage votre plugin en fonction de vos besoins et l’intégrer à n’importe quel site WordPress pour offrir une expérience utilisateur enrichie. En optimisant également le SEO de votre plugin, vous contribuez à améliorer la visibilité de votre contenu dans les résultats de recherche, ce qui peut augmenter le trafic vers votre site.
14. Étape 11 : Ajouter une interface d’administration pour le plugin
14.1. Créer une page de paramètres dans le tableau de bord WordPress
Tout d’abord, nous allons ajouter une page d’administration dans le tableau de bord WordPress pour gérer notre plugin. Cette page pourrait afficher des informations sur les votes, telles que le nombre total de « J’aime » et « J’aime Pas » pour chaque article, ainsi que des paramètres de configuration du plugin.
14.1.1. Ajouter un menu dans l’admin WordPress
Pour ajouter une page de menu dans l’interface d’administration, utilisez la fonction add_menu_page() de WordPress. Cette fonction crée un élément dans le menu principal de l’admin.
Ajoutez ce code à la fin de votre fichier principal du plugin (like-dislike-plugin.php) :
function ldp_admin_menu() {
add_menu_page(
'J\'aime / J\'aime Pas', // Titre de la page
'J\'aime / J\'aime Pas', // Titre du menu
'manage_options', // Capacité requise pour voir cette page
'ldp-plugin-settings', // Slug de la page
'ldp_plugin_settings_page', // Fonction qui affiche le contenu de la page
'dashicons-thumbs-up', // Icône du menu
60 // Position dans le menu
);
}
add_action('admin_menu', 'ldp_admin_menu');14.1.2. Créer le contenu de la page de paramètres
Ensuite, nous devons définir la fonction ldp_plugin_settings_page() qui s’affichera lorsque l’administrateur clique sur l’élément du menu. Cette page peut afficher des informations sur les votes, mais aussi des options pour personnaliser certains paramètres du plugin (comme l’apparence des boutons).
function ldp_plugin_settings_page() {
?>
<div class="wrap">
<h1>Paramètres du Plugin J'aime / J'aime Pas</h1>
<p>Bienvenue sur la page d'administration de votre plugin de système de votes J'aime / J'aime Pas. Ici, vous pouvez consulter les résultats des votes et configurer le plugin.</p>
<h2>Résultats des votes</h2>
<table class="wp-list-table widefat fixed striped posts">
<thead>
<tr>
<th class="manage-column">Article</th>
<th class="manage-column">J'aime</th>
<th class="manage-column">J'aime Pas</th>
</tr>
</thead>
<tbody>
<?php
global $wpdb;
$table_name = $wpdb->prefix . 'like_dislike_votes';
$posts = get_posts(array('numberposts' => -1)); // Récupère tous les articles
foreach ($posts as $post) {
$likes = $wpdb->get_var($wpdb->prepare("SELECT COUNT(*) FROM $table_name WHERE post_id = %d AND vote = 'like'", $post->ID));
$dislikes = $wpdb->get_var($wpdb->prepare("SELECT COUNT(*) FROM $table_name WHERE post_id = %d AND vote = 'dislike'", $post->ID));
?>
<tr>
<td><?php echo get_the_title($post->ID); ?></td>
<td><?php echo $likes; ?></td>
<td><?php echo $dislikes; ?></td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
<?php
}14.1.3. Personnaliser les paramètres du plugin WordPress
Nous pouvons également ajouter des options pour personnaliser l’apparence des boutons, par exemple, en permettant à l’administrateur de choisir les icônes ou les couleurs des boutons « J’aime » et « J’aime Pas ».
Voici comment ajouter des options dans la page d’administration pour personnaliser les boutons :
- Ajoutez un formulaire dans la page d’administration pour que l’administrateur puisse définir les couleurs ou les icônes.
function ldp_plugin_settings_page() {
?>
<div class="wrap">
<h1>Paramètres du Plugin J'aime / J'aime Pas</h1>
<form method="post" action="options.php">
<?php
settings_fields('ldp_plugin_options_group');
do_settings_sections('ldp-plugin-settings');
?>
<table class="form-table">
<tr valign="top">
<th scope="row">Couleur des boutons "J'aime"</th>
<td><input type="color" name="ldp_like_button_color" value="<?php echo get_option('ldp_like_button_color', '#00ff00'); ?>" /></td>
</tr>
<tr valign="top">
<th scope="row">Couleur des boutons "J'aime Pas"</th>
<td><input type="color" name="ldp_dislike_button_color" value="<?php echo get_option('ldp_dislike_button_color', '#ff0000'); ?>" /></td>
</tr>
</table>
<?php submit_button(); ?>
</form>
</div>
<?php
}- Ensuite, ajoutez ces paramètres à WordPress pour qu’ils soient enregistrés et récupérés par votre plugin :
function ldp_register_settings() {
register_setting('ldp_plugin_options_group', 'ldp_like_button_color');
register_setting('ldp_plugin_options_group', 'ldp_dislike_button_color');
}
add_action('admin_init', 'ldp_register_settings');Ce code permet à l’administrateur de définir les couleurs des boutons via l’interface d’administration de WordPress. Vous pouvez facilement étendre ces options pour inclure des icônes personnalisées, des textes ou d’autres paramètres de style.
14.2. Affichage des résultats dans l’admin
L’une des principales fonctionnalités que vous pouvez offrir dans l’interface admin est la possibilité de visualiser les résultats des votes « J’aime » et « J’aime Pas » sur chaque article. Nous avons déjà créé une table dans l’interface admin qui montre ces résultats. Vous pouvez également afficher un graphique pour rendre les données plus visuelles.
Pour ajouter un graphique simple, vous pouvez utiliser la bibliothèque JavaScript comme Chart.js ou utiliser une bibliothèque dédiée à WordPress comme WP Graphs. Vous pouvez intégrer un graphique directement dans votre page d’administration pour afficher les résultats des votes sous forme de diagrammes à barres ou de graphiques circulaires.
15. Conclusion sur l’interface d’administration
L’ajout d’une interface d’administration à votre plugin WordPress permet à l’administrateur du site de gérer facilement les paramètres du plugin et de suivre les résultats des votes. Voici un résumé des étapes importantes pour ajouter cette interface :
- Ajouter un menu dans l’interface d’administration de WordPress.
- Créer une page de paramètres avec un formulaire permettant de configurer le plugin.
- Ajouter une table affichant les résultats des votes « J’aime » et « J’aime Pas ».
- Personnaliser l’apparence des boutons via des options d’interface.
En offrant cette interface d’administration, vous facilitez la gestion du plugin pour les utilisateurs qui souhaitent avoir plus de contrôle sur les paramètres et les résultats. Cela enrichit l’expérience utilisateur tout en permettant une gestion efficace de votre système de votes.
16. Étape 12 : Sécuriser le Plugin WordPress
16.1. Protéger les actions contre les attaques CSRF (Cross-Site Request Forgery)
Lorsque vous créez un formulaire dans l’interface d’administration, il est essentiel de le sécuriser contre les attaques CSRF, où un attaquant tente de soumettre des requêtes malveillantes en imitant un utilisateur authentifié. WordPress fournit une fonction très pratique pour cela : wp_nonce_field().
16.1.1. Ajouter un nonce pour la sécurité des formulaires
Lors de l’ajout du formulaire pour modifier les paramètres (comme la couleur des boutons), vous devez inclure un nonce pour vérifier l’intégrité de la requête. Ajoutez ce nonce dans votre formulaire :
<form method="post" action="options.php">
<?php
settings_fields('ldp_plugin_options_group');
do_settings_sections('ldp-plugin-settings');
wp_nonce_field('ldp_save_settings', 'ldp_nonce'); // Ajout du nonce pour la sécurité
?>
<table class="form-table">
<tr valign="top">
<th scope="row">Couleur des boutons "J'aime"</th>
<td><input type="color" name="ldp_like_button_color" value="<?php echo get_option('ldp_like_button_color', '#00ff00'); ?>" /></td>
</tr>
<tr valign="top">
<th scope="row">Couleur des boutons "J'aime Pas"</th>
<td><input type="color" name="ldp_dislike_button_color" value="<?php echo get_option('ldp_dislike_button_color', '#ff0000'); ?>" /></td>
</tr>
</table>
<?php submit_button(); ?>
</form>16.1.2. Vérification du nonce
Dans le code qui traite la soumission du formulaire, vous devez vérifier que le nonce est valide pour garantir que la requête vient bien de l’utilisateur authentifié et non d’un tiers malveillant.
if (isset($_POST['ldp_nonce']) && wp_verify_nonce($_POST['ldp_nonce'], 'ldp_save_settings')) {
// Le nonce est valide, vous pouvez enregistrer les paramètres
update_option('ldp_like_button_color', sanitize_text_field($_POST['ldp_like_button_color']));
update_option('ldp_dislike_button_color', sanitize_text_field($_POST['ldp_dislike_button_color']));
}Cela ajoute une couche de sécurité contre les attaques CSRF. Le nonce est généré lorsque le formulaire est affiché et vérifié lors de la soumission pour s’assurer que la requête est légitime.
16.2. Valider et assainir les entrées
Lorsque vous acceptez des entrées utilisateur (comme les couleurs des boutons), il est crucial de les valider et de les assainir pour éviter les attaques XSS (Cross-Site Scripting) ou d’autres types de vulnérabilités.
WordPress offre des fonctions utiles pour cela, comme sanitize_text_field() ou sanitize_hex_color(). Utilisez-les pour nettoyer les entrées.
16.2.1. Exemple d’assainissement des entrées
Voici un exemple d’assainissement des couleurs des boutons, où l’on s’assure que l’utilisateur a bien entré une couleur valide :
if (isset($_POST['ldp_like_button_color'])) {
$like_color = sanitize_hex_color($_POST['ldp_like_button_color']);
update_option('ldp_like_button_color', $like_color);
}
if (isset($_POST['ldp_dislike_button_color'])) {
$dislike_color = sanitize_hex_color($_POST['ldp_dislike_button_color']);
update_option('ldp_dislike_button_color', $dislike_color);
}Cela garantit que seules des couleurs hexadécimales valides sont acceptées.
17. Étape 13 : Étendre le Plugin WordPress
17.1. Ajouter un système de commentaires avec les votes
Un bon moyen d’enrichir votre plugin serait d’ajouter la possibilité pour les utilisateurs de laisser un commentaire lorsqu’ils votent. Cela peut être particulièrement utile si vous voulez créer une interaction plus engageante sur vos articles.
17.1.1. Ajouter un champ de commentaire lors du vote
Vous pouvez ajouter un champ de texte à côté des boutons « J’aime » et « J’aime Pas » pour permettre aux utilisateurs de laisser un commentaire en même temps qu’ils votent.
<form class="ldp-vote-form">
<label for="ldp-comment">Votre commentaire :</label>
<textarea name="ldp-comment" id="ldp-comment"></textarea>
<button type="submit" class="ldp-like" data-post-id="<?php echo get_the_ID(); ?>">J'aime</button>
<button type="submit" class="ldp-dislike" data-post-id="<?php echo get_the_ID(); ?>">J'aime Pas</button>
</form>17.1.2. Sauvegarder le commentaire dans la base de données
Lorsque l’utilisateur soumet un vote, vous pouvez également enregistrer son commentaire dans la base de données. Vous devrez ajuster la table like_dislike_votes pour inclure une colonne comment.
ALTER TABLE wp_like_dislike_votes ADD COLUMN comment TEXT;Ensuite, vous pouvez adapter le code pour enregistrer ce commentaire lors de la soumission du vote.
if (isset($_POST['ldp-comment']) && !empty($_POST['ldp-comment'])) {
$comment = sanitize_textarea_field($_POST['ldp-comment']);
$wpdb->insert(
$table_name,
array(
'post_id' => $post_id,
'vote' => $vote,
'comment' => $comment
)
);
}Cela permet d’offrir une expérience plus interactive aux utilisateurs.
17.2. Ajouter des statistiques détaillées dans l’admin
Pour enrichir encore l’expérience d’administration, vous pouvez ajouter des graphiques détaillant les tendances des votes au fil du temps. Par exemple, vous pouvez afficher combien de votes ont été ajoutés chaque mois ou comparer les votes entre différents articles.
17.2.1. Ajouter des graphiques avec Chart.js
Vous pouvez intégrer Chart.js dans l’interface d’administration pour afficher des graphiques en temps réel. Chart.js permet de créer des graphiques circulaires, des barres ou des lignes pour visualiser les votes au fil du temps.
function ldp_plugin_settings_page() {
?>
<div class="wrap">
<h1>Paramètres du Plugin J'aime / J'aime Pas</h1>
<canvas id="voteChart" width="400" height="200"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
var ctx = document.getElementById('voteChart').getContext('2d');
var voteChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Article 1', 'Article 2', 'Article 3'], // Articles
datasets: [{
label: 'J\'aime',
data: [12, 19, 3], // Données de votes J'aime
backgroundColor: 'rgba(0, 255, 0, 0.2)',
borderColor: 'rgba(0, 255, 0, 1)',
borderWidth: 1
},
{
label: 'J\'aime Pas',
data: [2, 3, 1], // Données de votes J'aime Pas
backgroundColor: 'rgba(255, 0, 0, 0.2)',
borderColor: 'rgba(255, 0, 0, 1)',
borderWidth: 1
}]
}
});
</script>
</div>
<?php
}Cela permet d’afficher un graphique simple qui montre la répartition des votes « J’aime » et « J’aime Pas » pour les articles. Vous pouvez étendre cela en récupérant les données réelles depuis la base de données pour afficher un graphique dynamique.
18. Conclusion sur les fonctionnalités avancées
En ajoutant une interface d’administration pour la gestion des votes et des options supplémentaires pour personnaliser le plugin, vous avez créé un plugin WordPress non seulement fonctionnel mais également riche en fonctionnalités.
- Sécurisation : Nous avons abordé la sécurité en ajoutant des vérifications de nonce pour protéger contre les attaques CSRF et en validant les entrées des utilisateurs pour éviter les failles de sécurité.
- Extensions : Nous avons montré comment ajouter des fonctionnalités supplémentaires comme la possibilité de laisser un commentaire avec un vote et comment visualiser les tendances des votes dans le tableau de bord WordPress avec des graphiques interactifs.
- Améliorations de l’UX : Avec des formulaires de personnalisation et des options graphiques, vous avez enrichi l’expérience de gestion du plugin pour l’administrateur.
Votre plugin est maintenant complet, sécurisé et prêt à offrir une expérience utilisateur riche. Vous pouvez l’étendre davantage en fonction des besoins de vos utilisateurs ou des objectifs du site WordPress.
L’ensemble des scripts de ce plugin WordPress sont consultable et téléchargeable depuis mon dépôt GitHub : https://github.com/crea-troyes/wp-reddit
Allez plus loin avec WordPress :
- Coder un thème enfant WordPress
- Coder une extension WordPress simple : Calculer le temps de lecture d’un article
