Share
Les modèles de page WordPress sont un excellent moyen de modifier complètement l'affichage des pages Web. Vous pouvez les utiliser pour ajouter une vaste gamme de fonctionnalités à votre site..
Cependant, ils ont une limite en ce qu’ils sont des modèles «statiques». Vous ne pouvez pas les personnaliser ou affecter leur comportement de quelque manière que ce soit. Vous pouvez uniquement choisir d'activer ou non un modèle de page. Par défaut, un modèle de page remplit simplement une fonction fixe, par exemple afficher un plan du site ou supprimer la barre latérale pour afficher une page pleine largeur.
Dans cette série de didacticiels, nous verrons comment vous pouvez étendre les modèles de page pour les rendre plus flexibles et améliorer considérablement leurs fonctionnalités. Je commencerai par expliquer comment créer un modèle de page standard via un thème enfant, avant de passer à une approche plus souple permettant de créer un modèle de page dynamique à usage général..
Enfin, je vais vous montrer trois exemples concrets de modèles de page dynamiques pleinement opérationnels. Je traiterai également de sujets avancés, tels que la manière d'attribuer des modèles de page à des types de publication personnalisés..
Pour suivre cette série de tutoriels, vous aurez besoin d’un site WordPress avec un accès administrateur. Pour ce faire, le moyen le plus simple consiste à utiliser un environnement de développement local. Un éditeur de texte dédié est également utile mais pas indispensable.
Si vous développez avec WordPress via un serveur distant, vous devez pouvoir modifier les fichiers de thème via l’administrateur WordPress, ou modifier les fichiers localement et utiliser un logiciel FTP pour les transférer vers le serveur. Par souci de simplicité, je suppose que vous utilisez WordPress localement tout au long du reste de ce didacticiel..
Pour implémenter nos modèles de page, je vais utiliser un thème enfant basé sur le thème parent Twenty Seventeen, qui (au moment de la rédaction de cet article) est le dernier thème WordPress par défaut. Donc, si vous suivez, c'est une bonne idée de l'avoir installé avant de passer à autre chose..
Vous pouvez utiliser un thème enfant basé sur un autre thème parent si vous préférez, mais vous devrez modifier une partie du code pour qu'il fonctionne de manière transparente avec votre thème particulier. La méthode de base, cependant, est à peu près la même pour n'importe quel thème enfant.
Avant d'apprendre à rendre les modèles de page plus flexibles, examinons quelques détails de base..
WordPress utilise une hiérarchie de modèles pour décider quel modèle rend la page actuelle. Le modèle utilisé dans la plupart des scénarios pour les pages est page.php mais peut être différent si vous visualisez une page avec un identifiant particulier ou un slug. Cependant, si vous sélectionnez un modèle de page pour une page particulière, celui-ci sera toujours utilisé de préférence, ce qui facilite grandement la personnalisation de toute page à l'aide d'un modèle de page..
Voici quelques exemples typiques de modèles de page WordPress couramment utilisés:
Je pourrais continuer, mais vous voyez l'idée. Les modèles de page sont cool! Vous pouvez les utiliser pour presque tout.
Si vous utilisez WordPress depuis un certain temps, il est fort probable que vous ayez déjà rencontré un ou plusieurs des exemples ci-dessus. La plupart des thèmes incluent des modèles de page pour compléter la fonctionnalité du thème, et vous pouvez facilement ajouter les vôtres via un thème enfant. Je vais expliquer comment faire cela sous peu.
Les modèles de page sont très utiles car ils vous donnent un contrôle complet sur toute la page. Vous pouvez omettre l'en-tête, le pied de page et / ou les barres latérales si vous le souhaitez. C'est l'une des raisons pour lesquelles les modèles de page pleine largeur sont si courants, car il est très facile de manipuler les barres latérales via un modèle de page..
Pour voir tous les modèles de page actuellement disponibles, accédez à l'éditeur de page WordPress et accédez au Modèle descendre par le Modèles de page meta box. Sélectionnez simplement le modèle de page souhaité et, une fois la page mise à jour, il sera visible lors de la prochaine consultation de la page..
Comme mentionné ci-dessus, nous utiliserons un thème enfant WordPress personnalisé pour implémenter tous les modèles de page tout au long de ce tutoriel. Je commencerai par un thème enfant de base et un modèle de page, puis nous y ajouterons plus de complexité au fur et à mesure..
L'ensemble du processus sera couvert étape par étape, alors ne vous inquiétez pas si vous n'êtes pas familier avec les thèmes enfants et / ou les modèles de page. Vous serez à la fin du tutoriel!
L'idée de base des thèmes enfants est qu'ils vous permettent de personnaliser l'apparence de votre thème actuel (appelé thème parent) de manière à ne pas être affecté par la mise à jour du thème parent..
Si du code est ajouté directement au thème parent, toutes les personnalisations seront écrasées et perdues lors d'une mise à jour programmée du thème. Ceci est un point important car tout thème bien entretenu sera régulièrement mis à jour. Pour en savoir plus sur les thèmes relatifs aux enfants, je vous conseillerais de consulter la documentation officielle..
Il est intéressant de noter qu'il est techniquement possible d'utiliser un plugin WordPress pour ajouter des modèles de page, mais il est beaucoup plus simple d'utiliser un thème enfant. Je ne veux pas compliquer les choses inutilement avec du code étranger, je vais donc rester avec des thèmes enfants pour l'implémentation de nos modèles de page..
Ok, donc assez de théorie, créons notre modèle de page initial! Il sera situé dans un thème personnalisé Twenty Seventeen qui fera office de conteneur de modèles de page. Nous devons donc d'abord créer le thème enfant..
Ouvrez votre dossier de thème et créez un nouveau dossier pour votre thème enfant. Selon les meilleures pratiques de WordPress, il est recommandé de nommer le dossier de thème enfant de la même manière que le thème parent sur lequel il est basé, modifié par «-child». Comme notre dossier de thème parent est nommé vingt-sept, nommer votre dossier de thème enfant vingt-sept enfant. Dans ce nouveau dossier, créez un fichier unique nommé style.css et ajoutez le bloc de commentaires suivant en haut.
/ * Nom du thème: Twenty Seventeen Child Description: Twenty Seventeen Child Auteur: David Gwyer Modèle: vingtseventeen Version: 0.1 Licence: GNU General Public License v2 ou version ultérieure URI de la licence: http://www.gnu.org/licenses/gpl- 2.0.html Domaine de texte: vingt-dix-sept ans * /
Nous devons maintenant faire référence à tous les styles du thème des parents de Twenty Seventeen. Si vous avez déjà travaillé avec des thèmes enfants auparavant, vous serez peut-être habitué à ajouter un CSS @importation déclaration directement sous le bloc de commentaires. Ce n'est plus considéré comme une meilleure pratique WordPress en raison de problèmes de vitesse. Au lieu de cela, nous allons mettre en file d'attente les styles de thème parent, ce qui sera plus efficace.
Dans le dossier racine du thème enfant, créez un functions.php fichier et ajoutez le code suivant pour configurer un conteneur de classe vide. Nous allons utiliser cette classe pour tout notre code d'installation.
init ();
Note: L'instruction PHP finale n'est pas nécessaire, mais vous pouvez l'ajouter si vous préférez.
Ajoutez maintenant un hook et un rappel pour mettre en file d'attente les styles de thème parent Twenty Seventeen, plutôt que de les importer directement dans le fichier style.css. Faites cela en ajoutant deux nouvelles méthodes de classe.
Enregistrez vos modifications et activez le thème enfant. Vous avez maintenant un thème entièrement fonctionnel, bien que simple, sur vingt-dix-sept enfants. Pour tester son fonctionnement, ajoutez une ligne de CSS personnalisé à
style.css.* couleur: rouge! important;Si tout va bien, vous devriez voir tout le texte de votre site maintenant coloré en rouge vif.!
N'oubliez pas de supprimer le test CSS avant de continuer. Maintenant que le thème enfant est actif, nous pouvons commencer à implémenter notre modèle de première page.
Ajout de notre premier modèle de page
Une chose mérite d’être mentionnée sur l’emplacement où vous stockez les modèles de page dans votre thème enfant. Vous pouvez stocker les modèles de page directement dans le dossier du thème enfant racine ou dans un dossier de niveau supérieur. Peu importe lequel vous choisissez; chaque endroit est bien.
Toutefois, si vous avez plusieurs modèles de page, vous pouvez décider de les stocker dans un dossier à des fins d'organisation. Le nom du dossier n'a pas d'importance, mais il doit être situé directement dans le dossier du thème enfant racine, sinon WordPress ne reconnaîtra pas vos modèles de page. Pour ce tutoriel, je vais utiliser un dossier appelé
modèles de page.Ajoutons maintenant un nouveau modèle de page au thème enfant. La méthode standard consiste à copier le thème parent.
page.phpfichier de modèle de thème et ajoutez-le à votre thème enfant. Vous pouvez nommer le fichier comme bon vous semble, mais je vous conseillerais d'inclure quelque chose qui le rende reconnaissable en tant que modèle de page. Je vais avectest-page-template.php.Une fois que vous avez copié le
page.phpfichier (et renommé) à lamodèles de pagedossier, la structure de votre thème enfant devrait maintenant ressembler à ceci:S'ouvrir
test-page-template.phpet remplacez le bloc de commentaires en haut du fichier par ce qui suit.Cette étape est très importante car le bloc de commentaires indique à WordPress de reconnaître le fichier en tant que modèle de page et l'ajoutera à la liste des modèles de page disponibles dans l'écran de l'éditeur de page..
Le code du modèle de page complète devrait maintenant ressembler à ceci.
Testons notre modèle de page. Accédez à l'administrateur WordPress et modifiez une page existante ou créez-en une nouvelle. Sur l'écran de l'éditeur de page, sélectionnez le Modèle menu déroulant du Attributs de page meta box pour assigner notre template de page à la page courante.
Parce que nous avons simplement copié le thème parent
page.phpfichier modèle, notre modèle de page personnalisé ne fait rien de plus que la sortie de la page actuelle, ce qui n’est pas très utile. De plus, nous n’aurons pas besoin de sortir le contenu ou les commentaires de l’éditeur, donc supprimez-les du modèle de page.tandis queboucle et ajouter un message personnalisé. Changer le contenu de latandis queboucle à la suivante.Ceci est notre modèle de page personnalisé!"; endwhile; // fin de la boucle.Sauvegardez ceci et affichez la page au début.
Remarque: si le message personnalisé ne s'affiche pas, assurez-vous d'avoir sélectionné le modèle de page personnalisé dans l'éditeur de page et enregistré pour mettre à jour les paramètres..
Rendons maintenant notre modèle de page personnalisé un peu plus utile. Remplacez le message que nous avons ajouté ci-dessus par le code suivant pour générer un sitemap de toutes les pages publiées..
Plan du site"; écho "
Cela se traduira par la sortie suivante.
Il est facile de voir à quel point les modèles de page peuvent être utiles. Mais on peut faire encore mieux!
Jusqu'à présent, nous avons créé un thème enfant et l'avons utilisé pour implémenter notre modèle de page standard. Dans le prochain tutoriel, je vais vous montrer, étape par étape, comment étendre ceci, en montrant comment rendre plus flexible les modèles de page.
Plus précisément, nous allons créer un modèle de page dynamique à usage général en ajoutant des contrôles personnalisés à l'écran de l'éditeur de page. La logique de contrôle sera ensuite ajoutée au modèle de page pour nous permettre de personnaliser directement le rendu du modèle de page..
WordPress a une économie incroyablement active. Il existe des thèmes, des plugins, des bibliothèques et de nombreux autres produits qui vous aident à construire votre site et votre projet. La nature open source de la plate-forme en fait également une excellente option à partir de laquelle vous pouvez améliorer vos compétences en programmation. Quel que soit le cas, vous pouvez voir ce que nous avons disponible dans le marché Envato.
Ceci est mon premier tutoriel (soyez gentil!) Alors n'hésitez pas à laisser vos commentaires dans le fil de commentaires ci-dessous. Je ferai de mon mieux pour répondre à toutes les questions.
Accentsconagua
