WPCode Liteでカテゴリごとにスマホ用・追従CTAを表示する方法

特定のカテゴリに属する投稿へ、同じスマートフォン用追従CTAをまとめて表示します。

例えば、「ホームページ集客」というカテゴリの記事だけに、無料相談のCTAを表示できます。

同じカテゴリで新しい投稿を公開した場合も、投稿にカテゴリを設定するだけで、自動的にCTAの表示対象になります。

CTAのコードは「WPCode Lite」で一括管理します。見出し、色、リンク先などを変更するときも、各投稿を1つずつ修正する必要はありません。

コードを自分で書く必要もありません。AIが作った完成コードをWPCode Liteへ貼り付け、表示するカテゴリを画面上で選びます。

1ページだけに表示する方法との違い

表示したい範囲	使用する方法
特定の1ページだけ	対象ページのカスタムHTMLブロック
特定カテゴリの記事すべて	WPCode Lite

スマートフォン用追従CTAをまだ作っていない場合は、先に次の手順でCTAの内容と完成コードを準備してください。

特定の1ページだけにスマホ用・追従CTAを表示する方法

最初に準備するもの

WPCode Liteの設定を始める前に、次の2つを準備します。

AIに作ってもらったスマホ用追従CTAの完成コード
CTAを表示したいカテゴリの名前

カテゴリ名を確認する

WordPressの管理画面へログインします。
左側メニューの「投稿」をクリックします。
「カテゴリー」をクリックします。
CTAを表示したいカテゴリの名前を確認します。

例えば、「ホームページ集客」「AI活用」「店舗集客」など、WordPressへ登録しているカテゴリ名を使います。

WPCode Liteをインストールする

WordPressの管理画面から、無料版のWPCode Liteをインストールします。

左側メニューの「プラグイン」をクリックします。
「新規プラグインを追加」をクリックします。
検索欄へ「WPCode」と入力します。
「WPCode – Insert Headers and Footers + Custom Code Snippets」を探します。
「今すぐインストール」をクリックします。
インストール後に「有効化」をクリックします。

有効化すると、WordPress管理画面の左側に「Code Snippets」または「コードスニペット」というメニューが追加されます。

有料版への案内が表示される場合がありますが、基本的なカテゴリ指定はWPCode Liteで進めます。

検索結果で迷った場合は、WordPress公式ディレクトリのWPCodeページでプラグイン名を確認してください。

新しいCTAを登録する

左側メニューの「Code Snippets」をクリックします。
「Add Snippet」または「スニペットを追加」をクリックします。
「Add Your Custom Code (New Snippet)」を探します。
「Use Snippet」をクリックします。
コードの種類で「HTML Snippet」を選びます。

画面の表示言語やWPCodeのバージョンによって、項目が日本語または英語で表示される場合があります。

CTAの名前を付ける

画面上部のタイトル欄に、対象カテゴリが分かる名前を入力します。

例えば、次のように付けます。

スマホ追従CTA｜ホームページ集客
スマホ追従CTA｜AI活用
スマホ追従CTA｜店舗集客

この名前はWordPressの管理画面だけで使われます。ホームページを訪れた人には表示されません。

AIが作った完成コードを貼り付ける

「Code Preview」または「コードプレビュー」と表示されている大きな入力欄へ、AIが作った追従CTAの完成コードを貼り付けます。

コードが何行も表示されますが、内容を理解する必要はありません。

最初から最後まで全部コピーする
コードの途中を自分で削除しない
1つの入力欄へまとめて貼り付ける
コードの種類が「HTML Snippet」になっていることを確認する

カテゴリの条件を設定するまでは、画面右上の状態を「Inactive」のままにしてください。

条件を設定する前に「Active」にすると、対象外のページにもCTAが表示される可能性があります。

コードの挿入方法を設定する

コード入力欄の下にある「Insertion」または「挿入」まで画面を下へ動かします。

「Insert Method」で「Auto Insert」を選びます。
「Location」をクリックします。
「Site Wide Footer」を選びます。

「Site Wide Footer」は、各ページの読み込みが終わる直前にコードを読み込ませる場所です。CTAがページ本文の一番下にだけ表示されるという意味ではありません。

追従CTAは、AIが作ったコードの設定によって、スマートフォン画面の下に固定表示されます。

続けて「Smart Conditional Logic」で、CTAを表示するカテゴリを指定します。

CTAを表示するカテゴリを指定する

カテゴリの指定には、「Smart Conditional Logic」を使います。

設定するのは、カテゴリの一覧ページではなく、そのカテゴリに属する個別の投稿ページです。

Smart Conditional Logicを有効にする

画面を下へ動かして「Smart Conditional Logic」を開きます。
「Enable Logic」をオンにします。
表示方法で「Show」を選びます。

「Show」は、設定した条件に合う投稿だけへCTAを表示するという意味です。

個別の投稿ページを指定する

最初の条件を次のように設定します。

条件：Type of Page
比較方法：Is
ページの種類：Single Post/Page

これで、カテゴリ一覧などではなく、個別の投稿ページを表示対象にできます。

カテゴリ名を指定する

同じグループ内の「AND」または「Add New Rule」をクリックし、2つ目の条件を追加します。

追加した条件を次のように設定します。

条件：Taxonomy Term
比較方法：Is
入力欄：CTAを表示したいカテゴリ名

カテゴリ名を入力すると候補が表示されます。文字を入力しただけで終わらせず、表示された候補から対象カテゴリをクリックしてください。

例えば、「ホームページ集客」カテゴリへ表示する場合は、次の2つが同じグループに入ります。

条件	意味
Type of Page Is Single Post/Page	個別の投稿ページである
AND	2つの条件を両方満たす
Taxonomy Term Is ホームページ集客	「ホームページ集客」カテゴリに属している

「ホームページ集客」カテゴリに属する個別投稿だけに、CTAが表示される設定になります。

保存して有効化する

コード、挿入位置、カテゴリの3つを設定したら、スニペットを保存して有効化します。

画面右上の「Save Snippet」をクリックします。
指定したカテゴリ名が正しいことをもう一度確認します。
画面右上の切り替えを「Inactive」から「Active」にします。
「Update」をクリックします。

「Active」にすると、指定カテゴリに属する投稿で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 Snippet」へそのまま貼り付けられる完成コードを、途中で省略せず、1つのコード欄にまとめてください。

現在使用しているコード：
ここへ現在のコードを貼り付けます。

CTAが表示されない場合

スニペットが「Active」になっていますか？

WPCodeの画面右上が「Inactive」の場合、コードは読み込まれません。「Active」に変更して「Update」をクリックしてください。

挿入方法が「Auto Insert」になっていますか？

「Shortcode」になっている場合は自動表示されません。「Auto Insert」を選び、Locationを「Site Wide Footer」にします。

Smart Conditional Logicが有効になっていますか？

「Enable Logic」がオフの場合、指定カテゴリだけに表示する設定が働きません。オンになっているか確認してください。

「Show」を選んでいますか？

「Hide」を選ぶと、条件に合う投稿でCTAを隠す設定になります。指定カテゴリだけに表示する場合は「Show」を選びます。

カテゴリの候補をクリックしましたか？

カテゴリ名は、入力した後に表示される候補から選びます。文字を入力しただけの状態になっていないか確認してください。

投稿に対象カテゴリが設定されていますか？

対象の投稿を編集し、右側の「カテゴリー」で正しいカテゴリにチェックが入っているか確認してください。

2つのCTAが同時に表示されていませんか？

1つの投稿に複数のカテゴリが設定され、それぞれのカテゴリ用CTAが有効になっていると、2つのCTAが同時に読み込まれる場合があります。

その場合は、投稿のカテゴリを整理するか、表示条件を見直し、1つの投稿に表示されるCTAが1つになるようにします。

一度「×」で閉じていませんか？

一度閉じると、同じスマートフォンでは24時間表示されない設定です。ブラウザのシークレットモードやプライベートブラウズで確認してください。

キャッシュが残っていませんか？

WPCodeの設定を変更しても、以前の表示が残る場合があります。

公開ページを再読み込みする
ブラウザを一度閉じる
シークレットモードで確認する
WordPressやキャッシュ系プラグインのキャッシュを削除する

CTAの内容を変更する

見出し、ボタンの文章、色、リンク先などを変更するときは、カテゴリ内の投稿を編集する必要はありません。

WordPress管理画面で「Code Snippets」を開きます。
変更したいCTAのスニペット名をクリックします。
現在のコードをコピーしてAIへ送ります。
AIに変更後の完成コードを作ってもらいます。
WPCodeの古いコードを、新しい完成コードへ入れ替えます。
「Update」をクリックします。

1か所を更新すると、そのカテゴリでCTAを表示しているすべての投稿へ変更が反映されます。

最後に確認しましょう

CTAを表示するカテゴリ名を確認した
WPCode Liteをインストールして有効化した
新しいHTML Snippetを作成した
AIが作った完成コードを全部貼り付けた
Insert Methodを「Auto Insert」にした
Locationを「Site Wide Footer」にした
Smart Conditional Logicを有効にした
表示方法を「Show」にした
Type of Pageを「Single Post/Page」にした
Taxonomy Termで対象カテゴリを選んだ
スニペットを「Active」にした
対象カテゴリと対象外カテゴリの両方で表示を確認した

以上で、WPCode Liteを使ったカテゴリごとのスマートフォン用追従CTA設定は完了です。

同じカテゴリで投稿を追加するときは、投稿へ対象カテゴリを設定します。WPCodeを編集し直さなくても、新しい投稿がCTAの表示対象になります。