Comment créer vos propres widgets WordPress de base

Comment créer vos propres widgets WordPress de base / Wordpress & Développement Web

De nombreux blogueurs vont chercher de haut en bas le widget WordPress parfait qui fera exactement ce qu'ils veulent, mais avec un peu d'expérience en programmation, vous constaterez qu'il est plus facile d'écrire votre widget personnalisé..

Cette semaine, je voudrais montrer comment faire exactement cela. Le widget que nous allons écrire est simple: il sélectionne un message aléatoire de votre site, extrait l’image sélectionnée et l’affiche dans la barre latérale - un visuel. “regarde ça” widget 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 personnaliser votre modèle WordPress. 2 Nouveaux plugins Cool Wordpress & Comprendre la structure du thème Wordpress 2 Nouveaux plugins Cool! Wordpress & Comprendre la structure du thème Wordpress Cette semaine, je vais jetez un oeil à une alternative supérieure au SEO All-In-One souvent loué; un plugin qui vous donne la puissance d'un système de publication Wordpress mais vous permet de sortir… Read More .

Vous serez peut-être également ravi d'apprendre que nous avons ajouté une nouvelle catégorie de didacticiels WordPress à MakeUseOf. Assurez-vous donc de consulter cette archive en constante augmentation contenant des astuces et des guides mis à jour sur la plate-forme de blogs préférée par le monde..

Concepts clés: Requêtes WordPress et boucle

Chaque page de votre blog consiste en une requête sur votre base de données de publications. Selon la page que vous consultez, la requête va changer. La page d'accueil de votre blog, par exemple, peut utiliser la requête “obtenir les 10 derniers articles du blog“. Lorsque vous affichez les archives des catégories, la requête peut changer pour “obtenir les 20 derniers articles pour la catégorie photos de famille uniquement, classer les résultats par date de publication“. Chaque requête renverra un ensemble de résultats et, en fonction du modèle de page utilisé, chaque résultat sera exécuté dans le menu principal. “boucle” du modèle.

En réalité, chaque page peut comporter plusieurs requêtes 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 cette utilisation au bas de cet article - nous avons quelques requêtes supplémentaires qui s'exécutent sur chaque page et qui visent à vous montrer des articles connexes qui pourraient vous intéresser ou des articles en vogue cette semaine..

Pour créer notre widget personnalisé, nous devrons simplement créer une requête supplémentaire qui saisira un nombre X de publications aléatoires, ainsi que leurs images, et les affichera 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 permettant de saisir l’image présentée. Comment égayer votre Wordpress en ajoutant des images en vedette Comment égayer votre Wordpress en ajoutant des images en vedette Les images en vedette ont été introduites dans Wordpress dans la version 2.9 et vous permettent d’afficher facilement une image associée à votre billet de blog dans différentes parties de votre thème. Aujourd'hui, j'aimerais montrer… 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 base du widget

Commencez par créer un nouveau fichier .php dans votre wp-content / plugins annuaire. Vous pouvez également suivre le didacticiel hors connexion, 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, au cas où vous auriez besoin de déboguer. Appelez votre fichier comme bon vous semble, mais je vais avec random-post-widget.php

Collez les éléments suivants 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. Ceci est essentiellement un widget vide squelette, et vous pouvez voir où il est dit // LE CODE DU WIDGET EST ICI est l'endroit où nous allons ajouter nos fonctionnalités plus tard.

  'RandomPostWidget', 'description' => 'Affiche une publication aléatoire avec vignette'); $ this-> WP_Widget ('RandomPostWidget', 'Random Post and Thumbnail', $ widget_ops);  formulaire de fonction ($ instance) $ instance = wp_parse_args ((tableau) $ instance, tableau ('title' => ")); $ title = $ instance ['title'];?> 

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 en dehors d’imprimer un gros titre avec les mots “Ceci est mon nouveau widget!“.

Cependant, il vous donne la possibilité de changer le titre, ce qui est essentiel pour tout widget. L'ajout d'autres options dépasse un peu le propos de cet article aujourd'hui, donc pour le moment, passons à autre chose..

Une nouvelle requête et la boucle

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

Ceci est mon nouveau widget!

avec ce qui suit:

 // LE CODE DU WIDGET EST ICI query_posts ("); if (have_posts ()): while (have_posts ()): the_post (); the_title (); endwhile; endif; wp_reset_query (); 

Ceci est une requête absolument basique utilisant des options par défaut et un formatage nul de la sortie. En fonction de la configuration de votre blog, la valeur par défaut consiste à récupérer les 10 derniers messages. Le code ci-dessus ne contient que le titre de chaque message. C'est assez moche, mais ça marche:

Nous pouvons le rendre un peu mieux tout de suite en ajoutant simplement un formatage HTML à la sortie avec le ÉCHO commande et créer un lien vers le message en utilisant get_the_permalink () une fonction:

 query_posts ("); if (have_posts ()): echo"
    "; while (have_posts ()): the_post (); echo"
  • ".get_the_title ()."
  • "; endwhile; echo"
"; endif; wp_reset_query ();

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

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

Bien sûr, vous pouvez le modifier en un certain nombre de messages - en fait, il existe toute une série de bits supplémentaires que vous pouvez insérer dans la requête afin de restreindre, développer ou modifier l'ordre des résultats, mais restons-en là pour à présent. Si vous actualisez, vous ne devriez voir qu'un seul message qui est randomisé à chaque actualisation..

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

 query_posts ('posts_per_page = 1 & orderby = rand'); if (have_posts ()): echo "
    "; while (have_posts ()): the_post (); echo"
  • ".get_the_title (); echo the_post_thumbnail (array (220,200)); echo"
  • "; endwhile; echo"
"; endif; wp_reset_query ();

Vous pouvez voir les résultats finis à nouveau sur le Guide de l’autosuffisance de mon blog de développement, même si j’ai peut-être déplacé les choses au moment où vous lisez ceci..

Conclusion:

Vous voyez comme il est facile de créer votre propre widget personnalisé capable de 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 pouvoir le personnaliser quelque peu en modifiant simplement des variables ou en affichant du code HTML différent. Nous avons écrit tout un widget 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..

Problèmes? Besoin d'une aide différente liée à WordPress? Je suis toujours disponible pour vous aider dans MakeUseOf Answers, alors n'hésitez plus et postez une nouvelle question ici.

En savoir plus sur: Blogs, Programmation, Wordpress.