wordpressメニューのアイコン

wordpressのメニューで、メニューごとに簡単にアイコンを変えることができることを知った。恐らくどのテーマでもできるようになっているわけではないと思うが、今回採用しようと思っている「news」というテーマでは、いくつかのアイコンが用意されている。

たとえば、プロフィール紹介をメニューに表示する場合にヒト型のアイコンを表示させたり、RSSフィードのリンクURLにRSSのアイコンを表示させたりすることができる。

方法は、wordpressダッシュボード>外観>メニューのところで、ひとつひとつのメニューを設定する部分で、「CSS class(オプション)」に適切なクラス名を設定すること。ところが、このオプション設定は、デフォルトの「表示オプション」では隠れているので、これを表示させるようにしておかないといけない。

また、適切なクラス名が何か、ということだが、これは、適用されるCSS(たぶん、themeのルートディレクトリにあるstyle.css)の#menu-primaryや#menu-secondaryのあたりを探す必要がある。li.??? というクラスを見つければそれが使えるはず。

newsテーマの場合は、たとえばこんな感じ。

/* Special icons for menu items. */
/* Users can give a CSS Class to a menu item in the Menus screen in the admin. If no class was given,
 * default to the generic icon. */
#menu-secondary li.about {
	background: url(images/menu-secondary-icon-person.png) no-repeat 15px 14px;
	}
#menu-secondary li.contact {
	background: url(images/menu-secondary-icon-envelope.png) no-repeat 15px 14px;
	}
広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。