WordPressカテゴリードロップダウン!階層を空文字から変更

  • このエントリーをはてなブックマークに追加
  • Pocket

こんにちは。タクマ™ [@suwaru_blog] です。

今回は WordPress で階層化されたカテゴリーのドロップダウンメニュー作成方法、
その階層の表記を変更する方法について解説します!

WordPress カテゴリーをドロップダウン表示にする

サイドバーの「外観」>「ウィジェット」からサイドバーの編集をしてください。
カテゴリーの項目に「ドロップダウン表示」のチェックボックスがあります。

ドロップダウンメニューを見てみよう

デフォルトの階層表現 (空文字)

デフォルト(空文字)のドロップダウンメニュー
親カテゴリー選択状態
子カテゴリー選択状態

空文字があるぶんだけ、子カテゴリーの選択文字が右にズレて見えますね。
孫カテゴリー、ひ孫カテゴリーになるともっと右にズレて見えました。

階層表現をハイフン表記に変更

ハイフンのドロップダウンメニュー
親カテゴリー選択状態
子カテゴリー選択状態

空文字よりもハイフンにしてあげた方が違和感がない気がします。

カテゴリー階層をハイフン表記にする

wp-includes/class-walker-category-dropdown.php

public function start_el( &$output, $category, $depth = 0, $args = array(), $id = 0 ) {
        // デフォルトは空文字 3 つになっている
        // $pad = str_repeat( ' ', $depth * 3 );

        // 1 階層の表現 2 ハイフンとする
        $pad = str_repeat( '-', $depth * 2 );

ウィジェット以外でもドロップダウンメニューを使う

wp_dropdown_categories

ウィジェット以外にもカテゴリーのドロップダウンを置くことができます。

__( 'カテゴリーを選択' ), // 階層表示有効 'hierarchical' => 1, // 記事の件数を表示 'show_count' => 1, ); // カテゴリーのドロップダウン wp_dropdown_categories($args); ?>

が、ちょっと根深い問題が…

複数配置すると、後ろに配置される方が動かなくなりました。

なので実際は、画面内に合計 1 個のドロップダウンメニューしか置けませんでした。
※ if 文で制御したり色々やってみたのですが、ダメでした…

いいやり方あったら教えてください

当サイトはスマホレイアウトの場合、
実はハンバーガーメニュー内とウィジェット内とで 2 個のドロップダウンメニューあります。

が、ウィジェット側が動いていないので CSS で非表示にしています。
同じ Form が 2 個存在してるからなのでしょうが、いい方法があったら教えてください〜。

コメントを残す

*