WordPressの記事末尾CTAはテーマに組み込む｜全記事へ自動挿入する実装

記事の下に置く「無料相談はこちら」のようなCTA。記事ごとに手で貼っていて、気づいたら数本だけ貼り忘れていました。正直、地味に消耗します。そこでテーマ側に1回だけ書いて、全記事の末尾へ自動で出す方式に変えました。本番で動いている実コードごと、貼り忘れも二重表示も起きない作り方を書きます。

結論：記事末尾CTAはテーマに1回だけ書いて、全記事へ自動で出す

やることは2つだけです。CTAの中身を template-parts/cta-neoriva.php という1ファイルにまとめ、single.php に get_template_part() を1行差す。これで全記事の末尾に同じCTAが自動で並びます。文言を直したくなったら、直すのはこの1ファイルだけ。記事を1本ずつ開き直す必要はありません。

手貼りとの違いを1枚にすると、こうなります。

CTAを手貼りする方式とテーマに1回だけ書く方式の比較図。手貼りは貼り忘れや二重表示が起きるが、テーマ組み込みは1ファイルの修正で全記事に自動反映される — 手貼りは記事が増えるほど破綻する。テーマに1回書けば全記事へ自動で出る

なぜ「手貼り」をやめたのか

記事末尾CTAを手で貼っていた頃の話です。理由は3つあって、どれも実際にやらかしました。

1つ目は貼り忘れ。記事を書き終えた達成感のまま公開ボタンを押すと、CTAのことは頭から消えています。5本に1本くらいは抜けていました。2つ目は修正地獄。CTAの電話番号やキャッチコピーを1文字変えたいだけなのに、公開済みの全記事を開いて貼り替えることになります。3つ目が一番こわくて、テーマ側の自動挿入と本文の手貼りが両方効いて、同じCTAが2連続で表示される事故です。読者からは「しつこいサイト」に見えます。

要は、CTAを「記事のデータ」として持つと破綻します。CTAは「サイト共通の部品」なので、テンプレート側に置くのが素直でした。

実装の選択肢は3つある

全記事に共通CTAを出す方法は、大きく3つに分かれます。どれが正解ということはなく、触れる範囲で選べばよいです。わたしは自作のクラシックテーマを使っているので、3つ目にしました。

方法	向いている人	弱点
プラグイン（VK / Cocoon など）	コードを触りたくない人	依存が増える・自作テーマの見た目に合わせにくい
the_content フィルタ	functions.php だけで済ませたい人	本文の文字列にHTMLが混ざる・抜粋やRSSで暴発しやすい
テンプレート直挿入（get_template_part）	テーマを自分で編集できる人	クラシックテーマ前提・PHPを1行書く

真ん中の the_content フィルタは手軽ですが、CTAのHTMLが本文テキストの一部として差し込まれます。記事一覧の抜粋やRSSフィードにまでCTAが漏れ出すことがあって、条件分岐で抑え込む手間が増えました。本文とCTAはきれいに分けておきたい。そう考えると、テンプレートに直接差す方式が一番あつかいやすかったです。

実装①：CTA本体をテンプレートパーツにする

まずCTAの見た目を template-parts/cta-neoriva.php に1ファイルとして切り出します。本番で動かしているものが、これです。

<?php
/**
 * NEORIVA 法人向け相談 CTA
 * single.php から全記事の末尾に自動挿入される（本文への手貼りは不要）。
 */
?>
<aside class="cta-neoriva" aria-label="法人向けのご案内">
  <p class="cta-neoriva__eyebrow">FOR BUSINESS</p>
  <h2 class="cta-neoriva__title">その手作業、仕組みにして無くしませんか？</h2>
  <p class="cta-neoriva__desc">
    このブログの運営元 <strong>NEORIVA</strong> は、業務自動化・AIシステムを設計・構築しています。
  </p>
  <ul class="cta-neoriva__list">
    <li>業務自動化システム構築（GAS / n8n / API連携）</li>
    <li>AI組み込み開発（Claude / Gemini / OpenAI）</li>
    <li>Web・ECサイト構築（WordPress / SWELL）</li>
  </ul>
  <div class="cta-neoriva__actions">
    <a class="btn btn--primary btn--lg" href="https://neoriva.jp/#contact"
       target="_blank" rel="noopener noreferrer">NEORIVA に無料相談する</a>
    <a class="btn btn--outline"
       href="<?php echo esc_url( home_url( '/services/' ) ); ?>">サービス内容を見る</a>
  </div>
</aside>

2点だけ補足します。外枠を <div> ではなく <aside> にして aria-label を付けているのは、これが本文とは別の「補足領域」だとスクリーンリーダーに伝えるためです。もう1点、内部リンクの href を直書きせず home_url() で組み立てているのは、ローカルと本番でドメインが変わっても壊れないようにするためでした。ここは地味に効きます。

実装②：single.php に1行差す

あとは記事テンプレート single.php で、本文を出す the_content() の直後にパーツを呼び出すだけです。

<div class="entry-content">
  <?php the_content(); ?>
</div>

<!-- NEORIVA 法人向け CTA（全記事共通） -->
<?php get_template_part( 'template-parts/cta-neoriva' ); ?>

get_template_part() は、指定したテンプレートパーツを読み込む標準関数です。第1引数にスラッグを渡すと template-parts/cta-neoriva.php を探して差し込んでくれます。置き場所は本文の直後、著者ボックスや関連記事の前。これで、どの記事を開いても同じ位置に記事末尾CTAが並びます。

single.phpのテンプレート構造図。記事本文（the_content）の直後にget_template_partでCTAを1行差し込み、著者ボックス・関連記事が続く挿入位置を示す — 差し込む場所は the_content() の直後。本文とCTAは別ブロックのまま分離する

実装③：SCSSでスタイルを当てる

見た目はクラス名に当てます。色や余白はサイト共通のデザイントークン（CSS変数）任せなので、サイト全体と自動でそろいました。

.cta-neoriva {
  margin-top: var(--sp-12);
  padding: var(--sp-8);
  background: linear-gradient(135deg, var(--color-dev-light), var(--color-surface));
  border: 1px solid var(--color-dev);
  border-radius: var(--radius-xl);

  &__list li::before { content: "✓"; color: var(--color-dev-dark); }
}

@media (max-width: 560px) {
  .cta-neoriva__actions .btn { width: 100%; } /* スマホはボタンを縦積み */
}

チェックマークは画像ではなく ::before の擬似要素で出しています。スマホ幅ではボタンを横並びから縦積みに切り替えて、指で押しやすくしました。

二重表示を防ぐ運用ルール

テーマ側で自動挿入にすると、次の落とし穴が待っています。記事本文にも同じCTAを貼ってしまうと、自動挿入ぶんと合わせて2連続で出ます。これを防ぐルールはひとつだけ。

記事本文にCTAブロックを手貼りしない（テーマが末尾に出すので不要）
CTAの文言を変えたいときは cta-neoriva.php だけを直す
特定の記事だけCTAを消したいなら、本文ではなくテンプレート側で条件分岐する

ちなみにこの記事も、末尾のNEORIVAのご案内はテーマが自動で出しています。本文には1つも貼っていません。自分の仕組みを自分で使う、いわゆるドッグフーディングです。

効果測定の準備：GA4でCTAクリックを見る

CTAは置いて終わりではなく、押されているかを見たいところです。aside.cta-neoriva の中のリンクにクラスやデータ属性を付けておけば、GA4の推奨イベント（click や外部遷移）で計測できます。正直に書くと、計測イベント自体はまだ入れていません。ここは次の宿題として、実装できたら別記事で数字ごと共有します。数字を先に語るのは、このブログの方針ではないので。

この方式が向かない場合

万能ではありません。合わない場面もあります。

ブロックテーマ（FSE）を使っている：テンプレートの編集が管理画面のサイトエディター中心になり、PHPに1行という形にはなりません。テンプレートパーツやパターンで似たことをします
記事ごとにCTAを出し分けたい：カテゴリで違うCTAを出すなら、テンプレート側の条件分岐やカスタムフィールドが要ります
そもそもテーマを触りたくない：プラグイン方式のほうが早くて安全です。無理にコードを書く場面ではありません

逆に、自作テーマや子テーマを触れる人にとっては、記事末尾CTAをこの1行で全記事に配れるのが一番ラクでした。同じ発想で多層防御の設定を入れた話はWordPressのセキュリティ対策の記事にも書いています。テーマまわりの実装は爆速開発・環境構築のカテゴリにまとめています。

まとめ

記事末尾CTAは「記事のデータ」ではなく「サイトの部品」。テーマ側に1回だけ書く
CTA本体は template-parts/cta-neoriva.php に切り出し、single.php で get_template_part() を1行呼ぶ
本文と分離するので、貼り忘れも修正地獄も二重表示も起きない
本文にCTAを手貼りしないのが唯一の運用ルール
ブロックテーマや出し分けが必要なら、別のやり方を選ぶ

こうしたテーマ側の仕込みは、地味ですが後からの運用がまるごとラクになります。同じ考え方で企業サイトの導線や更新性を整える仕事は、運営元のNEORIVAでも承っています。「うちのサイトにも入れたい」があれば、気軽に相談してください。参考にした公式ドキュメントは get_template_part() リファレンスとテンプレートパーツの解説です。