WordPressの特定の記事や固定ページだけに、スマートフォン用の追従CTAを設置します。
追従CTAとは、ページを下へスクロールしても、スマートフォン画面の下に表示され続ける案内ボタンです。
例えば、次のようなページへ案内できます。
- お問い合わせページ
- 無料相談の申し込みページ
- 予約ページ
- LINEの登録ページ
- 商品やサービスの詳細ページ
難しいコードを自分で書く必要はありません。
必要なコードはChatGPTやGeminiなどのAIに作ってもらいます。AIが作ったものをコピーし、WordPressの決められた場所へ貼り付ければ設置できます。
作業は、次の流れで進めます。
- 追従CTAの内容を決める
- AIに完成コードを作ってもらう
- AIが作ったコードを全部コピーする
- WordPressの対象ページへ貼り付ける
- スマートフォンで表示を確認する
CTAが表示される範囲
コードを貼り付けた1ページだけに追従CTAが表示されます。
例えば、「サービスAの紹介ページ」にコードを貼り付けた場合、追従CTAが表示されるのは、そのページだけです。ほかの投稿や固定ページには表示されません。
次のような場合に向いています。
- 特定の商品紹介ページだけに購入ボタンを表示したい
- 特定のサービス紹介ページだけに相談ボタンを表示したい
- まずは1ページだけで追従CTAを試したい
複数のページに同じCTAをまとめて表示する場合や、特定のカテゴリだけに表示する場合は、「WPCode Lite」を使います。
最初に決める4つの内容
AIへ依頼する前に、次の4つを決めます。
- CTAを表示するページ
- CTAから案内するページのURL
- CTAに表示する文章
- CTAの色
1．CTAを表示するページ
追従CTAを表示したい投稿または固定ページを1つ選びます。
そのページを読んでいる人が、次に知りたくなる内容や、次に取りたくなる行動を考えて選びましょう。
例えば、サービスの説明ページであれば、次のような案内が考えられます。
- 詳しい料金を見る
- 無料相談を申し込む
- お問い合わせをする
- 空き状況を確認する
2．CTAから案内するページのURL
CTAのボタンを押したときに開くページのURLを準備します。
案内先のページをブラウザで開き、画面上部のアドレス欄に表示されているURLを最初から最後までコピーしてください。
URLは、次のように「https://」から始まる形になります。
https://example.com/contact/3．CTAに表示する文章
追従CTAには、次の3つの文章を表示します。
- 見出し：何を案内しているか
- 補足文：行動するメリットや安心材料
- ボタンの文章：押すと何ができるか
例えば、無料相談へ案内する場合は次のようにします。
- 見出し：迷ったら、まずは無料相談
- 補足文：相談だけでも無料です
- ボタン：無料相談の内容を見る
文章が思いつかない場合も、AIに提案してもらえます。
4．CTAの色
サイトでよく使っている色や、ボタンに使いたい色を決めます。
色の名前だけでも問題ありません。
- 緑
- 青
- オレンジ
- サイトのロゴに近い色
色が分からない場合は、「サイトになじむ色にしてください」とAIへ伝えます。
AIにCTAの文章とコードを作ってもらう
4つの内容が決まったら、ChatGPTまたはGeminiを開きます。
次の依頼文をコピーし、「○○」の部分を自分の内容へ書き換えて送信してください。
WordPressの特定の1ページだけに表示する、スマートフォン用の追従CTAを作ってください。
私はホームページ初心者で、HTMLやCSSなどのコードは分かりません。WordPressの「カスタムHTML」ブロック1つに、そのまま貼り付けられる完成コードを作ってください。
CTAを表示するページの内容：○○
案内する商品・サービス：○○
案内先のURL：○○
CTAの目的：お問い合わせ・予約・申し込み・LINE登録など
見出し：○○（決まっていなければ提案してください）
補足文：○○（決まっていなければ提案してください）
ボタンの文章：○○（決まっていなければ提案してください）
希望する色：○○次の条件で作ってください。
- スマートフォンだけに表示する
- 画面の下に固定して表示する
- ページを開いてすぐには表示しない
- ページを開いて10秒以上たち、少しスクロールしてから表示する
- 閉じるための「×」ボタンを付ける
- 一度閉じたら、同じ端末では24時間表示しない
- 本文の同じリンクが画面に見えている間は一時的に隠す
- スマートフォンで本文を隠しすぎない大きさにする
- 外部の素材や有料サービスは使わない
完成コードは途中で分けず、1つのコード欄にまとめてください。WordPressへ貼り付けるコード以外は、コード欄の中に入れないでください。
AIから返ってきたコードは理解しなくても大丈夫です
AIへ依頼すると、英数字や記号が並んだ長いコードが表示されます。
見慣れない表示ですが、一つひとつの意味を理解する必要はありません。追従CTAの見た目や動きを、WordPressへ伝えるための設定です。
大切なのは、次の2点です。
- コードの最初から最後までを全部コピーする
- コードの途中を自分で削除したり書き換えたりしない
AIの回答に、コードの右上へ「コピー」と表示されている場合は、そのボタンを押すと全文をコピーできます。
WordPressでCTAを表示するページを開く
コードをコピーしたら、WordPressの管理画面を開きます。
- WordPressの管理画面へログインします。
- 左側メニューの「投稿」をクリックします。
- 「投稿一覧」をクリックします。
- CTAを表示したい投稿を探します。
- 投稿のタイトルをクリックして編集画面を開きます。
固定ページへ表示する場合は、「投稿」ではなく「固定ページ」をクリックし、対象のページを開いてください。
選択したページだけに、追従CTAが表示されます。
「カスタムHTML」ブロックを追加する
編集画面を開いたら、AIが作ったコードを貼り付ける場所を作ります。
WordPressでは、この貼り付け場所を「カスタムHTML」ブロックと呼びます。名前は難しそうですが、AIが作ったコードを入れるための箱と考えれば大丈夫です。
- ページの一番下をクリックします。
- 「＋」ボタンをクリックします。
- 検索欄へ「カスタムHTML」と入力します。
- 表示された「カスタムHTML」をクリックします。
「カスタムHTML」と書かれた入力欄が追加されます。
ページの一番下へ追加しても、CTA自体はスマートフォン画面の下に表示されます。ページの一番下に置くのは、あとから設定を見つけやすくするためです。
AIが作ったコードを貼り付ける
追加した「カスタムHTML」ブロックをクリックし、先ほどコピーしたコードを貼り付けます。
コードが何行も表示されますが、問題ありません。
次の点に注意してください。
- コードは最初から最後まで貼り付ける
- 1つのカスタムHTMLブロックへまとめて貼る
- 通常の「段落」ブロックには貼らない
- 「コード」ブロックではなく「カスタムHTML」ブロックを使う
- 分からない部分を自分で削除しない
プレビューで表示を確認する
コードを貼り付けたら、すぐに公開せず、最初にプレビューで確認します。
- 画面右上の「プレビュー」をクリックします。
- 「新しいタブでプレビュー」を選びます。
- 表示されたページをスマートフォンで開きます。
- 10秒以上待ちます。
- ページを1〜2画面ほど下へ動かします。
- 画面の下にCTAが表示されることを確認します。
パソコンには表示されない設定なので、スマートフォンで確認してください。
スマートフォンでプレビューを開くのが難しい場合は、一度ページを更新してから、公開ページをスマートフォンで確認してもかまいません。
公開前に確認する内容
CTAが表示されたら、次の内容を確認します。
- 見出しやボタンの文章に間違いがない
- 文章が途中で切れていない
- CTAが大きすぎず、本文を隠しすぎていない
- ボタンを押すと正しいページが開く
- 「×」ボタンで閉じられる
- パソコンでは表示されない
- コードを貼っていない別のページには表示されない
問題がなければ、WordPressの編集画面へ戻り、画面右上の「更新」または「公開」をクリックします。
文章や色を変更したい場合もAIに頼む
文章、色、大きさなどを変更したくなった場合も、コードを自分で直す必要はありません。
現在使っているコードをAIへ送り、変更したい内容を伝えます。
次の依頼文を使ってください。
次のコードは、WordPressのカスタムHTMLブロックに貼り付けているスマートフォン用追従CTAです。
私はコードを編集できないため、次の内容を変更した完成コードを、最初から最後まで作り直してください。
変更したい内容：○○
変更したくない内容：○○WordPressのカスタムHTMLブロック1つに、そのまま貼り付けられる形にしてください。完成コードは途中で省略せず、1つのコード欄にまとめてください。
現在のコード：
ここへ現在使用しているコードを貼り付けます。
新しいコードができたら、WordPressに貼ってある古いコードをすべて選択し、新しいコードへ入れ替えます。
一部分だけを修正するより、AIに完成コードを作り直してもらい、全体を入れ替える方が初心者には分かりやすく、貼り間違いも防ぎやすくなります。
CTAが表示されないときの確認方法
スマートフォンで確認していますか？
作成するCTAはスマートフォン専用です。パソコンでは表示されません。
ページを開いてから10秒以上待ちましたか？
ページを開いた直後には表示されません。10秒以上待ってから確認してください。
ページを下へ動かしましたか？
時間がたっただけでは表示されない設定です。ページを1〜2画面ほど下へ動かしてください。
一度「×」で閉じていませんか？
一度閉じると、同じスマートフォンでは24時間表示されません。すぐに確認したい場合は、ブラウザのシークレットモードやプライベートブラウズで開いてください。
「カスタムHTML」ブロックへ貼りましたか？
通常の「段落」や「コード」というブロックへ貼っても、CTAとして動かない場合があります。必ず「カスタムHTML」ブロックへ貼り付けてください。
コードを全部コピーしましたか？
最初や最後の部分が欠けていると、正しく動きません。AIが作ったコードを最初から最後までコピーし直してください。
変更前の表示が残っていませんか？
WordPressやブラウザに古い表示が残っている場合があります。次の方法を試してください。
- 公開ページを再読み込みする
- ブラウザを一度閉じて開き直す
- シークレットモードで確認する
- WordPressのキャッシュを削除する
保存した後にコードが消えていませんか？
WordPressの権限やセキュリティ設定によっては、貼り付けたコードの一部が保存時に消えることがあります。
保存後にカスタムHTMLブロックを開き、貼り付けたコードが残っているか確認してください。消えている場合は、WordPressの管理者またはホームページの制作担当者へ確認します。
AIへ相談するときは画面の状態を伝える
うまく表示されない場合は、「動きません」だけではなく、現在の状態をAIへ伝えると解決しやすくなります。
次の内容を伝えてください。
- 使用しているWordPressテーマの名前
- スマートフォンの種類
- 使用しているブラウザ
- どの段階まで作業できたか
- 画面に何が表示されているか
- 現在WordPressへ貼り付けているコード
画面のスクリーンショットも一緒に送ると、状況が伝わりやすくなります。
最後に確認しましょう
- CTAを表示するページを1つ決めた
- 案内先のURLを準備した
- 見出し、補足文、ボタンの文章を決めた
- AIにWordPress用の完成コードを作ってもらった
- AIのコードを最初から最後までコピーした
- 対象ページに「カスタムHTML」ブロックを追加した
- コードを1つのブロックへ貼り付けた
- スマートフォンで表示を確認した
- ボタンから正しいページが開いた
- コードを貼っていないページには表示されないことを確認した
以上で、特定の1ページだけに表示するスマートフォン用追従CTAの設置は完了です。
コードの内容を理解したり、自分で書き換えたりする必要はありません。「AIに完成形を作ってもらう」「全文をコピーする」「WordPressのカスタムHTMLブロックへ貼り付ける」という3つを覚えておきましょう。
同じ追従CTAを複数のページへまとめて表示する場合や、特定のカテゴリだけに表示する場合は、「WPCode Lite」を使って設定します。