WordPressの特定のメニューにカスタム項目を追加したいですか？
WordPressのメニューは、ほとんどのサイトの上部に表示されるナビゲーションメニューです。ナビゲーションメニューにリンク以外のカスタム項目を表示したい場合もあるでしょう。
この投稿では、WordPressの特定のメニューにカスタム項目を簡単に追加する方法を紹介する。
WordPressメニューにカスタム項目を追加する理由
WordPressのメニューは、通常サイトの上部に表示されるナビゲーションリンクです。モバイル端末では、メニューアイコンをタップすると表示されることが多い。
一般的なWordPressサイトのレイアウトでは目立つ場所なので、プレーンリンク以外のカスタム項目をメニューに配置して活用するのがスマートだ。
例えば、WPBeginnerで行っているような検索フォームを表示したいユーザーもいるでしょう。会員制サイトではログインとログアウトのリンクを表示したいかもしれませんし、メニューにアイコンや画像を追加したいかもしれません。
初期設定では、ナビゲーションメニューはプレーンテキストのリンクを表示するように設計されています。しかし、WordPressのメニューにはカスタム項目を配置することができます。
そこで、ナビゲーションメニューはそのままに、WordPressの特定のメニューにカスタマイザーの項目を追加する方法を紹介しよう。
WordPressで特定のナビゲーションメニューにカスタム項目を追加する
WordPressのナビゲーションメニューにカスタム項目を追加する方法はさまざまです。どのようなカスタム項目を追加するかによって異なります。
最も一般的な例をいくつか紹介しよう。プラグインが必要なものもあれば、コードを追加する必要があるものもあります。
特定のセクションにスキップしたい場合は、この目次を使うことができる：
- WordPressメニューに検索ポップアップを追加する
- メニューにアイコンや画像を追加する
- メニューにログイン/ログアウトリンクを追加する
- WordPressメニューにカスタムテキストを追加する
- メニューに現在の日付を追加する
- メニューにユーザー名を表示する
- ページごとに異なるメニューを表示する
始めよう。
1.WordPressメニューに検索ポップアップを追加する
通常、初期設定の検索ウィジェットまたはブロックを使用することで、WordPressのサイドバーに検索フォームを追加することができます。しかし、初期設定ではナビゲーションメニューに検索を追加する方法はありません。
WordPressテーマによっては、メインメニューエリアに検索ボックスを追加するオプションがあります。しかし、もしあなたのテーマがそうでなければ、以下の方法を使うことができる。
そのためにはSearchWP Modal Search Form プラグインをインストールして有効化する必要があります。詳しくはWordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。
このプラグインは、市場で最高のWordPress検索プラグインであるSearchWPのアドオンです。
このアドオンは無料で、初期設定のWordPress検索でも動作します。しかし、WordPressの検索を改善したい場合は、SearchWPと一緒に使用することをお勧めします。
アドオンをインストールしたら、 外観 ” メニューページに移動します。メニュー項目の追加」欄の下にある「SearchWP モーダル検索フォーム」タブをクリックして展開する。
検索エンジンを選択し、メニューに追加ボタンをクリックします。
プラグインはあなたのナビゲーションメニューに検索を追加します。メニュー項目の下にある’モーダル検索フォーム’をクリックして展開し、ラベルを検索に変更するか、他の好きなものに変更してください。
変更を保存するには、「メニューを保存」ボタンをクリックすることを忘れないでください。
あなたのサイトにアクセスすると、ナビゲーションメニューに「検索」が追加されています。クリックすると、ライトボックスのポップアップに検索フォームが表示されます。
詳しくは、WordPressのメニューに検索ボタンを追加する方法をご覧ください。
2.特定のメニューにアイコンとカスタマイザーを追加する
ユーザーが特定のメニューに追加したいとよく思うもう一つの人気のあるカスタム項目は、画像やアイコンです。
そのためには、Menu Image Iconプラグインをインストールして有効化する必要があります。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。
有効化した後、外観 ” メニューページに行き、アイコンや画像を表示したいメニュー項目にマウスを合わせます。
青いメニュー画像ボタンをクリックして続けます。
ポップアップが表示されます。ここから、そのメニュー項目と一緒に表示する画像やアイコンを選ぶことができます。
また、メニュー項目に対する画像やアイコンの位置を選ぶこともできます。例えば、下の例のようにメニュー項目の直前にアイコンを表示したり、メニュータイトルを非表示にしてアイコンのみを表示することもできます。
変更を保存」ボタンをクリックして、設定を保存することを忘れないでください。他のメニュー項目にもアイコンや画像を追加する必要がある場合は、このプロセスを繰り返してください。
その後、サイトにアクセスすると、特定のメニュー項目でカスタマイザー画像やアイコンを見ることができます。
より詳細な手順については、WordPressのメニューに画像を追加する方法のチュートリアルをご覧ください。
3.特定のWordPressメニューにログイン/ログアウトリンクを追加する
WordPressのメンバーシッププラグインを使用していたり、オンラインストアを運営している場合、ユーザーが簡単にアカウントにログインできるようにしたいと思うかもしれません。
WordPressの初期設定では、ナビゲーションメニューにログインとログアウトのリンクを表示する簡単な方法は用意されていません。
プラグインやコードスニペットを使って追加する方法を紹介しよう。
1.プラグインを使用してメニューにログイン/ログアウトリンクを追加する
この方法は簡単で、すべてのユーザーにお勧めできる。
まず、Login or Logout Menu Itemプラグインをインストールして有効化する必要があります。その後、外観 ” メニューページにアクセスし、ログイン/ログアウトタブをクリックして展開する必要があります。
ここから「ログイン中/ログアウト中」の項目を選択し、「メニューに追加」ボタンをクリックします。
メニューの保存]ボタンをクリックして変更を保存することを忘れないでください。これで、カスタムログイン・ログアウトリンクの動作をあなたのサイトで確認することができます。
リンクは、ユーザーのログイン状態に応じて、ログインまたはログアウト中に動的に変更されます。
さらに詳しくは、WordPressのメニューにログインとログアウトのリンクを追加する方法のチュートリアルをご覧ください。
2.カスタムコードによるログイン/ログアウトリンクの追加
この方法では、WordPressサイトにコードを追加する必要があります。WordPressにカスタムコードを追加する方法をご覧ください。
まず、WordPressテーマが特定のナビゲーションメニューの場所に使用している名前を見つける必要があります。
これを見つける最も簡単な方法は、外観 ” メニューページにアクセスし、メニューの場所エリアにマウスを持っていくことです。
右クリックしてInspectツールを選択すると、下のソースコードにロケーション名が表示されます。例えば、私たちのデモテーマは、プライマリ、フッター、トップバー-メニューを使用しています。
ログイン/ログアウトリンクを表示したいターゲットロケーションに使用される名前に注意してください。
次に、テーマのfunctions.phpファイルまたはサイト固有のプラグインに以下のコードを追加する必要があります。
add_filter( 'wp_nav_menu_items', 'add_loginout_link', 10, 2 );
function add_loginout_link( $items, $args ) {
if (is_user_logged_in() && $args->theme_location == 'primary') {
$items .= '<li><a href="'. wp_logout_url() .'">Log Out</a></li>';
}
elseif (!is_user_logged_in() && $args->theme_location == 'primary') {
$items .= '<li><a href="'. site_url('wp-login.php') .'">Log In</a></li>';
}
return $items;
}
その後、あなたのサイトにアクセスすると、ナビゲーションメニューにログインとログアウトのリンクが表示されます。
このダイナミックリンクは、ユーザーのログイン状態に応じて自動的にログインまたはログアウトに切り替わります。
4.WordPressナビゲーションメニューにカスタムテキストを追加する
ナビゲーションメニューにリンクを追加せず、テキストだけを追加したい場合はどうすればよいでしょうか？
それには2つの方法がある。
1.特定のメニューにカスタムテキストを追加する（簡単な方法）
外観 ” メニューページに行き、URLとして#記号、リンクテキストとして表示したいテキストを指定してカスタムリンクを追加するだけです。
メニューに追加ボタンをクリックして続けます。
WordPressがカスタムテキストを左カラムのメニュー項目として追加します。ここで、クリックして展開し、#記号を削除します。
メニューを保存ボタンをクリックし、サイトをプレビューすることを忘れないでください。ナビゲーションメニューにカスタマイザーテキストが表示されます。
リンクであることに変わりはないが、クリックしてもユーザーには何も起こらない。
2.コードを使用してナビゲーションメニューにカスタムテキストを追加する
この方法では、サイトにコード・スニペットを追加します。まず、上記のログイン／ログアウト・リンクのセクションで説明したように、テーマの場所名を調べる必要があります。
その後、テーマのfunctions.phpファイルまたはサイト固有のプラグインに以下のコードを追加する必要があります。
add_filter( 'wp_nav_menu_items', 'your_custom_menu_item', 10, 2 );
function your_custom_menu_item ( $items, $args ) {
if ( $args->theme_location == 'primary') {
$items .= '<li><a title="">Custom Text</a></li>';
}
return $items;
}
カスタムテキスト」と表示されている箇所を、あなたのテキストに置き換えるだけです。
変更を保存してサイトにアクセスすると、ナビゲーションメニューの最後にカスタムテキストが追加されているのが確認できます。
このコードメソッドは、WordPressの特定のメニューにプログラムで動的要素を追加したい場合に便利です。
5.WordPressメニューに現在の日付を追加する
WordPressのナビゲーションメニュー内に現在の日付を表示したいですか？頻繁に更新されるブログやニュースサイトを運営している場合、このトリックは便利です。
以下のコードをテーマのfunctions.phpファイルまたはサイト固有のプラグインに追加するだけです。
add_filter('wp_nav_menu_items','add_todaysdate_in_menu', 10, 2);
function add_todaysdate_in_menu( $items, $args ) {
if( $args->theme_location == 'primary') {
$todaysdate = date('l jS F Y');
$items .= '<li><a>' . $todaysdate . '</a></li>';
}
return $items;
}
primary’をメニューの場所に置き換えてください。
WordPressのメニューで、サイトにアクセスして現在の日付を確認できるようになりました。
また、日付の書式を自分好みに変更することもできます。WordPressで日付と時刻の書式を変更する方法については、チュートリアルをご覧ください。
6.WordPressメニューにユーザー名を表示する
ナビゲーションメニューをもう少しパーソナライズしたいですか？ナビゲーションメニューでは、ログイン中のユーザーに名前で挨拶することができます。
まず、テーマのfunctions.phpファイルまたはサイト固有のプラグインに以下のコードを追加する必要があります。
add_filter( 'wp_nav_menu_objects', 'username_in_menu_items' );
function username_in_menu_items( $menu_items ) {
foreach ( $menu_items as $menu_item ) {
if ( strpos($menu_item->title, '#profile_name#') !== false) {
if ( is_user_logged_in() ) {
$current_user = wp_get_current_user();
$user_public_name = $current_user->display_name;
$menu_item->title = str_replace("#profile_name#", " Hey, ". $user_public_name, $menu_item->title . "!");
} else {
$menu_item->title = str_replace("#profile_name#", " Welcome!", $menu_item->title . "!");
}
}
}
return $menu_items;
}
このコードはまず、#profile_name#をリンクテキストとして持つメニュー項目が追加されているかどうかをチェックします。その後、そのメニュー項目をログイン中のユーザー名、または非ログインユーザーのための一般的な挨拶に置き換えます。
次に、外観 ” メニューページに移動し、#profile_name# をリンクテキストとして新しいカスタムリンクを追加する必要があります。
変更を保存するには、「メニューを保存」ボタンをクリックすることを忘れないでください。その後、サイトにアクセスすると、WordPressメニューにログイン中のユーザー名が表示されます。
7.WordPressで条件付きメニューを動的に表示する
これまで、WordPressの特定のメニューにさまざまなタイプのカスタム項目を追加する方法を紹介してきました。しかし、時には動的に異なるメニュー項目をユーザーに表示する必要があるかもしれません。
例えば、ログイン中のユーザーだけにメニューを表示したい場合があります。また、ユーザーが表示しているページによってメニューを変えたい場合もあります。
この方法では、複数のメニューを作成し、特定の条件が一致したときのみ表示させることができる。
まず、Conditional Menusプラグインをインストールして有効化する必要があります。詳しくはWordPressプラグインのインストール方法をご覧ください。
有効化したら、外観 ” メニューページにアクセスする必要があります。ここから、表示したい新しいメニューを作成する必要があります。例えば、この例ではログイン中のユーザー専用のメニューを作成しました。
メニューを作成したら、”Manage Locations “タブに切り替えてください。
ここから、メニューの場所の隣にある「条件付きメニュー」リンクをクリックする必要があります。
その後、ドロップダウンメニューから先ほど作成したメニューを選択する必要があります。
そして、「＋条件」ボタンをクリックして続ける。
ポップアップ・ウィンドウが表示されます。
ここから、このメニューを表示するために必要な条件を選択することができます。
このプラグインはたくさんの条件から選ぶことができる。例えば、特定のページ、カテゴリー、投稿タイプ、タクソノミーなどに基づいてメニューを表示することができます。
また、ユーザーの権限グループやログイン中の状態によって異なるメニューを表示することもできます。例えば、会員制サイトで既存の会員に異なるメニューを表示することができます。
この投稿が、特定の 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!
Jiří Vaněk says
I like the implementation of the search, where instead of the classic empty field, there is a popup window. It looks like a nice solution. I was also interested in the date and personalization of the logged in user. Thanks for the inspiration.
reza says
very helpful and simple
thanks thanks thanks
WPBeginner Support says
Glad our guide was helpful
管理者
Denis says
Hello,
thanks a lot for that code. Is there a way to reorder the MENU? For example I want to have the Log in Log out button at first in the MENU. Just for an example.
Cheers,
Denis
WPBeginner Support says
For the moment with this code, we do not have a simple method for reordering where the additions are placed compared to the menu items at the moment.
管理者
Ben Short says
I’m sure this is too late for Denis! But in case anyone else wants their menu item to come FIRST in the list of menu items, rather than LAST, here’s an example of code I’ve used for this purpose:
add_filter( ‘wp_nav_menu_items’, ‘your_custom_menu_item’, 10, 2 );
function your_custom_menu_item ( $items, $args ) {
if (is_single() && $args->theme_location == ‘primary’) {
$oldItems = $items;
$items = ‘Show whatever’;
$items .= $oldItems;
}
return $items;
}
Karen says
Is there a way to have an entry on your menu bar set to appear at a certain time and another item set to expire?
WPBeginner Support says
Unless I hear otherwise, we do not have a recommended time based conditional display that we would recommend.
管理者
Mary says
How to add in my secondary menu footer class li items in functions.php…?
Saurabh Saneja says
Hi,
How can I add a search form at the beginning of the menu items list?
Thanks,
Saurabh
PS: big fan of your tuts
Igor says
This is great. But would it be possible to add a menu within a menu?
I want to append a language menu to my primary menu.
I get the language menu on the page but not in the desired place.
instead of
Annemarie says
Thank you for this! Just what I needed in a project.
Tasneem says
I used the code for teh search box it works perfect.
Anuj says
Nice article, Help me alot.
Garratt says
Does this code still work? Not seeing anything on my menu, even just using the basic function with text. Not using any special type of menu, just ‘X’ & child theme.
Garratt says
never-mind, sorry just read this: “Obviously, you need to have custom menu enabled in your themes before you can proceed any further.”
Garratt says
OK so I was still having the problem even though my menu was custom, and messed around until I removed the condition. (IF), once I did that it displayed on all pages including homepage.
`add_filter( ‘wp_nav_menu_items’, ‘your_custom_menu_item’, 10, 2 );
function your_custom_menu_item ( $items, $args ) {
$items .= ‘Show whatever’;
return $items;
}
sahar says
It worked but it destroyed responsivity…I had to remove code
Gerson says
How add this menu item in first position ?
Gwen says
Awesome, Thanks you just saved me hours.
Dilip says
What is use of 10,2 in the code
WPBeginner Support says
10 specifies the order in which the functions associated with a particular action are executed. Lower numbers correspond with earlier execution, and functions with the same priority are executed in the order in which they were added to the action.
2 is for the number of arguments the function accepts.
管理者
Pat says
This is so useful and just what I needed! Thank you very much for sharing.
Matt says
The Log-in link won’t show up, just the log out link. What could cause this?
Ritchie Pettauer says
This is an awesome, straight-to-the point tutorial. I want an item with today’s date (“headlines | DATE”) in one of my menus.
I didn’t expect the first posting I found to solve my problem
thx guys.
Bill Gram-Reefer says
works but (lol) for my situation I want to add “Search” to the primary header as if it were just another item that got checked in
appearance/menus/add-to-menu
Everything I’ve seen creates a whole new…what is it a div…(?)
that adds a whole new row to the header instead of p[lacing the form in the same row as ABOUT, etc. items in the primary navigation edit window.
AND take the css assigned to the navigation bar.
Josalone Wordsworth says
I really liked the post, so useful. However lets say I want to add a login and logout link in the footer with and if condition
Hugo Callens says
Related question: how to add a menu item based on a specific user role?
Say I have a custom user role called “Student” and I would like to add an item to the menu only when the user has the role of “Student”?
Monilal says
Its works but current menu item not select
james says
is there a way to add it on certain submenu instead of top ul?
Jonathan says
I’d like to know the same thing. Anyone have an answer on how to add it in a certain submenu?
Gerrit says
Thank you for the How To!
To be honest I don’t understand how you call the function.
Especially I am missing a mention what arguments you call the functions with i.e. what wp variables to hand over as $items and $args.
Could you please detail for a wp-beginner?
Thank you,
Gerrit
samuel says
hey how if i want to add it to sub menu ?
lokitoki says
hm any ideas how i could add html tags to just one wordpress menu item.
from this:
Contact
to this:
Contact
it should be only for one menu item. not to all
amit says
the option is available on wp admin panel
lokitoki says
hm any ideas how i could edit the tag for one wordpress menu item.
from this:
Contact
to this:
Contact
it should be only for one menu item. not to all
gonzela2006 says
Hello,
How can I add the following classes active and current-menu-item and the id menu-item-id ?
Lại Đình Cường says
How about add new custom menu to specific position?
Guillermo says
I want put a little image beside left to the menu home, how can put it?
please help me
Pierre Laflamme says
In your examples, you add items to the primary menu (theme_location == ‘primary’).
How would I add an item in a specific menu in widget area? Where do I get the theme_location?
WPBeginner Support says
theme locations are usually defined by your theme, check your theme’s functions.php file or the template where a menu is displayed.
管理者
Brad Trivers says
If you want to target a specific menu (not a theme location) then use $args->menu->slug == ‘the_menu_slug’ instead of $args->theme_location == ‘primary’.
Xúlio Zé says
Really useful!
Thank you vary much Brad
^-^
Peter Lalor says
Hi Brad,
Would you be able to tell me how I find out what the value of ‘the_menu_slug’ is?
Thanks,
Peter
razvan says
Hi! I used your tutorial to put a picture as a logo overlapping the menu bar. All is fine but this specific menu has a hover option that makes the color white… So when i hover the mouse on the logo, it also hovers the link which kind of ruins the aspect of the page.
This is my code:
if( $args->theme_location == ‘primary’ )
return ““.$items;
How can I hide the a href on the page and just display the image with link?
Thanks in advance
Kathy says
Hi, I think your code is close to what I’m looking for, but I’m trying to figure out how i can customize it to do what I’m trying to do!
What I am trying to do is create a menu item with dropdown list of authors? any idea how i can accomplish that?
Thanks so much!
Erik Mitjans says
Hi Kathy!
I was working on this since days and I finally got it working.
Take a look at: http://wordpress.org/support/topic/creating-a-dropdown-in-menu-that-lists-authors/page/2?replies=45#post-5103035
Also, take into consideration I’m adding extra classes and attributes cause the theme is Bootstrap based. You might not need all that.
Cheers!
Eric
sachi says
awesome i was searching these codes
Brad says
Thanks this was very helpfull,
However, out of curiosity, I can’t find this valuable filter hook: “‘wp_nav_menu_items” , I mean where in WP core files is this being called ??
Thanks much !!
WPBeginner Support says
It is located in wp-includes/nav-menu.php, however it is not recommended to modify core files. It is a filter and you can call it in your theme’s
functions.phpfile or a site specific plugin.管理者
Lavinia says
This isn’t work for me
Andor Nagy says
How can I place it in front of the first menu item? Otherwise great tutorial!
Regards,
Andor Nagy
Editorial Staff says
Use the return example of the search bar and move the items towards the end?
管理者
Cameron Jones says
add_filter( ‘wp_nav_menu_items’, ‘your_custom_menu_item’, 10, 2 );
function your_custom_menu_item ( $items, $args ) {
$custom = ‘Show whatever’;
$items = $custom.$items;
return $items;
}
Murugu says
Pardon my ignorance but which php file would I be editing?
Editorial Staff says
This would go in your functions.php file.
管理者
Murugu says
I added the following to my theme’s functions.php but the search box doesn’t show up like I would expect. Any suggestions?
add_filter(‘wp_nav_menu_items’,’add_search_box_to_menu’, 10, 2);
function add_search_box_to_menu( $items, $args ) {
if( $args->theme_location == ‘header_extras_inner’ )
return $items.””;
return $items;
}
Elliott Wall says
Sorry to be coming into this discussion so late
I’ve tried the search form part and it works great— thank you! I’m having problems styling it though, for some reason. No matter what I do the placeholder text in the field is gray. I’ve looked at the cascading of the styles and messed with so many things— I can change the background color for example, but no luck in making the text black, so the design continuity of the menu is somewhat compromised. My site is http://elliottwall.com if you care to have a look. Cheers
Editorial Staff says
For placeholder text, you have to do something like this:
::-webkit-input-placeholder { color: red; } :-moz-placeholder { /* Firefox 18- */ color: red; } ::-moz-placeholder { /* Firefox 19+ */ color: red; } :-ms-input-placeholder { color: red; }1-click Use in WordPress
管理者
Elliott Wall says
This worked perfectly— thank you again!
Sam says
Can we add custom link before the first item instead of at the end?
xafar Ali says
Yes , just concatenate first instead of last.
$items = “MENU ITEM ” . $items;
piomat says
beer!
SAcha says
Hi,
very interesting!
I added a custom link, but is it possible to add it in a certain position inside the menu? Like “after the first menu item”.
Thanks
Editorial Staff says
Not sure if that is possible.
管理者