【WordPress】カスタムメニューのliタグに任意のclassを設定する方法

WordPressには、管理画面からメニューの項目や表示する場所を設定できるカスタムメニューの機能があります。

今回は、そのカスタムメニュー内のメニュー項目のliタグに、任意のclassを設定する方法となります。

メニュー項目のliタグに任意のclassを設定する方法

カスタムメニューでは、管理画面からメニュー項目のliタグに任意のclassを設定できます。以下、手順となります。

  1. まず、管理画面の「外観」>「メニュー」内の「メニューを編集」タブに移動します。
  2. 「メニューを編集」内の右カラムにあるメニュー項目の中から、classを設定したいメニュー項目の右端をクリックします。
    「メニューを編集」内の右カラムの画像
    「メニューを編集」内の右カラム。classを設定したいメニュー項目の右端をクリックします。
  3. 「CSS class」を含むメニュー項目の設定が表示されるので、「CSS class」の欄にclassの値を入力します。
    メニュー項目の右端をクリックし設定が表示された状態の画像
    メニュー項目の右端をクリックし設定が表示された状態。「CSS class」の欄にclassの値を入力します。

以上が設定方法となり、カスタムメニューの指定したメニュー項目のliタグに、「CSS class」の欄に入力した値を持つclass属性が付与されます。

メニュー項目の設定内に「CSS class」がない場合

メニュー項目の設定内に「CSS class」の項目がない場合には、以下の方法で表示させます。

  1. 「メニューを編集」画面内の右上部にある「表示オプション」をクリックします。
    「メニューを編集」画面内の右上部にある「表示オプション」の画像
    「メニューを編集」画面内の右上部にある「表示オプション」をクリック。
  2. 表示オプションの項目が表示されるので、その中にある「CSSクラス」をチェックします。
「表示オプション」をクリックした状態の画像
「表示オプション」をクリックした状態。メニュー項目の設定内に「CSS class」の項目を表示するには「CSSクラス」をチェックします。

上記方法により、メニュー項目の設定内に「CSS class」の項目が表示されます。

コメントまたはTwitterで返信

コメントは、以下の項目(*は必須項目)を入力し「コメントを送信」ボタンから送信お願いします。メールアドレスは公開されることはありません。Twitterで返信する場合はコチラから。