Ajoutez des mises en page de maçonnerie et de grille à votre site WordPress avec juste CSS
Publié: 2014-07-09Vous avez toujours voulu égayer la façon dont vos articles sont affichés sur votre page d'accueil et vos archives WordPress ?
Et si vous pouviez afficher vos messages en utilisant l'approche maçonnerie (Pinterest) ou peut-être une mise en page en grille, le tout simplement en ajoutant un extrait de CSS ?
Pas de plugins, de shortcodes, de changements de modèle, d'assignation de pages comme page d'accueil. CSS pur.
Continuez à lire ou avancez en utilisant ces liens :
- Préparatifs pour ajouter des dispositions de maçonnerie et de grille à votre site
- Donner à vos messages le look de maçonnerie Pinterest
- Disposer les messages dans une grille
- Ajouter le CSS personnalisé à votre site
Préparatifs pour ajouter des mises en page de maçonnerie et de grille à votre site WordPress
Ces solutions sont basées uniquement sur CSS et donc, sans surprise, elles s'appuient fortement sur le balisage HTML de votre site pour fonctionner sans modification.
Le CSS utilisé a été conçu (et testé) avec les thèmes par défaut. Cela signifie que le CSS a quelques attentes :
- Des classes existent sur l'élément body qui décrivent le type de page (par exemple, accueil, blog, archive, recherche)
- Les listes de publications sont des collections d'éléments d'article, avec un en-tête enveloppé dans une div avec l'identifiant du contenu
Si vous utilisez un thème par défaut, vous pourrez utiliser le CSS sans modification. Même si vous ne le faites pas, vous constaterez peut-être que votre thème utilise un balisage suffisamment similaire pour que vous puissiez toujours utiliser le CSS tel quel. Par exemple, le thème Eighties utilise pratiquement le même balisage que les thèmes par défaut.
Si votre thème n'utilise pas le même balisage - le moyen le plus simple de le savoir est de vérifier la source de la page pour les classes et les identifiants référencés dans le CSS - alors vous pouvez toujours utiliser le CSS, vous n'aurez qu'à changer les classes et les identifiants correspondant à votre balisage.
Choisir où appliquer le style
Vous pouvez décider de n'appliquer le style que vous avez choisi qu'à certaines pages.
WordPress rend cela très facile car il applique des classes spécifiques à la page à l'élément de corps tel que le blog, la maison, les archives et la recherche, il vous suffit donc de coder votre CSS pour chacune des classes pertinentes.
Par exemple, si vous souhaitez appliquer le style uniquement à la page d'accueil, votre CSS ressemblera à :
body.blog article { styles go here... }
Pour appliquer le style à la page d'accueil et aux pages d'archives (catégorie) :
body.blog article, body.archive article { styles go here... }
Pour appliquer le style uniquement aux résultats de la recherche :
body.blog search { styles go here... }
Encore une fois, cela dépend de votre thème suivant les recommandations de thème de WordPress.
Compatibilité du navigateur
Étant CSS3, ces techniques ne fonctionneront pas sur toutes les plates-formes et tous les navigateurs.
J'ai testé et confirmé qu'ils fonctionnent sur les dernières versions de Chrome et Safari (tous deux sur OS X) et sur iOS (5+). Les différents sites Web CSS suggèrent également qu'IE10 n'aura également aucun problème.
En dehors de ces navigateurs (y compris IE9), votre kilométrage variera, mais il convient de rappeler que la solution de repli est votre style actuel, de sorte que les visiteurs utilisant des navigateurs plus anciens ne remarqueront tout simplement aucune différence.
Si vous trouvez que les styles fonctionnent avec succès sur une plate-forme non mentionnée (en particulier Windows), faites-le nous savoir dans les commentaires.
Assez des clauses de non-responsabilité, voyons comment embellir vos listes de publications.
Donner à vos messages le look de maçonnerie Pinterest
Il existe de nombreux thèmes WordPress et une poignée de plugins qui affichent les publications dans un format de maçonnerie de style Pinterest. Mais avec CSS3, vous pouvez simplement ajouter quelques styles supplémentaires à votre site WordPress et obtenir le même effet.
Cette solution, inspirée du post de Rahul Arora sur W3Bits, est basée sur la prise en charge par CSS3 de la propriété column . Cette propriété répartira le contenu sur le nombre défini de colonnes et, bien que sa création ait probablement été davantage inspirée par l'idée de faire circuler le texte dans les colonnes à la manière d'un journal, elle est tout aussi utile pour une mise en page en maçonnerie.
/* Masonry Custom CSS */
/* Masonry container */
body.blog div#content, body.archive div#content {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
column-gap: 1em;
}
/* Masonry bricks or child elements */
body.blog article, body.archive article {
background-color: #eee;
display: inline-block;
margin: 0 0 1em;
padding: 1em;
width: 100%;
}
body.archive .archive-header, body.blog .paging-navigation, body.archive .paging-navigation {
background-color: #ffffff;
-webkit-column-span: all;
column-span: all;
}
Dans les mises en page par défaut, les articles sont générés sous forme d'éléments d' article enveloppés dans un div avec un identifiant de contenu.
Le CSC :
1. Définit le nombre de colonnes sur le wrapper #content à l'aide de la propriété column-count - dans ce cas 4. Il définit également le column-gap . Vous remarquerez l'utilisation de -moz- et -webkit- pour Firefox et Safari.
2. Transforme les éléments de l' article en briques, en utilisant un bloc en ligne et en définissant une largeur à 100 %.
3. S'assure que l' en-tête de la page et la navigation se trouvent dans sa propre "ligne" en spécifiant que ces éléments couvrent toutes les colonnes
Juste pour garder les choses en ordre, vous pouvez également envisager d'ajouter ce qui suit :
/* Some ad hoc CSS useful for many themes */
body.archive .site-content,
body.blog .site-content {
margin: 1em;
}
h1, h2, h3, h4, h5, h6, a {
-ms-word-wrap: break-word;
word-wrap: break-word;
}
Cela met simplement une marge autour du contenu et garantit que les mots longs dans les titres ne rejettent pas la mise en forme (utile pour n'importe quel thème, pas seulement ici).
Rendre réactif
L'un des inconvénients d'une approche par colonne est qu'elle se dégrade rapidement à mesure que la taille de l'écran diminue.
Ce que nous voulons faire, c'est manipuler le nombre de colonnes afin que les éléments de l'article obtiennent une quantité raisonnable d'espace à l'écran pour maintenir l'intégrité et l'attrait visuel des briques. Ajoutons donc quelques media queries pour modifier le nombre de colonnes en fonction de la taille de l'écran :
@media only screen and (max-width : 1024px) {
body.blog div#content, body.archive div#content { /* Masonry container */
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
}
@media only screen and (max-device-width : 1024px) and (orientation : portrait) {
body.blog div#content, body.archive div#content { /* Masonry container */
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
}
@media only screen and (max-width : 768px) {
body.blog div#content, body.archive div#content { /* Masonry container */
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
}
@media only screen and (max-width : 480px) {
body.blog div#content, body.archive div#content { /* Masonry container */
-moz-column-count: 1;
-webkit-column-count: 1;
column-count: 1;
}
}
Comme vous pouvez le constater, nous n'avons qu'à modifier la propriété column-count (et ses dérivées) pour chaque requête.
Ces 4 points d'arrêt, dont 3 fonctionneront sur toutes les plateformes (redimensionnez simplement la fenêtre de votre navigateur pour les voir prendre effet) et 1 qui est spécifiquement pour une tablette en mode portrait.
Voici le style de maçonnerie sur un iPad et un iPhone :
Vous pouvez (et devriez), bien sûr, aller plus loin et ajouter plus de style aux briques pour améliorer l'attrait visuel, mais seulement 3 déclarations CSS pour transformer vos listes de publications en un mur de maçonnerie sont assez impressionnantes !
Disposer les messages dans une grille
Si vous aimez plus d'uniformité et d'ordre que la maçonnerie n'en offre, vous pourriez être intéressé par la disposition de vos poteaux dans une grille.
Les grilles sont très, très faciles à mettre en œuvre, mais fonctionnent certainement mieux lorsque les images présentées ont toutes la même taille, sinon vous pouvez vous retrouver avec beaucoup d'espaces blancs remplissant les "cellules" plus courtes.
Cette fois, le CSS est encore plus court, s'appuyant simplement sur le style des éléments de l' article :
/* Grid Layout Custom CSS */
body.blog article, body.archive article {
width: 32.5%;
display: inline-block;
vertical-align: top;
text-align: left;
margin-bottom: 10px;
position: relative;
}
C'est tout ce qui est absolument nécessaire. Encore une fois, nous utilisons le bloc en ligne et veillons à ce que le contenu de l' article (titre, image en vedette, extrait) soit aligné verticalement.
La propriété importante est la largeur car elle détermine le nombre de "colonnes". J'ai utilisé 32,5 % comme valeur initiale (l'utilisation de 33 % peut entraîner un habillage prématuré), ce qui fournira 3 colonnes. Évidemment, si vous vouliez 4 colonnes, vous utiliseriez 24,5 %, 5 colonnes 19,5 %, etc.
Ajouter de la réactivité
Tout comme notre style de maçonnerie, les grilles devront être réactives si elles veulent conserver leur efficacité.
Comme c'est la propriété width qui détermine le nombre de colonnes, c'est la propriété qui sera modifiée dans les différentes requêtes multimédias.
@media only screen and (max-device-width : 1024px) and (orientation : portrait) {
body.blog article, body.archive article {
width: 49%;
}
}
@media only screen and (max-width : 768px) {
body.blog article, body.archive article {
width: 49%;
}
}
@media only screen and (max-width : 480px) {
body.blog article, body.archive article {
width: 100%;
}
}
Juste 3 requêtes cette fois car je n'ai commencé qu'avec 3 colonnes. Si vous décidez de commencer avec plus de colonnes, vous voudrez peut-être ajouter un point d'arrêt de max-width : 1024px pour définir la largeur à 32,5 % (3 colonnes).
Cela se traduira par :
- 2 colonnes sur une tablette en mode portrait
- 2 colonnes lorsque la taille de l'écran est d'une largeur maximale de 768px
- 1 colonne lorsque la taille de l'écran est d'une largeur maximale de 480px
Ces points d'arrêt couvriront à la fois les tablettes et les smartphones et le redimensionnement de la fenêtre du navigateur.
Voici la disposition de la grille sur un iPad et un iPhone :
Les grilles, un peu plus ordonnées que la maçonnerie, mais nécessitent vraiment de la cohérence et de la rigueur en ce qui concerne la taille de l'image en vedette pour être les plus efficaces.
Ajouter le CSS personnalisé à votre site
Il existe un certain nombre d'options pour injecter le CSS personnalisé de votre choix dans votre site WordPress. Si votre thème n'inclut pas la possibilité d'ajouter du CSS personnalisé, alors vos choix sont :
- Thème enfant - créez un thème enfant et ajoutez le CSS à la feuille de style
- Plugin - ajoutez le style que vous avez choisi à un nouveau fichier CSS et créez un plugin qui utilise la fonction wp-enqueue-style, peut-être conditionnellement basée sur la page générée, pour mettre le nouveau fichier en file d'attente
- Modifiez la feuille de style du thème actuel - ne le faites pas, vraiment, ne le faites pas
- Utilisez un plugin CSS personnalisé - il existe un certain nombre de plugins qui vous permettront d'ajouter du CSS personnalisé à votre site via l'interface d'administration de WordPress (le plugin CSS Simple Custom bien nommé est l'un de ces plugins)
J'aime utiliser le plugin CSS personnalisé. Il est rapide et facile à configurer, facilite les tests et il est tout aussi rapide et facile de supprimer le CSS de votre site WordPress (effacez l'éditeur ou désinstallez le plugin).
CSS, la voie vers WordPress Zen
Le merveilleux CSS Zen Garden prouve depuis de nombreuses années que l'apparence d'un site peut être considérablement modifiée sans un seul changement du balisage, mais en changeant le CSS.
Bien qu'elles soient loin d'être au même niveau, ces deux techniques prouvent que changer l'apparence de votre site WordPress est également tout à fait possible sans avoir à modifier les modèles, à utiliser des codes abrégés ou à développer des thèmes enfants.
Juste un peu de CSS.
Note de l'éditeur : ce message a été mis à jour pour plus de précision et de pertinence. [Publié à l'origine : juillet 2014 / Révisé : février 2022]
Mots clés: