Home WordPress Décodage WordPress : modèles et parties de modèle

Décodage WordPress : modèles et parties de modèle

by saber
Décodage WordPress : modèles et parties de modèle


Avec l’introduction de Wordpress 5.9, vous pouvez désormais utiliser l’édition complète du site pour personnaliser l’apparence de votre thème. En outre, vous pouvez accéder à davantage de fonctionnalités de conception pour créer votre site Web sans coder avec un thème basé sur des blocs. Cependant, cette configuration de base peut ne pas répondre à vos besoins.

Heureusement, vous pouvez ajouter des modèles personnalisés et des parties de modèle à votre thème de bloc WordPress. Soit en modifiant l’intégralité de votre site, soit en modifiant votre fichier de thème, vous pouvez créer une mise en page personnalisée à réutiliser lors de la conception de nouveaux contenus.

Dans cet article, nous discuterons de ce que sont les modèles et des parties du modèle. Ensuite, nous vous montrerons comment les créer dans WordPress. Commençons!

Une introduction aux modèles et aux parties des modèles (pourquoi et comment les utiliser)

Avec l’édition complète du site, vous pouvez styliser la mise en page de votre site Web avec des blocs. Vous utilisez probablement déjà des blocs pour créer des publications WordPress. Désormais, ils peuvent créer l’intégralité de leur site, y compris les zones sans contenu.

L’un des avantages de l’édition complète du site est ses modèles de page. Si vous ne comptez que sur les thèmes WordPress par défaut pour personnaliser votre conception Web, vous aurez peut-être du mal à créer des pages uniques. Les modèles de page peuvent offrir plus de flexibilité lors de la conception de votre site.

Les modèles de page sont des fichiers qui contrôlent l’apparence d’une page spécifique. Au lieu de créer de nouvelles pages et de formater chacune d’entre elles, vous pouvez utiliser des modèles pour appliquer automatiquement une mise en page particulière :

Dans WordPress, il existe également des parties de modèle, qui fonctionnent comme des sections structurelles plus petites d’un modèle de page. En règle générale, vous verrez des composants de modèle pour les en-têtes ou les pieds de page :

À l’aide d’un modèle, vous pouvez créer des pages avec des fonctionnalités uniques. Par exemple, vous ne souhaitez peut-être pas que votre page d’accueil ait la même mise en page que le reste de votre contenu. Par conséquent, vous pouvez obtenir un design unique avec un modèle de page.

De plus, vous pouvez gagner du temps pendant le processus de conception en réutilisant des modèles et des composants de modèle. En cliquant simplement sur un modèle ou un élément individuel, vous pouvez le déployer instantanément.

Comment créer des modèles dans WordPress avec l’éditeur de modèles

Si vous utilisez un thème de bloc, il est livré avec le éditeur de modèles. Avec cette fonctionnalité, vous pouvez créer et modifier des modèles pour n’importe quelle page ou publication sur votre site Web. Il fonctionne de manière similaire à l’éditeur de blocs, vous permettant de personnaliser votre thème avec des blocs.

Pour commencer, vous devrez installer un thème de bloc. Dans votre tableau de bord WordPress, accédez à Apparence> Thèmes> Ajouter nouveau. Filtrez ensuite les résultats avec un Édition complète du site étiqueter:

Sélectionner appliquer des filtres. Dans les résultats de la recherche, installez et activez un thème. Nous utiliserons le thème par défaut Twenty Twenty-Two pour ce tutoriel :

Pour créer un nouveau modèle, commencez par ajouter un nouvel article ou une nouvelle page. Ainsi dans le Poster l’onglet Paramètres, recherchez l’onglet Modèle section et sélectionnez la Nouveau bouton:

Dans la fenêtre contextuelle, donnez un nom à votre nouveau modèle. Sélectionnez ensuite Créer:

Cela ouvrira automatiquement l’éditeur de modèles. Vous pouvez concevoir votre modèle en utilisant les mêmes blocs que vous utiliseriez dans un article. Cependant, il est important de noter que ces blocs seront ajoutés à chaque publication avec ce modèle :

Vous pouvez également insérer des blocs liés à votre thème. Faites défiler vers le bas jusqu’à Thème section des options de bloc, vous pouvez afficher un logo, un slogan, publier des commentaires, etc. :

Lorsque vous avez terminé de personnaliser votre modèle, cliquez sur publier. Ensuite, chaque fois que vous souhaitez attribuer une publication ou une page à ce modèle, sélectionnez-la simplement dans l’onglet Paramètres.

Évitez les files d’attente et recevez des conseils directement dans votre boîte de réception

Cliquez ci-dessous pour vous abonner à d’autres tutoriels et tutoriels comme celui-ci, livrés dans votre boîte de réception.

Comment créer des éléments de modèle dans WordPress avec l’éditeur de site

Avec un thème de bloc, vous pouvez modifier des modèles avec l’éditeur de site. Vous pouvez modifier votre thème directement au lieu de créer un nouveau message ou une nouvelle page.

Tout d’abord, rendez-vous sur votre tableau de bord. Sélectionnez ensuite Apparence > Éditeur (bêta):

Cela ouvrira l’éditeur de site. Pour trouver vos modèles de thème et vos parties de modèle, cliquez sur l’icône WordPress dans le coin supérieur gauche :

Après avoir sélectionné pièces de modèle, vous verrez une liste d’options par défaut. Pour ajouter une nouvelle pièce au modèle, cliquez sur le ajouter nouveau bouton:

Créez ensuite un nom pour la partie de votre modèle et choisissez où la placer. Les trois zones de placement sont Général, EntêteOui Pied de page:

Lorsque vous avez terminé, sélectionnez Créer. Cela vous mènera à la partie de modèle isolée, que vous pouvez personnaliser en ajoutant des blocs :

Vous pouvez afficher un simple appel à l’action, un logo de site Web ou tout ce que vous souhaitez réutiliser dans le cadre du modèle. Une fois enregistré, vous pouvez l’ajouter à n’importe quel modèle en insérant simplement le partie de modèle bloc.

Comment créer des modèles personnalisés et des parties de modèle dans WordPress (codage manuel)

Bien que l’édition complète du site vous permette de créer des modèles et des parties de modèle pour un thème existant, vous souhaiterez peut-être développer votre thème. En outre, cette option peut vous donner plus de contrôle sur l’apparence de votre site Web.

Si vous construisez votre nouveau thème à partir d’un thème existant, nous vous recommandons de créer un thème enfant. Cette étape garantit que les nouvelles mises à jour du thème parent ne remplacent pas vos personnalisations.

Étape 1 : Ajouter un fichier de configuration

Avec les anciens thèmes basés sur PHP, vous pouvez modifier l’en-tête de votre fichier de modèle. Cependant, pour créer du contenu personnalisé dans un thème basé sur des blocs, vous devrez créer un nouveau thème.json Record.

Vous devrez d’abord accéder à votre site via le protocole de transfert de fichiers sécurisé (SFTP) ou le panneau de configuration de l’administrateur du site de votre hébergeur. Cherchez ensuite le les sujets dossier, qui devrait se trouver sous wp-contenu:

Dans votre dossier de thème enfant, créez un nouveau fichier. Taguez-le theme.json :

Dans ce fichier, mettez le numéro de version entre crochets. Si vous ne l’ajoutez pas, il s’agira de la version 0 :

{
 "version": 2
 }

Vous devrez le configurer thème.json fichier pour prendre en charge la largeur de son contenu. Après votre numéro de version, copiez et collez ce code supplémentaire:

{
 "version": 2,
 "settings": {
 "layout": {
 "contentSize": "840px",
 "wideSize": "1100px"
 }
 }
 }

Cela définira la largeur de votre contenu à 840 pixels. La largeur large sera également mise à jour à 1100px. Ces valeurs correspondent aux largeurs par défaut dans l’éditeur de site, mais vous pouvez les modifier si nécessaire.

Étant donné que la largeur du contenu est maintenant de 840 pixels, cela offrira beaucoup d’espace pour chaque ligne de caractères. En fonction de la police et de la taille que vous avez choisies, vous devrez peut-être l’ajuster pour que les téléspectateurs puissent lire confortablement votre contenu.

Étape 2 : Créer de nouvelles pièces de modèle

Retournez ensuite à votre les sujets dossier et ouvrez le modèles dossier:

Ici, créez un index.html Record:

Retournez dans votre dossier de thème et cliquez sur pièces de modèle. Dans ce dossier, créez des fichiers pour pied de page.html Oui header.html:

Dans header.html fichier, ajoutez du code pour les blocs de titre et de slogan de votre site. Vous pouvez le faire en incluant ceci marquage de bloc:

<!-- wp:site-title /-->
 <!-- wp:site-tagline /-->

Ensuite, allez dans le fichier footer.html et collez le code suivant :

<!-- wp:paragraph {"align":"center"} -->
 <p class="has-text-align-center">Proudly powered by 
 <a href="https://wordpress.org/">WordPress</a>.</p>
 <!-- /wp:paragraph /->

Une fois que vous avez ajouté ces composants de modèle, ils peuvent être facilement identifiés lorsque vous êtes prêt à tester votre thème.

Étape 3 – Combinez les parties du modèle

L’étape suivante consiste à placer le balisage de bloc pour vos parties de modèle dans votre fichier HTML de modèle. Ouvrez le modèles dossier et recherchez le index.html fichier que vous avez créé à la dernière étape.

Ensuite, vous devrez ajouter du code pour les deux parties de votre modèle :

<!-- wp:template-part {"slug":"header"} /-->
 <!-- wp:template-part {"slug":"footer"} /->

Selon le nom du fichier de pièce de modèle, ce nom deviendra le slug. Par exemple, lui header.html la partie de modèle aura un en-tête comme slug.

Ensuite, ajoutez l’élément HTML correct pour chaque partie du modèle. Ils identifieront l’emplacement de la partie de modèle :

"tagName":"header"
 "tagName":"footer"

Si vous prévoyez d’utiliser CSS pour identifier cet en-tête et ce pied de page, vous devrez ajouter un nom de classe CSS personnalisé. Vous pouvez mettre ce code à la fin de chaque ligne :

"className":"site-header"
 "className":"site-footer"

Enfin, la configuration de mise en page que vous avez insérée dans le thème.json le fichier doit être compatible. Pour ce faire, ajoutez ce code à chaque partie du modèle :

"layout":{"inherit":true}

Voici à quoi devrait ressembler le code résultant :

Une fois que vous avez terminé le codage, vous pouvez prévisualiser votre site pour voir ces changements dans votre mise en page.

Créer des modèles originaux

Si vous souhaitez rationaliser le processus de conception de votre site Web, il est judicieux d’utiliser l’édition complète du site. Vous pouvez facilement personnaliser l’apparence de vos sites avec des modèles et des parties de modèle grâce à cette fonctionnalité. Cette approche peut être une alternative plus simple à la refonte complète de chaque page à partir de zéro.

Pour passer en revue, voici les différentes manières de créer des modèles et des parties de modèle dans WordPress :

  1. Créez un nouveau modèle avec l’éditeur de modèle.
  2. Créez des composants de modèle avec l’éditeur de site.
  3. Codez manuellement les modèles et les parties de modèle.

Coder votre propre thème peut être délicat, surtout si vous n’avez aucune expérience du développement Web. Si vous avez besoin de personnaliser votre design à partir de zéro, vous pouvez engager un designer professionnel. Avec notre service Custom Web Design Pro, vous pouvez contourner ce processus de codage compliqué et obtenir un site Web de haute qualité conçu pour votre marque !

Obtenez un beau site Web dont vous êtes fier

Nos designers créeront un site Web magnifique à partir de zéro pour correspondre parfaitement à votre marque.

conception de site Web personnalisé



L’article est traduit, cliquez ici pour voir la source

Related Posts

Leave a Comment