Les listes non ordonnées (ou les listes à puces) sont un moyen particulièrement efficace pour communiquer certaines informations sur le web. Bien sûr, ils peuvent être très bons en version imprimée aussi, mais comme nous le savons tous, la lecture sur le web est différente. Les gens scannent le texte plutôt que de le lire au complet. Ils s'attendent à une présentation plus graphique du texte. Et leurs yeux se fatiguent plus rapidement.
Si nous devions faire une liste rapide des avantages points à puces, nous pourrions dire qu’ils ...
- Favorisent une lecture facile
- Cassent la routine
- Attirent l’œil des lecteurs
- Mettent l'accent sur l'idée d'unification entre les points
- Communiques des idées rapidement
Les listes non ordonnées sont importants, en particulier lorsqu’il s’agit des textes assez chargés. Opter pour un style convenable de vos points à puces est aussi important. Certains peuvent trouver ça ridicule, mais tout écrivain qui se soucie de ce qu’il écrit sait très bien qu’un style des listes non ordonnées non optimale peut affecter négativement l’essence du contenu.
Nous allons passer en revue certains principes de base que vous pouvez utiliser pour rendre vos listes à puces paraître plus attrayant et conviviales.
Utiliser un thème enfant (Child Theme)
Lorsque vous apportez des modifications à votre thème, il est préférable d'utiliser un thème enfant. De cette façon, si votre thème est mis à jour, vous ne perdez pas vos modifications. Et c'est ce que nous allons utiliser pour ce tutoriel (un thème enfant du thème par défaut de Wordpress : Twenty Twelve).
Remarque: Certains thèmes plus avancés peuvent déjà avoir une feuille de style spéciale incorporée dans le thème que vous pouvez utiliser pour ajouter vos personnalisation des styles. Si vous faites un thème enfant qui ne semble pas fonctionner, vous pourriez chercher une solution en ligne ou contacter l’auteur du thème que vous utilisez. Si vous rencontrez des problèmes pour effectuer un thème enfant avec un thème en particulier, alors il y a de grande chance que d'autres sont probablement dans la même situation que vous.
Les points à puce sont une section de votre contenu principal
Le style de vos listes est contrôlée par le thème Wordpress que vous utilisez. Et ainsi, pour changer ce style, vous devez savoir comment votre thème fait référence aux listes non ordonnées dans la feuille de style.
Le style de vos points à puce sera une section du style de votre page principale. De nombreux thèmes classent souvent le contenu globale en tant que "entry-content." En d'autres termes, ils créeront une "classe" appelée "entry-content», puis référencer ce nom (entry-content) dans la feuille de style.
Mais il est aussi possible que votre thème lui donne un nom différent. Donc, la première chose que vous devez faire est de savoir le nom du «classe» que votre thème utilises pour attribuer le contenu dans un article.
Trouver le nom de classe de votre contenu
Afin de trouver le nom de classe pour votre contenu, vous pouvez simplement aller à un article que vous avez déjà publié, puis regarder le code source de cette page. Vous pouvez le faire en cliquant sur le bouton droit de la souris et puis cliquez sur "Voir source de la page " ou "Voir le texte source", etc
Remarque: Il ya une chance que votre thème est beaucoup plus complexe que ce qui est affiché sur l’image. Vous pouvez trouver plusieurs nom de classes. Si c'est le cas, il faut essayer chacun jusqu'à ce que vous trouviez celui qui fonctionne pour vous.
Code HTML pour les listes non ordonnées
Une liste des points à puce dans WordPress est créé en utilisant deux étiquettes (tags) différentes.
Il ya d'abord la balise ul. "UL" est synonyme de « unordered list » (liste non ordonnée), par opposition à ol qui signifie une liste ordonnée, les listes à puce ne sont pas numérotés. Une liste ordonnée est une liste numérotée.
La balise suivante dans une liste à puces est la balise li. Cela signifie « list item » (élément de la liste).
Si vous faites une liste à puce dans votre éditeur WordPress et puis passez à la vue "du texte", vous pouvez voir ces deux balises dans l'action.
Contrôler le look avec du CSS
OK, maintenant à la partie la plus amusante : la personnalisation de vos listes à puces. Pensez à activer le thème enfant que vous avez créer. Maintenant, vous aurez besoin d'aller à la feuille de style dans le thème enfant. (Apparence> Editeur> Feuille de style - style.css)
Rappelez-vous que dans mon thème la classe pour mon contenu a été nommé "entry-content." C'est ce que je vais utiliser dans les exemples ci-dessous. Si vous avez trouvé que votre classe a été nommé autrement, il vous suffit de remplacer le nom «entry-content par le votre.
Pour commencer, nous allons jeter un œil au style par défaut dans le thème Twelve Twenty. De là, nous allons modifier progressivement les choses.
Voici l'apparence par défaut.
Modification de la police
Nous allons commencer avec quelque chose de vraiment simple. Cela vous permettra de vous faire une idée de la façon dont le style se change. Nous allons simplement rendre la police en gras avec le CSS suivant.
.entry-content ul li{
font-weight: bold;
}
Voici le résultat.
Voici à quoi ressemble la feuille de style dans mon thème enfant nouvellement créer
Vous pouvez changer également la couleur. Comme un exemple dramatique, nous allons utiliser un vert vif en ajoutant "color: # 00FF00;"
.entry-content ul li{
font-weight: bold;
color: #00FF00;
}
Et voici quoi cela ressemble.
Ajouter Différents styles
OK, maintenant nous allons commencer à modifier les puces elles-mêmes. Nous allons changer les cercles par défaut avec des cercles vides en ajoutant ce bout de code CSS: list-style: circle;
Mon code CSS ressemble maintenant à ceci:
.entry-content ul li{
font-weight: bold;
list-style:circle;
}
Et voilà le résultat.
Vous pouvez également modifier ces cercles vides en carrées en changeant
list-style:circle;
à
list-style:square;
Et voici le résultat.
Il ya aussi le style "disque", qui est un cercle rempli.
.entry-content ul li {
font-weight: bold;
list-style: disc;
}
Et voici le résultat:
Il ya d'autres valeurs que vous pouvez utiliser avec la propriété «list-style", dont la plupart s'appliquent à l'aide du numéro (listes ordonnées). Vous pouvez trouver plus d'informations ici.
Images sous forme de puces
Vous pouvez également ajouter des images que vos points à puces. La façon de le faire est d'ajouter la ligne de code CSS suivant:
list-style-image:url(url-de-votre-image);
Ainsi, par exemple, si en gardant la police en gras, votre code CSS ressemblerait à quelque chose comme ceci:
.entry-content ul li{
font-weight: bold;
list-style-image:url(http://monsite.com/images/bullet-16x16.png);
}
Voici un exemple d’image que j'ai téléchargé. Il semble assez bon, mais vous remarquerez que l'alignement de l'image n’est pas optimale. Les images semblent être un peu trop élevées.
Vous pouvez prendre une approche différente. Au lieu d'utiliser la propriété "list-style-image", vous pouvez utiliser l'image comme fond (background). Cela vous permettra ensuite de déplacer l'image au bon endroit.
Parce que nous allons utiliser l'image e arrière plan, nous allons avoir besoin d'indiquer que nous ne voulons pas d'une puce "normal". Pour ce faire, nous allons utiliser "liste-style-type: none;" en plus du code CSS de fond.
Le code que j'ai fini par mettre dans mon fichier CSS ressemblait au ci-dessous. Le nombre 5px représente la distance idéale pour que l’image soit bien alignée. Bien sûr, votre image ne sera probablement pas identique que l’image que j’ai utilisé.
.entry-content ul li {
font-weight: bold;
list-style-type: none;
background: url(http://monsite.com/bullet-16x16.png) no-repeat 7px 5px;
margin: 0;
padding: 0px 0px 3px 35px;
vertical-align: middle;
}
Et voici le résultat.
Ajout de caractères Unicode
Autre chose que vous pouvez essayer est les caractères Unicode comme étant des puces. Les caractères Unicode ressemble à : ❤ … ✈ … ✽.
Comme mentionné ci-dessus, en utilisant : "liste-style-type: none;" il supprime le puce affiché. Et c'est ce que vous aurez besoin de faire ici. (Encore une fois, nous ne voulons pas que les points à puce ordinaires apparaissent. Nous allons les remplacer par un caractère Unicode.)
Nous allons aussi ajouter une autre propriété qui indique que le caractère doit être avant de l'élément de liste.
Voici un aperçu de l'utilisation du caractère de ∅ comme une puce.
.entry-content ul li {
list-style-type: none;
font-weight: bold;
}
.entry-content ul li:before {
content: "∅";
padding-right: 5px;
}
Et voici le résultat
Si vous souhaitez utiliser une couleur différent du caractère à celle du texte, il suffit d'ajouter la propriété de couleur de la partie supérieure pour changer la couleur du texte, ou ajoutez la propriété de la couleur à la partie inférieure pour changer la couleur de la puce. Ou, bien sûr, vous pouvez ajouter des propriétés de couleur pour les deux.
Dans cet exemple, j'ai ajouté la propriété de couleur pour les deux.
.entry-content ul li {
list-style-type: none;
font-weight: bold;
color: #2E89FF;
}
.entry-content ul li:before {
content: "∅";
padding-right: 5px;
color: #FFA62F;
}
Et voici le résultat.
Comme vous pouvez le voir, vous n'utilisez pas de code spécial dans votre fichier CSS pour obtenir un caractère Unicode. Il suffit de copier le caractère Unicode et le coller dans votre code CSS.
Vous pouvez trouver une liste exhaustive de ces symboles ici. C'est une longue liste, voici donc quelques-uns des plus populaires: les flèches, dessin de boîte, les éléments de bloc, des formes géométriques, des symboles divers.
Les listes à puces de WPMU
Et, enfin, nous allons conclure avec ça. Comme vous l'aurez remarqué, la puce énumère ici sur WPMU à une puce bleu clair avec un texte bleu foncé. Ceci est créé en séparant la puce du texte. Ce que nous avons fait précédemment avec les caractères Unicode.
La petite boîte bleue que nous utilisons comme puce est généré à partir de la création d'une boîte avec CSS (qui sont les deux valeurs de 5px que vous voyez ci-dessous). Malgré que ce n'est pas exactement la façon dont notre code est mis en place dans notre feuille de style, ce qui suit devrait vous donner le même effet.
.entry-content ul li {
padding-left: 30px;
color: #3D5365;
font-size: 90%;
position: relative;
list-style-type: none;
}
.entry-content ul li:before {
content: '';
position: absolute;
left: 10px;
top: 9px;
width: 5px;
height: 5px;
background-color: #7AA8CC;
}
Ce qui donne :
