特定のカテゴリに属する投稿へ、同じスマートフォン用追従CTAをまとめて表示します。
例えば、「ホームページ集客」というカテゴリの記事だけに、無料相談のCTAを表示できます。
同じカテゴリで新しい投稿を公開した場合も、投稿にカテゴリを設定するだけで、自動的にCTAの表示対象になります。
CTAのコードは「WPCode Lite」で一括管理します。見出し、色、リンク先などを変更するときも、各投稿を1つずつ修正する必要はありません。
コードを自分で書く必要もありません。AIが作った完成コードをWPCode Liteへ貼り付け、表示するカテゴリを画面上で選びます。
1ページだけに表示する方法との違い
| 表示したい範囲 | 使用する方法 |
|---|---|
| 特定の1ページだけ | 対象ページのカスタムHTMLブロック |
| 特定カテゴリの記事すべて | WPCode Lite |
スマートフォン用追従CTAをまだ作っていない場合は、先に次の手順でCTAの内容と完成コードを準備してください。
最初に準備するもの
WPCode Liteの設定を始める前に、次の2つを準備します。
- AIに作ってもらったスマホ用追従CTAの完成コード
- CTAを表示したいカテゴリの名前
カテゴリ名を確認する
- WordPressの管理画面へログインします。
- 左側メニューの「投稿」をクリックします。
- 「カテゴリー」をクリックします。
- CTAを表示したいカテゴリの名前を確認します。
例えば、「ホームページ集客」「AI活用」「店舗集客」など、WordPressへ登録しているカテゴリ名を使います。
WPCode Liteをインストールする
WordPressの管理画面から、無料版のWPCode Liteをインストールします。
- 左側メニューの「プラグイン」をクリックします。
- 「新規プラグインを追加」をクリックします。
- 検索欄へ「WPCode」と入力します。
- 「WPCode – Insert Headers and Footers + カスタムコードスニペット – WordPress コードマネージャー」を探します。
- 「今すぐインストール」をクリックします。
- インストール後に「有効化」をクリックします。
有効化すると、WordPress管理画面の左側に「コードスニペット」というメニューが追加されます。
有料版への案内が表示される場合がありますが、基本的なカテゴリ指定はWPCode Liteで進めます。
検索結果で迷った場合は、WordPress公式ディレクトリのWPCodeページでプラグイン名を確認してください。
新しいCTAを登録する
- 左側メニューの「コードスニペット」をクリックします。
- 「スニペットを追加」をクリックします。
- 「カスタムコード (新規スニペット) を追加」を探します。
- 「スニペットを使用」をクリックします。
- コードの種類で「HTMLスニペット」を選びます。
以下は、WordPressの管理画面を日本語で使う場合の表示名です。WPCodeの更新によっては「スニペットを使用」が「カスタムスニペットを追加」と表示されることがあります。
CTAの名前を付ける
画面上部のタイトル欄に、対象カテゴリが分かる名前を入力します。
例えば、次のように付けます。
- スマホ追従CTA｜ホームページ集客
- スマホ追従CTA｜AI活用
- スマホ追従CTA｜店舗集客
この名前はWordPressの管理画面だけで使われます。ホームページを訪れた人には表示されません。
AIが作った完成コードを貼り付ける
「コードプレビュー」と表示されている大きな入力欄へ、AIが作った追従CTAの完成コードを貼り付けます。
コードが何行も表示されますが、内容を理解する必要はありません。
- 最初から最後まで全部コピーする
- コードの途中を自分で削除しない
- 1つの入力欄へまとめて貼り付ける
- コードの種類が「HTMLスニペット」になっていることを確認する
カテゴリの条件を設定するまでは、画面右上の状態を「無効」のままにしてください。
条件を設定する前に「有効」にすると、対象外のページにもCTAが表示される可能性があります。
コードの挿入方法を設定する
コード入力欄の下にある「挿入」まで画面を下へ動かします。
- 「挿入方法」で「自動挿入」を選びます。
- 「場所」をクリックします。
- 「サイト全体のフッター」を選びます。
「サイト全体のフッター」は、ページのフッター側でコードを読み込ませる場所です。CTAがページ本文の一番下にだけ表示されるという意味ではありません。
追従CTAは、AIが作ったコードの設定によって、スマートフォン画面の下に固定表示されます。
続けて「スマートな条件付きロジック」で、CTAを表示するカテゴリを指定します。
CTAを表示するカテゴリを指定する
カテゴリの指定には、「スマートな条件付きロジック」を使います。
設定するのは、カテゴリの一覧ページではなく、そのカテゴリに属する個別の投稿ページです。
スマートな条件付きロジックを有効にする
- 画面を下へ動かして「スマートな条件付きロジック」を開きます。
- 「ロジックを有効化」をオンにします。
- 表示方法で「表示」を選びます。
「表示」は、条件を満たすページでコードを読み込む設定です。ここでは、同じグループに入れた2つの条件を両方満たす投稿だけを対象にします。
個別の投稿ページを指定する
最初の条件を次のように設定します。中央の比較欄は、選んだ値と一致する設定を使います。
- 条件：ページタイプ
- 比較方法：指定した値と一致する設定
- ページの種類：個別の投稿/固定
この条件では、カテゴリ一覧を除き、個別の投稿と固定ページが候補になります。次にカテゴリを指定して、対象の投稿に絞ります。
カテゴリ名を指定する
1つ目の条件の下にある、ルール追加用の「＋」をクリックします。同じ条件グループ内に2つ目の条件を追加してください。「新しいグループを追加」では、別グループになってしまいます。
追加した条件を次のように設定します。中央の比較欄は、選んだカテゴリと一致する設定にします。
- 条件：タクソノミーターム
- 比較方法：指定した値と一致する設定
- 入力欄：CTAを表示したいカテゴリ名
カテゴリ名を入力すると候補が表示されます。文字を入力しただけで終わらせず、表示された候補から対象カテゴリをクリックしてください。
例えば、「ホームページ集客」カテゴリへ表示する場合は、次の2つが同じグループに入ります。
| 条件 | 意味 |
|---|---|
| ページタイプ：個別の投稿/固定 | 個別の投稿または固定ページである |
| かつ | 2つの条件を両方満たす |
| タクソノミーターム：ホームページ集客 | 「ホームページ集客」カテゴリに属している |
「ホームページ集客」カテゴリに属する個別投稿だけに、CTAが表示される設定になります。
保存して有効化する
コード、挿入位置、カテゴリの3つを設定したら、スニペットを保存して有効化します。
- 画面右上の「スニペットを保存」をクリックします。
- 指定したカテゴリ名が正しいことをもう一度確認します。
- 画面右上の切り替えを「無効」から「有効」にします。
- 「更新」をクリックします。
「有効」にすると、指定カテゴリに属する投稿でCTAが読み込まれます。
スマートフォンで表示を確認する
公開ページをスマートフォンで開いて確認します。
- 指定カテゴリに属する投稿を開きます。
- 10秒以上待ちます。
- ページを1〜2画面ほど下へ動かします。
- 画面下にCTAが表示されることを確認します。
- ボタンを押し、正しいページが開くことを確認します。
- 指定していないカテゴリの投稿も開き、CTAが表示されないことを確認します。
同じカテゴリの記事を2〜3ページ開き、すべてにCTAが表示されるか確認してください。
別のカテゴリにもCTAを作る
別のカテゴリに違うCTAを表示する場合は、そのカテゴリ用のスニペットを新しく作ります。
例えば、次のようにカテゴリごとに分けます。
| スニペット名 | 表示するカテゴリ | 案内先 |
|---|---|---|
| スマホ追従CTA｜ホームページ制作 | ホームページ制作 | ホームページ制作の相談ページ |
| スマホ追従CTA｜AI活用 | AI活用 | AI講座の案内ページ |
1つのスニペットに複数のCTAを入れず、1カテゴリにつき1つのスニペットを作ると管理しやすくなります。
複数のCTAを作るときはAIへ名前の重複を防いでもらう
カテゴリごとに違う追従CTAを作る場合は、それぞれのコードで使う名前が重ならないようにする必要があります。
難しい設定はAIに任せられます。新しいCTAを作るときは、現在使用しているコードもAIへ送り、次のように依頼してください。
WPCode Liteへ登録する、スマートフォン用追従CTAの完成コードを作ってください。
すでに別の追従CTAを使用しています。複数のCTAが同じ投稿で読み込まれても不具合が起きないように、ID、クラス名、保存に使う名前を、現在のコードと重ならないものにしてください。
新しいCTAを表示するカテゴリ：○○
案内先のURL：○○
見出し：○○
補足文：○○
ボタンの文章：○○
希望する色：○○WPCode Liteの「HTMLスニペット」へそのまま貼り付けられる完成コードを、途中で省略せず、1つのコード欄にまとめてください。
現在使用しているコード：
ここへ現在のコードを貼り付けます。
CTAが表示されない場合
スニペットが「有効」になっていますか？
WPCodeの画面右上の切り替えが「無効」の場合、コードは読み込まれません。「有効」に変更して「更新」をクリックしてください。
挿入方法が「自動挿入」になっていますか？
「ショートコード」になっている場合は自動表示されません。「自動挿入」を選び、場所を「サイト全体のフッター」にします。
スマートな条件付きロジックが有効になっていますか？
「ロジックを有効化」がオフの場合、指定カテゴリだけに表示する設定が働きません。オンになっているか確認してください。
「表示」を選んでいますか？
「非表示」を選ぶと、条件に合う投稿でCTAを隠す設定になります。指定カテゴリだけに表示する場合は「表示」を選びます。
カテゴリの候補をクリックしましたか？
カテゴリ名は、入力した後に表示される候補から選びます。文字を入力しただけの状態になっていないか確認してください。
投稿に対象カテゴリが設定されていますか？
対象の投稿を編集し、右側の「カテゴリー」で正しいカテゴリにチェックが入っているか確認してください。
2つのCTAが同時に表示されていませんか？
1つの投稿に複数のカテゴリが設定され、それぞれのカテゴリ用CTAが有効になっていると、2つのCTAが同時に読み込まれる場合があります。
その場合は、投稿のカテゴリを整理するか、表示条件を見直し、1つの投稿に表示されるCTAが1つになるようにします。
一度「×」で閉じていませんか？
一度閉じると、同じスマートフォンでは24時間表示されない設定です。ブラウザのシークレットモードやプライベートブラウズで確認してください。
キャッシュが残っていませんか？
WPCodeの設定を変更しても、以前の表示が残る場合があります。
- 公開ページを再読み込みする
- ブラウザを一度閉じる
- シークレットモードで確認する
- WordPressやキャッシュ系プラグインのキャッシュを削除する
CTAの内容を変更する
見出し、ボタンの文章、色、リンク先などを変更するときは、カテゴリ内の投稿を編集する必要はありません。
- WordPress管理画面で「コードスニペット」を開きます。
- 変更したいCTAのスニペット名をクリックします。
- 現在のコードをコピーしてAIへ送ります。
- AIに変更後の完成コードを作ってもらいます。
- WPCodeの古いコードを、新しい完成コードへ入れ替えます。
- 「更新」をクリックします。
1か所を更新すると、そのカテゴリでCTAを表示しているすべての投稿へ変更が反映されます。
最後に確認しましょう
- CTAを表示するカテゴリ名を確認した
- WPCode Liteをインストールして有効化した
- 新しいHTMLスニペットを作成した
- AIが作った完成コードを全部貼り付けた
- 挿入方法を「自動挿入」にした
- 場所を「サイト全体のフッター」にした
- スマートな条件付きロジックを有効にした
- 表示方法を「表示」にした
- ページタイプを「個別の投稿/固定」にした
- タクソノミータームで対象カテゴリを選んだ
- スニペットを「有効」にした
- 対象カテゴリと対象外カテゴリの両方で表示を確認した
以上で、WPCode Liteを使ったカテゴリごとのスマートフォン用追従CTA設定は完了です。
同じカテゴリで投稿を追加するときは、投稿へ対象カテゴリを設定します。WPCodeを編集し直さなくても、新しい投稿がCTAの表示対象になります。