Listes de style avec CSS - WordPress Codex

Lors de la présentation des listes de choses, WordPress utilise des éléments standards XHTML:
    1. pour une liste ordonnée (où l'ordre des éléments est important, pour que les articles sont numérotés)
      • pour une liste non ordonnée (normalement présentée comme articles avec des balles)
      • pour chaque élément dans une liste, ordonnée ou non.

      Par défaut, la plupart des listes (et certains éléments de la liste) dans WordPress sont identifiés par les attributs id ou de classe, faire des listes de style facile. Avec les changements assez simples au fichier style.css, vous pouvez afficher la liste horizontalement plutôt que verticalement, fonctionnalité mise en surbrillance de menu dynamique. changer le style de puce ou de numérotation, retirez les balles tout à fait, ou toute combinaison de ceux-ci.







      Mise en page Listes emboîtés

      Thèmes différents listes de format de différentes façons. Les utilisateurs des listes les plus courantes veulent souvent modifier dans WordPress sont les listes de menu de la barre latérale. Étant donné que de nombreuses listes imbriquées sidebars disposent, regardons les plus en profondeur.

      Lorsque vous travaillez avec des listes imbriquées et que vous voulez un style individuel pour chaque liste, vous devez recréer le « nid » dans la feuille de style (style.css).

      Articles Styling Liste spécifiques

    2. Catégories

      .

      articles individuels Styling

      Si vous souhaitez utiliser des techniques de remplacement d'image pour le style de votre liste, chaque

    3. tag aura besoin de sa propre classe ou ID. Essayez le plugin Classy de wp_list_pages.

      Styling vos listes

      Au lieu de taper la liste de style de type. vous voyez une forme abrégée de liste de style. et au lieu d'utiliser le disque par défaut. la liste comporte maintenant des petits carrés.

      Mais pas toutes les listes ont besoin des balles. De par leur plan d'ensemble, vous savez une liste est une liste. Pour éliminer la balle, changer la feuille de style à ceci:

      Maintenant, quoi que ce soit étiqueté avec

    4. , dans le DIV de l'ID de #sidebar. aurait pas de solution. Expérience avec des valeurs différentes pour voir les résultats que vous pouvez réaliser.

      TRUC: En termes d'accessibilité, une liste ordonnée est plus facile de naviguer d'une liste non ordonnée.

      Utilisation d'une image personnalisée au lieu d'une balle







      Fatigué de balles ennuyeux? Débarrassons-nous de l'alésage avec quelques techniques de CSS. Dans ce cas, utilisez list-style-image pour charger le navigateur pour utiliser l'image de la balle à la place des vieilles balles par défaut ennuyeux.

      Trouver des graphiques intéressants et ajoutez balle le code suivant dans votre feuille de style pour ajouter quelques balles jazzy à vos listes:

      Ajout d'une bordure à votre liste

      Pour ajouter une bordure, comme un soulignement, après votre titre, vous pouvez simplement ajouter un style de bordure en haut de la

        sous le titre, plutôt que sur le titre lui-même.

        Aller plus loin et ajouter une boîte entière autour de votre liste avec le titre assis sur elle:

        Ajouter un fond de couleur à votre liste avec sa nouvelle frontière:

        Et votre résultat final ressemblera à ceci:


        Vous pouvez avoir beaucoup de plaisir avec vos balles de liste et les dispositions de la liste. Si vous rencontrez des problèmes avec vos balles et des listes, consultez les ressources ci-dessous, puis visitez les forums de support WordPress pour obtenir plus d'aide.

        Dépannage Listes emboîtées

        Si vous rencontrez des problèmes avec vos listes imbriquées, ce qui suit pourrait fournir la solution. Jetez également un CSS Dépannage pour plus de problèmes d'aide de style.

        Une mauvaise structure Tag

        La première cause d'erreurs ou non-validation au sein d'une liste imbriquée est le manque de structure de liste appropriée. Voici une mise en page de liste imbriquée très simplifiée et correcte. Notez que lorsqu'une liste imbriquée (nouveau) commence, le

      • étiquette de l'élément de la liste actuelle n'est pas encore fermé. Il reste ouvert jusqu'à ce que la liste imbriquée est terminée, puis fermé.

        Modèle Tag listes

        Différentes balises de modèle utilisés pour l'affichage des listes ont différentes façons d'utiliser et se fondant sur les balises de liste HTML. Certaines balises de modèle incluent automatiquement la

          et
        • tags tout ce que vous avez à faire est inclure la balise dans la liste par lui-même et il fera tout le travail. Autres tags exigent la
            être mis en place, suivi par l'étiquette de modèle et il génère son propre
          • Mots clés. D'autres balises de modèle nécessitent désigner quel type de balises de liste sont nécessaires ou utilisez pas du tout si ne figure pas dans les paramètres de la balise.

            Si vous rencontrez des problèmes avec vos listes imbriquées lorsque vous utilisez les balises de modèle comme wp_list_cats ou wp_list_pages. vérifier leurs paramètres pour voir comment ils utilisent les balises de la liste et le comparer avec votre utilisation.

            Les relations parents / enfants

            Discuté dans le parent CSS et les relations enfants. listes sont l'un des grands coupables. Styles dans les articles de la liste des enfants sont influencés par ses « parents ». Si le style de la liste des parents présente la couleur « rouge » et vous voulez que les enfants soient en « bleu », vous devez spécifier la couleur dans les styles de liste des enfants à être « bleu » afin qu'ils écraseront le style du parent

            autres listes dans la barre latérale WordPress contiennent généralement des liens. Par conséquent, alors que vous pouvez définir le style de la liste autant que vous le souhaitez, le style des liens remplace le style de liste. Vous pouvez contrôler la façon dont les liens dans le travail de la liste en leur donnant une classe de style spécifique de leur propre, y compris leurs attributs de vol stationnaire:







            Articles Liés