Personnalisation des listes à puces dans Wordpress


, Mis à jour le 2 septembre, 2015

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

 

Photo de: D. Sharon Pruitt


comments powered by Disqus

Comment changer un domaine principal wp multi-site

Comment changer un domaine principal wp multi-site

Si vous voulez changer le domaine principal de l'installation de votre WordPress multi-site, il y a 5 valeurs à modifier. Vous n’aurez pas besoin d'effectuer une dump de base de données. Ceci est en fait désapprouvé parceque WordPress enregistre des données en séries, et la modification de cela peut … Continuer

Publié le 8 octobre, 2016

0 Commentaires
Supprimer le spam dans wordpress

Supprimer le spam dans wordpress

L’augmentation des commentaires spams dans WordPress devenant un problème, vous vous retrouvez peut-être avec des centaines, voire même des milliers de commentaires en attente que vous avez à supprimer. Malheureusement, l’installation de base de WordPress vous laisse seulement supprimer en masse les … Continuer

Publié le 8 mai, 2016

0 Commentaires
Optimiser la base de données de Wordpress avec Cron

Optimiser la base de données de Wordpress avec Cron

Nous avons déjà souligné l’importance d’avoir une base de données simple et optimisée pour votre site web WordPress pour accélérer la performance de votre site. Après un certain temps, les tableaux MySQL deviennent encombrés et exigeront grandement quelques réparations et travaux d’entretien. Comme … Continuer

Publié le 24 janvier, 2016

0 Commentaires
Comment protéger wp-config.php

Comment protéger wp-config.php

Il est triste de constater à quel point de nombreux sites WordPress sont incroyablement faciles à pirater. Beaucoup d'entre eux ne sont même équipé de la dernière version. Cependant, l'un des fichiers parmi les plus dangereux et les plus sensibles dans WordPress est le wp-config.php. Ce fichier cont … Continuer

Publié le 21 octobre, 2015

0 Commentaires
Comment changer un site html en un site Wordpress

Comment changer un site html en un site Wordpress

Récemment, sur un forum que je fréquente, une vieille connaissance m’a demandé comment convertir un de ses anciens sites Dreamweaver vers WordPress, sans que cela ne lui demande trop d’effort. J’ai d’abord pensé que ce serait impossible de faire cela facilement, mais après avoir vu d’autres réponses … Continuer

Publié le 13 juillet, 2015

2 Commentaires
Comment ajouter un bouton donation dans Wordpress

Comment ajouter un bouton donation dans Wordpress

Il y a un grand nombre de sites web qui offrent des logiciels gratuits ou autres services libres de droit (open source). Les développeurs font beaucoup d’efforts pour nous fournir des outils spécialisés pour divers besoins. Les plugins WordPress sont eux-mêmes un bon exemple. Regardez le nombre d’ad … Continuer

Publié le 11 juillet, 2015

0 Commentaires
Comment installer SSL dans Wordpress

Comment installer SSL dans Wordpress

Tous les jours, nous révélons des informations personnelles sur internet. Rien que pendant la dernière heure, j’ai utilisé ma carte de crédit, acheté un livre, sauvegardé une copie de l’adresse de mes amis, envoyé des mails et fait quelques courses. Partager nos informations est devenu tellement co … Continuer

Publié le 28 février, 2015

0 Commentaires



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 eux depuis peu c'est un ami en Afrique qui me les a référencé, pour ma team css c'est parfait, le forum email au top. Aucun panne pour l'instant, ticket rapide.

team css à propos Ex2hosting

Montrer une autre revue
Lire les avis Ex2hosting



Plans d'hébergement




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


Meilleur hébergeurs web

# hébergeur web prix action

1

Ikoula

1.95 EURO

Ajouter un Avis
Visiter

2

Siteground

6.95 USD

Ajouter un Avis
Visiter

3

Ex2hosting

3.99 EURO

Ajouter un Avis
Visiter

4

Inmotion

5.95 USD

Ajouter un Avis
Visiter

5

Webhostinghub

4.95 USD

Ajouter un Avis
Visiter

6

Bluehost

6.95 USD

Ajouter un Avis
Visiter






Hébergeurs par avis de clients

Ex2hosting
78 avis des clients
Nuxit France
70 avis des clients
Hostpapa France
67 avis des clients
1and1 France
62 avis des clients
Rapidenet
50 avis des clients
Ajouter un avis Tous les profils


Hébergeurs par fidélité de clients

Ex2hosting
73 / 78 recommandé
Nuxit France
68 / 70 recommandé
Rapidenet
49 / 50 recommandé
Infomaniak France
48 / 48 recommandé
Hostpapa France
39 / 67 recommandé
Évaluer hébergeur Tous les profils


Question de la Semaine


Le plus important critère de votre hébergeur



Contacter l'éditeur

Posez votre question