Share
Les pages sont extrêmement utiles lorsque vous utilisez WordPress en tant que système de gestion de contenu. Lorsque vous créez un site Web, il n’est pas rare que deux pages aient des mises en page totalement différentes. Parfois, une déclaration if fera l'affaire; sinon, vous aurez besoin d'un modèle de page personnalisé.
Un modèle de page personnalisé est un fichier situé dans votre répertoire de thèmes. Avec celui-ci, vous pouvez modifier la mise en page d'une page ou afficher un contenu différent dans le modèle de page standard (page.php). Vous pouvez avoir un nombre illimité de modèles de page, et choisir le modèle que vous souhaitez utiliser pour une page particulière est aussi simple que de sélectionner un modèle existant dans une liste déroulante de l'éditeur de page WordPress..
Parfois, il peut être inutile de créer un modèle de page personnalisé. Par exemple, supposons que votre fichier page.php, utilisé pour restituer toutes les pages de votre site Web, comporte un appel de fonction qui affiche les icônes de réseau social, comme suit:
Supposons que vous ayez une page "Contact" sur ce site Web et que sur cette page "Contact", vous ne vouliez pas afficher les icônes de réseaux sociaux. Vous pouvez bien sûr créer un modèle de page personnalisé appelé "Page de contact" et ne pas inclure l'appel de fonction des icônes de réseau social. Cependant, une méthode plus simple consisterait simplement à envelopper l’appel de fonction dans une instruction if qui montrait les icônes si la page sur laquelle vous vous trouviez était ne pas la page 'Contact', comme ceci:
Il est souvent utile de se demander si la fonctionnalité que vous désirez serait plus simple à réaliser en utilisant quelques déclarations if.
Un exemple parfait d'utilisation courante d'un modèle de page personnalisé est une page "pleine largeur". Une grande majorité des modèles WordPress comportent deux ou trois colonnes: une colonne "contenu principal" dans laquelle le contenu de publication / page est conservé et une ou deux barres latérales affichant des widgets et des appels à l'action. Parfois, un utilisateur voudra tirer parti de la largeur totale du conteneur dans lequel ces colonnes sont contenues et choisira d’omettre les colonnes de la barre latérale au lieu d’augmenter la taille de la colonne "contenu principal". Les pages contenant des supports tels que des galeries d'images ou des vidéos bénéficieront souvent de ce type de modèle de page personnalisé.
La création d'un modèle de page personnalisé peut être une opération simple ou difficile, selon les fonctionnalités que vous souhaitez réaliser. Avoir un thème bien codé aide; Les éléments HTML sont souvent ouverts dans un fichier et fermés dans un autre. Si le code n'est pas structuré ou organisé correctement, l'utilisation efficace de modèles de page personnalisés peut devenir une tâche ardue.!
Notez que ces modifications affecteront la mise en page de votre page. Par conséquent, si vous les modifiez sur un site Web actif, les utilisateurs risquent de voir les erreurs et les anomalies. Il est préférable de mettre en pratique ces modifications sur un site Web privé ou après avoir placé votre site Web en mode de maintenance. Il est également recommandé de sauvegarder vos données "au cas où".
Tous les modèles de page personnalisés doit commencez par le code suivant. Il indique à WordPress que le fichier est un modèle de page personnalisé et définit le nom du modèle..
Bien sûr, "Mon modèle de page personnalisé" peut être changé en n'importe quel nom.!
En passant, il est recommandé de nommer vos fichiers de modèles de page personnalisés avec le préfixe 'page_' ('page_contact.php', 'page_fullwidth.php'). Il regroupe tous les modèles de page dans votre répertoire de thèmes.
Je pense que le moyen le plus rapide de rester coincé dans les modèles de page personnalisés consiste à simplement copier le code de votre fichier page.php standard dans un nouveau fichier et à transformer le nouveau fichier en modèle de page personnalisé. De cette façon, vous pouvez modifier et supprimer du code et voir son impact sur une page. Faisons-le maintenant!
Maintenant, lorsque vous affichez votre page, il devrait ressembler exactement le même! C'est parce que nous n'avons encore rien fait pour personnaliser notre modèle de page personnalisé! Mais il est bon de voir que la page fonctionne toujours. Si vous obtenez une erreur, assurez-vous d'avoir copié le code correctement.
Pour confirmer que votre page utilise le nouveau fichier "page_test.php" plutôt que "page.php", supprimez le bloc de code de "page_test.php" ("the_content ();" est généralement un bon bit à supprimer), puis enregistrez-le (et téléchargez-le). Actualisez la page sur votre site Web et le bit que vous avez supprimé devrait être manquant. Si c'est le cas, annulez la modification que vous avez effectuée et sauvegardez (et transférez-la) à nouveau. Sinon, vérifiez que vous avez bien copié le code de ce tutoriel et le fichier page.php correctement.
De là, vous êtes ouvert à un monde de possibilités! Tant que le code 'Nom du modèle:' reste en haut du fichier, vous pouvez faire ce que vous voulez! Votre modèle de page ne doit pas nécessairement utiliser la syntaxe WordPress, il peut simplement s'agir d'un modèle HTML statique - comme vous le souhaitez!
En prime, je couvrirai la commun étapes nécessaires à la création d’un modèle de page personnalisé pleine largeur. Ces étapes peuvent ne pas être précises en fonction du code de votre thème, mais vous devriez pouvoir en comprendre l'essentiel..
Commencez par créer un nouveau fichier appelé 'page_fullwidth.php'. Ajoutez le code ci-dessous tout en haut, puis copiez et collez le code de votre fichier 'page.php' en dessous, comme avant.
Je vais supposer que quelque part dans le code de ce fichier est le suivant:
get_sidebar ();
Si tel est le cas, supprimez-le, à chaque fois si nécessaire. S'il est contenu dans des éléments, tels que des divs, qui peuvent affecter la mise en page de la page, supprimez-les également. Une quantité d’essais et d’erreur est souvent impliquée dans ces choses si vous n’avez pas créé le thème vous-même..
Je vais également supposer que le contenu HTML de la page commence par un div qui a une déclaration CSS qui définit la largeur, et peut-être la faire flotter à gauche ou à droite. Dans les thèmes que je crée, j'ai généralement une div avec un identifiant de 'contenu de page'. 'left', 'content' ou 'post' sont des alternatives populaires, mais vous devrez vous renseigner! A cette div, ajoutez la classe 'fullwidth'. Enregistrez (et téléchargez) le fichier. N'oubliez pas de définir également l'une de vos pages dans WordPress pour utiliser le modèle..
Ouvrez le fichier 'style.css' dans votre thème. De préférence dans un endroit logique, mais cela n'a pas vraiment d'importance (tant que cela n'interfère pas avec d'autres déclarations), ajoutez le code suivant:
.pleine largeur width: 100%;
Enregistrez (et chargez) 'style.css', puis chargez la page à laquelle vous avez attribué le modèle 'Full Width'. Vous pouvez revenir en arrière et ajuster la déclaration CSS si nécessaire, mais nous espérons que la colonne contenant le contenu de votre page se sera étendue pour remplir un espace plus grand. Si ce n'est pas le cas, cela dépend entièrement de la manière dont votre thème a été écrit. Si vous utilisez un thème premium, il peut être intéressant de consulter la documentation ou de contacter le développeur. Sinon, n'hésitez pas à poster des requêtes de dépannage dans les commentaires ci-dessous, et je ferai de mon mieux pour vous donner des conseils..
Accentsconagua