Comment créer un plugin de widget WordPress

Si vous êtes un fan de WordPress, vous connaissez probablement les widgets. Les widgets sont ces petites boîtes que vous pouvez ajouter à votre barre latérale ou à d'autres zones prêtes pour les widgets de votre thème. Ils contiennent généralement des informations telles que les publications récentes de votre blog, votre flux Twitter ou un calendrier. Mais saviez-vous que vous pouviez créer vos propres widgets ? C'est en fait assez facile à faire. Dans cet article, nous allons vous montrer comment créer un plugin de widget WordPress. Nous allons commencer par créer un fichier de plugin de base, puis ajouter une classe de widget . Nous allons ensuite enregistrer notre widget pour qu'il apparaisse dans l'admin de WordPress. Enfin, nous ajouterons du code pour afficher notre widget sur le front-end de notre site. Commençons!

J'ai récemment développé un plugin appelé Freelancer Widgets Bundle. Quand on m'a demandé ce que je devais écrire pour un plugin, j'ai pensé qu'il était temps d'écrire ce post car les gens s'étaient renseignés à ce sujet. Lorsque vous installez un plugin WordPress, vous devez lui ajouter un code supplémentaire. Vous aurez besoin d'un éditeur comme Coda (Mac) ou Dreamweaver (PC) pour développer votre plugin. Le constructeur est la fonction qui définit le nom et les principaux arguments du widget ; ceci est un exemple de ce à quoi cela pourrait ressembler. Lorsque vous apportez des modifications aux champs du formulaire, assurez-vous d'utiliser esc_attr(), car cela est fait pour des raisons de sécurité. Le paramètre 'customize_selective_refresh' permet de rafraichir le widget sous Apparence ainsi que lors de son édition.

En d'autres termes, les modifications apportées au widget n'ont pas besoin d'être actualisées pour qu'il apparaisse dans la liste. Toutes les balises, à l'exception du texte de base, sont supprimées avec WP_strip_all_tags. WP_kses_post_string() est la même fonction que la chaîne de contenu de publication. Cette fonction générera du contenu pour un site Web en utilisant la fonction widget(). Cette fonction peut être personnalisée pour inclure une balise ou une classe spécifique. GitHub est l'endroit idéal pour visualiser l'intégralité du code.

Lorsque vous souhaitez ajouter le widget à un site Web, accédez à la page où vous souhaitez le faire et collez le code avant la fermeture de la balise HTML "/body". Il est nécessaire d'inclure le code dans chaque page Web sur laquelle vous souhaitez afficher le widget. Vérifiez votre pare-feu pour voir si le Web Widget (Classic) est activé.

Ce sont tous deux des créatures visuelles, mais les deux ont des caractéristiques distinctes, telles que la visibilité et l'interaction. Si votre page fonctionne correctement et correctement en arrière-plan, il s'agit d'un plugin. Pour qu'un utilisateur puisse interagir avec lui sur la page, il doit être visible pour l'utilisateur.

Comment créer un plugin de widget personnalisé pour WordPress ?

Afin de créer un plugin de widget personnalisé pour WordPress, vous devrez créer un fichier PHP avec le code suivant : /* Nom du plugin : [Nom du plugin] Description : [Description du plugin] */ // Enregistrez et chargez le widget function [nom_du_plugin]_load_widget() { register_widget( '[nom_du_plugin]' ); } add_action( 'widgets_init', '[nom_du_plugin]_load_widget' ); // Création de la classe de widget [nom_du_plugin] étend WP_Widget { function __construct() { parent::__construct( // ID de base de votre widget '[name_of_plugin]', // Le nom du widget apparaîtra dans l'interface utilisateur __('[Name of plugin ]', '[nom_du_plugin]'), // Tableau de description du widget( 'description' => __( '[Description du plugin]', '[nom_du_plugin]' ), ) ); } // Création du front-end du widget // C'est ici que l'action se produit public function widget( $args, $instance ) { $title = apply_filters( 'widget_title', $instance['title'] ); // les arguments avant et après du widget sont définis par les thèmes echo $args['before_widget'] ; if ( ! empty( $title ) ) echo $args['before_title'] . $titre . $args['after_title'] ; // C'est ici que vous exécutez le code et affichez la sortie echo __( '[Name of plugin]', '[name_of_plugin]' ); echo $args['after_widget'] ; } // Widget Backend public function form( $instance ) { if ( isset( $instance[ 'title' ] ) ) { $title = $instance[ 'title' ]; } else { $title = __( '[Nom du plugin]', '[nom_du_plugin]' ); } // Formulaire d'administration du widget ? > Lorsque les utilisateurs de WordPress créent une zone de widgets, ils ajoutent de petits éléments de contenu à cette zone. Selon la zone de widget où il est installé, un widget peut afficher différents types d'informations sur toutes les pages, ou il peut n'afficher que certaines informations. Certains widgets sont disponibles par défaut, tandis que d'autres sont disponibles en utilisant un plugin ou un thème. Les quatre méthodes mentionnées ci-dessus doivent être ajoutées à votre classe afin de créer un widget personnalisé de base. Vous devez utiliser la fonction register_widget() pour enregistrer le widget afin de l'utiliser dans le tableau de bord. Avant d'étudier l'exemple que nous avons présenté dans cet article, nous allons passer rapidement en revue le but de chaque section du code. L'une des méthodes utilisées dans la classe Custom_Widget est une méthode d'attribution de caractères. Nous avons créé le widget avec le custom_widget comme ID avec la méthode constructeur en utilisant la méthode __construct(). En utilisant la méthode register_widget(), un nouveau widget est créé après que celui existant a été enregistré. Nous avons enveloppé chacune des parties avec des instructions if…* pour nous assurer que seules ces parties sont affichées si elles sont incluses dans les options du widget. La méthode widget() incluait la fonction nl2br() pour s'assurer que tous les textes multi-paragraphes sont correctement affichés. sanitize_text_field() élimine les espaces blancs, les tabulations et les sauts de ligne inutiles de l'argument. De plus, la valeur Oui est définie par défaut dans le champ de sélection, indiquant que la cible du lien est définie sur _blank dans les deux cas précédents. Le titre, le texte, le lien sous le titre et si le lien doit s'ouvrir dans un nouvel onglet doivent tous être spécifiés.Veuillez enregistrer les options que vous avez choisies en cliquant immédiatement sur le bouton Enregistrer. Lorsque vous sélectionnez un thème par défaut, le widget produira une sortie différente. Dans ce cas, votre widget pourrait ressembler beaucoup à celui présenté ci-dessous si vous utilisez le thème WordPress Lekker. Comment créer un widget d'image personnalisé dans WordPress ? Pour ajouter une image à une barre latérale WordPress, sélectionnez le widget « Image ». Vous pouvez apporter des modifications à votre apparence en accédant à Apparence. Ajoutez le widget « Image » à la barre latérale si vous avez une page qui inclut un widget. Ce plugin est idéal pour ceux qui souhaitent créer un widget personnalisé pour leur site Web ou leur blog. Avec ce plugin, vous pouvez facilement créer un widget personnalisé sans avoir à le coder vous-même. Pour fournir un widget personnalisé pouvant être utilisé avec Qt Designer, nous devons fournir une implémentation autonome ainsi qu'une interface de plugin. Le widget personnalisé de cet exemple, comme son homologue d'horloge analogique, n'a pas de signaux ou d'emplacements personnalisés. La macro Q_PLUGIN_METADATA() doit être utilisée pour s'assurer que le widget est correctement identifié en tant que plugin en exportant des données à partir de celui-ci. La classe AnalogClock peut être utilisée comme un widget personnalisé à l'intérieur de la boîte de widget et est un exemple de classe autonome. Une classe de plug-in pour la classe AnalogClock est incluse dans Qt Designer. Le constructeur de la classe QObject appelle simplement le constructeur de la classe de base QObject, qui définit la variable initialisée sur false. La fonction isInitialized() vérifie si le plugin est prêt à être utilisé en permettant à Qt Designer de l'identifier. La fonction createWidget() peut générer des instances d'un widget personnalisé. Le plugin widget sera visible dans le nom du groupe dans la section plugin widget du Qt Designer. Une info-bulle et Qu'est-ce que c'est ? Dans la zone du widget, vous pouvez fournir de l'aide pour le widget personnalisé. La fonction isContainer() vérifie si un widget doit être utilisé comme conteneur pour d'autres images de widget. Cela empêche l'utilisateur d'y créer des widgets.Code WordPress du widget personnaliséCrédit : www.hostpapa.inUn widget personnalisé est un excellent moyen d'ajouter des fonctionnalités à votre site WordPress. Il y a quelques points à garder à l'esprit lors de l'ajout d'un code de widget personnalisé à votre site. Tout d'abord, vous devrez créer un fichier appelé "widget.php" dans le répertoire de votre thème. Ensuite, vous devrez ajouter le code suivant à votre fichier widget.php : class Custom_Widget extents WP_Widget { function __construct() { parent ::__construct( 'custom_widget', __('Custom Widget', 'text_domain'), array ( 'description' => __( 'Un widget personnalisé pour votre site WordPress.', ' text_domain' ), ) ); } public function widget( $args, $instance ) { $title = apply_filters( 'widget_title', $instance['title'] ); echo $args['before_widget'] ; if ( ! empty( $title ) ) echo $args['before_title'] . $titre . $args['after_title'] ; echo __( 'Hello, World!', ' text_domain' ); echo $args['after_widget'] ; } public function form( $instance ) { if ( isset( $instance[ 'title' ] ) ) { $title = $instance[ 'title' ]; } else { $title = __( 'Nouveau titre', 'text_domain' ); } ? > } public function update( $new_instance, $old_instance ) { $instance = array(); $instance['title'] = ( ! empty( $new_instance['title']Wordpress Add Widget To TemplateAjouter un widget à un modèle WordPress est un processus simple. Vous devrez accéder à vos fichiers WordPress via votre compte d'hébergement et modifier le fichier approprié. Dans la plupart des cas, ce sera le fichier header.php. Recherchez le code qui contrôle la zone où vous souhaitez ajouter le widget. Ensuite, copiez le code du widget que vous souhaitez ajouter et collez-le dans le fichier approprié place dans le fichier. Enregistrez le fichier et téléchargez-le sur votre serveur. C'est tout ! Le widget apparaîtra maintenant sur votre site WordPress. Dans WordPress, il existe une balise de modèle appelée the_widget() qui vous permet d'ajouter un widget directement à votre fichiers modèles. Un widget peut être placé dans un fichier contenant le nom de classe du widget que vous souhaitez utiliser et l'endroit où vous souhaitez qu'il apparaisse. En d'autres termes, si vous souhaitez répertorier les commentaires récents, vous pouvez simplement écrire ceci : $instance pour chaque widget. En utilisant des fonctions intégrées, vous pouvez ajouter plusieurs de vos defa widgets WordPress ultimes à vos fichiers modèles plutôt que de les utiliser. Des widgets personnalisés peuvent être insérés à l'aide de la méthode _widget() dans votre modèle. Des widgets personnalisés, qui peuvent être utilisés sur une plate-forme différente de votre barre latérale, sont disponibles dans de nombreux plugins.Comment ajouter un widget à mon thème WordPress ?Visitez les écrans d'administration de WordPress pour voir la page Apparence. Choisissez un widget en le faisant glisser vers une barre latérale spécifique ou en cliquant sur le lien Ajouter un widget (si votre thème a plus d'une barre latérale, choisissez la barre latérale de destination).Comment appeler un widget à partir d'un modèle de page WordPress ?La première étape consiste à trouver et insérez le fichier où votre widget doit apparaître. La deuxième étape consiste à déterminer quel widget vous souhaitez utiliser. Dans cette section, nous allons passer en revue les noms de classe du widget WordPress par défaut : WP_Widget_Archives. Comment créer un widget d'image personnalisé dans WordPress Afin de créer un widget d'image personnalisé dans WordPress, vous devrez d'abord créer un plugin personnalisé ou un thème enfant. Une fois que vous avez fait cela, vous pouvez ensuite créer un nouveau fichier appelé "image-widget.php" dans votre plugin ou thème enfant. Dans ce fichier, vous devrez inclure le code suivant : class WP_Widget_Custom_Image extents WP_Widget { function __construct() { $widget_ops = array( 'classname' => 'widget_custom_image', 'description' => __( 'Un widget qui vous permet pour télécharger une image personnalisée.', ' text_domain' ), ); parent ::__construct( 'custom_image', __( 'Custom Image', 'text_domain' ), $widget_ops ); } function widget( $args, $instance ) { echo $args['before_widget']; if ( ! empty( $instance['title'] ) ) { echo $args['before_title'] . apply_filters( 'widget_title', $instance['title'] ). $args['after_title'] ; } if ( ! empty( $instance['image'] ) ) { echo ”; } echo $args['after_widget'] ; } function update( $new_instance, $old_instance ) { $instance = $old_instance; $instance['title'] = sanitize_text_field( $new_instance['title'] ); $instance['image'] = esc_url_raw( $new_instance['image'] ); retourne $instance ; } formulaire de fonction( $instance ) { $titre = ! vide( $instance['titre'] ) ? $instance['title'] : __( 'Custom Image', 'text_domain' ); $image = ! vide( $instance['image'] ) ? $instance['image'] : ”; ?Le plugin Image Widget est un plugin simple qui peut être utilisé pour ajouter des widgets d'image à votre site en utilisant le gestionnaire de médias WordPress. Il est courant que les modèles de sortie de widget incluent un modèle par défaut, mais celui-ci peut être modifié par les fichiers de votre modèle. Dans la version 3.2, le filtre sh_template_image_widget_php a également été ajouté, vous permettant de remplacer le comportement par défaut du modèle. Pour en savoir plus sur l'instance de widget spécifique, vous devez également ajouter deux arguments $args et $instance. Vous pouvez l'utiliser dans une conception réactive si vous remplacez cela. Comment puis-je ajouter un curseur pour les images aléatoires ? Oui, vous avez la possibilité de le faire. En règle générale, cela est géré directement via l'affichage de la barre latérale du plug-in Image Widget. l'affichage de la barre latérale doit être défini sur une page spécifique. S'il vous plaît laissez-nous savoir si vous avez des questions ou des commentaires sur cette page. The Image Widget est un projet de logiciel open source. Ce plugin a été mis à la disposition du public par une variété de contributeurs. Si vous souhaitez inclure une image, vous pouvez ajouter un champ, et si vous souhaitez inclure un lien, vous pouvez ajouter une classe. Vous passerez environ 15 minutes à le faire, c'est donc un investissement rentable. Comment créer un nouveau widget dans WordPress ? Faites glisser le widget vers la zone de widget appropriée ou faites-le glisser du côté gauche de la page vers la gauche . Une fois que vous avez cliqué sur le widget que vous souhaitez ajouter, vous verrez une liste de façons de le faire. Pour ajouter de nouveaux widgets à une zone existante, cliquez sur le bouton Ajouter un widget.