Comment créer un widget dans votre thème enfant

Publié: 2022-10-23

Si vous souhaitez personnaliser votre site WordPress au-delà des modifications de base, vous devez apprendre à créer un widget dans votre thème enfant . Les widgets WordPress sont de petits blocs de contenu que vous pouvez ajouter aux barres latérales de votre site Web ou à d'autres zones prêtes pour les widgets. Ces zones sont généralement situées dans le pied de page ou l'en-tête de votre site. Les widgets peuvent contenir n'importe quoi, du texte et des images aux lecteurs vidéo et audio. Vous pouvez même trouver des plugins qui transforment vos barres latérales en flux de médias sociaux. Dans cet article, nous allons vous montrer comment créer un widget dans votre thème enfant et vous expliquer les avantages d'en utiliser un.

J'ai créé un thème enfant et j'aimerais ajouter une zone de logo sponsorisé au-dessus du pied de page. Je suppose que la façon de faire serait d'utiliser un widget? Comment créer un nouveau widget ou utiliser l'un des widgets de pied de page existants pour qu'il s'affiche où je veux ? En allant dans Apparence. L'étape 1 est requise si vous souhaitez un contrôle total sur la barre latérale ou si vous souhaitez modifier ses paramètres. Il est techniquement possible d'accomplir ce dont vous avez besoin, mais un développement personnalisé est nécessaire. Vous pouvez consulter https://theme.co/x/member/custom-development pour plus d'informations.

Comment créer un widget personnalisé dans WordPress ?

1 crédit

Vous pouvez trouver et sélectionner Widgets dans le menu Apparence. Vous devriez voir le widget Hostinger Sample dans la liste des widgets disponibles. En faisant glisser le widget, vous pouvez le télécharger dans la barre latérale sur le côté droit de la page. Vous pouvez visiter votre site Web après avoir apporté des modifications.

Un widget WordPress est une petite collection de contenu qui est ajoutée à des zones de widget spécifiques . Il existe différents types de widgets qui vous permettent d'afficher différents types d'informations sur n'importe quelle page, selon l'endroit où vous les placez. Certains widgets sont disponibles en tant que fonctionnalité standard, tandis que d'autres sont disponibles en tant que plugins ou en tant que thème. Les quatre méthodes répertoriées ci-dessus doivent être incluses dans votre classe si vous souhaitez créer un widget de base. Pour utiliser le Widget dans le tableau de bord, vous devez également l'enregistrer à l'aide de la fonction register_widget(). Avant d'étudier l'exemple que nous avons fourni pour cet article, nous allons passer en revue le but de chaque section du code, en plus d'expliquer pourquoi chaque section est importante. Chacune des quatre méthodes de Custom_Widget est unique.

Le widget a été créé à la suite de la méthode __construct() en utilisant le paramètre custom_widget. En utilisant register_widget() à la fin, le même widget peut être enregistré. Étant donné que chacune des parties doit être ajoutée aux options du widget avec l'instruction if*…*, nous nous sommes assurés qu'elle ne s'affiche que si elle est incluse. La méthode widget () fournit un moyen d'afficher des textes multi-paragraphes, et nous avons utilisé la fonction nl2br () pour le faire. La fonction sanitize_text_field() supprime tous les espaces blancs, tabulations ou sauts de ligne inutiles. Le dernier a également une valeur par défaut définie par défaut dans le champ de sélection, ce qui signifie que la cible du lien est définie sur -blank par défaut. Vous pouvez sélectionner le titre, le texte, le lien et si le lien doit être présent ou non dans un nouvel onglet.

Une fois que vous avez terminé de remplir les options, appuyez sur le bouton Enregistrer. Si vous choisissez un thème différent pour votre widget, il sortira différemment. Dans notre cas, Lekker WordPress a un widget qui ressemble à celui présenté ci-dessous.

Comment créer un thème enfant

Crédit : TemplateToaster

Pour créer un thème enfant, vous devez créer un nouveau dossier pour le thème enfant et ajouter une feuille de style. Le thème enfant héritera du style et des fonctionnalités du thème parent , mais vous pouvez ajouter des règles CSS personnalisées à la feuille de style du thème enfant pour remplacer les styles du thème parent. Vous pouvez également ajouter des fonctions personnalisées au fichier functions.php du thème enfant pour remplacer les fonctions du thème parent.

Vous pouvez ajouter de nouvelles fonctionnalités au thème enfant tant qu'il n'hérite pas des fonctionnalités du thème parent. Il n'y a pas de lien entre les thèmes enfants et les thèmes parents ; les thèmes enfants sont séparés des thèmes parents. Avec un thème enfant, vous pouvez maintenir votre site Web à jour et le maintenir facilement. Cela vous aidera également à réduire le risque d'écrasement et de perte de l'apparence de votre site Web. Il est essentiel de noter que le thème enfant contient tous les mêmes éléments que le thème parent. Nous incluons tous les fichiers de modèle, les fonctions et les actifs dans cette catégorie, tels que JavaScript et les images. Le fichier style.css du thème enfant peut être modifié afin de répondre aux besoins de l'enfant.

L'un des moyens les plus simples de créer un thème WordPress pour votre enfant consiste à utiliser un plugin. Si votre thème parent affiche un message d'erreur, sélectionnez-le dans le menu déroulant et double-cliquez sur Analyser. Ensuite, il vous sera demandé d'entrer le répertoire de votre thème enfant. Un nom de dossier apparaîtra dans les fichiers qui composent votre site Web. Si le terme est unique à votre site Web, vous pouvez lui donner le nom que vous voulez. Si vous avez l'intention d'utiliser votre thème parent comme base pour un nouveau thème, vous pouvez inclure une brève description et un nom unique. Si vous souhaitez apporter des modifications à votre site, assurez-vous qu'il est opérationnel avant de le faire.

Vous pouvez apporter toutes les modifications souhaitées à un moment précis en créant manuellement un thème enfant WordPress . L'étape 1 consiste à créer un dossier pour le thème de votre enfant. feuilles de style des thèmes parent et enfant. Il est temps de renommer le fichier style.css. La quatrième étape consiste à inclure le fichier style.css dans le répertoire du thème enfant. Vous pourrez configurer votre thème enfant manuellement si vous allez dans Apparence. L'utilisation d'un thème enfant garantit que vous n'avez pas à modifier directement un thème parent.

Vous pouvez facilement apporter des modifications majeures à votre site Web en utilisant un thème enfant car il est simple à ajuster. Vous devez également trouver un fournisseur d'hébergement fiable. Un pack d'hébergement partagé de DreamHost vous permettra d'améliorer les performances de votre site Web à un prix abordable.

3 choses à garder à l'esprit lors de la création d'un thème enfant

La création d'un thème enfant vous obligera à créer un dossier dans lequel le thème sera stocké. Configurez une feuille de style et une fonction dans ce dossier. Ensuite, dans le dossier du thème enfant, copiez les fichiers du thème parent. Allons au lit.
Un thème enfant doit être pensé de plusieurs manières. N'oubliez pas d'inclure le nom de fichier du thème parent dans la première étape. Par exemple, si votre thème parent est WPBakery Page Builder, votre thème enfant doit être nommé WPBakery Page BuilderChild. La deuxième chose à faire est de sauvegarder les fichiers du thème parent, en plus des fichiers stylesheet et functions.php. Assurez-vous que les fichiers du thème sont à jour et qu'ils se trouvent au bon endroit.
Si vous créez un thème enfant pour un plugin, vous souhaiterez conserver les fichiers du plugin dans le dossier du thème enfant. Un thème enfant du plug-in WPBakery Page Builder doit inclure le dossier du plug-in WPBakery Page Builder ainsi que le dossier du thème enfant du plug-in WPBakery Page Builder.

Thème enfant WordPress

Un thème enfant WordPress est un thème qui hérite des fonctionnalités d'un autre thème, appelé thème parent. Les thèmes enfants sont la méthode recommandée pour modifier un thème existant. Lorsqu'un thème enfant est activé, il remplace la feuille de style, les fichiers de modèle et les fonctions du thème parent.

Avec la plate-forme WordPress, vous pouvez personnaliser complètement un site Web sans connaître HTML, CSS ou PHP. L'inconvénient est que toute modification apportée au thème après sa mise à jour par le développeur sera effacée. Plutôt que d'utiliser un thème enfant, vous pouvez en utiliser un qui vous permet d'apporter des modifications à un site Web sans avoir à retoucher les fichiers d'origine. Les fichiers d'un thème existant peuvent être modifiés ou ajoutés en tant que thème enfant. Ce thème ne changera que les parties que vous souhaitez modifier et utilisera les mêmes parties du thème parent. Les trois parties les plus importantes d'un thème enfant sont un dossier, une feuille de style et un fichier functions.html. Un thème enfant doit avoir trois composants : son propre dossier, une feuille de style et son fichier functions.php.

Les thèmes enfants, comme tous les thèmes, sont situés dans le contenu/thèmes WP de l'installation WordPress. Tout ce que vous avez à faire est de saisir le nom et le modèle du thème. Il est important de se rappeler que ce n'est que si vous avez l'intention d'utiliser votre thème, pas moi. Le fichier functions.php est la base de code qui vous permet de modifier et d'ajouter des fonctionnalités et des fonctionnalités à un site Web WordPress. La création du fichier est aussi simple que la création d'une feuille de style. Si vous n'avez pas l'intention d'utiliser PHP à l'avenir pour modifier votre thème, vous pouvez le faire sans lui. Si vous utilisez un thème parent, vous savez probablement déjà à quoi devrait ressembler votre site Web.

Pour obtenir ce statut, vous devez copier et coller les feuilles de style de vos thèmes parents. Vous pouvez le faire en utilisant CSS ou la règle @import. Le thème de votre enfant doit être exactement comme son parent si tout le reste se déroule comme prévu. Nous pouvons maintenant commencer à personnaliser notre thème et à changer les choses pour obtenir le résultat souhaité. Les personnalisations peuvent être effectuées de différentes manières, et nous en passerons en revue un grand nombre. Les styles personnalisés peuvent être ajoutés à un thème enfant, mais ils ne peuvent pas être ajoutés à un thème parent. En suivant les étapes ci-dessous, vous pouvez apporter un certain nombre de modifications à votre site Web.

Assurez-vous que le thème enfant suit la même structure de dossiers que le thème parent. Si vous vouliez modifier un fichier dans un dossier nommé page templates dans votre thème parent, vous devez créer un dossier dans le répertoire de votre thème enfant nommé page templates. Nous renommons simplement custom-full-width.php à partir du thème parent pour créer notre modèle de page personnalisé. Par exemple, dans footer-custom.php, nous créons une classe pleine largeur dans l'élément footer. La seule chose qui reste est d'entrer du code dans notre feuille de style. En conséquence, vous pouvez voir notre page pleine largeur. Nous allons bien jusqu'à ce que nous ayons besoin de le peaufiner.

Les crochets de thème vous permettent de personnaliser un thème enfant sans avoir à modifier les fichiers principaux. Les crochets de thème sont de petites icônes qui apparaissent dans les fichiers d'un thème et vous permettent d'ajouter du contenu, des fonctions et d'autres éléments. Les crochets sont disponibles en deux variétés : les crochets à action et les crochets à filtre. Un crochet de filtre modifie les fonctions trouvées à l'emplacement du crochet, tandis que les crochets d'action ajoutent des fonctionnalités personnalisées aux fonctions existantes. C'est simple de construire un thème enfant dans WordPress : tout ce dont vous avez besoin est une seule ligne de code. Pour cette raison, nous avons l'intention de cibler une fonction qui gère les crédits de pied de page dans le thème Twenty Fifteen. Le fichier footer.php modifié dans le fichier functions.html de votre thème enfant doit être supprimé.

Les crochets dans les thèmes enfants peuvent être utilisés de différentes manières. Si nous utilisons un thème enfant, nous pouvons complètement personnaliser un site Web sans avoir à modifier ses fichiers sous-jacents. Si vous souhaitez ajouter un thème ou un framework, vous pouvez le faire sans l'écrire à partir de zéro, et vos modifications sont à l'abri des mises à jour ; si quelque chose ne va pas, le thème sera toujours là.

3 occasions où un thème enfant est avantageux

Il existe quelques situations dans lesquelles un thème enfant serait bénéfique. Un thème parent n'inclut pas toutes les fonctionnalités nécessaires. Des modifications ont été apportées au thème parent, mais elles n'apparaissent pas sur le thème enfant. Il n'est pas compatible avec les dernières mises à jour de WordPress.

Comment créer un thème enfant dans WordPress étape par étape

Un thème enfant est un thème WordPress qui hérite ses fonctionnalités d'un autre thème WordPress, appelé thème parent. Les thèmes enfants sont souvent utilisés lorsque vous souhaitez personnaliser ou modifier le style d'un thème WordPress existant sans perdre la possibilité de mettre à jour ce thème. Afin de créer un thème enfant, vous devrez avoir une compréhension de base de la façon de coder en PHP. Une fois que vous avez créé le thème enfant, vous pouvez ajouter vos propres personnalisations dans le répertoire du thème enfant.
1. Créez un nouveau répertoire pour votre thème enfant.
2. Créez une feuille de style pour votre thème enfant.
3. Incluez la feuille de style dans votre thème enfant.
4. Activez le thème enfant.

Comment créer un thème enfant dans WordPress

Vous pouvez attacher votre thème à un dossier appelé enfant en créant un nouveau dossier. Vous aurez alors une feuille de style enfant dans le même dossier. Pour terminer la tâche, créez une fonction. Vous devez inclure le fichier child.php dans le même dossier que le fichier parent.php. Avant de pouvoir commencer à utiliser votre nouveau thème enfant , vous devrez copier les fichiers principaux de WordPress. Les thèmes enfants héritent des fichiers et paramètres de leurs parents car c'est leur responsabilité. Par conséquent, si vous souhaitez utiliser l'une des fonctionnalités ou les paramètres de vos thèmes parents, vous devez les copier dans votre thème enfant.

Widget WordPress personnalisé

Un widget WordPress personnalisé est un type de plugin WordPress qui vous permet d'ajouter un widget personnalisé à votre site WordPress. Les widgets WordPress personnalisés sont généralement créés par des développeurs tiers et peuvent être trouvés sur le référentiel de plugins WordPress.org.

Qu'est-ce que WordPress peut faire d'autre que d'inclure un widget pour le texte ? Ce tutoriel vous guidera à travers les étapes de création d'un widget WordPress personnalisé. Si vous débutez en programmation, ce tutoriel n'est peut-être pas pour vous. Nous vous recommandons de consulter notre série WordPress Development for Beginners pour en savoir plus. Une fonction constructeur doit être utilisée pour spécifier un identifiant, un titre, un nom de classe et une description pour un widget. En utilisant la méthode widget(), vous pouvez générer le contenu réel de votre widget. Pour notre exemple, nous utiliserons get_bloginfo() pour afficher le titre du widget.

Sinon, vous utiliseriez simplement le widget de texte WordPress pour créer la page. La totalité de la méthode widget() doit être imbriquée dans l'instance jpen_Example_Widget. La méthode form() est utilisée pour ajouter des champs de paramètres à un widget qui sera affiché dans la zone d'administration de WordPress. C'est là que de nombreux widgets avec beaucoup d'options tirent leur nom. Dans le cas de notre exemple de widget, nous souhaitons uniquement permettre aux utilisateurs d'y ajouter un titre personnalisé. J'ai créé un tutoriel pour vous montrer comment convertir n'importe quel modèle HTML5 en thème WordPress. Pour faire une liste de toutes les catégories, triez-la par ordre alphabétique, puis organisez-les en deux listes.

Un deuxième widget, du modèle Blog Post HTML5, sera le widget de la barre latérale de la liste des catégories. Il est essentiel d'employer la classe WP_Widget afin de développer un widget de barre latérale personnalisé . Vous devrez affiner vos connaissances afin de créer les widgets personnalisés les plus puissants. Si vous concentrez votre attention sur les cinq fonctions, vous pourrez créer un widget WordPress basé sur n'importe quelle idée.

Comment ajouter des styles personnalisés aux widgets WordPress ?

La section Apparence se trouve ici. Sélectionnez le widget auquel vous souhaitez ajouter des styles personnalisés en cliquant dessus sur la page du widget . Après cela, vous devez faire défiler jusqu'à l'onglet Avancé sous Panneau de blocage. Une classe CSS personnalisée peut être ajoutée en cliquant dessus. En cliquant sur le bouton Mettre à jour, vous pouvez enregistrer vos modifications.

Comment changer l'apparence d'un widget WordPress ?

Dans les écrans d'administration de WordPress, accédez à Apparence > Personnaliser. Vous pouvez accéder à l'écran de personnalisation du widget en cliquant sur le menu Widget dans le personnalisateur de thème. Pour trouver le widget qui est déjà enregistré, cliquez sur la flèche vers le bas dans la zone du widget.