Comment créer des puces personnalisées dans WordPress

Les puces sont un moyen particulièrement efficace de communiquer certaines informations sur le Web. Bien sûr, ils peuvent également être très bons en version imprimée, mais comme nous le savons tous, la lecture sur le Web est différente. Les gens scannent plus. Ils attendent une présentation plus graphique du texte. Et leurs yeux se fatiguent plus facilement.

Si nous devions faire une liste rapide des avantages des puces, nous pourrions dire qu'ils…

• Rendre la lecture facile
• Casser la copie
• Attirez l'attention des scanners
• Mettre l'accent sur l'idée unificatrice entre les points
• Communiquer rapidement des idées

Et donc les puces sont importantes, en particulier dans les messages contenant beaucoup de texte. Il est également important de bien définir le style de vos puces. Certains peuvent se moquer de cela, mais tout écrivain qui se soucie de ses mots sait que lorsqu'une liste à puces ne semble pas correcte, elle semble enlever le contenu lui-même.

Et donc ci-dessous, nous allons passer en revue certains principes de base que vous pouvez utiliser pour que vos listes à puces aient l'apparence que vous souhaitez.

Voici ce que nous allons couvrir dans cet article :

• Créer un thème enfant
• Le style des puces thématiques
• Trouver le nom de classe de votre contenu
• Code HTML pour les puces
• Styler les puces avec CSS

Créer un thème enfant

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 donc ce que nous allons utiliser pour ce tutoriel (un thème enfant du thème WordPress Twenty Twelve par défaut). Vous pouvez apprendre à créer un thème enfant ici.

Remarque : Certains thèmes plus avancés peuvent déjà avoir une feuille de style spéciale intégrée au thème pour vos personnalisations. Si la création d'un thème enfant ne semble pas fonctionner pour vous, vous pouvez rechercher une solution en ligne ou avec l'auteur du thème. Si vous rencontrez des problèmes pour créer un thème enfant avec votre thème particulier, d'autres ont probablement les mêmes problèmes.

Le style des puces thématiques

Le style de vos puces est contrôlé par votre thème. Et donc pour changer ce style, vous devez savoir comment votre thème les référence dans la feuille de style.

Le style de vos puces sera une sous-section du style de votre contenu principal. De nombreux thèmes classeront probablement le contenu global comme "contenu d'entrée". En d'autres termes, ils créeront une "classe" appelée "entry-content", puis référenceront ce nom (entry-content) dans la feuille de style.

Mais il est également possible que votre thème lui donne un nom différent, et la première chose à faire est donc de savoir quelle «classe» votre thème attribue au contenu d'un article.

Trouver le nom de classe de votre contenu

Afin de trouver le nom de classe de votre contenu, vous pouvez simplement accéder à un article que vous avez déjà publié, puis consulter le code de cette page. Vous pouvez le faire en cliquant avec le bouton droit sur la page, puis en cliquant sur "Afficher la source de la page" ou "Afficher la source", etc.

Ensuite, choisissez les premiers mots de votre message et recherchez le code de ces mots. Lorsque vous les trouvez, vous devriez également voir un code non loin au-dessus d'eux qui vous indiquera quelle classe votre thème a donnée au contenu de la page.

Je l'ai fait dans le thème par défaut Twenty Twelve, et j'ai trouvé que la classe était "contenu d'entrée". Comme mentionné, le vôtre peut être le même, mais il peut aussi être différent. Recherchez la balise "class" à l'intérieur d'un div près du haut de votre contenu.

*Remarque : Il est possible que votre thème soit beaucoup plus complexe que ce qui précède et que vous trouviez plusieurs classes. Si c'est le cas, continuez à essayer chacun jusqu'à ce que vous trouviez celui qui vous convient.

Code HTML pour les puces

Une liste de puces dans WordPress va être créée en utilisant deux balises différentes.

Il y a d'abord la balise <ul>. "UL" signifie "liste non ordonnée", par opposition à <ol> - qui signifie "liste ordonnée". Une liste non ordonnée ne sera pas numérotée (elle comportera des puces). Une liste ordonnée est une liste numérotée.

La balise suivante dans une liste à puces est la balise <li>. Cela signifie "élément de liste".

Si vous créez une liste à puces dans votre éditeur WordPress, puis passez à la vue "Texte", vous pouvez voir ces deux balises en action.

Styler les puces avec CSS

OK, passons maintenant à la partie amusante - la personnalisation de vos listes à puces. Si vous ne l'avez pas encore fait, pensez à activer votre thème enfant. Vous devez maintenant accéder à la feuille de style de votre thème enfant. (Apparence > Éditeur > Feuille de style – style.css)

N'oubliez pas que dans mon thème, la classe de mon contenu s'appelait "entry-content". Et c'est donc ce que je vais utiliser dans les exemples ci-dessous. Si vous avez trouvé que votre classe s'appelait autrement, remplacez-la simplement.

Pour commencer, examinons le style par défaut des listes à puces dans le thème Twenty Twelve. À partir de là, nous allons progressivement changer les choses.

Voici le look par défaut.

Changer la police

Nous allons commencer par quelque chose de très simple. Cela vous permettra d'avoir une idée de la façon dont les choses changent. Nous allons simplement mettre la police en gras avec le CSS suivant.

 .entry-content ul li{
 font-weight : gras ;
 }

Voici le résultat.

Et pour ce premier, je vais juste vous montrer à quoi ressemble la feuille de style dans mon thème enfant nouvellement créé.

Bien sûr, vous pouvez aussi changer la couleur. À titre d'exemple dramatique, nous allons changer la liste en vert clair en ajoutant "color: #00FF00 ;"

 .entry-content ul li{
font-weight : gras ;
couleur : #00FF00 ;
}

Et voici à quoi ça ressemble.

Ajouter différents styles

OK, maintenant nous allons commencer à changer les balles elles-mêmes. Nous allons changer les cercles remplis en cercles vides en ajoutant ce bout de code CSS : list-style:circle;

Mon code CSS ressemble maintenant à ceci :

 .entry-content ul li{
 font-weight : gras ;
 style de liste : cercle ;
 }

Et voici le résultat.

Vous pouvez également changer ces cercles vides en carrés en changeant

 style de liste : cercle ;

pour

 style de liste :carré ;

Et voici le résultat.

Il y a aussi le style "disque", qui est un cercle rempli.

 .entry-content ul li {
font-weight : gras ;
style de liste : disque ;
} 

Et voici le résultat :

Il existe d'autres valeurs que vous pouvez utiliser avec la propriété "list-style", dont beaucoup s'appliquent à l'utilisation de nombre (listes ordonnées). Vous pouvez trouver plus d'informations sur ceux-ci ici.

Utiliser des images comme puces

Vous pouvez également ajouter des images comme puces. Pour ce faire, ajoutez la ligne de code CSS suivante :

 list-style-image:url(url-de-votre-image);

Ainsi, par exemple, si vous gardez la police en gras, votre code CSS ressemblera à ceci :

 .entry-content ul li{
 font-weight : gras ;
 list-style-image:url(http://mysite.com/images/bullet-16x16.png);
 }

Voici un aperçu d'une image que j'ai téléchargée. Ça a l'air plutôt bien, mais vous remarquerez que l'alignement de l'image est un peu décalé. Les images semblent un peu trop hautes.

Si cela vous arrive, vous pouvez adopter une approche différente de l'utilisation des images. Au lieu d'utiliser la propriété "list-style-image", vous pouvez utiliser l'image comme arrière-plan. Cela vous permettra ensuite de déplacer l'image pour qu'elle soit correcte.

Parce que nous utilisons l'image comme arrière-plan, nous allons devoir indiquer que nous ne voulons pas d'une puce "normale". Pour ce faire, nous allons utiliser "list-style-type: none;" en plus du code CSS d'arrière-plan.

Le code que j'ai fini par mettre dans mon fichier CSS ressemblait à quelque chose comme ci-dessous. Le nombre 5px est ce avec quoi j'ai joué jusqu'à ce qu'il ait l'air correct. Bien sûr, votre image ne sera probablement pas exactement de la même manière que la mienne, vous devrez donc jouer avec les choses vous-même jusqu'à ce qu'elle soit correcte.

 .entry-content ul li {
font-weight : gras ;
type de style de liste : aucun ;
arrière-plan : url (http://mysite.com/bullet-16x16.png) sans répétition 7px 5px ;
marge : 0 ;
rembourrage : 0px 0px 3px 35px ;
alignement vertical : milieu ;
}

Et voici le résultat.

Ajout de caractères Unicode

Une autre chose que vous voudrez peut-être essayer pour les puces est les caractères Unicode. Les caractères Unicode sont des choses comme … … ✽.

Comme mentionné ci-dessus, en mettant dans "list-style-type: none;" il supprime la puce normale. Et c'est donc ce que vous devrez faire ici. (Encore une fois, nous ne voulons pas que les puces normales apparaissent. Nous allons les remplacer par un caractère Unicode.)

Nous allons également ajouter une propriété différente qui indiquera que le caractère doit être placé avant l'élément de la liste.

Voici un aperçu de l'utilisation du caractère ∅ comme puce.

 .entry-content ul li {
type de style de liste : aucun ;
font-weight : gras ;
}
.entry-content ul li:before {
contenu : "∅" ;
rembourrage à droite : 5 px ;
}

Et voici à quoi ça ressemble.

Si vous souhaitez donner au caractère une couleur différente du texte, ajoutez simplement la propriété color à la section supérieure pour modifier la couleur du texte, ou ajoutez la propriété color à la section inférieure pour modifier la couleur de la puce. Ou, bien sûr, vous pouvez ajouter des propriétés de couleur aux deux.

Dans cet exemple, j'ai ajouté la propriété color aux deux.

 .entry-content ul li {
type de style de liste : aucun ;
font-weight : gras ;
couleur : #2E89FF ;
}
.entry-content ul li:before {
contenu : "∅" ;
rembourrage à droite : 5 px ;
couleur : #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. Copiez simplement le caractère Unicode lui-même et collez-le dans votre code CSS.

Vous pouvez trouver une liste de ces symboles ici. C'est une longue liste, alors voici quelques-uns des plus populaires : flèches, dessin de boîte, éléments de bloc, formes géométriques, symboles divers et dingbats.

Listes à puces de WPMU DEV

Et, enfin, nous finirons par ceci. Comme vous l'avez peut-être remarqué, les listes à puces ici sur WPMU ont une puce bleu clair avec un texte bleu foncé. Cela est créé en séparant la puce du texte comme nous l'avons fait ci-dessus avec les caractères Unicode.

La petite boîte bleue que nous utilisons comme puce est créée en créant une boîte avec CSS (c'est les deux valeurs 5px que vous voyez ci-dessous). Bien que ce ne soit pas exactement la façon dont notre code est configuré dans notre feuille de style, ce qui suit devrait vous donner le même effet.

 .entry-content ul li {
rembourrage à gauche : 30 px ;
couleur : #3D5365 ;
taille de police : 90 % ;
position : relative ;
type de style de liste : aucun ;
}
.entry-content ul li:before {
teneur: '';
position : absolue ;
gauche : 10px ;
haut : 9 pixels ;
largeur : 5px ;
hauteur : 5px ;
couleur de fond : #7AA8CC ;
}

Et, bien sûr, c'est à quoi ça ressemble. (J'inclurai une image ici au cas où nous la changerions, et vous lirez ceci à une date ultérieure.)

Il est temps de mordre la balle

Vos puces ressemblent-elles à ce que vous voudriez qu'elles soient ? Si ce n'est pas le cas, il est peut-être temps de mordre la balle, de creuser dans votre feuille de style et de les mettre à jour.

Crédit photo : D. Sharon Pruitt