Cookie同意バナーを作る方法

この記事では、WordPressサイトで「Cookieの同意バナー（コンセントバナー）」を自作する方法を紹介します。
プラグインを使わず、HTML・CSS・JavaScriptのみで実装でき、見た目は「WPConsent」風のデザインです。

1 実装のポイント

• 「同意する」「拒否」ボタンを設置し、ユーザー操作でCookieを制御
• localStorage に保存して、再表示を防止
• ページ下部に固定配置、モバイル対応

※localStorage とは、ユーザーの同意・設定などをブラウザに記録しておける仕組みです。
一度保存すれば、手動で削除するかブラウザをリセットしない限り記憶されたままです。

2 functions.php にコードを追加

//-------------------------------------------
// Cookie同意バナー用スクリプトを読み込む
//-------------------------------------------
add_action('wp_enqueue_scripts', function() {
    wp_enqueue_style('cookie-banner-style', get_stylesheet_directory_uri() . '/css/cookie-banner.css');
    wp_enqueue_script('cookie-banner-script', get_stylesheet_directory_uri() . '/js/cookie-banner.js', ['jquery'], null, true);
});

//-------------------------------------------
// Cookie同意ログ保存用 Ajax処理（この下に追加）
//-------------------------------------------
add_action('wp_ajax_nopriv_save_cookie_consent', 'save_cookie_consent');
add_action('wp_ajax_save_cookie_consent', 'save_cookie_consent');

function save_cookie_consent() {
    check_ajax_referer('cookie_consent_nonce', 'nonce');

    global $wpdb;
    $table_name = $wpdb->prefix . 'cookie_consent_log';

    // テーブル作成（初回のみ実行される）
    $charset_collate = $wpdb->get_charset_collate();
    $sql = "CREATE TABLE IF NOT EXISTS $table_name (
        id BIGINT(20) UNSIGNED NOT NULL AUTO_INCREMENT,
        ip_address VARCHAR(100) NOT NULL,
        consent ENUM('accepted','rejected') NOT NULL,
        user_agent TEXT,
        created_at DATETIME NOT NULL,
        PRIMARY KEY (id)
    ) $charset_collate;";
    require_once(ABSPATH . 'wp-admin/includes/upgrade.php');
    dbDelta($sql);

    // ログ登録
    $ip = $_SERVER['REMOTE_ADDR'];
    $consent = sanitize_text_field($_POST['consent']);
    $ua = sanitize_text_field($_SERVER['HTTP_USER_AGENT']);
    $created_at = current_time('mysql');

    $wpdb->insert($table_name, [
        'ip_address' => $ip,
        'consent' => $consent,
        'user_agent' => $ua,
        'created_at' => $created_at
    ]);

    wp_send_json_success(['status' => 'logged']);
}

3 HTML構造

フッター直前（footer.php の </body> 前）もしくは Lightning　ならウィジェットの「フッター上部」に以下を追加します。

<div id="cookie-banner" class="cookie-banner">
  <p>当サイトでは、より良い閲覧体験を提供するために Cookie を利用しています。続けて閲覧される場合は、Cookie の使用に同意いただいたものとみなします。</p>
  <div class="cookie-buttons">
    <button id="acceptCookies">同意する</button>
    <button id="rejectCookies">拒否</button>
  </div>
</div>

4 HTMLの設置場所（Lightningテーマの場合）

5 javascript にコードを追加

ファイル名：cookie-banner.js
保存先：wp-content/themes/child-theme/js/cookie-banner.js

//-------------------------------------------
// Cookie同意
//-------------------------------------------
document.addEventListener('DOMContentLoaded', initCookieBanner);

function initCookieBanner() {
  const banner = document.getElementById('cookie-banner'); // バナー要素取得
  if (!banner) return; // 要素が存在しない場合は終了

  const acceptBtn = document.getElementById('acceptCookies'); // 同意ボタン
  const rejectBtn = document.getElementById('rejectCookies'); // 拒否ボタン
  const consent = localStorage.getItem('cookieConsent'); // ローカルストレージ確認

  // 既に同意・拒否済みなら非表示
  if (consent) {
    banner.style.display = 'none';
    if (consent === 'accepted') loadGoogleAnalytics();
    return;
  }

  // 同意ボタン
  acceptBtn.addEventListener('click', () => {
    localStorage.setItem('cookieConsent', 'accepted');
    sendConsent('accepted');
    loadGoogleAnalytics();
    banner.remove(); // display:none より確実に削除
  });

  // 拒否ボタン
  rejectBtn.addEventListener('click', () => {
    localStorage.setItem('cookieConsent', 'rejected');
    sendConsent('rejected');
    banner.remove();
  });

  // Ajax送信
  function sendConsent(status) {
    if (typeof cookieConsentAjax === 'undefined') return;
    fetch(cookieConsentAjax.ajax_url, {
      method: 'POST',
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      body: new URLSearchParams({
        action: 'save_cookie_consent',
        nonce: cookieConsentAjax.nonce,
        consent: status
      })
    });
  }

  // Google Analytics 読み込み
  function loadGoogleAnalytics() {
    if (window.gaLoaded) return;
    window.gaLoaded = true;

    const script = document.createElement('script');
    script.src = 'https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX';
    script.async = true;
    document.head.appendChild(script);

    script.onload = function () {
      window.dataLayer = window.dataLayer || [];
      function gtag(){ dataLayer.push(arguments); }
      gtag('js', new Date());
      gtag('config', 'G-XXXXXXX');
    };
  }
}

5.1 ディレクトリ構造

6 汎用CSS

/* --------------------------------------- 
 * Cookie同意バナー（WPConsent風デザイン）
 * --------------------------------------- */

.cookie-banner { /* バナー全体 */
  position: fixed; /* 画面下固定 */
  bottom: 20px; /* 下からの距離 */
  left: 50%; /* 中央寄せ */
  transform: translateX(-50%); /* 完全中央配置 */
  background-color: #fff8e1; /* 背景色 */
  color: #333; /* 文字色 */
  padding: 20px; /* 内側余白 */
  border-radius: 8px; /* 角丸 */
  width: 90%; /* モバイル対応幅 */
  max-width: 480px; /* 最大幅 */
  box-shadow: 0 4px 12px rgba(0,0,0,0.2); /* 影 */
  font-size: 14px; /* 文字サイズ */
  z-index: 9999; /* 最前面 */
}

.cookie-banner p { /* メッセージ文 */
  margin: 0 0 12px; /* 下に余白を取る */
  line-height: 1.6; /* 行間を広げて読みやすく */
}

.cookie-buttons { /* ボタンコンテナ */
  display: flex; /* 横並び配置 */
  justify-content: center; /* 中央寄せ */
  gap: 10px; /* ボタン間の余白 */
}

.cookie-buttons button { /* ボタン共通 */
  border: none; /* 枠線なし */
  border-radius: 4px; /* 角丸 */
  padding: 8px 20px; /* 内側余白 */
  font-weight: bold; /* 太字 */
  cursor: pointer; /* マウスカーソルを指マークに */
  transition: opacity 0.2s; /* ホバー時にフェード変化 */
}

#acceptCookies { /* 同意ボタン */
  background-color: #28a745; /* 緑色 */
  color: #fff; /* 白文字 */
}

#rejectCookies { /* 拒否ボタン */
  background-color: #fff; /* 白背景 */
  color: #000; /* 黒文字 */
  border: 1px solid #ddd; /* 薄いグレーの枠線 */
}

.cookie-buttons button:hover { /* ホバー時 */
  opacity: 0.8; /* 少し透明にしてクリック感を出す */
}

.cookie-banner { /* バナー全体 */
  position: fixed !important; /* 画面下固定 */
  bottom: 20px !important; /* 下からの距離 */
  left: 50% !important; /* 中央寄せ */
  transform: translateX(-50%); /* 完全中央配置 */
  background-color: #fff8e1; /* 背景色 */
  color: #333; /* 文字色 */
  padding: 20px; /* 内側余白 */
  border-radius: 8px; /* 角丸 */
  width: 90%; /* モバイル対応幅 */
  max-width: 480px; /* 最大幅 */
  box-shadow: 0 4px 12px rgba(0,0,0,0.2); /* 影 */
  font-size: 14px; /* 文字サイズ */
  z-index: 9999 !important; /* 最前面 */
}

7 Cookie同意ログの記録について

プライバシーポリシーに「Cookie同意ログの記録について」を記載してください。

<p>当サイトでは、Cookie使用に関するお客様の同意または拒否の状況を確認するため、Cookie同意ログを保存しています。<br>
このログには、IPアドレス・同意種別（同意／拒否）・日時・ユーザーエージェント情報 が含まれます。<br>
これらのデータは、法令順守および同意管理の記録目的でのみ使用し、第三者への提供や商業目的での利用は行いません。<br>
保存された情報は一定期間後に自動的に削除されます。</p>

8 完成イメージ

▶ Cookieの同意・拒否

9 ログを確認する

ユーザーの Cookie 同意ログ（IP・同意種別・日時・ユーザーエージェント）は、WordPress のデータベースに保存されます。
これを確認・編集するには、管理プラグインを使うのがおススメです。

9.1 プラグインで見る方法（GUI管理したい場合）

SQLが苦手な場合は、次のようなプラグインを使うとGUIで確認できます。
※「GUI（ジーユーアイ）」とは Graphical User Interface（グラフィカル・ユーザー・インターフェース） の略で、
簡単に言うと「マウス操作や画面上のボタン・メニューなどで直感的に操作できる仕組み」のことです。

保存テーブル例

保存データは通常、以下のような独自テーブル（例：wp_cookie_log）に記録されます。

9.2 phpMyAdmin から確認

1. サーバーの管理画面（例：Xserver・ロリポップ・ConoHaなど） にログイン
2. 「phpMyAdmin」を開く
3. 使用中のWordPressデータベースを選択
4. テーブル一覧からwp_cookie_consent_log（※作成したテーブル名）を探す
5. 「表示」タブをクリック

これで、IP、同意種別（accepted / rejected）、日時、User-Agent が一覧で確認できます。

9.3 SQLで確認（簡易）

phpMyAdmin の「SQL」タブで次のクエリを実行します：

SELECT * FROM wp_cookie_consent_log ORDER BY created_at DESC LIMIT 50;

最新50件の同意ログを一覧表示できます。

10 代用プラグイン

• CookieYes — 多言語・デザイン自由度が高い
• WP Cookie Consent — 「Powered by WPConsent」風デザイン
• Complianz — GDPR準拠・詳細設定向け

11 まとめ

このコードを使えば、WordPressでWPConsent風のCookie同意バナーを完全自作できます。
localStorageで記録されるため、プラグイン不要・再表示防止も完璧です。

12 注意事項（日本国内サイトの場合）

日本国内で運営される一般的なウェブサイトでは、Cookie同意バナーの設置は法律で義務付けられていません。
ただし、Googleアナリティクスや広告配信などCookieを利用するサービスを使用している場合、プライバシーポリシー内でその利用目的を明示することが推奨されています。
このコードは「ユーザーにわかりやすくCookie使用を案内する」目的のものであり、法的助言ではありません。