Publicité

De nombreux blogueurs rechercheront haut et bas le widget WordPress parfait qui fera exactement ce que ils veulent, mais avec un peu d'expérience en programmation, vous trouverez peut-être plus facile d'écrire votre widget.

Cette semaine, je voudrais montrer comment faire exactement cela, et le widget que nous allons écrire est un widget simple qui sélectionne un seul post aléatoire de votre site, extrait l'image en vedette et l'affiche dans la barre latérale - un widget visuel "check this out" qui aidera les utilisateurs à trouver plus de contenu sur votre site.

C'est aussi une extension d'une série continue dans laquelle je vous montre à quel point il est facile de personnalisez votre modèle WordPress 2 nouveaux plugins Wordpress sympas et compréhension de la structure du thème WordpressCette semaine, je vais jeter un œil à une alternative supérieure au SEO tout-en-un souvent loué; un plugin qui vous donne la puissance d'un système de publication Wordpress mais vous permet de produire ... Lire la suite .

Vous serez peut-être également ravi de savoir que nous avons ajouté un nouveau Catégorie Tutoriels WordPress à MakeUseOf, alors assurez-vous de vérifier cela pour une archive toujours croissante de conseils et de guides à jour sur la plate-forme de blogs préférée du monde.

Concepts clés: requêtes WordPress et boucle

Chaque page de votre blog consiste en une requête vers votre base de données d'articles. Selon la page que vous consultez, la requête changera. La page d'accueil de votre blog, par exemple, peut utiliser la requête "obtenir les 10 derniers articles de blog“. Lorsque vous affichez les archives de catégorie, la requête peut devenir "obtenez les 20 derniers articles pour la catégorie photos de famille uniquement, commandez les résultats par date de publication“. Chaque requête renverra un ensemble de résultats et, selon le modèle de page utilisé, chaque résultat sera exécuté dans la «boucle» principale du modèle.

Cependant, chaque page peut en fait comprendre plus d'une requête, et vous pouvez même créer vos propres requêtes pour ajouter des fonctionnalités à divers endroits de votre modèle. Vous pouvez voir un exemple de ceci en cours d'utilisation au bas de cet article - nous avons quelques requêtes supplémentaires qui s'exécutent sur chaque page qui vise à vous montrer des articles connexes qui pourraient vous intéresser, ou des articles qui sont à la mode la semaine.

Pour créer notre widget personnalisé, nous aurons simplement besoin de créer une requête supplémentaire qui saisit X nombre de publications aléatoires ainsi que leurs images et les affiche d'une manière ou d'une autre dans la barre latérale. Je vous ai déjà montré la semaine dernière le code saisir l'image en vedette Configurer votre blog avec WordPress: le guide ultimeVous voulez créer votre propre blog mais vous ne savez pas comment? Regardez WordPress, la plateforme de blogging la plus puissante disponible aujourd'hui. Lire la suite , nous avons donc vraiment besoin de savoir comment créer un nouveau widget WordPress et le placer dans la barre latérale.

Code de widget de base

Commencez par créer un nouveau fichier .php dans votre wp-content / plugins annuaire. Vous pouvez également suivre le didacticiel hors ligne, puis le télécharger à l'aide de l'interface WordPress, mais je trouve qu'il est plus facile d'écrire au fur et à mesure si vous devez déboguer. Appelez votre fichier comme bon vous semble, mais je vais avec random-post-widget.php

Collez ce qui suit dans le fichier et enregistrez. N'hésitez pas à modifier la section en haut avec mon nom, mais ne modifiez pas encore le reste du code. Il s'agit essentiellement d'un widget vide squelette, et vous pouvez voir où il est dit // LE CODE WIDGET VA ICI est l'endroit où nous ajouterons nos fonctionnalités plus tard.

php. /* Nom du plug-in: Random Post Widget. URI du plugin: http://jamesbruce.me/ Description: Random Post Widget saisit un post aléatoire et la vignette associée à afficher dans votre barre latérale. Auteur: James Bruce. Version 1. URI de l'auteur: http://jamesbruce.me/ * / class RandomPostWidget étend WP_Widget. {function RandomPostWidget () {$ widget_ops = array ('classname' => 'RandomPostWidget', 'description' => 'Affiche une publication aléatoire avec vignette'); $ this-> WP_Widget ('RandomPostWidget', 'Random Post and Thumbnail', $ widget_ops); } forme de fonction ($ instance) {$ instance = wp_parse_args ((array) $ instance, array ('title' => '')); $ title = $ instance ['title'];
Titre: 
mise à jour de la fonction php} ($ new_instance, $ old_instance) {$ instance = $ old_instance; $ instance ['title'] = $ new_instance ['title']; return $ instance; } widget de fonction ($ args, $ instance) {extract ($ args, EXTR_SKIP); echo $ before_widget; $ title = vide ($ instance ['title'])? '': apply_filters ('widget_title', $ instance ['title']); if (! empty ($ title)) echo $ before_title. $ title. $ after_title;; // LE CODE WIDGET VA ICI echo "
 Ceci est mon nouveau widget! 
"; echo $ after_widget; } } add_action ('widgets_init', create_function ('', 'return register_widget ("RandomPostWidget");'));

En l'état, le plugin ne fait pas grand-chose à part imprimer un grand titre avec les mots "Ceci est mon nouveau widget!“.

Il vous donne cependant la possibilité de changer le titre, ce qui est un peu essentiel pour tout widget. L'ajout d'autres options dépasse un peu la portée de cet article aujourd'hui. Par conséquent, passons à présent pour lui donner un véritable objectif.

Une nouvelle requête et la boucle

Pour effectuer une nouvelle requête dans la base de données de votre blog, vous devez utiliser le query_posts () fonctionner avec quelques paramètres, puis parcourir la sortie en utilisant une boucle while. Essayons ceci - une requête et une boucle très basiques à démontrer. Remplacez la ligne de code qui dit:

avec ce qui suit:

// LE CODE WIDGET VA ICI. query_posts (''); if (have_posts ()): while (have_posts ()): the_post (); le titre(); en attendant; fin si; wp_reset_query (); 

Il s'agit d'une requête absolument basique utilisant des options par défaut et un formatage nul de la sortie. Selon la configuration de votre blog, la valeur par défaut sera très probablement de récupérer les 10 derniers articles - alors tout le code ci-dessus consiste à afficher le titre de chaque article. C'est assez moche, mais ça marche:

Nous pouvons le rendre un peu meilleur tout de suite juste en ajoutant un formatage HTML à la sortie avec le ÉCHO et créer un lien vers le message à l'aide de get_the_permalink () une fonction:

 query_posts (''); if (have_posts ()): echo "

• “; while (have_posts ()): the_post (); écho "
  • ".Get_the_title ()."

“; en attendant; écho "

“; fin si; wp_reset_query ();

Déjà, ça va beaucoup mieux. Mais nous ne voulons qu'un seul article, choisi au hasard. Pour ce faire, nous spécifions certains paramètres dans la requête:

 query_posts ('posts_per_page = 1 & orderby = rand'); 

Bien sûr, vous pouvez le changer en n'importe quel nombre de messages - en fait, il y a un toute une gamme de bits supplémentaires que vous pouvez passer dans la requête afin de restreindre, d'étendre ou de modifier l'ordre des résultats, mais restons-en là pour l'instant. Si vous actualisez, vous ne devriez voir qu'un seul article qui est randomisé à chaque actualisation.

Maintenant, pour la vignette en vedette. Remplacez le code par ceci, j'espère que vous pourrez voir où nous récupérons la vignette et l'afficher:

query_posts ('posts_per_page = 1 & orderby = rand'); if (have_posts ()): echo "

• “; while (have_posts ()): the_post (); écho "
  • ".Get_the_title (); echo the_post_thumbnail (array (220,200)); écho "

“; en attendant; écho "

“; fin si; wp_reset_query ();

Vous pouvez voir les résultats finaux à nouveau sur mon blog de développement Guide d'autosuffisance, bien que j'aie pu déplacer les choses au moment où vous lisez ceci.

Conclusion:

Vous voyez à quel point il est facile de créer votre propre widget personnalisé qui peut faire exactement ce que vous voulez? Même si vous ne comprenez pas 90% du code que je vous ai montré aujourd'hui, vous devriez toujours pouvoir le personnaliser quelque peu en changeant simplement les variables ou en affichant un code HTML différent. Nous avons écrit un widget entier aujourd'hui, mais vous pouvez facilement utiliser uniquement le nouveau code de requête et de boucle sur l'un de vos modèles de page.