ユニークにスタイル設定された最初と最後のメニュー項目を持つウェブサイトを見たことがありますか？それは偶然ではありません – それは巧妙なCSSの働きです。このテクニックは、お問い合わせページや特別オファーのような重要なリンクを強調することができます。
多くの読者は、カスタムクラスをメニュー項目に追加しようとしましたが、メニューを並べ替えるとスタイルが壊れることがわかりました。「最初」と「最後」にタグ付けされた項目はそれらの位置になくなり、メニューが不整合に見えます。
そのため、このガイドでは、後でメニュー項目を並べ替えても、メニュー項目に固定される .first および .last クラスを追加する方法を説明します。クラシックテーマ用のフィルターと、ブロックテーマを含むすべてのテーマ用の CSS セレクターの 2 つの方法を説明します。
最初と最後のナビゲーション項目を異なるスタイルにする理由
ナビゲーションメニューの最初と最後の項目にカスタムスタイルを追加する必要がある場合があります。これにより、サイトのお問い合わせフォームやWooCommerce のカートページへのリンクなど、重要なリンクが目立つようになります。
この場合、最初と最後のメニュー項目にカスタムCSSクラスを追加するだけで済みます。しかし、メニューの順序を変更すると、カスタムスタイルが完全に壊れる可能性があります。
このため、代わりにフィルターを使用することをお勧めします。
このガイドでは、ナビゲーションメニューの最初と最後の項目をスタイル設定する方法を説明します。これにより、カスタムスタイル設定を壊すことなくメニューを再配置できます。使用したい方法に直接ジャンプするには、以下のクイックリンクを使用してください。
プロのヒント: ウェブサイトのメニュー項目を強調表示したいですか？詳細については、WordPress でメニュー項目を強調表示する方法に関するガイドをご覧ください。
方法1：フィルターを使用して最初と最後のクラスを追加する（推奨）
注意: この方法は、クラシックなWordPressテーマでのみ機能します。ブロックテーマを使用している場合は、方法2に進んでください。
ナビゲーションメニュー項目をスタイル設定する最も簡単な方法は、テーマにフィルターを追加することです。
WordPressのチュートリアルで、コードスニペットをテーマの functions.php ファイルに追加するように指示されていることがよくあります。
最大の問題は、カスタムコードスニペットのわずかな間違いでもWordPressサイトが破損し、アクセスできなくなる可能性があることです。言うまでもなく、WordPressテーマを更新すると、すべてのカスタマイズが失われます。
そこで役立つのが WPCode です。
この無料プラグインを使用すると、サイトを危険にさらすことなく、WordPressにカスタムCSS、PHP、HTMLなどを簡単に追加できます。
まず、無料のWPCodeプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。
有効化したら、Code Snippets » Add Snippet に移動します。
ここで、「カスタムコードの追加」にマウスカーソルを合わせます。
表示されたら、「スニペットを使用」をクリックします。
開始するには、カスタムコードスニペットのタイトルを入力します。これは、WordPressダッシュボードでスニペットを識別するのに役立つものであれば何でも構いません。
その後、「コードタイプ」ドロップダウンを開き、「PHPスニペット」を選択します。
次に、コードボックスに以下のPHPを追加できます。
function wpb_first_and_last_menu_class($items) {
$items[1]->classes[] = 'first';
$items[count($items)]->classes[] = 'last';
return $items;
}
add_filter('wp_nav_menu_objects', 'wpb_first_and_last_menu_class');
その後、画面の上部までスクロールし、「Inactive」トグルをクリックして「Active」に変更する準備が整います。
最後に、「スニペットを保存」をクリックしてPHPスニペットを公開します。
これにより、最初と最後のメニュー項目に.firstおよび.last CSSクラスが作成されます。カスタムナビゲーションメニューのこれらの項目に独自のスタイルを適用するために、これらのクラスを使用できるようになりました。
これを行うには、WordPressウェブサイトに2番目のスニペットを追加する必要があります。まず、上記で説明したのと同じプロセスに従って、新しいカスタムコードスニペットを作成します。
その後、カスタムコードスニペットのタイトルを入力します。
次に、「コードの種類」ドロップダウンを開きますが、今回は「CSS スニペット」を選択します。
このガイドでは、次の CSS フォーマットをコードボックスに追加することで、最初と最後のメニュー項目を太字にするだけです。
.first a {font-weight: bold;}
.last a {font-weight: bold;}
これが完了したら、「非アクティブ」トグルをクリックして「アクティブ」に変更します。
最後に、「スニペットを保存」をクリックして、CSSスニペットをライブにします。
これで、ウェブサイトにアクセスすると、新しくスタイル設定されたメニューがライブで表示されます。
方法2：CSSセレクターを使用して最初と最後の項目をスタイル設定する（すべてのテーマで機能します）
コードスニペットプラグインを使用したくない場合は、CSSセレクターを使用して最初と最後のメニュー項目をスタイル設定できます。ただし、この方法はInternet Explorerのような一部の古いブラウザでは機能しない場合があります。
これを踏まえて、WordPressウェブサイトを異なるブラウザでテストするのは良い考えです。
この方法に従うには、テーマのスタイルシートまたはWordPressテーマカスタマイザーの「追加CSS」セクションにコードを追加する必要があります。
これが初めての場合は、WordPressサイトにカスタムCSSを簡単に追加する方法をご覧ください。
最初の手順は、テーマのstyle.cssファイルを編集するか、外観 » カスタマイズに移動して「追加CSS」をクリックすることです。
その後、次のコードスニペットをサイトに追加してください。
ul#yourmenuid > li:first-child { }
ul#yourmenuid > li:last-child { }
‘yourmenuid’をナビゲーションメニューのIDに置き換える必要があることに注意してください。
first-child と last-child セレクターは、親要素の最初の子要素と最後の子要素を選択します。これは、ナビゲーションメニューの最初と最後の項目になります。
例えば、このコードを使用して、WordPressブログの最初と最後のナビゲーションメニュー項目を太字にしました。
ul#primary-menu-list > li:first-child a {
font-weight: bold;
}
ul#primary-menu-list > li:last-child a {
font-weight: bold;
}
WordPress のブロックテーマを使用している場合、WordPress 管理画面で「テーマカスタマイザー」がなくなります。テーマカスタマイザーにアクセスするには、ブラウザで次の URL を入力する必要があります。
https://yourdomainname.com/wp-admin/customize.php
ドメインをウェブサイトのドメイン名に置き換えてください。
その後、以前のように「追加CSS」タブを開き、次のコードを挿入します。メニューIDを追加する必要がないため、コードの見た目が少し異なることに注意してください。
li:first-child a,
li:last-child a {
background-color: black;
border: none;
color: white !important; /* Ensures the color white is prioritized */
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 12px;
}
必要に応じてコードを自由にカスタマイズしてください。以下の例では、最初と最後のリンクをボタンにしました。
このようになります：
このチュートリアルで、WordPressナビゲーションメニューに.firstおよび.lastクラスを追加する方法を学べたことを願っています。また、WordPressで垂直ナビゲーションメニューを作成する方法に関する記事や、WordPressサイトでドロップダウンメニューを作成する初心者ガイドもご覧ください。
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。
Ahmed Mahdi
子メニューでも機能するようにコードを少し変更しました。
function wpb_first_and_last_menu_class($items) {
foreach($items as $k => $v) { $parent[$v->menu_item_parent][] = $v; }
foreach($parent as $k => $v) { $v[0]->classes[] = 'first'; $v[count($v)-1]->classes[] = 'last'; }
return $items;
}
add_filter(‘wp_nav_menu_objects’, ‘wpb_first_and_last_menu_class’);
トレバー・シモントン
まさに必要としていたものです。ありがとうございます！
Georgios Panagiotakopoulos
ありがとうございます！これは素晴らしいです！
Munkhbayar
コードありがとうございます。私の環境では動作しました。
mad_doc
アイデアと助けをありがとうございます！
Charles
この素晴らしいコードをありがとうございます…
子メニューを先に、そして最後の項目はどうですか？
親メニューにのみ適用されました。
子の最後の項目について何かアイデアはありますか？
jordi
Anyone have any tip about use add_filter(”); for wp_nav_menu using STARKERS?
JS and CSS are fine to do that, it is just frustrating to don’t be able to fix it from the back…
can’t make it works
thanks to share anyway!!
ジェイク
ネストされたメニューがある場合、これは確実に機能しません。
編集スタッフ
うーん、修正を検討します。
管理者
Olivier
メニュー項目が最後、または最後のメニュー項目の最後の要素である場合に機能します。
メニュー項目が最後ではないメニュー項目の最後の要素である場合には機能しません。
Olivier
functions.php への他のいくつかの追加と合わせて試したところ、サブメニュー内にある場合にメニュー項目を最初または最後のメニュー項目としてタグ付けすることに失敗しました。これに対する修正があると素晴らしいです！
エリオット・リッチモンド
いいですね！通常はCSSを使いますが、これは良いヒントです
Mattia
素晴らしい！これは特に興味深いですね。なぜなら、メニュー項目を2つ以上分類する必要があるからです…
これで分かりました！
ありがとう
karen
これ、ありがとうございます！もし見落としていたらごめんなさい。このクラスによって作成されるナビゲーションの違いを見るためのメニュー例はありますか？重ねて感謝いたします！
編集スタッフ
クライアントのために設計したサイトはまだ公開されていません。しかし、主な理由は、最初のメニュー項目の左側に境界線が必要だったからです。他のすべての項目には、特定のパディングとマージンを持つ右側の境界線要素がありました。最後のクラスを使用して、右側のマージンと右側の境界線を削除しました。必要がなかったためです。ラップコンテナに当たっていました。視覚化できることを願っています。
管理者
Ivo Minchev
このサイト http://aurorachalet-switzerland.com/ で試しましたが、効果が見られません。「Twenty Eleven」テーマを使用しています。問題は何でしょうか？
Ivo Minchev
おそらく #yourmenuid タグのせいでしょう。いくつかのIDを試しましたが、どれも機能しませんでした。
編集スタッフ
正しいidタグを指定していれば、これは機能するはずです。
管理者
編集スタッフ
wp_nav_menuを使用していると思わないでください。見たところ、サイトはすべてのページをリストすることでフォールバックメニューを使用しているようです。外観 > メニューに移動して、そこにメニューを作成したことを確認できますか。次に、そのメニューをプライマリロケーションとして指定しましたか？
管理者