ユニークにスタイル設定された最初と最後のメニュー項目を持つウェブサイトを見たことがありますか？それは偶然ではありません – それは巧妙な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でも私たちを見つけることができます。
アーメド・マフディ
子メニューでも機能するようにコードを少し変更しました。
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’);
トレバー・シモントン
まさに必要としていたものです。ありがとうございます！
ゲオルギオス・パナギオタコプロス
ありがとうございます！これは素晴らしいです！
ムンクバヤル
コードありがとうございます。私の環境では動作しました。
mad_doc
アイデアと助けをありがとうございます！
Charles
この素晴らしいコードをありがとうございます…
子メニューを先に、そして最後の項目はどうですか？
親メニューにのみ適用されました。
子の最後の項目について何かアイデアはありますか？
ジョルディ
STARKERS を使用して wp_nav_menu に add_filter(”); を使用する際のヒントを持っている人はいますか？
JS と CSS はそれで問題ありません。バックエンドから修正できないのはイライラするだけです…
動作させることができません
とにかく共有してくれてありがとう!!
ジェイク
ネストされたメニューがある場合、これは確実に機能しません。
編集スタッフ
うーん、修正を検討します。
管理者
オリビエ
メニュー項目が最後、または最後のメニュー項目の最後の要素である場合に機能します。
メニュー項目が最後ではないメニュー項目の最後の要素である場合には機能しません。
オリビエ
functions.php への他のいくつかの追加と合わせて試したところ、サブメニュー内にある場合にメニュー項目を最初または最後のメニュー項目としてタグ付けすることに失敗しました。これに対する修正があると素晴らしいです！
エリオット・リッチモンド
いいですね！通常はCSSを使いますが、これは良いヒントです
Mattia
素晴らしい！これは特に興味深いですね。なぜなら、メニュー項目を2つ以上分類する必要があるからです…
これで分かりました！
ありがとう
カレン
これ、ありがとうございます！もし見落としていたらごめんなさい。このクラスによって作成されるナビゲーションの違いを見るためのメニュー例はありますか？重ねて感謝いたします！
編集スタッフ
クライアントのために設計したサイトはまだ公開されていません。しかし、主な理由は、最初のメニュー項目の左側に境界線が必要だったからです。他のすべての項目には、特定のパディングとマージンを持つ右側の境界線要素がありました。最後のクラスを使用して、右側のマージンと右側の境界線を削除しました。必要がなかったためです。ラップコンテナに当たっていました。視覚化できることを願っています。
管理者
イヴォ・ミンチェフ
このサイトhttp://aurorachalet-switzerland.com/でこれを試しましたが、効果が見られません。このサイトでは「Twenty Eleven」テーマを使用しています。問題は何でしょうか？
イヴォ・ミンチェフ
おそらく #yourmenuid タグのせいでしょう。いくつかのIDを試しましたが、どれも機能しませんでした。
編集スタッフ
正しいidタグを指定していれば、これは機能するはずです。
管理者
編集スタッフ
wp_nav_menuを使用していると思わないでください。見たところ、サイトはすべてのページをリストすることでフォールバックメニューを使用しているようです。外観 > メニューに移動して、そこにメニューを作成したことを確認できますか。次に、そのメニューをプライマリロケーションとして指定しましたか？
管理者