it-swarm.com.de

Anpassen des WordPress-Widgets - Produktkategorie

Ich möchte in meinem Kategorie-Widget einige benutzerdefinierte Aufzählungszeichen neben meinen Kategorien hinzufügen, damit ich ein neues Widget erstellt und in meinem neuen HTML-Code und meinen neuen Klassen hinzugefügt habe, damit ich das Erscheinungsbild ändern kann. Leider fügt mein Widget aus irgendeinem Grund einen Link zu einer meiner letzten Kategorien auf allen Seiten des Shops sowie an der Stelle hinzu, an der er sein muss (in der Kategorieliste/Seitenleiste). Während alles zu funktionieren scheint, bringen die leeren A-Tags das Styling anderer Elemente durcheinander, fügen zusätzlichen Platz hinzu und sorgen dafür, dass die Dinge sich absetzen.

Hier ist mein vollständiger Widget-Code:

class mdk_wpcat_widget extends WP_Widget {
// Set up the widget name and description.
public function __construct() {
    $widget_options = array( 
        'classname' => 'mdk_wpcat_widget', 
        'description' => 'Custom MDK Woocommerce Category Widget' 
        );
    parent::__construct( 'mdk_wpcat_widget', 'Woo Cat Widget', $widget_options );
}

// Create the widget output.
public function widget( $args, $instance ) {
    $title = apply_filters( 'widget_title', $instance[ 'title' ] );

    // before and after widget arguments are defined by themes
    //$blog_title = get_bloginfo( 'name' );
    //$tagline = get_bloginfo( 'description' );
    echo $args['before_widget'] . $args['before_title'] . $title . $args['after_title']; 

    // Custom Woo Category Output
    $args = array(
        'number'     => $number,
        'orderby'    => 'menu_order',
        'order'      => 'ASC',
        'hide_empty' => $hide_empty,
        'include'    => $ids
    );
    //Hides "film" category by ID
    $args['exclude'] = '72';

    $product_categories = get_terms( 'product_cat', $args );

    $count = count($product_categories);
     if ( $count > 0 ){
         echo '<ul class="shop-categories">';
         foreach ( $product_categories as $product_category ) {
            echo '<li class="shop-category ' . (( $product_category->name == single_cat_title('', false) )?"active-cat":"") . '"><a href="' . get_term_link( $product_category ) . '"><span class="bulletpoint"></span><span class="category-title">' . $product_category->name . '</span></li>';

         }
         echo '</ul>';
     }

    echo $args['after_widget'];
}

// Create the admin area widget settings form.
public function form( $instance ) {
    $title = ! empty( $instance['title'] ) ? $instance['title'] : ''; ?>    
    <p>
      <label for="<?php echo $this->get_field_id( 'title' ); ?>">Title:</label>
      <input type="text" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" value="<?php echo esc_attr( $title ); ?>" />
    </p><?php
}

// Apply settings to the widget instance.
public function update( $new_instance, $old_instance ) {
    $instance = $old_instance;
    $instance[ 'title' ] = strip_tags( $new_instance[ 'title' ] );
    return $instance;
  }
}

// Register the widget.
function mdk_wpcat_load_widget() { 
register_widget( 'mdk_wpcat_widget' );
}
add_action( 'widgets_init', 'mdk_wpcat_load_widget' );

Ich weiß, dass es das Widget ist, das das Problem verursacht, weil ich es aus meiner functions.php-Datei entfernen kann und alles wieder richtig aussieht. Ich verwende die neueste Version von wp und woocommerce seit dem 05.07.2017 und habe auch versucht, im Twenty Seventeen-Theme sicherzustellen, dass es nicht mein aktuelles Theme ist.

Danke für die Hilfe!

1
Xenocide122

Ein Blick auf die vom Widget gerenderte Ausgabe zeigt, dass dem Markup ein schließender <a> -Tag für die Termlinks fehlt und die Widget-Instanz nicht über den schließenden </li> verfügt.

Das Anzeigen der Seitenquelle und das Formatieren der Ausgabe erleichtern das Erkennen der folgenden Probleme:

<li id="mdk_wpcat_widget-2" class="widget-container mdk_wpcat_widget">
  <h3 class="widget-title">Wooooo!</h3>

  <ul class="shop-categories">
    <li class="shop-category ">
      <a href="http://example.com/product-category/test-category-1/">
        <span class="bulletpoint"></span>
        <span class="category-title">Test Category 1</span>

    </li>

    <li class="shop-category ">
      <a href="http://example.com/product-category/test-category-1/test-subcategory-1/">
        <span class="bulletpoint"></span>
        <span class="category-title">Test Subcategory 1</span>

    </li>
  </ul>

Hier ist eine aktualisierte Version des Codes, der den HTML-Code ausgibt. Die Formatierung wurde verbessert und das fehlende schließende Ankertag wurde behoben. Wenn Sie die Dinge schön formatiert halten, können Sie Fehler erkennen.

$count = count( $product_categories );
if ( $count > 0 ) {
  echo '<ul class="shop-categories">';

  foreach ( $product_categories as $product_category ) {
    $active_cat = $product_category->name == single_cat_title( '', false ) ? ' active-cat' : '';
    echo '
      <li class="shop-category' . $active_cat . '">' .
        '<a href="' . esc_url( get_term_link( $product_category ) ) . '">' .
          '<span class="bulletpoint"></span>' .
          '<span class="category-title">' . esc_html( $product_category->name ) . '</span>' .
        '</a>' .
      '</li>';
  }

  echo '</ul>';
}

Das fehlende schließende </li> -Tag für die Widget-Instanz wird durch das Überschreiben des $args -Arrays mit den an get_terms() übergebenen Argumenten verursacht. Dies führt dazu, dass echo $args['after_widget']; eine Warnung ausgibt. Aktivieren Sie beim Entwickeln immer die Fehlerberichterstattung.

Erstellen Sie ein separates Array für die an get_terms() übergebenen Argumente:

// Custom Woo Category Output
$get_terms_args = array(
    'number'     => $number,
    'orderby'    => 'menu_order',
    'order'      => 'ASC',
    'hide_empty' => $hide_empty,
    'include'    => $ids,
    'exclude'    => '72', //Hides "film" category by ID
);

$product_categories = get_terms( 'product_cat', $get_terms_args );

Beachten Sie, dass $number, $hide_empty und $ids ebenfalls undefiniert sind. Daher sollten diese Variablen ordnungsgemäß initialisiert werden.

0
Dave Romsey