WordPressメニューの最初と最後の項目にカスタマイザーを追加したいですか？
1つのオプションは、単に最初と最後のメニュー項目にカスタムCSSクラスを追加することです。しかし、メニューを並べ替えた場合、それらの項目が最初と最後でなくなる可能性があります。
この投稿では、.firstと.lastクラスを追加する方法を紹介します。このクラスは、メニューの順番を後から変更した場合でも、最初と最後の項目にスタイルを適用します。
なぜ最初と最後のナビゲーション項目でスタイルを変えるのか？
ナビゲーションメニューの最初と最後の項目にカスタマイザーを追加する必要がある場合があります。これにより、サイトのお問い合わせフォームやお買い物カゴページへのリンクなど、重要なリンクを目立たせることができます。
この場合、最初と最後のメニュー項目にカスタムCSSクラスを追加するだけでよい。しかし、メニューの順序を変更すると、カスタマイザーが完全に壊れてしまう可能性があります。
そのため、フィルターの使用をお勧めします。
このガイドでは、ナビゲーション・メニューの最初と最後の項目にスタイルを設定する方法を説明します。以下のクイックリンクから、お好きな方法にジャンプしてください：
方法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」に変更すれば準備完了です。
最後に「Save Snippet」をクリックして、PHPスニペットをライブにする。
これにより、最初と最後のメニュー項目に .first と .last CSS クラスが作成されます。これらのクラスを使って、これらの項目に独自のスタイルを適用することができます。
そのためには、WordPressサイトに2つ目のスニペットを追加する必要があります。まず、上記と同じ手順でカスタマイザーを新規作成します。
その後、カスタム・コード・スニペットのタイトルを入力する。
次に、「コードタイプ」のドロップダウンを開くが、今回は「CSSスニペット」を選択する。
このガイドでは、以下のCSSフォーマットをコードボックスに追加することで、最初と最後のメニュー項目を太字にするだけです：
.first a {font-weight: bold;}
.last a {font-weight: bold;}
それが終わったら、「Inactive」トグルをクリックして「Active」に変更する。
最後に「Save Snippet」をクリックして、CSSスニペットをライブにする。
今、あなたのサイトにアクセスすると、更新されたメニューがライブで表示されます。
方法2: CSSセレクタを使用して最初と最後の項目をスタイリングする (すべてのテーマで動作)
プラグインを使いたくない場合は、CSSセレクタを使って最初と最後のメニュー項目をスタイルすることができます。ただし、この方法はInternet Explorerのような古いブラウザーでは動作しない場合があります。
このことを念頭に置いて、WordPressサイトをさまざまなブラウザーでテストすることをお勧めします。
この方法に従うには、テーマのスタイルシートまたはWordPressテーマ・カスタマイザーの「追加CSS」セクションにコードを追加する必要があります。
まだカスタム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
ドメインは必ずあなたのサイトのドメイン名に置き換えてください。
その後、先ほどと同じように「Additional 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 でランディングページを作成する方法についてのガイド、またはドラッグ＆ドロップで作成できるページビルダーのベストリストもご覧ください。
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Ahmed Mahdi says
i’ve changed the code slightly to work with child menus too:
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’);
Trevor Simonton says
exactly what i needed. thank you!
Georgios Panagiotakopoulos says
Thanks! This works great!
Munkhbayar says
Thanks for code. Works for me.
mad_doc says
Thank you for idea & help!
Charles says
Thanks for this nice code…
What about child menu first and last item?
It applied only for parent manu.
Do you have any idea about child last item?
jordi says
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!!
Jake says
This does not work reliably if you have nested menus.
Editorial Staff says
Hmm, will look into a fix for this.
管理者
Olivier says
It works when the menu item is the last, or the last child of a last menu item.
It does not work when the menu item is a last child of a menu item that is not the last.
Olivier says
Together with some other additions to functions.php that i’ve tried, this code fails to tag a menu item as first or last menu item when they are in a submenu. A fix for this would be great!
Elliott Richmond says
Nice! Would usually use CSS but this is a good tip
Mattia says
Great! This is particularly interesting because I have to class more than 2 menu items…
Now I got it!
Thanks
karen says
Thanks for this! Forgive me if I missed it – but – is there an example of the menu to see the difference in the nav created by this class? Thank you again!
Editorial Staff says
The site we designed for our client is not live yet. But the main reason was that we wanted to have a border left to the first menu item. All other items had border right element with a specific padding and margin. We used the last class to remove the margin right and the border right because there was no need for it. It was hitting the wrap container. Hope you can visualize it.
管理者
Ivo Minchev says
I’ve tried this at the site http://aurorachalet-switzerland.com/ and I cannot see the effect. I’m using the “Twenty Eleven” theme for this site. Where is the problem?
Ivo Minchev says
Pobably because of the #yourmenuid tag. I tried some ID’s but none of them worked.
Editorial Staff says
This should work as long as you specify the correct id tags.
管理者
Editorial Staff says
Don’t think that you are using the wp_nav_menu. From the looks of it, it seems that your site is using the fall_back menu by listing all pages. Can you confirm that you have gone into Appearance > Menu and created a menu there. Then specified that menu as a primary location??
管理者