Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPressのヘッダーメニューにボタンを追加する方法

メインナビゲーションメニューにボタンを追加することで、サイトの行動喚起を目立たせ、最も重要なページへのトラフィックを増やすことができます。また、すべてのページや投稿に同じボタンを追加するのも簡単な方法です。

弊社のパートナーブランドの1つであるWPFormsが、WordPressのヘッダーに直接 “Get WPForms “ボタンを追加した方法を見てきました。この単純な追加は、コンバージョンを増加させ、売上を高めるのに役立ちました。

WPFormsはこのボタンを目につきやすい場所に設置することで、訪問者がアクションを起こしやすくし、エンゲージメントを高め、より多くのリードを獲得できるようにしました。

この投稿では、WordPressのヘッダーメニューにボタンを簡単に追加する方法を紹介します。

Adding buttons in WordPress navigation menu

なぜWordPressのヘッダーメニューにボタンを追加するのか?

WordPressのナビゲーションメニューは通常、プレーンテキストのリンクで、すべてが同じように見え、目立つものはありません。

A default WordPress header

しかし、リンクの中には他のリンクよりも重要なものがあります。例えば、オンライン注文フォームやWordPress会員サイトの登録ページへのリンクを追加したい場合があります。

初期設定では、これらの重要なリンクはヘッダーメニューの他の部分と同じように見えます。

これらのリンクをボタンにすることで、より人目を引くようにすることができる。そうすることで、より多くのクリックとコンバージョンを得ることができます。

A button in a WordPress header

初期設定では、WordPressの投稿やページにはButtonsブロックを使ってボタンを追加できますが、ナビゲーションメニューには追加できません。

ということで、WordPressのヘッダーメニューにボタンを追加する方法を見てみましょう。

WordPressのヘッダーメニューにボタンを追加する

まず、ボタンにしたいリンクを追加します。

WordPressダッシュボードの外観 ” メニューページに行き、ナビゲーションメニューにリンクを追加するだけです。詳しい手順は、WordPressでナビゲーションメニューを追加する方法をご覧ください。

Add a link to WordPress menu

その後、画面上部の「表示オプション」ボタンをクリックしてください。

すると、新しいオプションがたくさんあるパネルが現れます。CSS Classes’の隣にあるボックスにチェックを入れるだけです。

Show CSS classes in Screen Options

ボタンにしたいメニュー項目をクリックして展開する。

クラス名を入力する新しいCSSクラス設定オプションがあることに気づくだろう。このCSSクラスは好きなように呼ぶことができますが、このガイドではmenu-buttonとします。

Add custom CSS class to a link

名前を入力したら、「メニューを保存」ボタンをクリックして変更を保存します。

これでメニュー項目にカスタムCSSクラスが追加されました。カスタムCSSコードを使って、メニューの見え方を変更することができます。このコードは、WordPressのビルトインカスタマイザーか、コードスニペットプラグインを使って追加することができます。

WPCodeを使ってWordPressのヘッダーメニューにボタンを追加する(推奨)

WordPressにカスタムコードを追加する最良の方法は、WPCodeを使用することです。カスタムCSS、PHP、HTMLなどを追加できる最高のコードスニペットプラグインです。

テーマファイルを直接編集しないので、WordPressでよくあるエラーを避けることができます。また、カスタムコードを失うことなく、テーマの更新や全く別のテーマへの変更も可能です。

いつでもボタンを外したい場合は、個別クリックでオフにできる。

まず、無料のWPCodeプラグインをインストールし、有効化する必要があります。 詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。

プラグインを有効化したら、WordPressダッシュボードからCode Snippets ” + Add Snippetページにアクセスします。

Add a custom code snippet to a WordPress website

ここでは、サイトに追加できる既製のWPCodeスニペットがすべて表示されます。これらのスニペットには、コメントを完全に無効化したり、WordPressが通常サポートしていないファイルタイプのアップロード、添付ファイルページの無効化などが含まれます。

カスタムコードを追加(新規スニペット)」オプションにマウスオーバーし、「+カスタム・スニペットを追加」ボタンが表示されたらクリックします。

Click the Add Custom Snippet button

次に、画面にポップアップ表示されるオプションのリストから、コードタイプとして「CSS Snippet」を選択する必要がある。

Choose CSS Snippet as the code type in WPCode

次の画面で、コード・スニペットのタイトルを入力する必要がある。

名前はあくまで参考なので、好きなものを使ってください。

Adding custom CSS to WordPress using WPCode

これで、CSSコード・スニペットを「コード・プレビュー」ボックスに貼り付ける準備ができました:

1
2
3
4
5
6
7
8
9
10
11
.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クラスの名前に置き換えてください。

上記のコード・スニペットは、次の画像にあるように、シャドウ効果のあるオレンジ色のボタンを作成する。

An example of a call to action button, created using WPCode

CSSスニペットでどんな効果が作れるか、自由に遊んでみてください。例えば、背景色、リンクの文字色、枠線などを変更することができます。

別の色を使いたい場合は、その色の16進コードを知る必要があります。どのコードを使えばよいか本当に〜してもよいですか?

コードに満足したら、’Inactive’トグルをクリックして’Active’に変更し、’Save Snippet’ボタンをクリックします。

Adding a button to the WordPress header menu using WPCode

WordPressのサイトにアクセスすると、新しいヘッダーメニューボタンが表示されます。

カスタマイザーを使ってWordPressのヘッダーメニューにボタンを追加する

プラグインを使いたくない場合は、ビルトイン・カスタマイザーを使ってコードを追加することができる。

外観 ” カスタマイザーにアクセスすると、右側にサイトのプレビューが表示され、左側のカラムにはテーマ設定の数々が表示されます。

まず、’Additional CSS’オプションをクリックする。

How to add custom CSS to a WordPress website or blog

カスタムCSSコードを追加するボックスが表示されます。

もう一度、上記のコード・スニペットを出発点として使うことができる。

An example of a custom button in a WordPress header and menu

ボタンの見た目に満足したら、「公開する」をクリックして変更を反映させます。

動画チュートリアル

WordPressのヘッダーメニューにボタンを追加する方法については、動画チュートリアルをご覧ください:

Subscribe to WPBeginner

ボーナス:WordPressヘッダーにクリックコール・ボタンを追加する

中小企業のサイトをお持ちの場合は、ナビゲーションメニューにクリックトゥコールボタンを追加することもできます。そうすることで、訪問者があなたに連絡しやすくなり、また、あなたのサイトをよりSEOに適したものにすることで、検索エンジンのランキングを上げることもできます。

このボタンを追加するには、WordPressダッシュボードから外観 ” メニューページにアクセスし、右側の「カスタムリンク」タブを展開します。

ここで、URLにVOIP電話番号を追加し、ラベルを追加します。その後、「メニューに追加」ボタンをクリックします。

Add click-to-call link to navigation menu

クリック・ツー・コールボタンをナビゲーションリンクのリストに追加したら、忘れずに「メニューを保存」ボタンをクリックして設定を保存してください。

詳しい説明は、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.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

アバター

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

17件のコメントLeave a Reply

  1. 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.

      Admin

  2. 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.

      Admin

  3. Bonny C.

    What a timesaver! Thanks a bunch!!

    • WPBeginner Support

      You’re welcome, glad our guide was helpful!

      Admin

  4. 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;
      }

      Admin

  5. 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!

  6. 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.

      Admin

  7. Gabriela

    how do you resize the button? I see it stays inline with the text

  8. jj

    Great help thanks!
    Is it possible to make the button something that links to another external site using the CSS?

  9. 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!!

  10. 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 :)

      Admin

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.