logo webmaster israel wordpress .fw22.fw
3 façons simples de créer un modèle de page personnalisé dans WordPress

3 façons simples de créer un modèle de page personnalisé dans WordPress

Vous souhaitez créer un modèle de page personnalisé dans WordPress ?

Vous souhaitez créer un modèle de page personnalisé qui diffère du reste des pages de votre site Web ? Vous voulez savoir comment créer un modèle même si vous n’avez aucune expérience en codage ?

Vous conviendrez probablement que la création de sites Web à l’aide de WordPress est relativement facile.

Installez un thème WordPress, adaptez le contenu à vos besoins et le tour est joué, votre site Web est prêt à être lancé !

Avec une structure de modèle prédéfinie, tout ce que vous avez à faire est de remplacer le texte et les images par défaut par votre contenu unique, et vous êtes pratiquement prêt à partir.

Cependant, que se passe-t-il si vous souhaitez modifier la structure de mise en page d’une page particulière ? Que se passe-t-il si vous souhaitez créer une mise en page unique différente de la mise en page par défaut ?

Heureusement, WordPress vous donne la possibilité de créer des mises en page personnalisées. Vous pouvez les utiliser de manière unique ou comme modèle pour plusieurs pages.

Et le meilleur, c’est que vous n’avez même pas besoin de connaître HTML, CSS ou PHP !

Alors, comment créer un modèle de page personnalisé dans WordPress ?

Découvrons-le!

Qu’est-ce qu’un modèle de page personnalisée WordPress ?

Comme son nom l’indique, un modèle de page personnalisé dans WordPress est un fichier de modèle personnalisé appliqué à une page ou à un groupe de pages spécifique.

En utilisant un modèle de page personnalisé, vous pouvez appliquer une mise en page différente du reste des pages de votre site.

Modèle de page personnalisée WordPress

Par exemple, vous voudrez peut-être que votre page de destination ou votre page de vente soit très différente du reste de votre site. Vous pouvez également créer une page d’archive personnalisée pour afficher vos publications.

Vous souhaitez créer un modèle de page dans WordPress pour une mise en page pleine largeur ou une colonne ?

Tout cela peut être réalisé en utilisant un modèle de page personnalisé.

Non seulement un modèle de page peut être appliqué pour afficher du contenu dynamique sur une page, mais il peut également être appliqué à une section de page ou même à une classe particulière de pages.

L’apparence de vos pages est contrôlée par votre thème WordPress à l’aide du fichier de modèle page.php .

Par défaut, toutes les pages uniques de votre site WordPress utilisent ce fichier de modèle.

Mais que se passe-t-il lorsque vous avez un modèle de page personnalisé dans WordPress ? Comment WordPress sait-il quel modèle de page utiliser ?

C’est là que la hiérarchie des modèles de page entre en jeu.

Hiérarchie des modèles de page

Chaque fois qu’une demande est envoyée pour afficher votre site Web, WordPress détermine quel contenu doit être affiché et comment cette partie spécifique du site Web ou de la page doit être rendue.

La hiérarchie des modèles WordPress parcourra une liste de fichiers de modèles de page et sélectionnera le meilleur ajustement.

En règle générale, la hiérarchie des pages ressemble à ceci :

  • Modèle de page : WordPress recherche le modèle personnalisé que vous avez attribué à la page et l’utilise
  • page-{slug}.php : si vous n’avez pas attribué de modèle personnalisé, WordPress recherche un modèle contenant le slug de la page et l’utilise
  • page-{id}.php : Si un modèle avec le slug de la page n’est pas trouvé, WordPress recherche ensuite un modèle avec l’ID de la page
  • page.php : Si un modèle avec l’ID de la page n’est pas trouvé, WordPress utilise le modèle par défaut du thème
  • singular.php : Si le fichier page.php n’est pas trouvé, quel que soit le type de publication, WordPress utilise le modèle du thème destiné aux publications uniques
  • index.php : WordPress utilise le fichier index.php par défaut du thème pour afficher une page si aucun modèle spécifique n’a été attribué

Maintenant que nous avons une bonne idée de la façon dont WordPress choisit un modèle, comprenons pourquoi nous pourrions avoir besoin d’un modèle de page personnalisé dans WordPress.

 

Pourquoi pourriez-vous avoir besoin d’un modèle personnalisé ?

Un modèle de page personnalisé vous permet de personnaliser un site WordPress de plusieurs manières.

L’utilisation d’un modèle de page personnalisé vous permet d’afficher différents types de contenu sur différentes pages. Si vous envisagez de créer plusieurs pages, un modèle personnalisé est votre meilleur pari.

Alors que la plupart des thèmes proposent une sélection de modèles prédéfinis, certains ne le font pas, ce qui limite votre flexibilité de conception.

Examinons quelques cas où vous pourriez avoir besoin d’un modèle de page personnalisé.

Pages d’entonnoir de vente

Une page d’entonnoir de vente est une page autonome sur votre site WordPress conçue dans le seul but d’encourager les visiteurs à effectuer une tâche spécifique.

Il peut s’agir de s’inscrire à un webinaire, d’acheter quelque chose, de s’inscrire à un essai gratuit ou de télécharger un livre électronique.

Exemple de page optin de webinaire

Si vous utilisez WordPress pour votre site, vous pouvez créer rapidement un entonnoir de vente avec un modèle de page personnalisé.

Une fois que vous avez sélectionné un modèle de page personnalisé, vous pouvez le personnaliser pour l’adapter à l’apparence de votre site. Vous pouvez également utiliser un modèle de page de destination prédéfini pour créer votre entonnoir.

Vous aurez également besoin de WooCommerce et de CartFlows pour créer un entonnoir de vente avec WordPress.

Pages de destination

Une page de destination est une page autonome conçue pour convertir les visiteurs en prospects comme les pages d’entonnoir.

Une page de destination typique n’a pas de barres latérales, d’en-tête ou de pied de page pour réduire les distractions. Tout ce que vous avez est une page pleine largeur qui comprend du texte, un formulaire de capture de prospects et un appel à l’action.

Exemple de page de destination

Un modèle de page personnalisé est un excellent moyen de créer une page de destination.

Si vous utilisez l’éditeur de blocs Gutenberg, vous pouvez personnaliser n’importe quel bloc et supprimer celui dont vous n’avez pas besoin.

De nombreuses pages de destination utilisent des boutons d’appel à l’action, et le bloc Boutons vous permettra d’ajouter un bouton à vos pages. Un bloc d’abonnement vous aidera également à collecter des prospects auprès des visiteurs.

Si votre site Web vend un produit, votre page de destination doit être conçue en tenant compte des objectifs de ce public spécifique.

Une squeeze page est un bon choix si vous essayez de capturer des adresses e-mail. Une page de remerciement augmentera la satisfaction des clients. Une page d’accueil de webinaire vise à augmenter les inscriptions.

Vous avez eu l’idée.

Pages avec des utilisations différentes de celles des pages « principales »

Les modèles de page personnalisés peuvent créer à peu près n’importe quelle page dont vous pourriez avoir besoin.

Par exemple, vous pouvez utiliser un modèle de page personnalisé pour présenter vos articles de blog dans un format de catégorie spécifique. Vous pouvez également attribuer une page personnalisée comme page d’accueil de votre site Web, ce qui rend votre page complètement différente de vos autres pages.

En termes simples, un modèle de page personnalisé fonctionne bien lorsque vous souhaitez créer une page différente du reste des pages de votre site Web.

Une fois que vous avez créé un modèle, vous pouvez le réutiliser autant de fois que vous le souhaitez sans avoir à en créer un autre à partir de zéro.

Utiliser des modèles de démarrage pour créer un modèle de page personnalisé

La création d’un modèle de page personnalisé est très simple si vous utilisez notre thème Astra et nos modèles de démarrage.

Starter Templates est une bibliothèque de modèles prédéfinis qui fonctionne pour à peu près n’importe quel créneau. Pour les besoins de cet article, nous allons importer un modèle de démarrage pour le générateur de pages Elementor.

Pour commencer, rendez-vous sur Pages > Ajouter un nouveau et nommez votre modèle.

Modifier avec Elementor et l'option de modèle

Sous l’ onglet Modèle , sélectionnez l’ option Elementor Canvas . De cette façon, nous avons une toile entièrement vierge avec laquelle jouer.

Ensuite, cliquez sur le bouton Modifier avec Elementor .

Parmi les options proposées, cliquez sur Modèles de démarrage .

cliquez sur Modèles de démarrage

Nous supposons que vous avez installé des modèles de démarrage sur votre site WordPress.

Si vous en avez, vous remarquerez une gamme de modèles uniques parmi lesquels choisir.

Bien que vous puissiez sélectionner n’importe quel modèle que vous aimez, nous allons continuer et rechercher un modèle de « page de destination » en utilisant le champ de recherche fourni.

Rechercher des modèles de démarrage

En cliquant sur le modèle, vous pouvez voir les différentes pages qui l’accompagnent.

Dans ce cas, nous n’avons que le modèle de page de destination.

Importer un modèle de démarrage

Si tout semble bon, continuez et cliquez sur le bouton Importer un modèle .

Cela charge le modèle sur votre page.

Enregistrer en tant que modèle

En règle générale, nous cliquons tout de suite sur le bouton de publication. Mais, avant de faire cela, cliquez sur la flèche à côté du bouton de publication.

Vous avez deux options : enregistrer un brouillon ou enregistrer en tant que modèle.

Cliquez sur l’ option ‘ Enregistrer comme modèle ‘.

Enregistrer le modèle dans la bibliothèque

Vous serez invité à entrer un nom pour votre modèle. Cliquez sur Enregistrer lorsque vous avez terminé.

Votre modèle sera maintenant enregistré sous l’onglet Mes modèles.

Modèle enregistré sous l'onglet Mes modèles

La prochaine fois que vous voudrez utiliser ce modèle, cliquez sur le lien Insérer .

C’est aussi simple que cela de créer un modèle de page personnalisé à l’aide des modèles de démarrage !

Créer un modèle de page personnalisé à l’aide d’Elementor

Nous allons maintenant créer un modèle de page personnalisé en utilisant Elementor à partir de zéro.

Accédez à Pages > Ajouter nouveau et nommez votre modèle.

Par exemple, nous avons nommé notre modèle « Mon modèle Elementor ».

Modifier la page avec Elementor

Ensuite, cliquez sur Modifier avec Elementor .

Bien que vous puissiez créer une page à partir de zéro en utilisant des sections et les différents widgets proposés, nous en créerons une plus rapidement en utilisant l’un des nombreux modèles prédéfinis.

Cliquez sur l’ icône du dossier pour ajouter un modèle.

Ajouter des modèles

Cela ouvre une bibliothèque complète de modèles que vous pouvez utiliser. Il existe un modèle pour à peu près n’importe quel créneau, des agences et consultants aux cliniques dentaires et salons de beauté.

Sélectionnez le modèle de page Elementor

Vous ne souhaitez pas utiliser de modèles de page ? Aucun problème! Vous pouvez également utiliser des blocs pré-construits.

Vous pouvez concevoir un modèle de page personnalisé à partir de zéro en utilisant une gamme de blocs. Incluez des blocs sur votre page pour différentes catégories, telles que à propos, contact, appel à l’action, clients ou tout ce que vous voulez.

Sélectionnez les blocs Elementor

Nous allons sélectionner un modèle sous l’ onglet Pages .

Cliquez et prévisualisez un modèle de votre choix.

Insérer un modèle d'élément

Si cela vous convient, allez-y et cliquez sur Insérer .

Si c’est la première fois que vous vous connectez à la bibliothèque de modèles, vous serez peut-être invité à vous connecter.

Se connecter à la bibliothèque de modèles

Cliquez sur Commencer et terminez le processus de connexion simple.

Une fois connecté, vous serez invité à confirmer le processus d’importation.

Importer les paramètres du document

Cliquez sur Oui pour continuer.

Le modèle va maintenant être inséré sur votre page.

Modèle inséré sur la page

Ensuite, cliquez sur la flèche adjacente au bouton Publier, comme indiqué ci-dessous.

Options d'enregistrement de la page Elementor

Parmi les options proposées, cliquez sur Enregistrer comme modèle .

Vous serez invité à nommer votre modèle.

Enregistrer la page dans la bibliothèque

Saisissez un nom et cliquez sur Enregistrer .

Votre modèle de page personnalisé est maintenant ajouté à la liste Mes modèles .

Liste des modèles créés par Elementor

La prochaine fois que vous souhaitez utiliser un modèle de page personnalisé, cliquez sur l’ onglet Mes modèles et insérez votre modèle.

Et c’est aussi simple que cela de créer un modèle personnalisé à l’aide d’Elementor !

Créer un modèle de page personnalisé à l’aide de Gutenberg

Créons maintenant un modèle de page personnalisé à l’aide de l’éditeur de blocs Gutenberg.

L’éditeur Gutenberg facilite la création de pages à l’aide de blocs. Vous souhaitez ajouter un élément à votre page ? Ajoutez simplement un bloc.! C’est si simple!

Gutenberg le rend encore plus facile en vous permettant de créer des blocs réutilisables.

Une fois que vous êtes satisfait d’un bloc que vous avez créé, vous pouvez ajouter ce bloc à votre collection de blocs réutilisables.

Ajouter aux blocs réutilisables

De cette façon, vous pouvez réutiliser ce bloc sur n’importe quelle page ou publier sur votre site Web.

Vous pouvez toujours installer le plugin Ultimate Addons for Gutenberg (UAG) pour certains blocs supplémentaires.

UAG alimente votre éditeur Gutenberg avec des blocs puissants qui vous permettent de créer des sites Web uniques et extraordinaires sans écrire une seule ligne de code.

Une fois que vous avez fini de créer votre page, créez un bloc réutilisable qui inclut tous les blocs que vous venez de créer.

Par exemple, nous avons inclus quelques blocs dans notre page et les avons tous sélectionnés.

Vous pouvez le faire en cliquant à l’intérieur de n’importe quel bloc et en utilisant le raccourci clavier, CTRL + A (ou CMD + A pour les utilisateurs de Mac), vous pouvez sélectionner tous les blocs.

Ajouter aux blocs réutilisables

Ensuite, cliquez sur ‘ Ajouter aux blocs réutilisables .’

Nommez votre bloc réutilisable puis cliquez sur Enregistrer .

Vous souhaitez ajouter votre modèle à une nouvelle page ? Recherchez votre bloc réutilisable et insérez-le.

Insérer des blocs réutilisables

Simple, n’est-ce pas ?

Créer manuellement un modèle de page personnalisé

Nous avons laissé cette méthode pour la fin, simplement parce qu’elle implique un certain codage.

Alors que les méthodes que nous avons décrites précédemment devraient parfaitement fonctionner, vous pouvez également utiliser cette méthode pour créer un modèle de page personnalisé si vous êtes à l’aise avec l’écriture de code.

Vous aurez également besoin de vos informations d’identification FTP ou de l’accès au gestionnaire de fichiers sur votre compte d’hébergement pour télécharger des fichiers sur votre site en direct.

Commencez par ouvrir un éditeur de texte. Ensuite, ajoutez la ligne de code suivante.

<?php /* Template Name: MyCustomTemplate */ ?>

Cette ligne de code indique à WordPress qu’il s’agit d’un fichier de modèle. Vous pouvez donner n’importe quel nom à votre modèle. Par exemple, nous avons nommé notre modèle, MyCustomTemplate.

Une fois cela fait, enregistrez le fichier sur votre bureau avec une extension .php. Nous avons conservé le fichier sous mycustomtemplate.php.

Ensuite, nous devons télécharger ce fichier sur le site en direct. Vous pouvez utiliser un client FTP tel que FileZilla ou le gestionnaire de fichiers de votre panneau de contrôle d’hébergement.

Le fichier doit être téléchargé avec le dossier du thème actuel, que vous pourrez localiser dans le répertoire /wp-content/themes/ .

Gestionnaire de fichiers, Ajouter un fichier PHP

Une fois que vous avez téléchargé le fichier avec succès, accédez à votre tableau de bord WordPress et ajoutez une nouvelle page.

Sous Modèle , sur le côté droit de votre éditeur, vous trouverez le modèle que vous venez de télécharger.

Sélectionnez un modèle

Sélectionnez le modèle personnalisé et cliquez sur publier.

Étant donné que nous n’avons qu’une seule ligne de code sur notre page de modèle, tout ce que vous verrez actuellement est un écran vide.

Le moyen le plus simple de démarrer rapidement votre modèle consiste à utiliser le code existant et à le modifier en fonction de vos besoins.

Par exemple, vous pouvez commencer par télécharger le fichier page.php du thème actuel . Ensuite, modifiez le code, ajoutez du code PHP personnalisé, supprimez la barre latérale ou ajoutez du code HTML supplémentaire selon vos besoins pour créer un modèle de page personnalisé.

Voici à quoi ressemble le code dans le fichier page.php d’Astra,

<?php if ( astra_page_layout() == 'left-sidebar' ) : ?>
    <?php get_sidebar(); ?>
<?php endif ?>
    <div id="primary" <?php astra_primary_class(); ?>>
        <?php astra_primary_content_top(); ?>
        <?php astra_content_page_loop(); ?>
        <?php astra_primary_content_bottom(); ?>
    </div><!-- #primary -->
<?php if ( astra_page_layout() == 'right-sidebar' ) : ?>
    <?php get_sidebar(); ?>
<?php endif ?>
<?php get_footer(); ?>

Vous voulez supprimer la barre latérale ? Supprimez simplement la ligne suivante <?php get_sidebar(); ?>.

Une fois que vous avez écrit votre code personnalisé, téléchargez le modèle sur votre site en ligne et utilisez-le sur votre site WordPress.

Comment sélectionner un modèle de page dans WordPress ?

Changer un modèle de page dans WordPress, que ce soit pour une seule page, une section de la page ou même un groupe de pages, est assez simple.

Vous pouvez sélectionner un modèle de page pour une nouvelle page que vous créez ou pour une page existante.

Pour sélectionner un modèle de page personnalisé, rendez-vous sur Pages > Ajouter un nouveau et vous trouverez la section des modèles.

Sélectionnez un modèle personnalisé

Sélectionnez le modèle que vous souhaitez parmi les options fournies dans la liste déroulante.

Vous ne remarquerez la liste des modèles que lors de la création ou de la modification d’une page. Ces options ne seraient pas disponibles si vous publiez une publication.

FAQ sur les modèles de page personnalisés

Voyons maintenant quelques questions fréquemment posées concernant les modèles de page personnalisés.

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

Il existe plusieurs façons de créer un modèle de page personnalisé dans WordPress. Vous pouvez en créer un à partir de zéro en utilisant un constructeur de page tel qu’Elementor ou l’éditeur de blocs Gutenberg. Vous pouvez également utiliser des modèles prédéfinis et les personnaliser en fonction de vos besoins.

Nous avons couvert toutes les méthodes dans cet article.

Comment modifier un modèle de page WordPress ?

Si vous avez créé un modèle manuellement, vous pouvez accéder au fichier en vous rendant sur Apparence > Éditeur de fichiers thématiques . Vous trouverez le modèle de page personnalisé que vous avez créé parmi les différents fichiers de thème. Modifiez le code et enregistrez les modifications lorsque vous avez terminé.

Si vous avez créé votre modèle personnalisé à l’aide d’un générateur de pages, tel qu’Elementor, vous trouverez vos modèles sous Modèles > Modèles enregistrés . Vous pouvez modifier les modèles, comme vous le feriez pour n’importe quelle autre page de votre site Web WordPress.

Comment enregistrer une page WordPress en tant que modèle ?

L’enregistrement d’une page WordPress en tant que modèle est particulièrement facile lorsque vous utilisez un constructeur de page. Par exemple, Elementor a la possibilité d’enregistrer la page entière en tant que modèle.

De même, une fois que vous avez créé une page WordPress à l’aide de l’éditeur de blocs Gutenberg, vous pouvez sélectionner tous les blocs et les ajouter en un seul bloc réutilisable. La prochaine fois que vous souhaitez utiliser le modèle, ajoutez le modèle de bloc à votre page.

Qu’est-ce qu’un modèle de page WordPress ?

Un modèle de page WordPress définit la mise en page de vos pages. Alors qu’un thème WordPress représente l’aspect et la convivialité de votre site, un modèle a un impact sur l’aspect et la convivialité d’une page individuelle ou d’un groupe de pages. Certains des modèles courants incluent des modèles par défaut et des modèles pleine largeur.

Comment puis-je créer un modèle de page à partir d’une page existante ?

Une page existante peut être enregistrée en tant que modèle. Vous pouvez le faire manuellement en enregistrant une copie du fichier page.php de votre thème actuel et en ajustant le fichier en fonction de vos besoins. Une fois que vous avez terminé, renommez le fichier et téléchargez-le sur le site en direct.

Vous pouvez également utiliser votre générateur de page pour enregistrer une page existante en tant que modèle. Nous avons tout couvert dans cet article.

Créer un modèle de page personnalisé dans WordPress

WordPress et les thèmes WordPress rendent l’ensemble du processus de création de page très simple.

Une fois que vous avez installé un thème, vous pouvez sélectionner un modèle dans une liste d’options conçues par des professionnels. De cette façon, vous pouvez créer des pages impressionnantes sans écrire une seule ligne de code.

Cependant, il peut arriver que vous souhaitiez utiliser un modèle différent du reste des pages de votre site Web. Peut-être une page sans barre latérale ou en-tête ou pied de page. Vous voudrez peut-être avoir un modèle pour toutes vos pages de destination ou même un entonnoir de vente.

Dans de tels cas, vous souhaiterez créer un modèle de page personnalisé dans WordPress que vous pourrez créer une fois et réutiliser encore et encore.

Heureusement, créer un modèle de page personnalisé dans WordPress est relativement simple. Nous avons tout couvert ici pour vous, de l’utilisation d’un modèle de démarrage à la création d’un modèle de page à l’aide d’Elementor et de Gutenberg.

Et juste au cas où vous voudriez créer un modèle de page manuellement en écrivant du code, nous avons également couvert cela !

À vous maintenant. Comment créer un modèle de page dans WordPress ? Faites le nous savoir!

 

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *