it-swarm.com.de

Wie kann ich die wp_list_categories anpassen?

Ich habe eine Liste von Kategorien in Woo-Commerce, die ich so anpassen möchte, dass sie wie das folgende Bild aussieht.

List of categories

Ich habe das obige Bild mit normalem HTML und CSS erstellt, möchte es jedoch jetzt in WordPress konvertieren, um es dynamisch erstellen zu lassen.

Hier ist das 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>

Hier ist der aktuelle WordPress-Code, mit dem ich arbeite (ich bin nicht sicher, ob ich den Walker verwenden soll, um die zu generierende Ausgabe wie im obigen HTML-Code anzupassen):

  <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) Wie kann ich den Filter wp_list_categories verwenden, um einen "Alle" -Link am oberen Rand der Unterkategorien hinzuzufügen, der auf eine Seite verweist, auf der alle Elemente angezeigt werden.

2) Wie kann ich auch den Filter wp_list_categories verwenden, um den Link aus der übergeordneten übergeordneten Kategorie zu entfernen und ihn fett darzustellen (wie im Beispielbild)?

Jede Hilfe wäre dankbar

2
Oudin

Selbst wenn ein wp_list_categories-Filter vorhanden ist, übergibt er das von der wp_list_categories()-Funktion generierte HTML-Markup (und muss daher zurückgegeben werden). Dies bedeutet, dass Sie, wenn Sie diesen Filter verwenden möchten, das DOM mit PHP ändern müssen, und selbst wenn dies möglich ist (hoffentlich unter Verwendung externer PHP-Bibliotheken), ist dies nicht die beste Lösung für Ihre Bedürfnisse. Alternativ können Sie js verwenden, um HTML nach der Erstellung zu ändern. Es ist eine Möglichkeit, aber ich bin ein WP Entwickler, kein js, also gebe ich Ihnen die Worpress-Lösung.

Sie müssen eine benutzerdefinierte Category Walker - Klasse erstellen und diese dann in einer benutzerdefinierten Version von wp_list_categories () verwenden.

Lasst uns beginnen.

Zuerst die benutzerdefinierte Category Walker-Klasse (in functions.php einfügen):

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;
  }

}

Es erweitert die WP Walker_Category und überschreibt alle 4 Methoden mit etwas, das Ihren Anforderungen entspricht.

Danach geben Sie im functions.php die angepasste Funktion ein:

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;
}

Der schwierige Teil ist erledigt. Stellen Sie den Vorlagencode jetzt überall dort ein, wo Sie ihn benötigen:

<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>

Passen Sie die $ args an, wenn Sie möchten. Ich habe sie gemäß Ihrem Antwortcode festgelegt. Nur ich habe 'pattern_garment_type' so geändert, dass es eine Klasse und keine ID ist, da Sie dieselbe Tag-ID in HTML nicht mehrmals haben können (wie in Ihrem Markup).

Das ist alles, hoffe es hilft.

3
gmazzap

Oudin,

Ich werde hier den CSS-Teil Ihrer Frage beantworten:

Verwenden Sie dies, um die Aufzählungszeichen zu entfernen:

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

}

Verwenden Sie diese Option, um nur die Hauptkategorien fett darzustellen:

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

Auf diese Weise zielen Sie mit CSS auf diese Elemente ab, ohne eigene Klassen schreiben zu müssen.

Sie können dies auch zu Ihren Argumenten für wp_list_categories hinzufügen

'hide_empty' => 0

Um alle Kategorien anzuzeigen, auch diejenigen, die keinen Beitrag haben.

Es gibt zwei Ansätze für den zweiten Teil Ihrer Frage (Hinzufügen des ALL-Links und Entfernen des Links aus den Hauptkategorien).

  1. Sie können Javascript/jquery verwenden, um das zu entfernen/hinzuzufügen, was Sie möchten, sobald die Seite geladen wurde
  2. Sie können einen Filter wp_list_categories schreiben, um diese Änderungen vorzunehmen

Option 2 wäre der saubere Weg, dies zu tun. Option 1 wäre der schnellste Weg, dies zu tun.

Wegen Zeitmangels bin ich auch nicht dazu gekommen. Aber werfen Sie einen Blick in das Erstellen von Filtern in WordPress.

0
gdaniel