Comment créer un modèle de page WordPress personnalisé

Un site Web WordPress vraiment professionnel contiendra presque certainement des modèles de page personnalisés. En effet, bon nombre des types de sites Web les plus courants s'appuieront sur des modèles. Un site Web immobilier aura besoin d'un modèle pour ses maisons, d'un site Web de commerce électronique pour ses produits, d'un site d'adhésion pour ses membres, etc.

Un modèle définit l'apparence des pages et des publications sur le front-end. C'est le plan directeur qui indique comment et où vous afficherez tout le contenu de chaque publication. Par exemple, toute modification que vous apportez à votre modèle de recettes sur un site Web de cuisine affectera la façon dont toutes les recettes apparaissent sur le front-end.

Il existe deux types de modèles de pages WordPress personnalisés que je vais parcourir :

1. Un modèle pour les pages régulières
2. Un modèle pour les pages de publication unique

Pourquoi vous aurez besoin d'un modèle WordPress personnalisé pour les pages régulières

Un modèle est un moyen simple de s'assurer que des pages similaires suivent la même structure. Au lieu d'avoir à créer la mise en page pour chaque page individuellement, vous pouvez simplement créer le modèle une fois et l'attribuer aux pages de votre choix. Ces pages suivront ensuite le modèle.

Imaginons un exemple. Sur un site Web de cuisine, vous pouvez avoir un certain nombre de pages avec des conseils de cuisine tels que «Comment faire des pâtes parfaites», «Comment faire cuire des œufs», etc.

J'ai un ebook sur la cuisine que je veux afficher sur toutes ces pages. Au lieu de modifier chaque page avec le même contenu (ce qui prendrait beaucoup de temps), je peux simplement créer un modèle une fois et attribuer le modèle aux pages. De cette façon, chaque page contiendra un appel à l'action pour télécharger mon ebook.

Sur les deux pages ci-dessus, vous pouvez voir mon appel à l'action sur le côté droit. C'est parce que j'ai attribué le même modèle aux deux pages.

Les deux façons de créer un modèle de page WordPress personnalisé

Il existe deux manières de créer votre modèle de page WordPress personnalisé :

• À la dure . Les thèmes fournissent automatiquement les fichiers PHP qui définissent les modèles dans WordPress. Lorsque vous créez un type de publication personnalisé (comme des recettes), vous devez soit modifier ces champs PHP, soit en créer de nouveaux pour vous assurer que votre site Web affiche vos publications.
• La voie facile. Vous pouvez utiliser un plugin WordPress tel que Toolset pour créer vos modèles. Toolset crée des modèles en quelques minutes et sans aucun codage. De plus, avec Toolset Blocks, vous pouvez ajouter des blocs à l'éditeur WordPress Gutenberg avec un contenu dynamique.

Ci-dessous, je vais vous montrer le moyen facile.

Je vais d'abord créer un modèle pour les pages normales qui contiendra un appel à l'action sur le côté droit.

Deuxièmement, je vais créer un modèle pour le type de publication personnalisé de mes recettes.

Comment créer un modèle de page WordPress personnalisé pour les pages régulières

Étape 1 : Création de la structure du modèle de contenu

Vous devez d'abord créer le modèle de contenu pour vos pages. Avec Toolset installé, vous pouvez ouvrir un nouveau modèle de contenu et commencer à ajouter vos blocs.

Tout d'abord, j'arrange la structure du modèle. Ci-dessous, vous pouvez voir que j'ai ajouté le propre bloc de grille de Toolset qui me permet de diviser mon modèle en sections. J'ai divisé le modèle en deux et agrandi la section de gauche pour qu'elle occupe 75% de la page.

Étape 2 : Ajoutez du contenu à votre modèle

Maintenant que j'ai la structure dont j'ai besoin pour insérer les blocs avec le contenu que je veux afficher. A gauche, j'ajoute le contenu de l'article. Tout ce que j'ai à faire est d'insérer le bloc de champ unique de Toolset qui me permet de sélectionner la source que je veux pour le contenu.

Ci-dessous, je sélectionne le contenu de la publication sur le côté droit comme source du bloc.

Pour le côté droit du modèle, j'ajouterai l'appel à l'action. Tout ce que j'ai à faire est de sélectionner les blocs que je veux en fonction du contenu. Ci-dessous, j'ai utilisé le bloc de titre et le bloc de boutons de Toolset. Pour le bloc de boutons, j'inclus également un lien vers le livre.

Étape 3 : styliser les blocs

Lorsque vous combinez WordPress avec Toolset, vous pouvez styliser les blocs que vous ajoutez à votre modèle. Si vous choisissez de créer des blocs "à la dure", vous devrez vous fier à vos compétences en matière de codage pour un bon style.

Lorsque vous cliquez sur un bloc, vous verrez sur le côté droit un certain nombre d'options pour styliser et améliorer votre modèle.

Sous « Typographie », vous pouvez modifier les éléments suivants :

• Police de caractère
• Taille de police
• Espacement
• Style
• Couleur du texte

Ce n'est pas tout. Sous les « Paramètres de style », vous pouvez également modifier les éléments suivants :

• Couleur de l'arrière plan
• Rembourrage de marge
• Frontière
• Boîte ombre

Ci-dessous, j'ai ajouté une nouvelle couleur d'arrière-plan pour l'appel à l'action. Notez que vous n'avez pas besoin de coder les modifications, mais que vous sélectionnez simplement les couleurs et tout autre style que vous souhaitez.

Étape 4: Ajustez le modèle pour différentes tailles d'écran

Vous créez probablement votre modèle sur un ordinateur portable ou un ordinateur de bureau, mais il est important de se rappeler que vos utilisateurs peuvent ne pas afficher le site Web sur la même taille d'écran. En fait, une majorité croissante sera sur leur tablette ou leur appareil mobile.

Par conséquent, vous devrez peut-être ajuster le modèle pour chaque taille d'écran. C'est assez facile à faire avec Toolset et WordPress.

Dans la barre latérale droite à côté de chaque élément de style, il existe une option pour basculer entre le bureau, la tablette et le mobile.

Comme vous pouvez le voir, lorsque je bascule entre les options, le modèle s'ajuste lui-même afin que vous puissiez vérifier à quoi ressemblera le modèle sur chaque appareil.

Étape 5 : Attribuez le modèle à vos pages

Maintenant que j'ai un modèle, je n'ai plus qu'à l'attribuer aux bonnes pages. Une fois que j'ai fait cela, chaque page affichera le même modèle.

Tout ce que j'ai à faire est de modifier chaque page et de sélectionner le bon modèle de contenu.

Sur le front-end, je verrai maintenant le modèle sur la page à laquelle je l'attribue.

Pourquoi vous aurez besoin d'un modèle de page WordPress personnalisé pour les publications uniques

En plus de créer des modèles pour les publications régulières, vous aurez probablement également besoin de modèles pour chacune des publications dans un type de publication personnalisé.

Pour mon site de cuisine, j'ai créé un type de publication personnalisé pour mes recettes. Ci-dessous, vous pouvez voir une de mes recettes sur le back-end. Notez tous les champs personnalisés que j'ai créés pour cela, tels que le temps de préparation, le temps de cuisson et l'image de la recette.

Je n'ai pas encore attribué de modèle à mes recettes. Voyez ce qui se passe lorsque nous examinons la recette sans modèle sur le front-end.

Comme vous pouvez le voir, aucun des champs personnalisés n'apparaît sur le front-end. En fait, tout ce que vous pouvez voir est le contenu principal du message, tel que le titre et le corps du message. C'est pourquoi un modèle est si important pour vos publications individuelles car il vous permet d'afficher tout votre contenu, y compris les champs personnalisés.

Ci-dessous, vous pouvez voir deux de mes recettes sur le front-end. Vous pouvez maintenant voir les champs personnalisés car je leur ai attribué un modèle.

Ci-dessous, je vais vous montrer comment j'ai créé ce modèle pour mes recettes.

Étape 1 : Création du modèle

La première chose que je dois faire est de créer le modèle dans lequel je vais ajouter mon contenu. Je peux le faire à partir du tableau de bord Toolset sur le back-end WordPress.

En sélectionnant le modèle de cette façon, j'affecte automatiquement le modèle à toutes les recettes que j'ai créées. Par conséquent, je n'ai pas besoin de revenir à chaque recette et d'attribuer manuellement le modèle.

Étape 2 : Ajout du contenu au modèle

Maintenant, sur le modèle de contenu, je peux commencer à ajouter et à structurer le contenu comme je l'ai fait pour le modèle précédent pour mes publications régulières.

Encore une fois, je peux ajouter le bloc Toolset Grid pour créer la structure du modèle.

Je peux maintenant commencer à ajouter mes blocs pour mon contenu. Par exemple, sur mes recettes, j'ai une image sur la colonne de gauche. À partir de l'ensemble de blocs de Gutenberg, je peux ajouter le bloc d'image de Toolset. J'ai besoin de la version du bloc de Toolset car elle me permet d'ajouter du contenu dynamique.

Le contenu dynamique signifie que vous pouvez créer un élément tel qu'une image et pour chacun des messages, il dessinera le contenu correct pour ce message particulier. Par exemple, le contenu dynamique signifie que ma recette de gâteaux à la banane affichera, vous l'aurez deviné, un gâteau à la banane. Sinon, le contenu serait statique et au lieu d'un gâteau à la banane, vous verriez l'image que j'insère lorsque je l'ai créée dans le modèle.

En utilisant Toolset et WordPress, je peux sélectionner la source dynamique pour chacun de mes blocs pour lui dire quoi afficher.

Par exemple, j'ai créé un nouveau bloc pour ajouter l'un de mes champs personnalisés, Prep Time. Une fois que j'ai ajouté le bloc, je peux sélectionner le champ Temps de préparation comme source du bloc sur le côté droit. Ce bloc est également dynamique car le temps de préparation variera en fonction des exigences de la recette.

Vous pouvez ajouter un certain nombre de types de blocs différents, notamment un bloc de champ répétitif pour ajouter plusieurs éléments (comme plusieurs lignes pour une recette), un bloc de curseur d'image, un bloc YouTube et bien plus encore.

Étape 3 : stylisez vos blocs

Tout comme avec le premier modèle pour les publications régulières, je peux styliser chacun de mes blocs.

Étape 4 : Ajustez le modèle pour différentes tailles d'écran

Encore une fois, similaire au modèle précédent, je peux ajuster la structure pour différentes tailles d'écran.

Étape 5 : Vérifiez à quoi ressemble le modèle avec chacun de vos messages

Enfin, vous pouvez également choisir la recette que vous affichez sur votre modèle afin de voir si elle convient à toutes. Utilisez le menu déroulant en haut de la page pour basculer entre les messages.

Une fois que vous êtes prêt, vous pouvez vérifier votre modèle sur le front-end.

Et juste comme ça, j'ai un modèle pour mes recettes. Désormais, lorsque je crée une toute nouvelle recette, elle suivra immédiatement la structure du modèle.

Commencez à créer votre propre modèle de page WordPress personnalisé dès aujourd'hui

Maintenant, c'est à votre tour de voir à quel point il est facile de créer votre propre modèle de page WordPress. Tout ce que vous avez à faire est de télécharger Toolset, puis de consulter sa documentation pour voir à quelle vitesse vous pouvez créer un modèle pour vos publications sans codage.