Share
Dans un précédent tutoriel, je vous ai montré comment attribuer un style différent aux catégories de votre site. Ainsi, si votre site comporte des sections pour chaque catégorie de publication, vous pouvez leur donner un aspect très différent..
Mais que se passe-t-il si votre site est basé sur des pages statiques? Il n'est pas rare de voir de gros sites basés sur une structure de page hiérarchique. Vous pouvez donc utiliser ces techniques pour un site comme celui-ci.?
La réponse est oui. WordPress vous donnera quelques classes CSS relatives à la structure de page de votre site que vous pouvez utiliser pour cibler le style et créer des sections pour votre site basé sur des pages qui semblent très différentes..
Dans ce didacticiel, nous allons travailler avec un site basé sur des pages hiérarchiques et attribuer un style à chaque section du site en utilisant une couleur différente pour chaque section. Nous examinerons également une technique alternative basée sur l'ajout de catégories à des pages..
Pour suivre ce tutoriel, vous aurez besoin de:
Si vous avez déjà un thème sur lequel vous souhaitez utiliser cette technique, vous travaillerez sur la feuille de style et le fichier de fonctions de votre thème. Je vais créer un thème enfant du thème Twenty Fifteen et modifier le fichier de feuille de style et de fonctions dans mon thème enfant.
Votre site sera probablement déjà rempli de messages; afin que mon site a quelques messages, je vais télécharger les données de test de thème WordPress.
Si vous travaillez avec votre propre thème, vous pouvez sauter cette section, mais où est ce que vous devez faire pour créer un thème enfant de Twenty Fifteen.
Dans votre site wp-content / themes dossier, créez un nouveau dossier et nommez-le. J'appelle le mien tutsplus-style-pages-par-section.
Dans ce dossier, créez un fichier CSS vide appelé style.css et ajoutez ce qui suit:
Accentsconagua
/ * Nom du thème: Tuts + Style Pages par section URI du thème: http://code.tutsplus.com/tutorials/style-posts-by-category-on-your-main-blog-page--cms-23684 Description: Thème pour soutenir tuts + tutoriel sur le style des pages différemment dans chaque section d'un site. Thème de l'enfant pour le thème des vingt-quinze. Auteur: Rachel McCollin Auteur URI: http://rachelmccollin.co.uk/ Modèle: vingt-cinq ans Version: 1.0 * / @import url ("… /twentyfifteen/style.css");Cela indique à WordPress tout ce qu'il faut savoir pour créer un thème enfant et importe la feuille de style de Twenty Fifteen. Vous voudrez probablement ajouter votre propre nom et détails au lieu du mien, mais cela vous donne une idée.
Maintenant, activez votre thème.
Si votre site a déjà des pages configurées, vous pouvez ignorer cette section, mais voici comment importer les données de test d'unités de thème dans votre site..
xml fichier qui est lié à.Par défaut, WordPress assigne un menu de navigation contenant toutes les catégories de blog au menu principal et définit la page de blog comme page d’accueil. Comme nous travaillons avec des pages statiques, vous devez changer cela dans l’administrateur de WordPress..
WordPress utilise le body_class () balise de modèle pour afficher les classes en fonction du type de page affichée. Vous ajoutez cette balise à votre thème header.php file: ajoute des classes au corps élément en fonction du type de page visualisée.
Si vous travaillez avec votre propre thème et que vous n'avez pas encore ajouté ces balises de modèle, vous devrez le faire. Ce tutoriel sur l’utilisation des classes et des identifiants générés par WordPress vous montre comment.
Si vous travaillez avec un enfant du thème Twenty Fifteen, ces balises auront déjà été ajoutées au thème Twenty Fifteen lui-même. Vous n'avez donc rien à faire..
Si vous ouvrez une des pages de votre site dans un navigateur et utilisez les outils de développement pour inspecter le code HTML de sortie, vous verrez que le body_class () balise de modèle a ajouté un groupe de classes à votre page. Ici, j'ai une page enfant ouverte:
le corps L'élément est sorti avec un certain nombre de classes:
Ceux-ci indiquent au navigateur que nous sommes sur une page statique, l'ID de la page, le fait qu'il s'agit d'un enfant et de quoi il s'agit, et son modèle de page, entre autres.
Nous allons utiliser deux de ces classes pour cibler des pages dans différentes parties du site: celles relatives à l'ID de la page et au parent de la page..
Pour cibler des pages dans une section d'un site hiérarchique, nous utilisons deux classes: l'ID de page pour la page de niveau supérieur et l'ID parent de page pour les pages enfants..
Vous devez d’abord identifier les identifiants de vos pages de premier niveau. Pour ce faire, ouvrez-les à tour de rôle dans les écrans d’administration et vérifiez l’URL de leur écran d’édition. L'URL contiendra le texte 'post = X', où X est l'ID unique de la page. Ignorez le fait qu'il est écrit 'post' et non 'page' (les pages sont en fait un type de post) et utilisez cet ID pour cibler votre style.
Sur mon site, les identifiants des pages de niveau supérieur avec les enfants sont 5 et 17, et les pages sans enfants ont les identifiants 146, 701, 703, 733 et 735. Je vais utiliser une couleur pour chacune des deux sections hiérarchiques. et un autre pour les pages sans enfants. Si vos pages sont toutes en sections, vous pouvez utiliser une couleur différente pour chaque section..
Ouvrez la feuille de style de votre thème et ajoutez-y le CSS suivant:
.page-id-5 h1, .parent-pageid-5 h1 color: # 6cd2c8; .page-id-17 h1, .parent-pageid-17 h1 color: # e5572f; .page-id-146 h1, .page-id-701 h1, .page-id-703 h1, .page-id-733 h1, .page-id-735 h1 color: # 933bbe;
Remarque: vous devrez modifier les identifiants de publication et de parent en fonction de votre propre site. Vous voudrez peut-être modifier les couleurs pour qu'elles correspondent à votre conception..
Enregistrez maintenant votre feuille de style et jetez un coup d’œil sur votre site. Mon site utilise les couleurs de chaque section. Voici une page sans hiérarchie:
Et une page de haut niveau:
Voici un enfant de cette page de premier niveau:
Cependant, cette approche pose quelques problèmes. La première est que je devais ajouter manuellement des classes pour chacune des pages de niveau supérieur, ce qui signifie que si quelqu'un ajoute plus de sections ou de pages de niveau supérieur à mon site à l'avenir, ou déplace une de mes pages de niveau supérieur vers un emplacement différent de la page. hiérarchie, il n'y aura pas de style pour eux. La seconde est que cela ne fonctionne que pour les enfants directs de mes pages de premier niveau. Aucun de mes styles n'est appliqué aux petits-enfants des pages.
Cela signifie que si votre site possède une hiérarchie à plusieurs niveaux, cette approche sera très difficile à mettre en œuvre car vous devrez cibler les enfants de chacun des enfants de vos pages de niveau supérieur. Impossible si de nouvelles pages sont ajoutées régulièrement!
Donc, je vais avoir besoin d'une méthode alternative, qui consiste à utiliser des catégories.
Par défaut, WordPress n'attribue pas de catégories aux pages, mais vous pouvez facilement ajouter des catégories aux pages avec une fonction. Pour ce faire, vous utilisez le register_taxonomy_for_object_type () fonction, qui est expliquée dans ce tutoriel sur l’attribution de catégories à des pièces jointes.
Ouvrez votre thème functions.php fichier, ou s'il n'en a pas déjà un, créez-en un. Ajoutez ce qui suit:
fonction tutsplus_add_categories_to_pages () register_taxonomy_for_object_type ('category', 'page'); add_action ('init', 'tutsplus_add_categories_to_pages');Cela va ajouter le 'Catégorie' taxonomie à la 'page' type d'objet, ce qui signifie que vous pouvez attribuer des catégories à des pages.
Cependant, cela ne signifie pas que le body_class () tag va afficher la catégorie comme l'une des classes d'une page avec des catégories, car les pages n'ont pas de catégories par défaut.
Vous pouvez changer cela en écrivant une fonction et en la rattachant à la body_class crochet de filtre. Encore une fois dans votre fichier de fonctions, ajoutez ceci:
fonction tutsplus_add_categories_to_body_class ($ classes) if (is_page ()) $ categories = get_the_category ($ post-> ID); foreach ($ categories as $ catégorie) $ classes [] = 'catégorie-'. $ catégorie-> slug; return $ classes; add_filter ('body_class', 'tutsplus_add_categories_to_body_class');Cela crée une fonction appelée tutsplus_add_categories_to_body_class () avec la variable $ classes comme son objet. Il vérifie si nous sommes sur une page et si oui, crée une variable appelée $ catégories qui contient toutes les catégories de la page. Ensuite, pour chaque catégorie, il ajoute la catégorie slug (préfixée par 'Catégorie-' pour la cohérence) à la $ classes tableau et retourne ceux-ci. Enfin en accrochant la fonction à la body_class filtre, il ajoute le tableau de sortie de slug aux classes sorties par le body_class () balise de modèle.
Maintenant, essayez d’ajouter des catégories aux pages de votre site pour lui donner des sections. J'ajoute les catégories Section 1, Section 2 et Section 3. Assurez-vous que chaque page est dans une seule section.
Voici à quoi ressemblent mes pages dans les écrans d’administrateur avec les catégories ajoutées:
L'étape suivante consiste à ajouter un style aux pages cibles de chaque section. Je ne vais pas changer la couleur de l'en-tête comme je l'ai déjà fait en utilisant la hiérarchie des pages. Au lieu de cela, je vais ajouter une bordure.
Dans la feuille de style de votre thème, ajoutez ce qui suit (ou quelque chose de similaire en utilisant les slugs de vos catégories et les couleurs que vous utilisez):
.page.category-section-1 h1 border-bottom: 2px solid # 933bbe; rembourrage: 0.5em; .page.category-section-2 h1 border-bottom: 2px solid # 6cd2c8; rembourrage: 0.5em; .page.category-section-3 h1 border-bottom: 2px solid # e5572f; rembourrage: 0.5em;
Maintenant, enregistrez votre feuille de style et vérifiez vos pages.
Voici une page de la section 1:
Si vous consultez votre site, vous constaterez que chaque page à laquelle vous avez attribué une mise en forme ciblée aura une mise en forme correcte, quel que soit son emplacement dans la hiérarchie des pages. Cela vous donne un contrôle plus fin sur le style et la possibilité de styliser les sections d'un site avec une hiérarchie à plusieurs niveaux..
L’autre avantage de cette approche basée sur les catégories est que vous pouvez l’utiliser pour les pages et les publications de votre site. Ainsi, si vous avez déjà utilisé le style basé sur les catégories pour vos articles de blog, vous pouvez également l’appliquer également à vos pages statiques..
Si votre site est basé sur une structure hiérarchique de pages, il comportera probablement des sections auxquelles vous voudrez peut-être attribuer une identité distincte..
Dans ce didacticiel, vous avez découvert deux manières de cibler le style au niveau des pages de différentes sections de votre site..
Vous avez d’abord utilisé la hiérarchie des pages, ce qui présente l’avantage de fonctionner avec les paramètres par défaut de WordPress mais le désavantage de ne pas utiliser une hiérarchie supérieure à deux niveaux..
Enfin, vous avez appris à appliquer des catégories aux pages, à ajouter des catégories au body_class () balisez les pages, puis écrivez CSS en ciblant les classes générées par WordPress.
