wploaago

こんにちは、WebマーケッターのYoshimiです。Web解析や分析が好きです!

WordPressのメニュー作成(通称:カスタムメニュー)は非常に重宝します。以前はプラグインで順番をかえていたのに、それがデフォルトでできるようになり便利になりました。

しかし、htmlソースを見るとデフォルトで沢山のCSSがついています。ご自身でCSSを設定する場合は利用しても良いかと思いますが、「使わないよ〜」という方のために無駄なCSSの削除方法・スリム化をご紹介します。

[ad#txtimg468]

もとのソースと修正後のソース

デフォルトの状態のHTMLソース

<ul class="blog-menu">
<li id="menu-item-110" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-110"><a href="/webservice">webサービス</a></li>
<li id="menu-item-109" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-109"><a href="/seo">SEO対策</a></li>
<li id="menu-item-108" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-108"><a href="/sem">SEM・リスティング</a></li>
<li id="menu-item-114" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-114"><a href="/analysis">解析・分析</a></li>
<li id="menu-item-111" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-111"><a href="/webdesign">Webデザイン</a></li>
<li id="menu-item-112" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-112"><a href="/wordpress">WordPress</a></li>
<li id="menu-item-107" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-107"><a href="/ruby">Ruby</a></li>
<li id="menu-item-113" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-113"><a href="/thisorthat">あれこれ</a></li>
<div class="clear"></div>
</ul>

liについているid=menu-item-idは不要、classについている各種CSS不要として削除する場合は、functions.phpに以下のコードを記述します。

add_filter('nav_menu_css_class', 'my_css_attributes_filter', 100, 1);
add_filter('nav_menu_item_id', 'my_css_attributes_filter', 100, 1);
add_filter('page_css_class', 'my_css_attributes_filter', 100, 1);
function my_css_attributes_filter($var) {
return is_array($var) ? array_intersect($var, array('current-menu-item')) : '';
}

保存して、改めてhtmlソースを確認してみてください。

<ul class="blog-menu">
<li><a href="/webservice">webサービス</a></li>
<li><a href="/seo">SEO対策</a></li>
<li><a href="/sem">SEM・リスティング</a></li>
<li><a href="/analysis">解析・分析</a></li>
<li><a href="/webdesign">Webデザイン</a></li>
<li><a href="/wordpress">WordPress</a></li>
<li><a href="/ruby">Ruby</a></li>
<li><a href="/thisorthat">あれこれ</a></li>
<div class="clear"></div>
</ul>

という風にさっぱりしていませんか?

その他・まとめ

非常にスッキリしたましたよね。というか、すっきりしすぎでしょうか?
デフォルトで記述されているCSSをカスタマイズして、オリジナルデザインを作成する方には不憫に感じると思います。もちろん、今回ご紹介した方法ではありませんが、wp_nav_menuのテンプレートタグを修正ひてオリジナルクラスを作成することもできます。

コメントを残す

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