Personnalisation des listes à puces dans Wordpress


Mis à jour le 28 janvier, 2018

Personnalisation des listes à puces dans Wordpress

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)

utiliser un thème enfant wordpressLorsque 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

classe entry content wordpress

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.

 code html des listes à puces dans Wordpress

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.

 listes puce par defaut dans wordpress

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.

 liste à puces wordpress en gras

Voici à quoi ressemble la feuille de style dans mon thème enfant nouvellement créer

 feuille de style wordpress listes à puce

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.

 listes puce par en vert dans wordpress

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.

liste à puces wordpress cercles vides

Vous pouvez également modifier ces cercles vides en carrées en changeant

 
list-style:circle;

à


list-style:square;

Et voici le résultat.

liste à puces wordpress carrée

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:

 liste à puces wordpress cercles remplis

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.

liste à puces wordpress avec image

 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.

liste à puces wordpress avec image background

 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

liste à puces wordpress avec caractère unicode

 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.

 liste à puces wordpress avec caractère unicode différentes couleurs

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 :

 liste à puces wordpress wpmu




Rubriques des articles




Les avis des clients

Avis des utilisateurs


Faites entendre votre voix. Passez en revue votre fournisseur d'hébergement Web - bon ou mauvais.


je suis avec rapidenet depuis 2013, jai mon domaine et mon hébergement aussi chez eux et je suis entièrement satisfaite des services, et le soutien nous repond rapidement et leur explications sont toujours clair. Merci Rapidenet je le recommande a tous.....

Chantal à propos Rapidenet

Montrer une autre revue
Lire les avis Rapidenet



Plans d'hébergement




Les plans d'hébergement de 43 sociétés d'hébergement partout dans le monde


Meilleur hébergeurs web

# hébergeur web prix action

1

Infomaniak France

6.75 EURO

Ajouter un Avis
Visiter

2

Hostpapa France

2.95 EURO

Ajouter un Avis
Visiter

3

Greengeeks

4.95 USD

Ajouter un Avis
Visiter

4

Siteground

6.95 USD

Ajouter un Avis
Visiter

5

Planethoster France

5.99 EURO

Ajouter un Avis
Visiter

6

Bluehost

6.95 USD

Ajouter un Avis
Visiter




Hébergeurs par avis de clients

Planethoster France
192 avis des clients
Hostpapa France
74 avis des clients
Infomaniak France
56 avis des clients
Rapidenet
50 avis des clients
Hostinger
47 avis des clients
Ajouter un avis Tous les profils


Hébergeurs par fidélité de clients

Planethoster France
187 / 192 recommandé
Infomaniak France
56 / 56 recommandé
Rapidenet
49 / 50 recommandé
Hostinger
44 / 47 recommandé
Hostpapa France
39 / 74 recommandé
Évaluer hébergeur Tous les profils


Question de la Semaine


Votre avis sur notre site



Contacter l'éditeur

Posez votre question