【WordPress】 メニュー機能を使ってカテゴリーをアイコンにする方法

プラグインを使わず、なおかつ簡単にカテゴリーを画像(アイコン)にする方法です。

さらにオーバーマウスで画像が切り替わるようにします。

ダメ元で試したら出来てしまったので記録しておきます。

スポンサーリンク

1.カテゴリーをメニューで作成

ウィジェットに「カテゴリー」が用意されていますがこれは使いません。

category_img_01b

メニューでカテゴリー一覧を作ります

category_img_02b

ウィジェットで「カスタムメニュー」を加え、個々で先ほど作ったメニューを指定します。

category_img_03b

これでサイドバーは以下のように表示されました。

category_img_04

2.メニューにタグを追加

ここでメニューに戻り、「カテゴリー01」の詳細を見てみましょう。

category_img_05b

「ナビゲーションラベル」という欄があり、カテゴリー名が入っています。

ここを以下のコードに書き換えます。

<img src=”http://〇〇〇.com/wp-content/images/category_icon_01.png” onmouseover=”this.src=’http://〇〇〇.com/wp-content/images/category_icon_02.png'” onmouseout=”this.src=’http://〇〇〇.com/wp-content/images/category_icon_01.png'” />

おなじみのマウスを乗せると画像が切り替わるタグです。
もちろん画像をアップロードし、そのURLを指定しています。

ナビゲーションラベルの欄が小さく見難いため、テキストエディタで編集してから貼り付けるとよいでしょう。

category_img_06b

そして保存します。

するとサイドバーの表示はこのようになります。

category_img_07

アイコンで表示されました。

マウスを乗せると、

category_img_08b

画像が切り替わります。

これで完成です。

まとめ

メニューのナビゲーションラベルには直接タグが書けるよという話でした。

私が知らなかっただけかもしれませんが覚えておくと何かと便利に使えそうです。


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

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA