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

WordPressで行動喚起ボタンを追加する方法(コードなし)

編集メモ: WPBeginner のパートナーリンクから手数料を得ています。手数料は編集者の意見や評価に影響を与えません。編集プロセスについて詳しく知る。

WordPressの投稿やページにコールトゥアクションボタンを追加したいですか?

ボタンはコンバージョンを高める素晴らしい方法です。非常に目立つので、ユーザーの注意を目的のインタラクションに向けるのに優れています。

例えば、コールトゥアクションボタンを使って、ユーザーをサイト上の価格ページ、商品ページ、サービスページなどのトランザクションページに送ることができます。

また、コールトゥアクションボタンを使って、特別オファーや新製品、パートナーサイトへのアフィリエイトリンクを宣伝することもできます。

この投稿では、コードを書かずにWordPressに美しいコールトゥアクションボタンを簡単に追加する方法を紹介します。

Adding Buttons in WordPress Step by Step

注:この投稿はWordPressにカスタマイザーボタンを追加するためのものです。ソーシャルシェアボタンを追加したい場合は、WordPressでソーシャルシェアボタンを追加する方法のガイドを参照してください。

WordPressの投稿とページにボタンを追加する(ステップバイステップ)

WordPressでは、ビルトインButtonブロックでボタンを簡単に追加できます。これは、Gutenberg WordPressブロックエディターで導入された機能です。

この投稿では、WordPressブログの投稿やページにコール・トゥ・アクション・ボタンを追加する3つの方法を紹介する。あなたのニーズに合ったソリューションを選んでください。

この投稿を読み進めるには、以下の目次をご利用いただきたい:

コンテンツの目次

動画チュートリアル

Subscribe to WPBeginner

動画が気に入らなかったり、もっと説明が必要な場合は、このまま読み進めてください。

初期設定エディターを使ってWordPress投稿/ページにボタンを追加する

この方法は簡単で、ほとんどのユーザーにおすすめです。WordPressのブロックエディターにビルトインされているボタンブロックを使います。クラシックエディターを使用している場合は、次のセクションに進んでください。

まず、ボタンを追加したい投稿を新規作成するか、既存の投稿を編集する必要があります。

投稿編集画面で「+」アイコンをクリックし、「レイアウト要素」セクションから「ボタン」ブロックを選択します。

Add button block

次に、コンテンツエディターにボタンブロックが追加されているのが見えるはずです。

テキストを追加…」エリアをクリックし、ボタンテキストを入力してください。

Add button text

その後、ツールバーのリンクボタンをクリックしてリンクを追加する。

投稿やページを検索したり、リンク欄にURLをコピー&ペーストするだけでもOK。

Add button link

完了したら、「Enter」キーを押すか、「Apply」アイコンを押してリンクを保存します。

ボタンを中央に表示したい場合は、「Justify」アイコンをクリックし、「Justify Center」を選択します。また、ツールバーからボタンの垂直方向の配置を変更することもできます。

Change button alignment

次に、右側のブロック設定パネルから、ボタンのスタイルをカスタマイズし、テキストと背景色を変更することができます。

ブロック設定の「スタイル」タブに切り替えるだけで、ボタンのスタイルを調整できます。

Change button style

ボタンのスタイルは、初期設定、アウトライン、スクエアの3種類から選べます。それぞれをクリックして試してみて、最適なものを選んでください。

カラー設定セクションには、ボタンの背景とテキストの両方に5つのカラーバリエーションがあります。それだけでなく、’カスタムカラー’オプションをクリックすることで、お好みのカスタムカラーを使用することもできます。

Button style settings

ボタンのデザインに満足したら、投稿を保存するか、公開してライブプレビューを見ることができます。

これがデモサイトでの様子です。

Call to action button preview

ボーナス:ボタンのパフォーマンスを確認したい場合は、MonsterInsightsを使用することをお勧めします。アフィリエイトリンク、アウトバウンドリンク、カスタムイベントのイベントトラッキングがビルトインされているので、ボタンのパフォーマンスを確認することができます。詳しくは、WordPressでトラッキングすべき重要なマーケティング指標をご覧ください。

クラシックエディターでWordPressボタンを作成する

初期設定のWordPressブロックエディターは、現代的で、より速く、より簡単です。 一部のユーザーはまだ古いClassic WordPressエディターを使用しています。

クラシックWordPressエディターの使用はお勧めしません。時代遅れで、ユーザーが素晴らしいコンテンツを作成するのに必要な十分な機能がありません。もしまだ使用しているのであれば、エディターをオフにしてブロックエディターを使い始めることをお勧めします。

一方で、それでも使いたいというユーザーもいるだろう。その場合、WordPressサイトにボタンを追加する別のソリューションが必要になります。

WordPress Classicエディターでボタンを追加するには、3つのオプションがあります:

  1. WordPressにHTML / CSSコードでボタンを追加します。
  2. WordPressのボタンショートコードプラグインを使ってWordPressにボタンを追加します。
  3. WordPressでショートコードを使わずにボタンを追加する。

3つのオプションのうち、最初のものはコーディングの方法です。HTML / CSSコードを記述し、ボタンが必要な場所にサイトに追加する必要があります。初心者に優しい方法とは言えません。

2番目のオプションは、最もよく使われる方法です。WordPressのボタンプラグインのほとんどが、ボタンを追加するためのショートコードを提供しているからだ。

ショートコードを覚えることなく、投稿やページに簡単にボタンを追加することができるため、3番目のオプションが最適です。

WordPressでショートコードを使わずにボタンを追加する方法を見てみよう。

最初に行う必要があるのは、Forget About Shortcode Buttonsプラグインをインストールして有効化することです。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。

プラグインを有効化したら、新しい投稿を作成するか、既存の投稿を編集します。エディターで、ビジュアルエディターに「ボタンの挿入」というラベルの新しいボタンが表示されます。

Insert Button Icon in Classic WordPress Editor

投稿に新しいボタンを挿入するには、「ボタンの挿入」アイコンをクリックする必要があります。

新しいボタンをデザインするためのポップアップウィンドウが表示されます。

Enter Button Text and URL in Classic Editor

まず、ボタンのテキストとURLを追加します。ボタンテキストを追加すると、下のボックスにライブプレビューが表示されます。

次に、下のチェックボックスオプションをクリックして、リンクにnofollowタグを追加し、リンクを新しいタブで開くことができます。

その後、ボタンのアイコンを選択することができます。アイコン’タブをクリックすると、ボタンのテキストの前後に追加できるアイコンが表示されます。

Add Icon to your Button in Classic Editor

これらのアイコンは、実際にはアイコンフォントです(WordPress投稿エディターでアイコンフォントを使用する方法についてはこちらをご覧ください)。

次に、カラーボックスのアイコンをクリックして、ボタンの文字色と背景色を選択します。

Change Button Background Color in WordPress Classic Editor

その後、ドロップダウンメニューをクリックしてボタンのスタイルを選択します。

8種類のボタンスタイルが用意されている。

Choose a Button Style in Classic WordPress Editor

同様に、ボタンのサイズも特小から特大まで選ぶことができる。

見た目に満足したら、「更新」ボタンをクリックするだけです。

投稿エディター内で、あなたの投稿に表示されるボタンを見ることができます。

ボタンテキストを選択し、クラシックエディターのツールバーボタンを使用するだけで、ボタンの配置を設定することもできる。

Center Align Your Button in Classic Editor

ボタンをダブルクリックすると「ボタンの挿入」ポップアップが表示され、ボタンを再編集することができます。

そのデザインに満足したら、投稿を公開したり更新したりして、その動きを見てみましょう。これが、私たちのデモWordPressサイトに表示されたファンシーボタンの外観です。

Button Preview - Built in Classic Editor

WordPressにクリックトゥコールボタンを追加する

通常のコールトゥアクションボタンに加え、クリックトゥコールボタンをサイトに追加することで、リードとコンバージョンを高めることができます。

クリックトゥコールボタンは、ユーザーがタップするだけであなたのチームに電話をかけることができる、特定のタイプのコールトゥアクションボタンです。

タップ・トゥ・コールボタンを使えば、サイト訪問者は即座にあなたのチームと直接話し、必要な情報を得ることができます。見積もり依頼、販売前情報、サポートの問題など、電話による問い合わせは迅速です。

スマートフォンユーザーの増加に伴い、通話ボタンを追加することの重要性はさらに高まっている。

もしビジネスフォンを持っていないのであれば、バーチャル・ビジネス・フォン番号の取得を検討してみてはいかがだろうか。

それでは、WordPressでクリック・ツー・コール・ボタンを追加する方法を順を追って見ていきましょう。

最初に行う必要があるのは、WP Call Buttonプラグインをインストールして有効化することです。詳しい手順については、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。

有効化した後、Settings ” WP Call Buttonページにアクセスしてプラグイン設定を行い、クリックトゥコールボタンをデザインする必要があります。

Sticky Call Button Settings in WordPress

最初に、”スティッキーコールボタン “の設定が表示されます。スティッキーコールボタンは、ユーザーがサイトを閲覧する際に一緒にコールボタンを移動させる、コンバージョンに最適化された機能です。

今すぐ電話ボタンの状態を有効化することから始めます。スイッチのトグルをクリックして有効化します。

その後、電話番号を入力する必要があります。WPコールボタンは、国コードとスマートフォン番号フィールドを持っています。あなたの国を選択し、あなたのビジネスの電話番号を入力するだけです。

ビジネス番号をお持ちでない場合は、Nextivaから取得できます。信頼できるビジネスVoIPプロバイダーです。

次に、通話ボタンのテキストを編集し、通話ボタンの位置と色を選択できます。

また、サイト上のどこに先頭固定コールボタンを表示するかを選択できます。初期設定では、すべてのページ、すべての端末にコールボタンが表示されます。特定のページにボタンを表示したり非表示にしたり、モバイル端末のみに表示したりすることもできます。

すべてのオプションを確認したら、下部にある「変更を保存」ボタンをクリックします。その後、あなたのサイトにアクセスして、先頭固定表示ボタンが実際に表示されるのを確認できます。

WordPress Click to Call Button

スティッキー呼び出しボタンの他に、このプラグインを使ってWordPressのページ、投稿日、サイドバーに静的呼び出しボタンを追加することもできます。

WordPressのブロックエディターを使用している場合、WP Call Buttonブロックを使用してページに今すぐ電話ボタンを簡単に追加できます。

新規ページを作成するか、既存のページを編集し、ページエディターを使ってWP Call Buttonブロックを追加します。

Adding WP Call Button Block in WordPress

その後、ボタンのテキスト、ボタンの色、テキストの色、フォントサイズをカスタマイズし、電話アイコンを表示または非表示にすることができます。

デザインに満足したら、ページを公開したり更新したりできます。

Customizing Call Button in WordPress Page Editor

クラシックWordPressエディターを使用している場合は、ショートコードを取得するために静的コールボタンジェネレータを使用する必要があります。

Settings ” WP Call Buttonに移動し、上部にある’Static Call Button’メニューをクリックしてください。

Static Call Buttons in WordPress Settings

ボタンのオプションをカスタマイズし、ショートコードをコピーするだけです。その後、あなたのサイトの投稿やページでショートコードを使用することができます。

WP Call Buttonプラグインは、WordPressのサイドバーやその他のウィジェット対応エリアにコールボタンを追加することもできます。

外観 ” ウィジェットにアクセスし、コールボタンを表示したいウィジェット対応エリアにWPコールボタンウィジェットをドラッグするだけです。

WordPress Call Button Sidebar Widget

高度な設定セクションから、タイトル、説明を追加し、コールボタンをカスタマイズできます。完了したら、ウィジェットを保存してください。

以上です!より詳細なチュートリアルをご覧になりたい場合は、WordPressでクリックトゥコールボタンを追加する方法のステップバイステップガイドをご覧ください。

WordPressでカスタムボタンを追加するボーナス・ヒント

行動喚起ボタンを追加するだけでは必ずしも十分ではありません。ヒーロー画像、メニュー、カスタムレイアウトでページや投稿をカスタマイズしたい場合もあるでしょう。

その場合は、SeedProdや Thrive ArchitectのようなドラッグアンドドロップWordPressページビルダープラグインを使用することをお勧めします。

SeedProd add button

これらのページビルダーを使えば、思い通りのコールトゥアクションボタンを備えたカスタムランディングページを作成することができます。

何をするにしても、ボタンがどのように機能しているかをトラッキングすることが重要だ。

MonsterInsightsの使用をお勧めします。アフィリエイトリンク、アウトバウンドリンク、カスタムイベントのイベントトラッキングがビルトインされているので、ボタンのパフォーマンスを確認することができます。詳しくは、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.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

Avatar

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.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

70件のコメント返信を残す

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

  2. Jiří Vaněk says

    Is it possible to track some statistics of the button, only with Google Analytics? Unfortunately, I don’t have monstesight, but I do have Google Analytics on my website.

    • WPBeginner Support says

      It is possible but you would need to set up the event tracking in Google Analytics which is why we recommend using MonsterInsights :)

      管理者

      • Jiří Vaněk says

        Thanks for the reply and explanation. I plan to dive a bit more into Google Analytics, as the only things I currently track with them are the number of users, geolocation and backlinks. I know that GA can do an awful lot. However, I have already seen and read several articles on your website, so I believe that thanks to them I will finally understand this tool a little better. Thank you for your great work. She moved me forward in many ways.

  3. sandra says

    How can I add a form (first name / email address) to my call to action button?
    Or is there a way to adjust a contact form (remove textbox) to do the trick?
    I do not code.

    • WPBeginner Support says

      You would want to check with the support for your form plugin, depending on the one you are using there are different possible methods to do what you are wanting.

      管理者

  4. Shahzaib says

    I have added a button thanks alot but it appears very small and i can’t figure out how to increase its size in block editor

  5. Daniel Piggott says

    Hi,

    I am currently trying to make a button on WordPress. But there is no option to align in the centre.

    Has the latest wordpress omitted the alignment feature of a button?

  6. Carolyn R Cox says

    What about a button that performs an action on the page. For example executes a query, reloading the page with the query data (without replacing the page, in other words: no urls.) Is there a simple way to accomplish this without loading a different page? Thanks.

    • WPBeginner Support says

      That would be something that heavily depends on your specific use case and would likely require developer assistance.

      管理者

  7. Roger Meachem says

    Finally, a clear instruction that works! Thank you. I’ve spent hours trying all manner of things and failing – perhaps they were out-of-date posts but this solved my problem and did so in minutes. It was perfect. I now have buttons that work on the WordPress site.

  8. Meha Jain says

    Hi,
    Any idea how I can add read more button on the theme modules?
    The theme which i am using is not giving me the option to read more button in the modules on the home page.
    How I can add read more button there?

    Regards
    Meha
    (I am a non-technical person.)

    • WPBeginner Support says

      You would want to first reach out to your theme’s support and they may have a recommended method for adding that to your theme.

      管理者

    • WPBeginner Support says

      Sadly, for WordPress.com you would need to check with their support for what is currently allowed

      管理者

  9. Rick Hoffarth says

    I need to add code to a button in order for the button to take the user to a merchant services portal to make secure payments. So far, the button creators want a URL, not code. How can I connect a button to another site that requires code in order to do it?

  10. Daniel says

    Ok, so I know how to make a download button now, but how do I actually make that download happen ?
    Thank you!

  11. Mark Bologna says

    This was just what I needed. Read the article, downloaded the plugin, and had a working button all within ten minutes. Thanks!

  12. Debbie says

    Super quick – just what I needed! Thank you so much. I had mucked around with some that were so hard to setup… I needed a button and this got the job done quick and easy!

  13. Utkarsh Agarwal says

    How to create links to sections on the same page? For example, I need to create a button after the completion of my post which points to the Comments section down below.

  14. Jen Lewis says

    Can this plugin be installed on a site that’s on a free plan? In general, do you have to be on one of the paid plans to install additional plugins to your WordPress site?

    • Jolynn Powers says

      Mike dose that mean that we can no longer add buttons this way and if so where do we look for other information on how to add buttons?? I need to add three buttons to my work website for a listing of dinning locations, entertainment locations and hotel locations and want to put them on a page rather than a post so that they are always on the site at the same location.

  15. Furquan says

    I am searching for button , I have found your post at top in Google but the plugin you have mentioned is no more on WordPress. Could you please help me

  16. Aachal says

    Hey.. I want a button “Apply” instead of the page “Apply” on the homepage of my website.
    How can that be done. Any lead on this?

  17. bill says

    can i add buttons and then deactivate and delete the url and the buttons are still there ???

    or is there a way to put in the css codes to function so i have them without a plugin ???

  18. Alysha says

    Thanks for this! Looks great, but is there anyway to use this plugin to add a button to the header on the homepage?

  19. Toni says

    This is a really great plugin! It allows for a lot more customization than the standard shortcakes without having to write your own css!

    One question though – why doesn’t it work in the visual text editor of the widgets? This would be so helpful it if also worked in widgets!

    Thanks,
    Toni

  20. mohamed says

    thanks for your article…i install it and worked well except for the url. for example : when i write in the url (www.example.com) and publish my post and go to press the button , i found the button rfere to (www.example.net/www.example.com). how to solve this problem?

  21. Alec says

    Hi! – is it possible to place several buttons side by side in a row? (with different items) – and how does the reference work?

  22. Jenny says

    Hello there!

    This is very useful, but is there any way to use a custom image as a button rather than the options that come with the plugin? I have button images that I’ve downloaded from, and I’d like to use those instead because the logo is familiar to my site visitors.

    Warmly,
    Jenny

  23. Karan Bhagat says

    Hey, I have been using this plugin for more than 2 of my sites and installed it on one more, it was working fine till yesterday, but suddenly now it has stopped working, it is showing any button in the toolbar to add these buttons to post. I deleted and reinstalled it, still facing the issue. Help please

  24. Blake says

    How can i add things to the dropdown menu in the editor? i want things like Font size, buttons, or what ever else i chose to put there without using a plugin, is there anyway to do this?

  25. Nancy says

    Thank you! Again! I was searching all over the internet for help with button shortcodes. Couldn’t get them to work. As always, you have the simple answer. I can stop looking any place else for WordPress help!

  26. bryan midgett says

    How do I get the buttons on one line instead of vertical? I tried putting between buttons, but the tag prints. When I put my buttons side by side, they run together. Help!

  27. Prasad Saxena says

    I want a button to be displayed with each post on the main page of the website, which says go to the website. It should be just beside read more. I did get the button, but i dont know how to configure it so that each post has a different linking url.
    Also the url can be inserted from the post itself. I mean while writing it. Just a box below, a text box where you can put the link to the button.
    Please help….

  28. CEA says

    I installed the plugin and activated it, but am not seeing any change to my editor. I am using WP 4.0. What am I missing? Please help!

  29. Bal Chandra Dhawan says

    I added this button today but URL didn’t work.
    I added to page xyz.com/policies and add URL xyz.com/registration,
    on clicking it says page not found and in address bar I see. xyz.com/policies/xyz.com/registration. Its adding existing page URL ?
    Don’t know why?

  30. Bill Gibson says

    One problem: I guess it is a link underline that is going through the button text (almost like a strikeout). I have tried smallest and largest button sizes and the line is always through the text. I even tried to add “no decoration” to the style manually and that was ignored. Could this be theme specific? Thanks.

  31. Seo service says

    I just installed this plugin and I adore it! I
    already am putting it to good use on my blog. Thanks so much for the heads-up
    on this.

  32. Prishan Latchman says

    Is there a button that will allow me to add a specific amount of money to it so that when it is clicked it will increase the current value by that set amount?

    E.G. The button is set to an amount for R20.00 and the item (a pair of shoes) for R100.00 and every time someone clicks on the button the price for the shoes goes up by R20.00 to R120.00

  33. Brenda Malone says

    Thanks for the heads-up on this excellent plugin! I have installed on my sites AND donated to the author.

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。