web-dev-qa-db-fra.com

Comment appliquer le style à chaque catégorie d'une liste?

Je dois créer un simple plug-in pour afficher une liste de catégories dans le corps du message et, comme je suis novice dans le domaine de la programmation, j'ai recherché les bases et commencé à apporter de petites modifications. ça ressemble à ça, maintenant:

// [cats]
function catting ( $atts, $content = null ) {
global $post;
$categories = get_the_category_list(  ', ', '', $post->ID  );
 return '<div id="cats" class="catting">' . $categories . '</div>';
}
add_shortcode("cats", "catting");

Il montre simplement les catégories d’un message répertorié et j’ai réussi à lui appliquer des styles personnalisés afin de l’afficher sous forme de boutons, mais le style s’applique au shortcode dans son ensemble au lieu d’affecter les catégories séparément et individuellement.

J'essaie d'utiliser foreach et de changer les virgules en espaces vides, mais chaque fois que j'essaie quelque chose, le code est cassé ou ne change rien du tout.

Je voudrais savoir comment appliquer le style dans chaque catégorie séparément et je vous remercie beaucoup d'avance pour votre aide.

1
JorgeAmVF

J'ai modifié votre code pour refléter la référence de la fonction wp_list_categories() comme suggéré par @Usce.

Cet extrait crée une liste non ordonnée, supprime le titre de la liste "Catégories" et ajoute la classe li avec l'ID de catégorie individuel afin que vous puissiez cibler chaque lien de la liste.

function catting ($atts, $content = null) { echo '<div id="cats" class="catting">' . wp_list_categories('title_li=','current_category') . '</div>'; } add_shortcode("cats", "catting");

Voici quelques CSS pour supprimer les puces et la marge afin qu’il se comporte essentiellement comme votre code original mais avec li encapsulant vos ancres.

Le CSS divisera la liste que nous avons créée en une ligne horizontale. N'oubliez pas de modifier votre CSS pour personnaliser davantage le résultat, c'est-à-dire en ajoutant des styles pour les boutons.

#cats.catting ul { display: inline; } #cats.catting ul li.cat-item { list-style: none; margin: 0px 10px; }

J'espère que cela répond à votre question.

0
Jarmerson

Vous n'avez pas besoin d'écrire un plugin pour cela - ce dont vous avez besoin existe déjà. Vérifiez ce lien: https://wordpress.org/plugins/list-categories/ Ce plugin vous permet d’afficher des catégories dans n’importe quel article ou page. Bien sûr, vous voudrez peut-être écrire votre propre plugin, et dans ce cas, ce lien peut être utile. J'espère que cela vous aidera à accélérer le processus.

0
Alex Black