web-dev-qa-db-ja.com

WordPressウィジットのカスタマイズ - 製品カテゴリ

カテゴリウィジェットのカテゴリの横にカスタム箇条書き記号を追加して、新しいウィジェットを作成し、新しいHTMLとクラスに追加して、外観を変更できるようにします。残念ながら、私のウィジェットは、ストアページの至るところで（カテゴリリスト/サイドバーの中で）必要な場所で、私の最後のカテゴリの1つへのリンクを追加しています。あちこちの空のaタグは他の要素のスタイルを整頓し、余分なスペースを追加して物事を開始させています。

これが私のフルウィジェットコードです： 

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

私は私のfunctions.phpファイルからそれを削除することができますし、すべてが再び正しく見えるので、私はそれが問題を引き起こしているウィジェットであることを知っています。私は2017年7月5日の時点で最新バージョンのwpとwoocommerceを実行しています。また、私は現在のテーマではないことを確認するためにTwenty Seventeenテーマでも試しました。

助けてくれてありがとう！

categorieswidgetswoocommerce
1
Xenocide122

ウィジェットによってレンダリングされた出力を見てみると、マークアップに用語linksの終了<a>タグがなく、ウィジェットインスタンスに終了</li>がありません。

ページソースを表示して出力をフォーマットすると、これらの問題を簡単に識別できます。

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

これはHTMLを出力するコードの更新版です。書式設定が改善され、不足している終了アンカータグが修正されました。適切にフォーマットされたものを保持することはエラーを識別するのに役立ちます。

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

ウィジェットインスタンスの閉じている</li>タグがないのは、get_terms()に渡された引数で$args配列が上書きされたためです。これによりecho $args['after_widget'];は警告を投げます。開発時には必ずエラー報告を有効にしてください。

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

$number、$hide_empty、および$idsもすべて未定義であるため、これらの変数は正しく初期化する必要があります。

0
Dave Romsey