web-dev-qa-db-fra.com

Ajouter une classe au widget de catégories

J'ai quelques widgets par défaut que j'utilise dans une barre latérale personnalisée et j'aimerais modifier sa sortie dans mon fichier functions.php.

Actuellement, le widget de catégories et les blogrolls génèrent une liste non ordonnée de liens en tant que tels:

<ul>
<li class="cat-item cat-item-1">
<a href="http://localhost:8888/?cat=1">Uncategorized</a>
</li>
</ul>

Je voudrais en quelque sorte passer un nom de classe dans la liste non ordonnée elle-même à quelque chose du genre:

<ul class="test">...</ul>

Je viens d'apprendre à utiliser des filtres dans le fichier functions.php et je me suis dit que c'était comme ça que je devais m'y prendre mais je ne savais pas vraiment comment faire. Est-ce possible? Comment pourrais-je savoir comment faire quelque chose comme ça?

- Bruno

functionswp-list-categories
2
ajames

Voici un petit extrait jQuery que j'ai fait qui devrait faire ce que vous voulez (ce qui ne fonctionne que pour le widget de catégorie):

// JavaScript Document
$j = jQuery.noConflict();
$j(document).ready(function(){
    $j('li.cat-item-1').parent().addClass('test');
});

Si vous voulez le faire pour tous les widgets, cela dépend de l'élément parent des widgets. Supposons qu'il existe un <div class="widget"></div> enveloppant chaque widget. Vous pouvez le faire pour ajouter la classe aux enfants immédiats <ul> de tous les widgets:

// JavaScript Document
$j = jQuery.noConflict();
$j(document).ready(function(){
    $j('.widget > ul').addClass('test');
});

Cependant, avec PHP, c'est une autre histoire.

1
Jared

Le widget de catégories par défaut n'a pas de filtre permettant d'ajouter des classes à <ul>. Vous pouvez donc utiliser js pour obtenir ce résultat. Mettez le code suivant dans votre functions.php

add_action('wp_footer', 'wpse39693_add_custom_js', 99);
function wpse39693_add_custom_js() {
?>
jQuery(document).ready(function($) {
    jQuery('.widget_categories > ul').addClass('test');
});
<?php
}

Comme vous avez dit que vous ne voulez pas utiliser js à cette fin, je suppose que vous voulez ajouter la classe pour pouvoir ajouter des styles à l'élément ul de votre css. Dans ce cas, vous pouvez cibler l'élément ul de votre css. comme suit:

.widget_categories > ul {
    list-style: none;
}

L'autre option pour vous est que vous pouvez créer un widget de catégories personnalisées, vous pouvez étendre à partir du widget de catégories par défaut et modifier la sortie.

0
Hameedullah Khan

Impossible de trouver une solution php, la solution js scintillant au chargement, ajoutez simplement le fichier css vous-même pour que le widget récupère-le à partir du fichier bootstrap et l’ajoute à votre fichier css.

/* widgets */
.widget ul {
  padding-left: 0;
  margin-bottom: 20px;
}
.widget ul li {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: #fff;
  border: 1px solid #ddd;
}
.widget ul li:first-child {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.widget ul li:last-child {
  margin-bottom: 0;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}
0
user1503606