web-dev-qa-db-fra.com

Comment puis-je personnaliser les wp_list_categories

J'ai une liste de catégories dans woo-commerce que j'essaie de personnaliser pour qu'elles s'affichent pour ressembler à l'image suivante.

List of categories

J'ai créé l'image ci-dessus à l'aide de HTML et de CSS normaux, mais j'aimerais maintenant la convertir en WordPress afin de la créer de manière dynamique.

Voici le HTML:

<div class="col tertiary" id="filters">
        <ul class="product-categories">        

            <li id="pattern_garment_type">
                <h5>Women</h5>
                <ul>
                    <li class="selected">                
                          <a href="#">All</a>                        
                    </li>

                    <li class="">
                      <a href="#">Accessories</a>
                    </li>

                    <li class="">
                      <a href="#">Blouses</a>
                    </li>

                    .etc...

          </ul>
            </li>

            <li id="pattern_garment_type">
                <h5>Men</h5>
                <ul>
                <li class="selected">

                      <a href="#">All</a>

                </li>

                  <li class="">
                      <a href="#">Accessories</a>
                  </li>

                  <li class="">
                      <a href="#">Coats</a>
                  </li>
                  ..etc..

                </ul>
            </li>


            <li id="pattern_garment_type">
                <h5>Kids</h5>
                <ul>
                <li class="selected">

                      <a href="#">All</a>

                </li>

                  <li class="">
                      <a href="#">Babies</a>
                  </li>

                  <li class="">
                      <a href="#">Girls</a>
                  </li>

                  <li class="">
                      <a href="#">Boys</a>
                  </li>

                </ul>
            </li>

        </ul>
    </div>

Voici le code WordPress actuel avec lequel je travaille (je ne sais pas si je devrais utiliser le lecteur pour personnaliser la sortie à générer comme le code HTML ci-dessus):

  <div id="content-filters" class="two columns">
<?php $args = array(
    'style'              => 'list',
    'show_count'         => 0,
    'use_desc_for_title' => 1,
    'child_of'           => 0,
    'title_li'           => __( '' ),
    'show_option_none'   => __('No Menu Items'),
    'number'             => null,
    'echo'               => 1,
    'depth'              => 2,
    'taxonomy'           => 'product_cat',
); ?>

<div class="col tertiary" id="filters">
    <ul class="product-categories">   
        <?php wp_list_categories( $args ); ?>
    </ul>
</div>

1) Comment puis-je utiliser le filtre wp_list_categories pour ajouter un lien "Tous" en haut des sous-catégories menant vers une page qui affiche tous les éléments.

2) Comment puis-je également utiliser le filtre wp_list_categories pour supprimer le lien de la catégorie parent et le placer dans un champ en gras (comme dans l'exemple d'image)?

Toute aide serait appréciée

filterspluginswp-list-categories
2
Oudin

Même s'il existe un filtre wp_list_categories, il transmet (et vous devez donc renvoyer) le balisage HTML généré par la fonction wp_list_categories(). Cela signifie que si vous souhaitez utiliser ce filtre, vous devez modifier le DOM avec php, et même si cela est possible (en utilisant des bibliothèques php externes), il ne s'agit certainement pas de la meilleure solution pour vos besoins. Alternartive utilise js pour modifier html après sa création. C'est une possibilité, mais je suis un WP développeur et non un développeur js, je vais donc vous donner la solution Worpress.

Vous devez créer une classe Catégorie Walker class puis l’utiliser dans une version personnalisée de wp_list_categories ();

Commençons.

Tout d’abord la classe personnalisée Catégorie Walker (mettez-la dans functions.php):

class My_Category_Walker extends Walker_Category {

  var $lev = -1;
  var $skip = 0;
  static $current_parent;

  function start_lvl( &$output, $depth = 0, $args = array() ) {
    $this->lev = 0;
    $output .= "<ul>" . PHP_EOL;
  }

  function end_lvl( &$output, $depth = 0, $args = array() ) {
    $output .= "</ul>" . PHP_EOL;
    $this->lev = -1;
  }

  function start_el( &$output, $category, $depth = 0, $args = array(), $id = 0 ) {
    extract($args);
    $cat_name = esc_attr( $category->name );
    $class_current = $current_class ? $current_class . ' ' : 'current ';
    if ( ! empty($current_category) ) {
      $_current_category = get_term( $current_category, $category->taxonomy );
      if ( $category->term_id == $current_category ) $class = $class_current;
      elseif ( $category->term_id == $_current_category->parent ) $class = rtrim($class_current) . '-parent ';
    } else {
      $class = '';
    }
    if ( ! $category->parent ) {
      if ( ! get_term_children( $category->term_id, $category->taxonomy ) ) {
          $this->skip = 1;
      } else {
        if ($class == $class_current) self::$current_parent = $category->term_id;
        $output .= "<li class='" . $class . $level_class . "'>" . PHP_EOL;
        $output .= sprintf($parent_title_format, $cat_name) . PHP_EOL;
      }
    } else { 
      if ( $this->lev == 0 && $category->parent) {
        $link = get_term_link(intval($category->parent) , $category->taxonomy);
        $stored_parent = intval(self::$current_parent);
        $now_parent = intval($category->parent);
        $all_class = ($stored_parent > 0 && ( $stored_parent === $now_parent) ) ? $class_current . ' all' : 'all';
        $output .= "<li class='" . $all_class . "'><a href='" . $link . "'>" . __('All') . "</a></li>\n";
        self::$current_parent = null;
      }
      $link = '<a href="' . esc_url( get_term_link($category) ) . '" >' . $cat_name . '</a>';
      $output .= "<li";
      $class .= $category->taxonomy . '-item ' . $category->taxonomy . '-item-' . $category->term_id;
      $output .=  ' class="' . $class . '"';
      $output .= ">" . $link;
    }
  }

  function end_el( &$output, $page, $depth = 0, $args = array() ) {
    $this->lev++;
    if ( $this->skip == 1 ) {
      $this->skip = 0;
      return;
    }
    $output .= "</li>" . PHP_EOL;
  }

}

Il étend la WP Walker_Category et remplace les 4 méthodes par quelque chose qui correspond à vos besoins.

Après cela, dans le functions.php, mettez la fonction personnalisée:

function custom_list_categories( $args = '' ) {
  $defaults = array(
    'taxonomy' => 'category',
    'show_option_none' => '',
    'echo' => 1,
    'depth' => 2,
    'wrap_class' => '',
    'level_class' => '',
    'parent_title_format' => '%s',
    'current_class' => 'current'
  );
  $r = wp_parse_args( $args, $defaults );
  if ( ! isset( $r['wrap_class'] ) ) $r['wrap_class'] = ( 'category' == $r['taxonomy'] ) ? 'categories' : $r['taxonomy'];
  extract( $r );
  if ( ! taxonomy_exists($taxonomy) ) return false;
  $categories = get_categories( $r );
  $output = "<ul class='" . esc_attr( $wrap_class ) . "'>" . PHP_EOL;
  if ( empty( $categories ) ) {
    if ( ! empty( $show_option_none ) ) $output .= "<li>" . $show_option_none . "</li>" . PHP_EOL;
  } else {
    if ( is_category() || is_tax() || is_tag() ) {
      $current_term_object = get_queried_object();
      if ( $r['taxonomy'] == $current_term_object->taxonomy ) $r['current_category'] = get_queried_object_id();
    }
    $depth = $r['depth'];
    $walker = new My_Category_Walker;
    $output .= $walker->walk($categories, $depth, $r);
  }
  $output .= "</ul>" . PHP_EOL;
  if ( $echo ) echo $output; else return $output;
}

La partie difficile est terminée. Maintenant le code de modèle, mettez-le partout où vous avez besoin:

<div id="content-filters" class="two columns">
<div class="col tertiary" id="filters">
<?php
$args = array(
  'taxonomy' => 'product_cat',
  'show_option_none' => __('No Menu Items.'),
  'echo' => 1,
  'depth' => 2,
  'wrap_class' => 'product-categories',
  'level_class' => 'pattern_garment_type',
  'parent_title_format' => '<h5>%s</h5>',
  'current_class' => 'selected'
);
custom_list_categories( $args );
?>
</div>
</div>

Personnalisez les $ args si vous voulez, je les ai configurés en fonction de votre code de réponse. Seulement j'ai changé 'pattern_garment_type' en classe et non en id, car vous ne pouvez pas avoir le même identifiant de balise plusieurs fois en HTML (comme dans votre balisage).

C'est tout, espérons que cela aide.

3
gmazzap

Oudin,

Je vais répondre ici à la partie CSS de votre question:

Utilisez ceci pour supprimer les puces de la liste:

.ul.product-categories, ul.children{
    list-style-type: none;

}

Utilisez cette option pour mettre en gras uniquement les catégories principales:

li {font-weight:normal} // you need to set the default state first of the list

ul.product-categories > li{font-weight:bold;} //then you can change the top level list without affecting its children

C'est comme ça que vous ciblez ces éléments avec css sans avoir à écrire vos propres classes.

Vous pouvez également ajouter ceci à vos arguments wp_list_categories.

'hide_empty' => 0

Pour afficher toutes les catégories, même ceux qui n'ont pas de message.

Vous pouvez adopter deux approches pour la deuxième partie de votre question (ajouter le lien TOUT et supprimer le lien des catégories principales).

  1. Vous pouvez utiliser Javascript/jQuery pour supprimer/ajouter ce que vous voulez une fois la page chargée.
  2. Vous pouvez écrire un filtre wp_list_categories, pour apporter ces modifications

L'option 2 serait la façon propre de le faire. L'option 1 serait le moyen le plus rapide de le faire.

Je n'y suis pas parvenu non plus, faute de temps. Mais jetez un coup d'œil à la création de filtres dans WordPress.

0
gdaniel