今回は、コクーン（Cocoon）の「フック」を活用して、特定の場所に独自コンテンツを挿入する方法を紹介します。
プラグインを追加しなくても、headタグ内へのコード挿入や本文の前後へのコンテンツ追加などが簡単に行えます。
当記事では、コクーン独自のテンプレートファイル（tmp-userフォルダ）を使う方法と、WordPressのフック機能を使う方法の両方を、初心者の方にもわかるように詳しく解説します。
コンテンツを挿入する2つの方法
コクーンで特定の場所に独自コンテンツを挿入するには、大きく分けて2つの方法があります。
PHPの知識がなくてもHTMLが書ければ使えるため、初心者向け。
条件分岐などの細かい制御ができるため、中級者以上向け。
親テーマを直接編集すると、コクーンのアップデート時に変更内容が上書きされて消えてしまいます。
コクーンの子テーマは公式サイトからダウンロードでき、インストール後に子テーマ側を有効化して使います。
方法①：tmp-userテンプレートファイルで挿入する
コクーンの子テーマには、サイトの要所にコンテンツを挿入するための専用テンプレートファイルが「tmp-user」フォルダ内に用意されています。
これはコクーンの開発者がユーザーの利便性を考えて細かく切り分けてくれたもので、親テーマのPHPファイルに触れることなくカスタマイズが行えます。
tmp-userフォルダ内のファイル一覧と挿入場所
- head-insert.php：<head>〜</head>内にコードを挿入
- body-top-insert.php：<body>タグ直後にコードを挿入
- footer-insert.php：</body>タグ直前にコードを挿入
- main-before.php：メインコンテンツの手前にHTML等を挿入
ちなみに、AMP対応のファイル（amp-head-insert.php、amp-body-top-insert.php、amp-footer-insert.php）もあります
ですが、通常のページには影響しないため、ここでは通常ページ用のファイルに絞って解説します。
テンプレートファイルの編集方法
テンプレートファイルを編集するには、ワードプレスの管理画面から操作する方法が最も簡単です。
「外観」→「テーマファイルエディター」
と画面を移動します。
画面右側のファイル一覧から、編集したいテンプレートファイル（例：head-insert.php）をクリックして開きます。
ファイルに挿入したいHTMLコードを記述し、「ファイルを更新」ボタンをクリックすれば完了です。
具体例：head-insert.phpにGoogleアナリティクスのタグを挿入する
<!– Google Analytics –>
<script async src=”https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX”></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag(‘js’, new Date());
gtag(‘config’, ‘G-XXXXXXXXXX’);
</script>
head-insert.phpを使うのは、テーマの設定画面で対応していない外部サービスのタグを挿入したい場合に便利です。
具体例：footer-insert.phpにスクリプトを挿入する
ページの読み込み速度に影響しにくいスクリプトは、フッター（</body>直前）に配置するのが効果的です。
<script>
// ページの一番下で実行したいJavaScript
console.log(‘フッターに挿入されたスクリプトです’);
</script>
具体例：main-before.phpにお知らせバナーを挿入する
メインコンテンツの手前にお知らせやキャンペーン情報を表示したい場合は、main-before.phpを使います。
<div style=”background: #fff3cd; padding: 15px; text-align: center; border: 1px solid #ffc107;”>
<p>現在メンテナンス中のため、一部機能がご利用いただけません。</p>
</div>
方法②：フック（functions.php）で挿入する
より高度なカスタマイズや条件分岐が必要な場合は、子テーマのfunctions.phpにフック処理を記述する方法がおすすめです。
WordPressの標準フックを使う
コクーンはWordPressテーマなので、ワードプレスの標準フックがそのまま使えます。
①、wp_head（headタグ内に挿入）
function my_add_head_code() {
echo ‘<meta name=”robots” content=”noindex”>’;
}
add_action( ‘wp_head’, ‘my_add_head_code’ );
②、wp_footer（フッターに挿入）
echo ‘<script>console.log(“フッタースクリプト”);</script>’;
}
add_action( ‘wp_footer’, ‘my_add_footer_code’ );
③、the_content（本文の前後に挿入）
the_content はフィルターフックなので、本文のデータを加工して前後にコンテンツを追加できます。
function my_add_cta_after_content( $content ) {
if ( is_single() ) {
$cta = ‘<div class=”custom-cta” style=”background:#f0f8ff; padding:20px; margin-top:30px; border:2px solid #4169e1; border-radius:8px;”>’;
$cta .= ‘<p style=”font-weight:bold; font-size:18px;”>この記事が役に立ったらシェアしてください！</p>’;
$cta .= ‘</div>’;
$content .= $cta;
}
return $content;
}
add_filter( ‘the_content’, ‘my_add_cta_after_content’ );
returnを書き忘れると、本文が画面上から消えてしまうので注意してください。
コクーン独自のアクションフックを使う
コクーンには、ワードプレス標準のフックに加えて、テーマ独自のアクションフックが用意されています。
- singular_entry_content_before：投稿・固定ページの本文の上
- singular_entry_content_after：投稿・固定ページの本文の下
これらのフックは、the_contentフィルターとは異なり、本文データの加工ではなく本文エリアの直前・直後にHTMLを出力するアクションフックです。
本文の上にお知らせを挿入する例
function my_content_before_notice() {
if ( is_single() ) {
echo ‘<div class=”content-notice” style=”background:#e8f5e9; padding:15px; margin-bottom:20px; border-left:4px solid #4caf50;”>’;
echo ‘<p>この記事は2025年の情報に基づいて作成されています。</p>’;
echo ‘</div>’;
}
}
add_action( ‘singular_entry_content_before’, ‘my_content_before_notice’ );
本文の下にページ送りリンクを挿入する例
function my_content_after_navigation() {
if ( is_single() ) {
echo ‘<div class=”custom-navigation” style=”margin-top:20px; padding:15px; text-align:center;”>’;
previous_post_link( ‘<span>« %link</span>’ );
echo ‘ ｜ ‘;
next_post_link( ‘<span>%link »</span>’ );
echo ‘</div>’;
}
}
add_action( ‘singular_entry_content_after’, ‘my_content_after_navigation’ );
方法①と方法②の使い分け
- 固定のHTMLコード（解析タグなど）を挿入したい
- 条件分岐が不要で全ページに同じコードを入れたい
- PHPの知識がない・不安がある
- 管理画面のエディターから手軽に編集したい
- 投稿ページのみ・特定カテゴリーのみなど条件分岐したい
- 本文のデータを加工してから出力したい
- Cocoon独自フックで本文の直前・直後に挿入したい
- PHPの知識があり、より細かい制御をしたい
迷ったら、まずはtmp-userテンプレートファイルを試してみましょう。
条件分岐が必要になったタイミングで、functions.phpのフックに切り替えるのがおすすめです。
コクーン設定画面のコード挿入機能も活用しよう
コクーンには、フックやテンプレートファイルを編集しなくても、管理画面からコードを挿入できる機能があります。
「Cocoon設定」→「アクセス解析・認証」
この画面には、headタグ内やbodyタグ開始直後にコードを挿入するための入力欄が用意されています。
Cocoon設定の入力欄にタグを貼り付けるだけで、全ページに自動的に反映されます。
PHPファイルの編集が不要なので、初心者の方にはこの方法がおすすめです。
よく使う条件分岐タグ
functions.phpでフックを使ってコンテンツを挿入する際、特定のページにのみ表示するための条件分岐をよく使います。
- is_single()：投稿ページ（個別記事）の場合に true
- is_page()：固定ページの場合に true
- is_front_page()：トップページの場合に true
- is_category()：カテゴリーアーカイブページの場合に true
- is_single( 123 )：投稿ID「123」の記事の場合に true
- is_page( ‘about’ )：スラッグ「about」の固定ページの場合に true
- in_category( ‘news’ )：カテゴリー「news」に属する投稿の場合に true
function my_category_banner( $content ) {
if ( is_single() && in_category( ‘campaign’ ) ) {
$banner = ‘<div class=”campaign-banner” style=”background:#fff3e0; padding:15px; margin-bottom:20px;”>’;
$banner .= ‘<p>【期間限定キャンペーン実施中！】</p>’;
$banner .= ‘</div>’;
$content = $banner . $content;
}
return $content;
}
add_filter( ‘the_content’, ‘my_category_banner’ );
カスタマイズ時の注意点
カスタマイズ時には、以下のような点に注意しましょう。
- 必ず子テーマで作業する：親テーマを編集するとコクーンのアップデートで変更が消えます。
- 編集前にバックアップを取る：functions.phpの記述ミスはサイト全体が真っ白になる原因になります。
- フィルターフックでは return を忘れない：the_content などのフィルターフックでは、return を書き忘れると本文が消えます。
- フックとtmp-userテンプレートの重複に注意：同じ場所に両方からコンテンツを挿入すると二重表示になる場合があります。
- キャッシュの確認：コードを追加しても反映されない場合は、ブラウザやキャッシュプラグインのキャッシュをクリアしてください。
functions.phpにPHPの構文エラーがあると、サイト全体が真っ白になることがあります。
その場合は、FTPクライアント（またはサーバーのファイルマネージャー）でfunctions.phpを開き、追加したコードを削除してください。
最後に
今回は、コクーン（Cocoon）の「フック」を活用して、特定の場所に独自コンテンツを挿入する方法を紹介しました。
そのファイルにHTMLコードを書き込むだけで簡単にコンテンツを挿入できます。
さらに高度なカスタマイズが必要な場合には、ワードプレスの標準フック（wp_head、wp_footer、the_content）を利用できます。
また、コクーン独自のフック（singular_entry_content_before / after）を使うことで、条件分岐を含めた柔軟な制御が可能です。
まずはCocoon設定画面やtmp-userテンプレートの簡単な方法から始めて、必要に応じてfunctions.phpのフックに挑戦してみてください。
当記事を参考に、Cocoonテーマのカスタマイズにお役立てください。
コメント