カスタムメニューのliタグにclass名を追加するWordPressのカスタムメニューをregister_nav_menuで呼び出すことでテーマ機能を追加してからwp_nav_menuでカスタムメニューをサイトに表示すると、表示したカスタムメニューのliタグには最初からclass属性が付与されています。だいたい以下のようなclass名がカスタムメニューのliタグに付いています。menu-itemmenu-item-type-custommenu-item-object-customcurrent-menu-itemcurrent_page_itemmenu-item-homemenu-item-3943WordPressのカスタムメニューは上記のクラス名以外にも任意で自分の好きなclass名を追加して、WordPressのカスタムメニューのli要素にCSSを適用することができるので、やり方を知りたい場合は参考に使って下さい。まとめカスタムメニューの表示オプションにチェックを入れるWordPressのカスタムメニューのliタグに任意のクラス名を追加する場合は、まずWordPressの管理画面からメニューを開きます。開いたメニュー画面の右上にある「表示オプション」をクリックすると表示オプションが現れるので、表示オプションの中の「CSSクラス」という項目のチェックボックスにチェックを入れます。すると、それぞれのメニュー項目ごとにCSSを適用したりできるクラス名を追加できるようになります。class(オプション)」という入力ボックスが追加表示されています。class(オプション)の入力ボックスに任意のクラス名を入力して保存するだけで、カスタムメニューのliタグのclass属性として追加できます。Advertisementそれぞれ使用中のWordPressテーマのヘッダーやフッターにカスタムメニューでメニュー項目を追加してメニュー構造を作られている方もいるかと思いますが、カスタムメニューのクラス名の追加は各メニューリストのliタグごとにclass名を付与できます。グローバルメニューとしてヘッダー用に作成したカスタムメニューとフッター用として作成した2つのカスタムメニューがあったとしても、それぞれのカスタムメニューのliタグ用にCSSが適用できる任意のclass名にできます。liタグにclass名を追加できたかソース確認カスタムメニューを使用しているWordPressのサイトのページを表示して「ページのソース」や「検証ツール」でliタグのclass属性に任意のクラス名が追加できているか確認しておくようにします。class=”header-nav”>というHTML5から追加されたnavタグでマークアップされているので、ハイライトすると任意のクラス名を追加したli要素の特定がやりやすくなります。</ul></nav>カスタムメニューに追加したクラス名の確認は、例えばの例ですがワードプレスのカスタムメニューの項目にホームに移動できるリスト項目を作成して、ホームメニューのclass名を任意で「h」にした場合。ソースコードを確認すると上のHTMLのようにliタグには”h”が追加できているのが確認できます。このときに任意のクラス名以外のクラス名がありますが、必要ない場合には任意で追加したクラス名だけを残して、それ以外のクラス名を消すこともできます。‘’)のカッコ()の中に、カスタムメニューのメニュー項目に任意で追加したクラス名だけを記述します。記述したPHPコードをWordPressのfunctions.phpに記述します。‘h’)のカッコの中に記述したクラス名だけ付与することができ、ソースコードを確認するとカスタムメニューのliタグには任意のクラス名だけ付与できているのが確認できます。AdvertisementカスタムメニューにCSSを適用してみるWordPressのカスタムメニューのliにクラス名を追加できているかをHTMLのソースコードで確認してマークアップしてあれば問題ないかと思いますが、CSSをカスタムメニューのliに追加したクラス名で当てられるか背景色と余白、そしてCSSのbeforeとafterの擬似要素を適用させて確認しておきます。pink;}画像ではホームのli要素に背景色をCSSで変えてます。カスタムメニューのliタグに追加した任意のクラス名をセレクタにしてpaddingとbackgroundを適用してみただけですが、問題なくCSSが適用できるのでカスタムメニューのliタグにクラス名の追加が成功しています。li要素の右余白が広いのは確認するだけだから。gray;padding:5px;}CSSのbeforeとafterでカスタムメニューのli要素の前後に擬似要素を適用できるか確認しても大丈夫そうなので、WordPressのカスタムメニューのメニュー項目ごとにクラス名を追加すれば、アイコンフォントを表示することができるようになります。このとき追加したliタグのclass名の子要素a要素で組み合わせたセレクタにしてCSSをカスタムメニューのa要素に適用することもできます。まとめWordPressのカスタムメニューは新しいメニューを作成して保存しておけば何種類かのカスタムメニューを作成しておくことができます。作成のとき同時にliタグにクラス名を追加しておき、それぞれのメニュー用のCSSを作っておけば、あとはWordPressのメニュー設定で好きなメニューに切り替えるだけで運営するWordPressサイトのメニューデザインを好きに変更できますね。投稿一覧WordPressとWeb関係のことを趣味的に学んでます。独学なので記事で間違ってることがあればご指摘ください。記事が少しでも誰かの参考になればと思います。2019.08.27WordPressでホームページを設定する場合は、一度作成してしまうだけのホームページとは違い、「動的なホームページ」が有効になります。2019.02.20Webサーバーやコンピューター全般で使われる「ディレクトリ」についてです。WordPress.。