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 で非表示にしました。
PC レイアウトではウィジェット使いたいので、しゃーなしって感じです。

同じ Form が 2 個存在してるからなのでしょうが、いい方法があったら教えてください〜。

コメントを残す

*