Cocoonでオーバーレイ広告画像（今すぐ購入）を表示する方法｜WordPress Tips

WordPressのCocoonテーマで、オーバーレイ広告画像を表示する方法

オーバーレイ広告画像（こういうものを画面最下部に表示）

Cocoonテーマでページ下部にオーバーレイ広告を表示するには、カスタムコードを使用する必要があります。具体的な実装方法をご案内します。

Contents

Cocoonでオーバーレイ広告（画像）を表示する方法
1. コード
footer-insert.phpの場所
もっと簡単に編集する方法

Cocoonでオーバーレイ広告（画像）を表示する方法

以下の手順でオーバーレイ広告を実装できます

Cocoonフォーラムによると、オーバーレイ広告を設置するには「footer-insert.php」ファイルに広告コードを挿入するのが良いでしょう。これはページの下部に広告を表示するのに適した場所です。
実際の広告タグの設置方法としては、Cocoonの設定から適切な場所に広告コードを貼り付ける必要があります。
ファイル編集の方法：テーマエディターでは保存時にエラーが発生する場合があるため、FTPソフトを使用して直接ファイルを編集することをお勧めします。編集前には必ずバックアップを取っておきましょう。

コード

具体的な実装コード例として、以下のようなJavaScriptを「footer-insert.php」に追加します：

<script>
document.addEventListener('DOMContentLoaded', function() {
  // オーバーレイ広告用のdiv要素を作成
  var overlayDiv = document.createElement('div');
  overlayDiv.id = 'footer-overlay-ad';
  overlayDiv.style.position = 'fixed';
  overlayDiv.style.bottom = '0';
  overlayDiv.style.left = '0';
  overlayDiv.style.width = '100%';
  overlayDiv.style.zIndex = '999';
  overlayDiv.style.textAlign = 'center';
  overlayDiv.style.backgroundColor = 'rgba(255, 255, 255, 0.9)'; // 背景色と透明度
  overlayDiv.style.boxShadow = '0px -2px 10px rgba(0, 0, 0, 0.1)'; // 影をつける
  overlayDiv.style.padding = '10px 0';
  
  // 閉じるボタンを追加
  var closeButton = document.createElement('div');
  closeButton.innerHTML = '×';
  closeButton.style.position = 'absolute';
  closeButton.style.top = '5px';
  closeButton.style.right = '10px';
  closeButton.style.cursor = 'pointer';
  closeButton.style.fontSize = '20px';
  closeButton.style.color = '#666';
  
  // 閉じるボタンのクリックイベント
  closeButton.addEventListener('click', function() {
    document.body.removeChild(overlayDiv);
    // Cookieを設定して一定期間表示しないようにする（オプション）
    setCookie('overlay_closed', 'true', 1); // 1日間非表示
  });
  
  // 広告コンテンツを追加
  var adContent = document.createElement('div');
  adContent.innerHTML = `
    <!-- ここに広告コードを挿入 -->
    <div style="max-width: 728px; margin: 0 auto;">
      広告コードをここに貼り付け
    </div>
  `;
  
  // 要素を組み立て
  overlayDiv.appendChild(closeButton);
  overlayDiv.appendChild(adContent);
  
  // Cookieチェック（オプション）
  if (!getCookie('overlay_closed')) {
    document.body.appendChild(overlayDiv);
  }
  
  // Cookie関数（オプション）
  function setCookie(name, value, days) {
    var expires = "";
    if (days) {
      var date = new Date();
      date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
      expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value || "") + expires + "; path=/";
  }
  
  function getCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i < ca.length; i++) {
      var c = ca[i];
      while (c.charAt(0)==' ') c = c.substring(1,c.length);
      if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
  }
});
</script>

このコードは以下の機能を持っています

ページ下部に固定表示される広告枠を作成
閉じるボタンを設置
広告を一度閉じたら一定期間表示しないようにするオプション機能

ご自身の広告コードを「広告コードをここに貼り付け」の部分に置き換えて使用してください。

特定の広告ネットワークを使用している場合は、その広告ネットワーク独自の設置方法に従う必要がある場合もあります。

footer-insert.phpの場所

footer-insert.phpファイルは、Cocoonテーマの子テーマ内にあります。具体的な場所は以下の通りです

WordPressのテーマディレクトリ内の子テーマフォルダにあります
通常のパスは：wp-content/themes/cocoon-child/tmp-user/footer-insert.php

もしこのファイルが存在しない場合は、自分で作成する必要があります。

作成手順は

FTPソフトでサーバーに接続する
wp-content/themes/cocoon-child/tmp-user/ ディレクトリに移動する
- tmp-user ディレクトリがない場合は作成する
footer-insert.php ファイルを新規作成する
先ほどご案内したオーバーレイ広告のコードを記述する
ファイルを保存してアップロードする

または、WordPress管理画面から以下の手順でもアクセスできます：