Construire des Widgets WordPress personnalisés

Construire des widgets WordPress, c'est comme construire un plugin, mais c'est plus simple et direct. Tout ce que vous avez à faire est d’avoir un seul fichier dans lequel tout le PHP est inséré et il est plus facile de coder qu’un plugin qui peut avoir plus d’un fichier. Il existe trois fonctions principales d’un widget qui peuvent être décomposées en widget, mettre à jour et forme.

  • widget de fonction ()
  • fonction update ()
  • forme de fonction ()

Structure basique

Le schéma de base de notre widget est très simple et vous devez connaître quelques fonctions. La structure de l'os nu de notre widget ressemble à ceci:

 add_action ('widgets_init', 'register_my_widget'); // fonction pour charger mon widget function register_my_widget ()  // fonction pour enregistrer ma classe de widgets My_Widget étend WP_Widget ()  // Exemple de fonction de classe de widgets My_Widget ()  // Widget Paramètres de la fonction widget ()  // affiche la fonction de widget update ()  // met à jour la fonction de widget form ()  // et bien sûr le formulaire pour les options de widget

Étape 1

Avant de faire tout cela, nous allons d'abord charger notre widget chaque fois que nécessaire par la fonction "widget_init". Ceci est un crochet d’action et vous pouvez trouver plus à ce sujet dans le codex WordPress.

 add_action ('widgets_init', 'register_my_widget');

Nous allons ensuite enregistrer notre widget dans WordPress afin qu’il soit disponible dans la section des widgets..

 fonction register_my_widget () register_widget ('My_Widget'); 

Étape 2

Nous allons inclure notre widget dans une classe. Le nom de la classe est important! Il convient de garder à l’esprit que le nom de la classe et le nom de la fonction doivent être identiques..

 la classe My_Widget étend WP_Widget 

Nous allons maintenant passer quelques paramètres de réglage à cette classe. Par exemple, nous pouvons en passer la largeur et la hauteur. Nous pouvons également donner à notre widget une petite description si nous le souhaitons, ce qui est utile si vous associez ce widget à votre thème commercial..

 function My_Widget () function My_Widget () $ widget_ops = array ('classname' => 'exemple', 'description' => __ ('Un widget affichant le nom de l'auteur', 'example')); $ control_ops = array ('width' => 300, 'height' => 350, 'id_base' => 'example-widget'); $ this-> WP_Widget ('exemple-widget', __ ('exemple widget', 'exemple'), $ widget_ops, $ control_ops); 

Maintenant que les conditions de base de notre widget sont remplies, nous allons maintenant nous intéresser aux trois fonctions évoquées précédemment, qui sont les fonctions importantes ou les éléments de base de notre widget.!


Étape 3 Widget de fonctions ()

La première fonction est liée à l'affichage de notre widget. Nous allons passer quelques arguments à notre fonction de widget. Nous passerons les arguments du thème, qui peuvent être un titre et d'autres valeurs spécifiques. Ensuite, nous passons la variable d'instance, qui est liée à la classe de notre fonction.

 widget de fonction ($ args, $ instance)

Après cela, nous allons extraire les valeurs de l'argument car nous voulons que les valeurs soient disponibles localement. Si vous ne savez pas ce qu'est cette variable locale, ne vous inquiétez pas pour le moment et ajoutez simplement cette étape.!

 extrait ($ args);

Ensuite, nous allons définir le titre et d'autres valeurs pour notre widget, qui peuvent être édités par l'utilisateur dans le menu des widgets. Nous incluons également les variables spéciales comme $ before_widget, $ after_widget. Ces valeurs sont gérées par le thème.

 $ title = apply_filters ('widget_title', $ instance ['title']); $ name = $ instance ['name']; $ show_info = isset ($ instance ['show_info'])? $ instance ['show_info']: false; echo $ before_widget; // Affiche le titre du widget si ($ title) echo $ before_title. $ titre. $ after_title; // Affiche le nom si ($ name) printf ('

'. __ ('Salut leur marin! Je m'appelle% 1 $ s.', 'Exemple'). '

', $ name); if ($ show_info) printf ($ name); echo $ after_widget;

Étape 4 Fonction de mise à jour ()

La prochaine étape est la fonction de mise à jour. Cette fonction prendra les paramètres utilisateur et les sauvegardera. Il suffit de mettre à jour les paramètres selon les goûts de l'utilisateur.

 mise à jour de la fonction ($ new_instance, $ old_instance) $ instance = $ old_instance; // Supprime les balises du titre et du nom à supprimer HTML $ instance ['title'] = strip_tags ($ new_instance ['title']); $ instance ['name'] = strip_tags ($ new_instance ['name']); $ instance ['show_info'] = $ new_instance ['show_info']; return $ instance; 

Une chose à noter ici est que nous supprimons les valeurs afin que tout XHTML puisse être supprimé du texte, ce qui, en termes simples, pourrait affecter le fonctionnement de notre widget..


Étape 5 Forme Fonction ()

La prochaine étape décrira la création du formulaire qui servira de zone de saisie. Cela prendra dans les paramètres définis par l'utilisateur et les valeurs. La fonction de formulaire peut inclure des cases à cocher, des zones de saisie de texte, etc..

Avant de créer ces champs de saisie, nous devrons décider quoi afficher lorsque l'utilisateur ne sélectionne rien dans le widget. Pour ce faire, nous allons lui transmettre des valeurs par défaut telles que titre, description, etc..

 // Configure certains paramètres de widget par défaut. $ defaults = array ('title' => __ ('Exemple', 'exemple'), 'name' => __ ('Bilal Shaheen', 'exemple'), 'show_info' => true); $ instance = wp_parse_args ((tableau) $ instance, $ par défaut); ?>

Nous allons maintenant créer la zone de texte de saisie. Nous allons inclure ces options dans le paragraphe qui contient la balise.

 // Titre du widget: Saisie de texte 

//Saisie de texte

// case à cocher

nom = "get_field_name ('show_info'); ?> "/>

Conclusion

Et c'est tout. Vous venez de créer vous-même un très joli et simple widget qui affiche le nom de l'auteur du blog. En outre, il donne à l'utilisateur la possibilité de le montrer ou non publiquement à l'audience. Enregistrez le code dans un fichier PHP et chargez-le dans le répertoire de votre thème. Appelez ça dans votre functions.php. Après cela, allez dans le panneau des widgets et vous verrez le widget nouvellement créé.

Tout le code est inclus dans le fichier de téléchargement, ce qui facilite le copier-coller. S'amuser!