カテゴリー ドロップダウンをカスタマイズ テーマ以外のhtmlの修正

偶然ですが、１年前の今日「WordPressカテゴリーメニューを見やすくしたい」という記事でこのサイトのウィジェットのカテゴリーメニューを全部表示するようにしていました。1年経ってカテゴリーもだいぶ増えたのでこの部分の表示を修正してみました。

現在のカテゴリー表示はとても長くなってました

修正前のカテゴリー表示は、

こんな感じでなんと縦の長さが6824pxもありました(^_^;。赤枠で囲ってある部分がカテゴリー部分です。

ダッシュボード　外観＞ウィジェット　で　カテゴリーを見てみると、

投稿数を表示　と　階層を表示　にチェックが入っています。

階層を表示のチェックを外すと、短くなるのかなと思いましたが、

こんな感じで、ただ階層で無くなっただけの状態で見にくいだけでなく縦の長さも減った気がしません（ということを昨年の今日も試したのに、、忘れていました）。

テーマの方にこのあたりの記述があるなら子テーマで変更しようと思ったのですが、探しても見当たらずどうやらwp-includesあたりのあまり触っちゃいけない部分のようです。うむ…

ドロップダウン表示ならカテゴリーが短くなる

それならと

このようにドロップダウンのところにチェックを入れてみました。

表示すると

あんなに長かったカテゴリー表示が１行になりました。縦問題はこれでいいのかもしれませんが、

クリックしないとカテゴリーが見えないのはちょっと、、blog記事を色々見てもらいたいのでこれでは違う感じがします。

selectは1行で無く、ある程度の行数を表示させる方法があるのでそれで複数行カテゴリーを表示しておいたらいいんじゃない？と思いました。

★HTMLタグリファレンス　SELECT

こちらにあるように　size=”12″　とかをSELECTのhtmlに追加すればいけそうです。しかし、先ほど探したときテーマの方にこのあたりの記述が無かったので、htmlを修正するのは難しそうです。さらに、CSSでできればなんとかなるんじゃないかと調べたのですがCSSでこの開いた状態にする方法が見つかりません。さて。。

ドロップダウン表示をjQueryでカスタマイズしてみた

ちょっと考えて思いついたのですが、jQueryでできる！と。

jQueryだと

$(‘要素’).attr(‘属性名’, ‘属性の値’);

という記述である要素の属性の値を指定する事ができます。

まず子テーマにjsというフォルダを作ってそこにオリジナルのjsを入れるためのファイル　ryus_custom.js　を作りました。

そして中身を、

jQuery(function($){
    $('#cat').attr('size', '12');
});

このようにコーディングして保存します。#catというのがカテゴリーのSELECTについているIDです。

あとは子テーマのfunctions.phpに、

function my_scripts() {
    wp_enqueue_script( 'ryus_custom', get_bloginfo( 'stylesheet_directory') . '/js/ryus_custom.js', array(), false, true );
}
add_action( 'wp_enqueue_scripts', 'my_scripts');

このように記述しました。今まで、jsなどは子テーマのheader.phpなどに直書きしていましたが、この書き方がWordPressの作法に則った問題の少ない書き方のようです。ここで、先ほど作ったjsを指定しておけば自動的に読み込んでくれるようです。　 get_bloginfo( ‘stylesheet_directory’) 　で　子テーマのディレクトリ　が指定されます。

これで再度表示してみると、

このように12個分の内容が見えた状態にカスタマイズできました(^^)/

まとめ：カスタマイズした結果、縦の長さが…

カスタマイズした結果、縦の長さが6824pxから4285pxに縮まりました。カテゴリー部分だけで2500pxぐらい短くすることができたようです。

今回のようにテーマの中でhtmlが触れない場合はIDなどから要素を指定してjQueryで中身を書き換える方法がいかなと思います。