TemplateMonster Blog France

Comment créer un modèle de page WordPress personnalisé : contrôle complet sur votre site Web

Claire

Le pouvoir est toujours séduisant. Peu importe ce que dit un être humain - il aimerait avoir un contrôle complet sur son environnement. Même un petit morceau de pouvoir et de contrôle vous fait vous sentir sur le toit du monde. Soyons sincères, qui ne choisirait pas de prendre l'Anneau s'il devait choisir ?

La même situation est avec la construction de site Web. Le poison vous prend lentement. Vous commencez par construire votre premier site WordPress et utilisez un template simple et gratuit. Ensuite, vous achetez un thème payé, créé par des professionnels. Il ne correspond toujours pas à toutes vos exigences, donc vous commencez à penser à une personnalisation plus poussée. C'est un moment où vous êtes accro. Le sentiment de contrôle sur votre création est trop doux pour l'abandonner, vous ferez donc de plus en plus de personnalisations. Vous peaufinerez votre site web à la perfection.

C'est vraiment cool de refaire votre site web de vos propres mains et c'est pourquoi tant de débutants vont plus loin et apprennent à faire un page vraiment unique. Si vous lisez ceci - vous êtes l'un d'entre eux. Donc, assez de bavarder, commençons votre chemin vers le contrôle ultime de votre site Web avec la création d'un modèle de page personnalisé WordPress.

Qu'est un modèle de page WordPress ?

Au début, il y avait un mot, alors comme nous commençons depuis le début, définissons la terminologie. L'apparence de votre site WordPress est définie par des modèles. Quelle couleur utiliser pour les boutons, de quel côté mettre la barre latérale, quelle police utiliser pour les textes, où placer le formulaire de recherche - toutes ces instructions sont rassemblées en modèles.

Le modèle de page est un fichier .php qui décrit à quoi ressemblera votre page. Tous les fichiers .php d'un modèle WordPress sont stockés dans le dossier "themes" du répertoire "wp-content". Vous pouvez appliquer des modèles de page à des pages spécifiques, à une section de page ou à une classe de pages. Certaines pages sont toujours censées être différentes des autres, par exemple, la page "à propos". Habituellement, un thème a un ensemble de pages prêtes à l'emploi qui sont appliquées automatiquement.

Mais comment WordPress comprend quel modèle de page php. faut utiliser dans chaque situation ? C'est à ce moment que la hiérarchie des modèles arrive sur les lieux.

Importance de la hiérarchie des modèles

Lorsqu'un utilisateur navigue sur l'une des pages de votre site Web, WordPress recherche un fichier .php qui lui expliquera ce qu'il doit afficher. Le CMS recherche toujours un fichier nécessaire dans un ordre stable spécifique. Cette commande est appelée hiérarchie de modèle. Je vais vous montrer comment cela fonctionne sur un exemple.

Un visiteur veut lire l'un de vos articles de blog et clique sur un lien  http://iamawesome.com/blog/category-best/coolpost. La première chose que WordPress va vérifier, c'est si vous avez assigné un modèle de page personnalisé spécifique à cette page concrète ou non. Vous êtes entièrement libre de créer n'importe quel nombre de modèles de pages personnalisées WordPress et rendre chaque partie de votre site Web unique.

S'il n'y a pas de fichier affecté, WP recherche un modèle de page de catégorie. Cela ressemblera à ça : category-best.php. Ce modèle de page .php définit l'apparence de toute la catégorie de pages et vous pouvez définir un certain look pour un groupe de messages décrivant le même sujet.

Si vous ne voulez pas choisir un autre apparence pour chaque catégorie et il n'y a pas de fichier category1.php, WordPress va vérifier quel est l'identifiant de cette catégorie, supposons qu'il soit 15. WP cherchera un fichier category-15.php.

Il n'y aura pas une telle chose parce que vous ne vous souciez pas des catégories (je ne vous blâme pas, ce n'est qu'une supposition). Maintenant, WordPress cherchera un fichier de base page.php. C'est ainsi que toutes les pages devraient ressembler si elles ne sont pas modifiées d'une manière ou d'une autre.

Il ne devrait pas y avoir de fichier page.php. C'est une situation très rare et vous ne le rencontrerez probablement pas si vous travaillez avec un template ready-made, mais si un tel problème survient, WordPress trouvera un fichier index.php et le montrera à l'utilisateur. Celui-ci est un modèle de site Web par défaut qui définira un aspect basique d'une page.

Comment créer un modèle de page WP personnalisé ou "Le roi-liche m'a donné le vrai pouvoir !"

Enfin, commençons un peu de pratique. Tout d'abord, vous devez créer un fichier .php dans l'éditeur de code de votre choix. Je préfère Windows Notepad simple, mais vous pouvez également aller avec Notepad ++, Sublime ou tout autre que vous aimez.

Deux choses que chaque page sur le web a besoin sont l'en-tête et le pied de page. Pour les afficher sur votre modèle de page, ajoutez le code suivant au fichier .php que vous avez créé.

<!--?php /** * Template Name: Custom Page Template */ get_header(); ?-->

<!--?php get_footer(); ?-->

Il ressemblera à ceci :

Maintenant, enregistrez les modifications et ouvrez le gestionnaire de fichiers FTP ou cPanel de votre site Web.

Téléchargez le fichier que vous avez créé dans wp-content-> themes-> dossier de thème actuel de votre site Web.

De ce dossier, il sera disponible pour le choisir pour concevoir la page. Allez à Pages > Ajouter, remplissez la page avec du contenu et regarder vers la droite. Il y a un tableau nommé "Attributs de la page". Cliquez sur la barre "Modèles" et choisissez le modèle de page personnalisé créé dans le menu déroulant.

Après avoir appuyé sur le bouton "Publier" et allant sur le site, vous verrez une structure de page très simple. Il aura un en-tête et un pied de page, mais c'est tout. Ennuyeux, hein ?

Je suis sûre que vous ne l'aimerez pas vraiment, alors rendons-le plus intéressant. C'est facile - il suffit de copier et coller un peu. Presque n'importe quel thème WordPress a des pages supplémentaires prêtes à l'emploi. Par exemple, mon thème (j'utilise FreeBook de TemplateMonster) a un modèle personnalisé pour Page de destination et page sans pied de page et d'en-tête. Le thème Twenty Twelve (l'un des thèmes WP par défaut gratuit) a des modèles de pages 404 et Archive. le thème Twenty Fourteen (un autre thème gratuit) fournit un modèle de page Contributors. En outre, chaque thème a des parties de page déjà codées qui sont stockées dans le dossier wp-content/themes/your_theme. Vous pouvez télécharger ce fichier de pièce sur votre ordinateur, l'ouvrir et le copier simplement dans votre nouveau modèle de page personnalisée WordPress. Voici à quoi ressemble mon modèle de barre latérale de thème :

Je viens de copier et coller dans mon fichier .php. Regardez, il y a une barre latérale là maintenant !

Modèles de pages WordPress personnalisés pour une utilisation différente

Comme vous l'avez probablement compris à partir de la hiérarchie des modèles WordPress, vous pouvez créer un modèle de page .php non seulement pour une seule page mais aussi pour un groupe de pages. Ces groupes peuvent être associés à une catégorie ou à un type et vous pouvez créer des modèles de page WP qui seront appliqués automatiquement ou que vous aurez choisis dans le processus de création de la nouvelle page. Approchez-vous, je vais vous en dire un peu plus sur le fonctionnement de cette magie.

Type de page personnalisé WordPress pour toute page

Supposons que vous avez besoin d'un fichier .php WordPress modèle qui sera disponible pour toute page que vous créez. Tout d'abord, faites attention au nom. Si le titre de votre thème .php commence par "page-", WordPress l'interprétera comme un modèle spécialisé qui devrait être utilisé pour une page spécifique. En outre, essayez de choisir un nom compréhensible, de sorte que vous serez capable de rappeler ce qui est à l'intérieur après un certain temps.

Après avoir créé un modèle de page personnalisé, vous devez le télécharger dans le dossier wp-content/themes/your_theme via FileZilla ou cPanel. Maintenant, cette option est disponible pour vous dans le menu déroulant "Attributs de page" du tableau de bord chaque fois que vous souhaitez créer ou modifier une nouvelle page de site Web.

Modèle de page personnalisée WordPress pour une seule page

Vous voulez que l'une de vos pages statiques soit différente des autres. La situation où toutes vos pages statiques sont uniques est également possible (ne faites pas trop, ce ne sera pas cool si votre site ressemble à un cirque fou, avec des barres latérales qui sautent sur toute la surface de l'écran).

Créez un modèle de page .php et nommez-la page-{slug}.php ou page-{ID de la page}.php et téléchargez-le dans votre dossier de thème actuel. Dans ce cas, WordPress utilisera automatiquement ce modèle pour une seule page spécifique correspondant à l'ID ou à un slug. Par exemple, vous souhaitez créer une page de contacts et supposons qu'elle porte un numéro d'identification 9. Créez un modèle de page personnalisé WordPress nommé page-contacts.php ou page-9.php et il sera appliqué à la page Contacts uniquement.

Type de page personnalisée WordPress pour les articles

Vous avez maintenant créé un modèle de page personnalisé, mais vous souhaitez que vos publications soient identiques. Dans ce cas, le changement de nom n'aidera pas, vous devrez ajouter une ligne de code supplémentaire à ce modèle. Tapez “Template Post Type: post, page“ juste sous la rangée Nom du modèle. Cela ressemblera à ça :

De cette façon, vous pouvez ajouter également des événements et d'autres types de contenu que vous avez sur votre site Web. Je dois admettre, cependant, que cette méthode ne fonctionnera que si vous utilisez WordPress version 4.7 et plus. Les versions plus anciennes ignoreront la ligne de type de message. Il existe d'autres raisons d'utiliser les dernières versions de WordPress et vous pouvez les consulter dans cet article.

Pourquoi les tags conditionnels sont-ils cool ?

Auparavant, j'ai décrit comment créer un tout nouveau modèle de page .php, mais que se passe-t-il si vous souhaitez apporter des modifications à un modèle existant ? Il y a des situations quand vous avez besoin que quelque chose soit montré seulement si une condition est remplie, ainsi vous ne voulez pas créer une page qui sera différente des autres seulement dans un petit détail ou seulement dans une situation particulière.

C'est pourquoi les tags conditionnels sont si cool. Vous les utilisez dans une ligne de code qui vérifie si certaines conditions sont remplies ou non. Si elle est satisfaite, la première partie du code continue de tourner et sinon, la partie après "else" est exécutée. Par exemple, vous souhaitez afficher un type spécifique de barre latérale pour les utilisateurs qui ont accédé à Archive. Votre code ressemblera à ça :

Voici une liste des balises conditionnelles les plus fréquemment utilisées :

Fonctions de modèle de page : creusons plus profond

Copier et coller du code à partir d'un modèle de page prête à l'emploi est un moyen facile et rapide de créer un look unique, mais qu'est-ce que tout ce code signifie  ? Bien sûr, les développeurs web apprennent tout ce qui concerne PHP et savent exactement quelles fonctions utiliser, comment les utiliser et quand. Cependant, si vous êtes encore en train de lire ceci, vous n'êtes pas un développeur web, ou, du moins, pas très expérimenté. Puisque nous parlons d'un pouvoir ultime, ou bien d'un contrôle complet sur votre site Web, nous ne pouvons pas rater les balises du modèle.

WordPress utilise beaucoup de différentes fonctions de PHP et ceux qui sont utilisés pour les thèmes seulement sont appelés Template Tags. Vous les avez déjà vues en créant votre premier modèle de page .php, get_header() et get_footer() sont des balises de modèle. Je ne parlerai pas de tous les tags existants, ils sont trop nombreux, mais regardons ceux que vous rencontrerez certainement lors de la conception de votre site web.

get_header(), get_footer(), get_sidebar()

Ces trois balises de modèle ajoutent un en-tête, un pied de page ou une barre latérale à votre modèle de page personnalisé WordPress. Ces parties sont tirées du thème que vous utilisez actuellement. Si vous souhaitez utiliser un en-tête, un pied de page ou une barre latérale spécifique pour cette page, entrez son nom dans les crochets. Par exemple, pour utiliser le fichier header-superstar.php vous aurez besoin du tag de modèle get_header ( `superstar` ).

get_template_part()

Celui-ci ajoute également une certaine partie d'un modèle déjà fait à votre thème .php. La différence est que si les crochets restent vides, rien ne sera ajouté. Vous devez défier ce qu'il faut ajouter. Généralement, cette balise de modèle est utilisée pour déplacer une partie du code du parent vers le thème enfant.

get_search_form()

Vous aurez besoin de celui-ci pour coder le formulaire de recherche dans la barre latérale. Les widgets de recherche utilisent généralement ce tag de modèle. Il localise search_form.php dans le dossier de thème, puis l'ajoute au modèle de page personnalisé.

get_page_template()

Cette fonction récupère la passe dans le modèle actuellement utilisé en fonction de la hiérarchie du modèle.

wp_login_form()

Si les crochets sont vides, cette fonction ajoute un simple formulaire de connexion WordPress au modèle de page personnalisé. Si vous souhaitez utiliser un formulaire particulier, vous devez taper son nom entre parenthèses de la même manière que pour le tag de modèle get_header().

get_calendar()

Affiche un calendrier sur la page. Il sera stylisé selon un thème actuel. Vous pouvez également ajouter un calendrier modifié selon vos goûts - il suffit de taper son nom sur les crochets de la même manière que vous le faites pour une barre latérale ou un pied de page original.

Ce sera assez pour vous si l'apprentissage de PHP n'est pas votre désir. Il y a plus d'une centaine de balises de modèles dans WordPress, donc je pense que même les gourous du développement web utilisent des feuilles de triche. Si vous êtes vraiment intéressé par un apprentissage ultérieur, visitez WordPress Codex

Créer des thèmes de pages WordPress utiles : avec une grande puissance vient une grande responsabilité

Vous avez le pouvoir de personnaliser chaque partie de votre site Web maintenant. Vous pouvez créer des modèles de pages WP pour chaque page et les rendre aussi unique et compliqué que possible. Cependant, après la première vague d'euphorie, vous venez à une question simple - quelles pages seront vraiment utiles pour mon site web ? Beaucoup de créateurs de sites Web ont rencontré cette même question, alors laissez-moi vous donner quelques exemples.

Page 404 cool

Personne n'aime cette page-outcast, parce que cela vous fait vous sentir un idiot. Cependant, sa conception pourrait soit faire partir un utilisateur ou le faire revenir à la recherche une fois de plus. Une page "404" doit avoir un lien vers votre page d'accueil et un formulaire de recherche qui encouragera un utilisateur à rester sur votre site. N'est-ce pas cool que vous sachiez maintenant comment le faire ?

Page “A propos” avec une liste des membres de l'équipe

La page "A propos" est l'une des plus visitées sur votre site. Les gens aiment savoir avec qui ils communiquent. C'est une partie très importante de votre site Web et un modèle de page personnalisé unique est un must. Ce sera vraiment génial si tous les membres de l'équipe seront répertoriés dans une table précise. Il ne sera pas difficile de créer une telle fonctionnalité - vous pouvez le copier à partir de la page pré-faite des contributeurs de Twenty Quatorze.

Page principale de l'archive

Votre objectif est de faire en sorte qu'un utilisateur visite le plus grand nombre de pages possible. C'est pourquoi votre type de page d'archives WordPress doit contenir des liens vers les messages les plus récents de différentes catégories et attirer l'attention des visiteurs. Elle ne devrait pas seulement afficher les catégories et les balises disponibles, c'est ennuyeux. Une bonne idée sera de la faire afficher le top 5 de vos articles les plus populaires ou des articles au hasard. Cela exigera quelques efforts de votre part, mais affectera certainement les taux de trafic de votre site Web.

Page de contact avec formulaire de contact

Il est évident qu'un utilisateur recherchant vos contacts veut communiquer avec vous. Rendre l'accomplissement de ce désir facile pour un visiteur n'est pas seulement une bonne idée, c'est votre devoir si vous voulez obtenir un certain succès. Assurez-vous que votre page de contacts contient non seulement votre téléphone et votre adresse e-mail, mais aussi un formulaire de contact et ajoutez une carte Google à votre pointeur de localisation. Il ne devrait y avoir aucune chance qu'un client potentiel parte sans vous parler parce qu'il n'a pas pu trouver vos contacts.

Plan du site en ordre alphabétique

S'il y a beaucoup d'articles sur votre blog, vous devez créer un sitemap. C'est une page qui répertorie tous les articles que vous avez écrits et publiés. Ce serait vraiment pratique si tous ces postes étaient organisés dans un certain ordre. Alphabétique, par exemple. Il y a des thèmes WordPress gratuits qui vous aideront une fois de plus. Twenty Quator a un "Word" alphabétiques "ready-made modèle de page personnalisé, de sorte que vous pouvez simplement le reproduire.

Tu as maintenant un grand pouvoir entre les mains, jeune padawan. Utilisez-le à bon escient, n'abusez pas et rendez votre site Web élégant, unique et efficace. Je vous ai donné un ensemble d'outils qui vous aideront à démarrer un voyage sans fin à travers un processus d'atteindre les plus hauts niveaux de maîtrise WordPress. J'espère que votre modèle de page personnalisé sera génial et vous invite à continuer de découvrir quelque chose de nouveau. Bonne chance!

Avez-vous des questions sur l'article ? Peut-être que vous connaissez un sujet qui sera un ajout parfait à ce poste ? S'il vous plaît, n'hésitez pas à laisser des commentaires. J'ai toujours hâte d'améliorer les articles et de les rendre plus intéressants et utiles pour vous.