メインナビゲーションメニューにボタンを追加することで、サイトの行動喚起を目立たせ、最も重要なページへのトラフィックを増やすことができます。また、すべてのページや投稿に同じボタンを追加するのも簡単な方法です。
弊社のパートナーブランドの1つであるWPFormsが、WordPressのヘッダーに直接 “Get WPForms “ボタンを追加した方法を見てきました。この単純な追加は、コンバージョンを増加させ、売上を高めるのに役立ちました。
WPFormsはこのボタンを目につきやすい場所に設置することで、訪問者がアクションを起こしやすくし、エンゲージメントを高め、より多くのリードを獲得できるようにしました。
この投稿では、WordPressのヘッダーメニューにボタンを簡単に追加する方法を紹介します。
なぜWordPressのヘッダーメニューにボタンを追加するのか？
WordPressのナビゲーションメニューは通常、プレーンテキストのリンクで、すべてが同じように見え、目立つものはありません。
しかし、リンクの中には他のリンクよりも重要なものがあります。例えば、オンライン注文フォームやWordPress会員サイトの登録ページへのリンクを追加したい場合があります。
初期設定では、これらの重要なリンクはヘッダーメニューの他の部分と同じように見えます。
これらのリンクをボタンにすることで、より人目を引くようにすることができる。そうすることで、より多くのクリックとコンバージョンを得ることができます。
初期設定では、WordPressの投稿やページにはButtonsブロックを使ってボタンを追加できますが、ナビゲーションメニューには追加できません。
ということで、WordPressのヘッダーメニューにボタンを追加する方法を見てみましょう。
WordPressのヘッダーメニューにボタンを追加する
まず、ボタンにしたいリンクを追加します。
WordPressダッシュボードの外観 ” メニューページに行き、ナビゲーションメニューにリンクを追加するだけです。詳しい手順は、WordPressでナビゲーションメニューを追加する方法をご覧ください。
その後、画面上部の「表示オプション」ボタンをクリックしてください。
すると、新しいオプションがたくさんあるパネルが現れます。CSS Classes’の隣にあるボックスにチェックを入れるだけです。
ボタンにしたいメニュー項目をクリックして展開する。
クラス名を入力する新しいCSSクラス設定オプションがあることに気づくだろう。このCSSクラスは好きなように呼ぶことができますが、このガイドではmenu-buttonとします。
名前を入力したら、「メニューを保存」ボタンをクリックして変更を保存します。
これでメニュー項目にカスタムCSSクラスが追加されました。カスタムCSSコードを使って、メニューの見え方を変更することができます。このコードは、WordPressのビルトインカスタマイザーか、コードスニペットプラグインを使って追加することができます。
WPCodeを使ってWordPressのヘッダーメニューにボタンを追加する（推奨）
WordPressにカスタムコードを追加する最良の方法は、WPCodeを使用することです。カスタムCSS、PHP、HTMLなどを追加できる最高のコードスニペットプラグインです。
テーマファイルを直接編集しないので、WordPressでよくあるエラーを避けることができます。また、カスタムコードを失うことなく、テーマの更新や全く別のテーマへの変更も可能です。
いつでもボタンを外したい場合は、個別クリックでオフにできる。
まず、無料のWPCodeプラグインをインストールし、有効化する必要があります。 詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。
プラグインを有効化したら、WordPressダッシュボードからCode Snippets ” + Add Snippetページにアクセスします。
ここでは、サイトに追加できる既製のWPCodeスニペットがすべて表示されます。これらのスニペットには、コメントを完全に無効化したり、WordPressが通常サポートしていないファイルタイプのアップロード、添付ファイルページの無効化などが含まれます。
カスタムコードを追加（新規スニペット）」オプションにマウスオーバーし、「スニペットを使用」ボタンが表示されたらクリックします。
次の画面では、コード・スニペットのタイトルを入力する必要がある。これは単なる参考用なので、好きなものを使ってください。
次に、「コードタイプ」のドロップダウンを開き、「CSSスニペット」を選択する。
これで、CSSコード・スニペットをWPCodeエディターに貼り付ける準備ができました：
.menu-button {
background-color:#eb5e28;
border:1px;
border-radius:3px;
-webkit-box-shadow:1px 1px 0px 0px #2f2f2f;
-moz-box-shadow:1px 1px 0px 0px #2f2f2f;
box-shadow:1px 1px 0px 0px #2f2f2f;
}
.menu-button a, .menu-button a:hover, .menu-button a:active {
color:#fff !important;
}
上のコード・スニペットを追加するときは、menu-buttonをCSSクラスの名前に置き換えてください。
上記のコード・スニペットは、次の画像にあるように、シャドウ効果のあるオレンジ色のボタンを作成する。
CSSスニペットでどんな効果が作れるか、自由に遊んでみてください。例えば、背景色、リンクの文字色、枠線などを変更することができます。
別の色を使いたい場合は、その色の16進コードを知る必要があります。どのコードを使えばよいか本当に〜してもよいですか？
コードに満足したら、’Inactive’トグルをクリックして’Active’に変更し、’Save Snippet’ボタンをクリックします。
WordPressのサイトにアクセスすると、新しいヘッダーメニューボタンが表示されます。
カスタマイザーを使ってWordPressのヘッダーメニューにボタンを追加する
プラグインを使いたくない場合は、ビルトイン・カスタマイザーを使ってコードを追加することができる。
外観 ” カスタマイザーにアクセスすると、右側にサイトのプレビューが表示され、左側のカラムにはテーマ設定の数々が表示されます。
まず、’Additional CSS’オプションをクリックする。
カスタムCSSコードを追加するボックスが表示されます。
もう一度、上記のコード・スニペットを出発点として使うことができる。
ボタンの見た目に満足したら、「公開する」をクリックして変更を反映させます。
動画チュートリアル
WordPressのヘッダーメニューにボタンを追加する方法については、動画チュートリアルをご覧ください：
ボーナス：WordPressヘッダーにクリックコール・ボタンを追加する
中小企業のサイトをお持ちの場合は、ナビゲーションメニューにクリックトゥコールボタンを追加することもできます。そうすることで、訪問者があなたに連絡しやすくなり、また、あなたのサイトをよりSEOに適したものにすることで、検索エンジンのランキングを上げることもできます。
このボタンを追加するには、WordPressダッシュボードから外観 ” メニューページにアクセスし、右側の「カスタムリンク」タブを展開します。
ここで、URLにVOIP電話番号を追加し、ラベルを追加します。その後、「メニューに追加」ボタンをクリックします。
クリック・ツー・コールボタンをナビゲーションリンクのリストに追加したら、忘れずに「メニューを保存」ボタンをクリックして設定を保存してください。
詳しい説明は、WordPressにクリックボタンを追加する方法のチュートリアルをご覧ください。
WordPressのヘッダーメニューにボタンを追加する方法について、この投稿がお役に立てば幸いです。また、WordPressで先頭固定表示ナビゲーションメニューを作成する方法や、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.
Nicole Hassell
This was helpful and created a button but it overwrites the link in my custom link….any idea how to stop that?
WPBeginner Support
None of the CSS should touch the link in your menu item, we would recommend ensuring that the link was not changed in your meu settings and that you don’t have a plugin that could be changing your link.
管理者
Sergio
Thaks for this useful guide!
when I customize the button with CSS, the background occupies the entire height of the header. How can i modify this to fit more closely to the text? (remove excess background)
Thanks a lot
WPBeginner Support
That would require editing your theme and what to edit would depend on the specific theme you are using.
管理者
Bonny C.
What a timesaver! Thanks a bunch!!
WPBeginner Support
You’re welcome, glad our guide was helpful!
管理者
Sawyer Smith
Hi, Implemented the css into my menu and it turned out great after some time troubleshooting. However, when my cursor hovers over the button, a wide white rectangle covers the text when cursor is hovering. How can I fix this so that nothing like this occurs during hover? Thanks.
WPBeginner Support
It likely is due to your theme’s default hover colors. If you are using the CSS from our article then you would want to add CSS code like the following:
.menu-button:hover {
background-color:#eb5e28;
}
管理者
Nicole
This is very helpful, thank you! I’m wondering if you can tell me how to change the color of the text on the sub-menu (dropdown from the button) only?
Thank you!
WPBeginner Support
As each theme is different you would want to check with your theme’s support and they may have a recommendation, otherwise, you could use our guide on inspect element below for how to select the sub-menu for changing the text color.
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
管理者
Megan
When I follow all of these steps the button doesn’t appear at all.. it just does nothing. Any idea why this might be? I copied and pasted the exact code from here!
WPBeginner Support
Your specific theme may have CSS that would overwrite this code, if you check with your theme’s support they should be able to assist.
管理者
Gabriela
how do you resize the button? I see it stays inline with the text
jj
Great help thanks!
Is it possible to make the button something that links to another external site using the CSS?
Dorothy
I really appreciate this! For the longest time, I wasn’t sure how to go about this. I was able to create a button in the nav with no problems following this. Thanks!!
Stephanie
Thank you so much for this tutorial! I’m not a techie kind of person, and at first it didn’t work, because I was in my primary navigation menu, went to secondary and did the steps and voila! Added a little bling to my site!
WPBeginner Support
Glad our guide was able to help
管理者