WordPressの投稿やページにコールトゥアクションボタンを追加することで、コンバージョンを高めることができます。これらのボタンは人目を引き、ユーザーに特定の行動を取るように指示します。
例えば、価格ページ、製品ページ、サービスページに訪問者を誘導するために使用することができます。また、特別オファーや新製品、アフィリエイトリンクを宣伝することもできます。
この投稿では、WordPressに美しいコール・トゥ・アクション・ボタンを追加する方法を紹介する。一番の特徴は、コードを書く必要がないことだ。
これらの効果的なボタンを使って、WordPressサイトを強化する簡単な方法を探ってみましょう。
注：この投稿は、WordPressでカスタム・コール・トゥ・アクション・ボタンを追加するためのものです。ソーシャルメディアボタンを追加したい場合は、WordPressにソーシャルシェアボタンを追加するガイドを参照してください。
WordPressの投稿とページにボタンを追加する（ステップバイステップ）
WordPressでは、ビルトインButtonブロックでボタンを簡単に追加できます。これは、Gutenberg WordPressブロックエディターで導入された機能です。
WordPressのブログ投稿やページにコールトゥアクションボタンを追加する複数の方法をご紹介します。あなたのニーズに最も適したソリューションを選択することができます。
この投稿を読み進めるには、以下の目次をご利用いただきたい：
コンテンツの目次
動画チュートリアル
動画が気に入らなかったり、もっと説明が必要な場合は、このまま読み進めてください。
初期設定エディターを使ってWordPress投稿/ページにボタンを追加する
私たちの経験では、この方法は簡単で、すべてのユーザーにお勧めします。WordPressブロックエディターのビルトイン「ボタン」ブロックを使用します。クラシックエディターを使用している場合は、次のセクションに進んでください。
まず、ボタンを追加したい投稿を新規作成するか、既存の投稿を編集する必要があります。
投稿編集画面で「+」アイコンをクリックし、「レイアウト要素」セクションから「ボタン」ブロックを選択します。
次に、コンテンツエディターにボタンブロックが追加されているのが見えるはずです。
テキストを追加…」エリアをクリックし、ボタンテキストを入力してください。
その後、ツールバーのリンクボタンをクリックしてリンクを追加する。
投稿やページを検索したり、リンク欄にURLをコピー＆ペーストするだけでもOK。
完了したら、「Enter」キーを押すか、「Apply」アイコンを押してリンクを保存します。
ボタンを中央に表示したい場合は、「Justify」アイコンをクリックし、「Justify Center」を選択します。また、ツールバーからボタンの垂直方向の配置を変更することもできます。
次に、右側のブロック設定パネルから、ボタンのスタイルをカスタマイズし、テキストと背景色を変更することができます。
ブロック設定の「スタイル」タブに切り替えるだけで、ボタンのスタイルを調整できます。
ボタンのスタイルは、初期設定、アウトライン、スクエアの3種類から選べます。それぞれをクリックして試してみて、最適なものを選んでください。
カラー設定セクションには、ボタンの背景とテキストの両方に5つのカラーバリエーションがあります。それだけでなく、’カスタムカラー’オプションをクリックすることで、お好みのカスタムカラーを使用することもできます。
ボタンのデザインに満足したら、投稿を保存するか、公開してライブプレビューを見ることができます。
これがデモサイトでの様子です。
ボーナス：ボタンのパフォーマンスを確認したい場合は、MonsterInsightsを使用することをお勧めします。アフィリエイトリンク、アウトバウンドリンク、カスタムイベントのイベントトラッキングがビルトインされているので、ボタンのパフォーマンスを確認することができます。詳しくは、WordPressでトラッキングすべき重要なマーケティング指標をご覧ください。
クラシックエディターでWordPressボタンを作成する
初期設定のWordPressブロックエディターは、現代的で、より速く、より簡単です。 一部のユーザーはまだ古いクラシックWordPressエディターを使用しています。
クラシックWordPressエディターの使用はお勧めしません。これは時代遅れで、ユーザーが素晴らしいコンテンツを作成するのに十分な機能を備えていません。もしまだ使用しているのであれば、エディターをオフにしてブロックエディターを使い始めることをお勧めします。
一方で、それでも使いたいというユーザーもいるだろう。その場合、WordPressサイトにボタンを追加する別のソリューションが必要になります。
WordPress Classicエディターでボタンを追加するには、3つのオプションがあります：
- WordPressにHTML / CSSコードでボタンを追加します。
- WordPressのボタンショートコードプラグインを使ってボタンを追加します。
- WordPressでショートコードを使わずにボタンを追加する。
3つのオプションのうち、最初のものはコーディングの方法です。HTML / CSSコードを記述し、ボタンが必要な場所にサイトに追加する必要があります。初心者に優しい方法とは言えません。
2番目のオプションは、最もよく使われる方法です。WordPressのボタンプラグインのほとんどが、ボタンを追加するためのショートコードを提供しているからだ。
ショートコードを覚えることなく、投稿やページに簡単にボタンを追加することができるため、3番目のオプションが最適です。
WordPressでショートコードを使わずにボタンを追加する方法を見てみよう。
最初に行う必要があるのは、Forget About Shortcode Buttonsプラグインをインストールして有効化することです。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。
プラグインを有効化したら、新しい投稿を作成するか、既存の投稿を編集します。エディターで、ビジュアルエディターに’Insert Button’というラベルの新しいボタンが表示されます。
投稿に新しいボタンを挿入するには、「ボタンの挿入」アイコンをクリックする必要があります。
新しいボタンをデザインするためのポップアップウィンドウが表示されます。
まず、ボタンのテキストとURLを追加します。ボタンテキストを追加すると、下のボックスにライブプレビューが表示されます。
次に、下のチェックボックスオプションをクリックして、リンクにnofollowタグを追加し、リンクを新しいタブで開くことができます。
その後、ボタンのアイコンを選択することができます。アイコン’タブをクリックすると、ボタンのテキストの前後に追加できるアイコンが表示されます。
これらのアイコンは、実際にはアイコンフォントです（WordPress投稿エディターでアイコンフォントを使用する方法についてはこちらをご覧ください）。
次に、カラーボックスのアイコンをクリックして、ボタンの文字色と背景色を選択します。
その後、ドロップダウンメニューをクリックしてボタンのスタイルを選択します。
8種類のボタンスタイルが用意されている。
同様に、ボタンのサイズも特小から特大まで選ぶことができる。
見た目に満足したら、「更新」ボタンをクリックするだけです。
投稿エディター内で、あなたの投稿に表示されるボタンを見ることができます。
ボタンテキストを選択し、クラシックエディターのツールバーボタンを使用するだけで、ボタンの配置を設定することもできる。
ボタンをダブルクリックすると「ボタンの挿入」ポップアップが表示され、ボタンを再編集することができます。
そのデザインに満足したら、投稿を公開したり更新したりして、その動きを見てみましょう。これが、私たちのデモWordPressサイトに表示されたファンシーボタンの外観です。
WordPressにクリックトゥコールボタンを追加する
通常のコールトゥアクションボタンに加え、クリックトゥコールボタンをサイトに追加することで、リードとコンバージョンを高めることができます。
クリックトゥコールボタンは、ユーザーがタップするだけであなたのチームに電話をかけることができる、特定のタイプのコールトゥアクションボタンです。
タップ・トゥ・コールボタンを使えば、サイト訪問者は即座にあなたのチームと直接話し、必要な情報を得ることができます。見積もり依頼、販売前情報、サポートの問題など、電話による問い合わせは迅速です。
スマートフォンユーザーの増加に伴い、通話ボタンを追加することの重要性はさらに高まっている。
もしビジネスフォンを持っていないのであれば、バーチャル・ビジネス・フォン番号の取得を検討してみてはいかがだろうか。
それでは、WordPressでクリック・ツー・コール・ボタンを追加する方法を順を追って見ていきましょう。
最初に行う必要があるのは、WP Call Buttonプラグインをインストールして有効化することです。詳しい手順については、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。
有効化した後、Settings ” WP Call Buttonページにアクセスしてプラグイン設定を行い、クリックトゥコールボタンをデザインする必要があります。
最初に、[先頭固定表示]の設定が表示されます。スティッキーコールボタンは、ユーザーがサイトを閲覧する際に一緒にコールボタンを移動させる、コンバージョンに最適化された機能です。
今すぐ電話ボタンの状態を有効化することから始めます。スイッチのトグルをクリックして有効化します。
その後、電話番号を入力する必要があります。WP Call Buttonには、国コード付きの電話番号フィールドがあります。あなたの国を選択し、あなたのビジネスの電話番号を入力するだけです。
ビジネス番号をお持ちでない場合は、Nextivaから取得できます。信頼できるビジネスVoIPプロバイダーです。
次に、通話ボタンのテキストを編集し、通話ボタンの位置と色を選択できます。
また、サイト上のどこに先頭固定コールボタンを表示するかを選択できます。初期設定では、すべてのページ、すべての端末にコールボタンが表示されます。特定のページにボタンを表示したり非表示にしたり、モバイル端末のみに表示したりすることもできます。
すべてのオプションを確認したら、下部にある「変更を保存」ボタンをクリックします。その後、あなたのサイトにアクセスして、先頭固定表示ボタンが実際に表示されるのを確認できます。
スティッキー呼び出しボタンの他に、このプラグインを使ってWordPressのページ、投稿日、サイドバーに静的呼び出しボタンを追加することもできます。
WordPressのブロックエディターを使用している場合、WP Call Buttonブロックを使用してページに今すぐ電話ボタンを簡単に追加できます。
新規ページを作成するか、既存のページを編集し、ページエディターを使ってWP Call Buttonブロックを追加します。
その後、ボタンのテキスト、ボタンの色、テキストの色、フォントサイズをカスタマイズし、電話アイコンを表示または非表示にすることができます。
デザインに満足したら、ページを公開したり更新したりできます。
クラシックWordPressエディターを使用している場合は、ショートコードを取得するためにStatic Call Buttonジェネレータを使用する必要があります。
Settings ” WP Call Buttonに移動し、上部にある’Static Call Button’メニューをクリックしてください。
ボタンのオプションをカスタマイズし、ショートコードをコピーするだけです。その後、あなたのサイトの投稿やページでショートコードを使用することができます。
WP Call Buttonプラグインは、WordPressのサイドバーやその他のウィジェット対応エリアにコールボタンを追加することもできます。
外観 ” ウィジェットにアクセスし、コールボタンを表示したいウィジェット対応エリアにWPコールボタンウィジェットをドラッグするだけです。
高度な設定セクションから、タイトル、説明を追加し、コールボタンをカスタマイズできます。完了したら、ウィジェットを保存してください。
以上です！より詳細なチュートリアルをご覧になりたい場合は、WordPressでクリックトゥコールボタンを追加する方法のステップバイステップガイドをご覧ください。
WordPressでカスタムボタンを追加するボーナス・ヒント
行動喚起ボタンを追加するだけでは必ずしも十分ではありません。ヒーロー画像、メニュー、カスタムレイアウトでページや投稿をカスタマイズしたい場合もあるでしょう。
その場合は、SeedProdや Thrive ArchitectのようなドラッグアンドドロップWordPressページビルダープラグインを使用することをお勧めします。
これらのページビルダーを使えば、思い通りのコールトゥアクションボタンを備えたカスタムランディングページを作成することができます。
何をするにしても、ボタンがどのように機能しているかをトラッキングすることが重要だ。
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.
Carolyn R Cox
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
That would be something that heavily depends on your specific use case and would likely require developer assistance.
管理者
Roger Meachem
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.
WPBeginner Support
Glad our guide was able to help
管理者
Meha Jain
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
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.
管理者
Dreamlife
Thanks for the post. How can I create download button with wordpress premium?
WPBeginner Support
Sadly, for WordPress.com you would need to check with their support for what is currently allowed
管理者
Rick Hoffarth
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?
Daniel
Ok, so I know how to make a download button now, but how do I actually make that download happen ?
Thank you!
Mark Bologna
This was just what I needed. Read the article, downloaded the plugin, and had a working button all within ten minutes. Thanks!
Debbie
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!
Nina
Not great… styling is very limited
Utkarsh Agarwal
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.
Jen Lewis
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?
WPBeginner Support
Hi Jen,
You are probably using WordPress.com’s free plan. Please see our guide on the difference between self hosted WordPress.org vs free WordPress.com blog.
管理者
Daniel
It works on sidebar as well? I need to know, thanks!
Mike Ritter
This plugin has been pulled from the library.
Jolynn Powers
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.
Furquan
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
Aachal
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?
bill
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 ???
Bridget
Hi!
Can I link this to plugin contact form 7? If so, how?
Thanks!
Alysha
Thanks for this! Looks great, but is there anyway to use this plugin to add a button to the header on the homepage?
Toni
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
Wolf
Thank you!! Spent ages looking for something simple like this. Should have known to come here first
mohamed
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?
WPBeginner Support
Yep, seems like an issue with the plugin. Please try adding full url like this https://www.wpbeginner.com
管理者
Altaf
Thank You Bhai i am Done Now and Solve my Wordpress issue
John
Thank you. This is exactly what I was looking for!
Alec
Hi! – is it possible to place several buttons side by side in a row? (with different items) – and how does the reference work?
Eric
I want to allow users to upload any image using Insert Image button. Will this work in that case?
Yonatan
Will this work on a sidebar as well ?
Jenny
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
Karan Bhagat
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
Blake
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?
WPBeginner Support
You can use TinyMCE Advanced plugin for that.
管理者
Nancy
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!
bryan midgett
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!
Sacha
Thanks for the helpful information!
Prasad Saxena
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….
WPBeginner Staff
Please make sure you are writing your post in the Visual Editor mode. The button does not appear in the text editor.
CEA
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!
Bal Chandra Dhawan
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?
Sarah McLain
Very helpful! Thank you
WPBeginner Staff
It could be. Did you check by switching to a default theme?
Bill Gibson
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.
Seo service
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.
WPBeginner Staff
No sorry this plugin is not supposed to do that.
Prishan Latchman
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
bucur
very good this plugin, I like it 5 stars
Brenda Malone
Thanks for the heads-up on this excellent plugin! I have installed on my sites AND donated to the author.
Rostislav Sofronov
This plugin is useful tool, rated to 5
WPBeginner Staff
Thanks for writing such a useful plugin.
Henderson Daniel
Thanks for the information. very helpful.
Ross
Thanks for covering our plugin!
Víctor de la Iglesia
So great! It is what I was searching!!!
Carolann
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. I adore your website too!