WordPressカスタムメニューからIDやクラスを削除する方法

メニューを囲っているDIV要素とUL要素のIDを削除する方法

メニューを囲っているDIV要素とUL要素のIDを削除する場合、テーマに記述しているカスタムメニューを出力するコードをカスタマイズしてやります。

<?php wp_nav_menu(); ?>をカスタマイズする

メニューを囲っているDIV要素とUL要素のIDを削除する場合、カスタムメニューを表示させる箇所に記載している以下のコードをカスタマイズしてやります。

上記のコードを以下のようにカスタマイズしてやりましょう。

参考：memocarilog

【********】部分には、表示させたいメニューのロケーション名に置き換えてください。

上記の様にコードをカスタマイズしてやると、メニューを囲っているDIV要素とUL要素のIDを削除することができます。

上記のように【container】を【false】にすることで、カスタムメニューを囲っているDIV要素を削除することができます。

【items_wrap】を【<ul>%3$s</ul>】にすることで、UL要素のIDを削除することができます。

メニューを囲っているDIV要素とUL要素のIDを削除されたのを確認してみる

メニューを囲っているDIV要素とUL要素のIDを削除されたのを確認してみましょう。
<?php wp_nav_menu(); ?>をカスタマイズしたことで、以下の様な変化が生じます。

上記のように出力されていたメニューが以下のようになります。

メニューを囲っていたDIV要素と、UL要素に付与されていたIDとクラスが削除されました。

メニューを囲っているDIV要素とUL要素のIDを削除する方法は以上です。

LI要素のIDとCLASSを削除する方法

次にメニューのLI要素に付与されているIDとクラスを削除する方法をご紹介します。
こちらは、functions.phpにコードを追記していきます。

• LI要素に付与されているIDを削除する方法
• LI要素に付与されているCLASSを削除する方法

個別にみていきましょう。

LI要素に付与されているIDを削除する方法

LI要素に付与されているIDを削除したい場合、以下のコードをfunctions.phpに追記します。

上記のコードをfunctions.phpに追記する事で、以下のように付与されているIDを削除できます。

上記のように出力されていたメニューが以下のようになります。

LI要素に付与されていたIDが削除されました。

LI要素に付与されているCLASSを削除する方法

LI要素に付与されているクラスを削除したい場合、以下のコードをfunctions.phpに追記します。

参考：IMUZA.com

上記のコードをfunctions.phpに追記すれば、以下のように付与されているCLASSを削除できます。

上記のように出力されていたメニューが以下のようになります。

LI要素に付与されていたクラスが削除されました。

補足：LI要素に付与されているCLASSを削除する方法

LI要素に付与されているCLASSを削除する方法でご紹介したコードですが、単純にLI要素に付与されているクラスを消すだけではありません。実用性を兼ねて、以下の処理も加わっています。

• 管理画面から設定したクラスは適応される。
• 表示されているページがメニューにある場合、クラス【current】を付与する。

独自のクラスを適応したい場合はあるかと思いますので、管理画面から設定したクラスは適応されるようになっています。

カレント表示の際、メニューのデザインを変更することもあると思いますので、クラス【current】が自動的に付与されるようになっております。

まとめ

WordPressカスタムメニューからIDやクラスを削除する方法をご紹介しました。

• メニューを囲っているDIV要素とUL要素のIDを削除する方法
• LI要素に付与されているIDを削除する方法
• LI要素に付与されているCLASSを削除する方法

いずれも簡単なコピペだけで行える簡単なカスタマイズです。
カスタムメニューのIDやクラスを削除したい方は挑戦してみてください。