web-dev-qa-db-fra.com

Personnaliser le widget WordPress - Catégorie de produit

Je souhaite ajouter des puces personnalisées à côté de mes catégories dans mon widget de catégorie. J'ai donc créé un nouveau widget et ajouté à mon nouveau code html et mes nouvelles classes afin que je puisse modifier son apparence. Malheureusement, pour une raison quelconque, mon widget ajoute un lien vers l'une de mes dernières catégories sur toutes les pages du magasin, ainsi que là où il doit se trouver (dans la liste des catégories/barre latérale). Bien que tout semble fonctionner, les balises vides un peu partout bousillent le style d’autres éléments, ajoutent de l’espace supplémentaire et rendent les choses sereines.

Voici mon code de widget complet: 

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' );

Je sais que c'est le widget à l'origine du problème, car je peux le supprimer de mon fichier functions.php et tout se présente bien à nouveau. J'utilise la dernière version de wp et woocommerce à partir du 07/07/2017 et j'ai également essayé dans le thème Twenty Seventeen de m'assurer que ce n'était pas mon thème actuel.

Merci pour l'aide!

categorieswidgetswoocommerce
1
Xenocide122

En regardant la sortie rendue par le widget, il est indiqué que la balise <a> de clôture est manquante dans le balisage et que l'instance de widget ne possède pas le </li> de clôture.

L'affichage du code source de la page et le formatage de la sortie facilitent l'identification de ces problèmes:

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

Voici une version mise à jour du code qui génère le code HTML. La mise en forme a été améliorée et la balise d'ancrage de fermeture manquante a été corrigée. Garder les choses bien formatées aide à identifier les erreurs.

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

La balise de fermeture </li> manquante pour l'instance de widget provient du remplacement du tableau $args par les arguments passés à get_terms(). Cela provoque echo $args['after_widget']; à lancer un avertissement. Activez toujours le signalement des erreurs lors du développement.

Créez un tableau séparé pour les arguments passés à get_terms():

// 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 );

Notez que $number, $hide_empty et $ids sont tous non définis également. Par conséquent, ces variables doivent être correctement initialisées.

0
Dave Romsey