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

Image [8]

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

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

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

Image

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

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

Image [1]

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

Image [2]

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

Image [3]

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

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

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

それならと

Image [4]

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

表示すると

Image [5]

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

Image [6]

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

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

★HTMLタグリファレンス SELECT

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

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

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

jQueryだと

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

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

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

そして中身を、

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

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

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

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

Image [7]

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

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

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

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

兎本美佳

ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

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

フォローする

スポンサーリンク
スポンサー広告
ブログをメールで購読

メールアドレスを記入して購読すれば、更新をメールで受信できます。

259人の購読者に加わりましょう

トップへ戻る