Les types d’articles sont l’une des principales raisons pour lesquelles les développeurs peuvent étendre WordPress de tant de façons merveilleuses. La version de base de WordPress est livrée avec cinq types d’articles : Article, page, pièce jointe, révision et menu de navigation.
Les articles et les pages sont les principaux types d’articles auxquels nous nous référons car ils sont utilisés pour stocker le contenu de votre site Web. Il existe quelques différences entre ces types d’articles.
Les articles sont généralement affichés dans l’ordre chronologique inverse sur la page d’index d’un blog, tandis que les pages ne se voient attribuer aucune date de publication. Les catégories et les balises peuvent également être attribuées aux articles, alors qu’elles ne peuvent pas l’être aux pages (bien qu’il soit possible de le faire par le biais de la personnalisation).
Les pages peuvent être placées dans une structure hiérarchique. Ceci est utile pour organiser le contenu pour les propriétaires de sites Web et pour les visiteurs.
La conception des pages peut également être modifiée facilement en les affectant à différents modèles de page. Il s’agit d’un moyen pratique de modifier le style de certaines parties de votre site Web. Il vous permet également d’afficher des informations que vous n’auriez pas normalement affichées sur une page.
Voyons de plus près ce que sont les modèles de page et comment vous pouvez les utiliser sur votre site Web.
Pourquoi utiliser un modèle de page différent ?
Les thèmes WordPress ont généralement un modèle intitulé page.php qui contrôle le style de vos pages. La plupart des développeurs de thèmes structurent le modèle de page par défaut de la même manière. Le modèle affiche le contenu de votre page et définit les éléments de conception qui entourent ce contenu (c’est-à-dire l’en-tête, la barre latérale, le pied de page, etc.)
Le modèle de page par défaut (page.php) est configuré de cette façon, car c’est tout ce qui est nécessaire pour afficher le contenu d’une page.
Créer un modèle de page unique vous permet d’étendre WordPress et de modifier ce qui est affiché. Par exemple, vous pouvez modifier le design de votre page en supprimant la barre latérale des pages. Vous pouvez également modifier la police utilisée et afficher un en-tête différent de celui de votre page d’accueil.
Le modèle de page personnalisé le plus connu est celui des archives, qui est inclus dans la plupart des thèmes WordPress. Les archives répertorient tout le contenu de votre site Web. Le contenu est normalement classé par pages, catégories, tags, archives de dates et archives d’auteurs.
De nombreux modèles d’archives affichent également une liste complète des articles de votre blog et une barre de recherche pour effectuer des recherches sur l’ensemble de votre site Web. En fait, le modèle d’archives est un plan du site qui aide les lecteurs à trouver ce qu’ils recherchent.
La page d’archives de Darren Rowse aide les lecteurs de ProBlogger à trouver rapidement les articles.
Il est également courant de trouver d’autres types de modèles de page dans les thèmes, tels que :
- Formulaire de contact
- Page sans barre latérale (pleine largeur)
- Page d’accueil
- Index du blog
Les possibilités offertes par les modèles de page sont infinies. Vous pouvez utiliser les modèles de page pour afficher une page unique du personnel de votre entreprise ou quelque chose de plus complexe comme un répertoire de liens. Tout dépend de la mesure dans laquelle vous souhaitez personnaliser votre site Web.
Comment sélectionner un modèle de page pour votre page
L’attribution d’un modèle de page à votre page est simple. Lorsque vous êtes dans l’éditeur de page, vous verrez une case intitulée Attributs de la page affichée dans la barre latérale droite. Elle est affichée sous la case Publier.
La boîte des attributs de page vous permet de choisir une page parente pour la page et de lui attribuer un ordre dans la hiérarchie des pages. L’option du milieu vous permet de modifier le modèle. Il vous suffit de sélectionner le modèle que vous souhaitez utiliser pour votre page, puis de mettre à jour la page.
Choisissez votre modèle de page dans la zone Attributs de la page.
Vous pouvez également modifier le modèle d’une page par le biais de la page de liste des pages principales. Il vous suffit de cliquer sur le lien » Quick Edit ».
Le lien d’édition rapide
Ensuite, il suffit de changer le modèle que vous souhaitez utiliser pour la page en utilisant l’option de modèle située à droite du menu.
Les modèles peuvent également être attribués à l’aide du menu d’édition rapide.
L’option de modèle ne s’affichera pas si votre thème ne dispose que du modèle de page par défaut.
Création d’un modèle de page de base pour votre site Web
Créer un nouveau modèle de page pour votre thème WordPress est plus facile que vous ne le pensez. Vous n’avez pas besoin d’avoir de l’expérience dans le développement de thèmes ou de plugins.
Tout ce que vous avez à faire est d’utiliser le code du modèle page.php de votre thème existant comme base de votre nouveau modèle de page. Par exemple, disons que vous utilisez l’ancien thème WordPress par défaut Twenty Twelve sur votre site web (qui est toujours mon thème WordPress par défaut préféré).
Le page.php du thème contient le code suivant :
Nous pouvons utiliser ce code pour créer un nouveau modèle de page. Pour créer un modèle de page, tout ce que nous devons faire est de nous assurer qu’un commentaire est placé en haut d’un nouveau fichier. Ceci définit le fichier comme un modèle de page.
/* Nom du modèle : Mon modèle de page personnalisé */
Vos modèles de page ressembleront donc à quelque chose comme ceci :
Parcourons le processus de création d’un modèle de page de base. Pour être plus précis, créons un modèle de page pleine largeur sans barre latérale ; un modèle que la plupart des propriétaires de sites Web trouveront utile. Twenty Twelve inclut un modèle de page pleine largeur, mais pour les besoins de ce tutoriel, nous supposerons qu’il n’en existe pas 🙂
Le modèle de page standard affiche une barre latérale sur le côté droit de la page.
Le modèle de page par défaut est Twenty Twelve.
La création d’un nouveau modèle de page personnalisé sans barre latérale est simple. La première chose à faire est de créer un nouveau fichier à l’aide d’un éditeur tel que TextPad (windows) ou TextWrangler (MAC). Nous pouvons l’appeler quelque chose de simple comme nosidebar-page.php ou full-page.php (nous reviendrons plus tard sur la façon de nommer votre fichier). Ensuite, téléchargez le fichier dans le dossier de votre thème. Pour Twenty Twelve, l’emplacement de votre fichier sera www.yourdomain.com/wp-content/themes/twentytwelve.
Notre modèle est essentiellement le modèle page.php de Twenty Twelve avec le code de la barre latérale supprimé.
Cela ressemble à ceci :
Une fois que le fichier du modèle a été téléchargé dans le dossier de votre thème, il sera disponible pour être sélectionné dans toutes les pages. Vous pouvez alors affecter une page à ce modèle pour supprimer sa barre latérale.
Le modèle peut être référencé par le nom défini en haut du modèle.
Nous n’avons pas encore terminé. Nous devons encore faire en sorte que le contenu s’étende sur toute la largeur de la page. Pour l’instant, nous n’avons fait que supprimer la barre latérale. La zone de contenu principal occupe toujours les deux tiers de la page.
Notre barre latérale a été supprimée, mais le contenu ne s’affiche pas sur toute la largeur de la page.
Ce problème est facile à résoudre. Si vous revenez au code de notre modèle, vous verrez que la zone de contenu principal est entourée de la division CSS suivante.
L’identifiant CSS primary nous permet d’établir un lien direct avec la zone de contenu principal. Il fonctionne de la même manière que l’attribut ID en HTML. La partie qui donne un style à la zone de contenu principal est class= »site-content ».
Si nous vérifions la feuille de style (stylesheet.css) de Twenty Twelve, nous pouvons voir la classe site-content située près du bas du fichier.
.site-content {
float : left ;
width : 65.104166667% ;
}
Pour étendre notre contenu sur toute la largeur de la page, nous devons faire passer la largeur de la zone de contenu de 65 % à 100 %. Toutefois, nous ne devons pas modifier la classe site-content, car cette classe est toujours utilisée dans d’autres modèles, tels que le modèle de page par défaut page.php et le modèle posts single.php. Si nous modifions le pourcentage de site-content, tous nos articles et toutes nos pages s’étendront sur toute la largeur de la page.
Nous devons créer une nouvelle classe CSS qui sera utilisée spécifiquement pour nos pages pleine largeur :
.site-content-fullwidth {
float : left ;
largeur : 100% ;
}
Une fois que le modèle de feuille de style du thème.css a été mis à jour avec la classe ci-dessus, nous devons modifier notre modèle de page pleine largeur pour nous assurer que nous établissons un lien vers la classe CSS qui a une largeur de 100% :
Notre modèle final ressemblerait donc à ceci :
Ce modèle mis à jour permet de s’assurer que notre contenu s’affiche sur l’ensemble de la page.
Notre contenu s’étend maintenant sur toute la largeur de la page.
Les étapes ci-dessus peuvent être reproduites avec n’importe quel thème WordPress. Il vous suffit de supprimer la barre latérale de votre modèle de page par défaut et de vous assurer que le style de la zone de contenu principal utilise une classe qui s’étend sur toute la largeur de la page.
Remarque rapide sur l’attribution de noms à vos modèles de page
La hiérarchie des modèles WordPress stipule que WordPress affichera le modèle d’une page dans l’ordre suivant :
- Modèle personnalisé
- page-{slug}.php
- page-{id}.php
- page.php
- index.php
Il est bon de comprendre cette hiérarchie des modèles car elle vous aidera à comprendre pourquoi une page est stylisée d’une manière particulière.
La hiérarchie signifie que WordPress affichera toujours un modèle de page pour une page si celui-ci a été attribué. Si aucun modèle de page n’a été attribué à une page, il cherchera page-{slug}.php. Par exemple, si votre page d’accueil utilise le permalien staff, il recherchera un modèle nommé page-staff.php.
Si aucun modèle page-{slug}.php n’est trouvé, WordPress recherche un modèle avec l’ID de la page. Par exemple, si l’ID de votre page est 15, WordPress cherchera un modèle de page nommé page-15.php.
Si aucun modèle de page n’est attribué à une page et qu’aucun modèle ne correspond au slug ou à l’ID de la page, alors WordPress utilisera le modèle de page par défaut page.php. Et si aucun modèle page.php n’existe, il utilisera index.php.
De nombreux développeurs de thèmes nomment leurs modèles de pages en utilisant le format page-name.php. Par exemple, ils nomment leur modèle de page de formulaire de contact page-contact.php. Il n’y a rien de mal à cette politique ; cependant, comme vous pouvez le voir dans la hiérarchie WordPress pour les modèles de page ci-dessus, il y a un léger risque que le mauvais modèle soit affiché.
Par exemple, prenons le cas d’un site Web qui possède un modèle de page nommé page-green.php pour afficher les pages de style vert. Si une page avait le slug vert, elle utiliserait également le modèle page-green.php, même si vous ne l’aviez pas attribué à la page.
Heureusement, ce type de problème est très rare. Suffisamment rare pour que vous n’ayez pas à vous en préoccuper. N’hésitez donc pas à utiliser la configuration de nommage de votre choix, que ce soit page-nom.php, nom-page.php ou nom.php. Cela n’a pas d’importance tant que vous évitez les noms de modèles clés de WordPress ; et vous pouvez toujours changer le slug de votre page ou le nom de votre modèle plus tard si vous voyez un conflit.
Vue d’ensemble
Les modèles de page sont un excellent moyen de personnaliser le style et le contenu des pages de votre site web. La plupart des thèmes WordPress contiennent au moins quelques modèles de page uniques ; cependant, comme nous l’avons vu, il n’est pas très difficile de créer soi-même des modèles de page de base.
La meilleure façon d’apprendre à créer vos propres modèles de page est de créer un modèle de page personnalisé en utilisant le modèle page.php de votre thème. Ensuite, regardez le code qui est utilisé dans ce thème et dans d’autres thèmes WordPress. Cela vous donnera des idées sur la façon dont vous pouvez modifier votre modèle à votre convenance. Veillez à effectuer toutes les personnalisations sur un site Web de test au départ, afin que votre site Web réel ne soit pas affecté si vous faites une erreur de code. Vous pouvez ensuite copier le code et les modèles sur votre site Web réel.
Si vous avez trouvé cet article utile, je vous encourage à vous abonner au blog d’Elegant Themes pour vous assurer d’être informé de nos futurs articles.
N’oubliez pas de laisser un commentaire ci-dessous si vous avez des doutes sur une partie de ce tutoriel.
Image miniature de l’article par Everyday smiles / shutterstock.com
