Comment créer vos propres widgets WordPress de base

  • Edmund Richardson
  • 0
  • 5099
  • 1270
Publicité

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 produire… .

Vous serez peut-être également ravi de savoir que nous avons ajouté une nouvelle catégorie de didacticiels WordPress à MakeUseOf. Veillez donc à consulter cette archive en constante augmentation contenant des guides et des astuces actualisés 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. Votre page d'accueil de 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. Vous pouvez même créer vos propres requêtes pour ajouter des fonctionnalités à différents 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 à la mode cette semaine..

Cependant, pour créer notre widget personnalisé, nous devons simplement créer une requête supplémentaire qui saisit un nombre X de publications aléatoires, ainsi que leurs images, et les affiche d'une manière ou d'une autre dans la barre latérale. La semaine dernière, je vous ai déjà montré le code pour saisir l’image sélectionnée. Comment dynamiser votre Wordpress en ajoutant des images en vedette Comment dynamiser 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…, 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 à changer 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 à part 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 va un peu au-delà de la portée 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 la commande 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 de code va ici. 

Ceci est une requête absolument basique utilisant les 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 (); é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 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-y avec cela. à 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 (); é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 finis à nouveau sur mon Guide de développement de l'autosuffisance du blog de développement, bien que j'aie 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..




Personne n'a encore commenté ce post.

De la technologie moderne, simple et abordable.
Votre guide dans le monde de la technologie moderne. Apprenez à utiliser les technologies et les gadgets qui nous entourent chaque jour et à découvrir des choses intéressantes sur Internet.