【備忘録】ブログの年齢確認表示のコードをGPTで出力

// フロントエンドに年齢確認用のスクリプトを追加（タグにR18が含まれていたら年齢確認のダイアログを表示）
function add_age_verification_script() {
    if (is_single()) { // 投稿ページだけ
        $post_tags = get_the_tags();
        if ($post_tags) {
            foreach ($post_tags as $tag) {
                if ($tag->slug === 'r18') { // タグのスラッグが 'r18' なら
                    wp_enqueue_script('age-verification-script', get_stylesheet_directory_uri() . '/js/age-verification.js', array('jquery'), '1.0', true);
                    wp_enqueue_style('age-verification-style', get_stylesheet_directory_uri() . '/css/age-verification.css');
                    break; // 見つかったらループ終了
                }
            }
        }
    }
}
add_action('wp_enqueue_scripts', 'add_age_verification_script');

// 年齢確認用JavaScript
jQuery(document).ready(function($) {
    // Cookieを読む関数
    function getCookie(name) {
        const value = "; " + document.cookie;
        const parts = value.split("; " + name + "=");
        if (parts.length === 2) return parts.pop().split(";").shift();
    }

    // Cookieに書く関数
    function setCookie(name, value, days) {
        const expires = new Date();
        expires.setTime(expires.getTime() + (days * 24 * 60 * 60 * 1000));
        document.cookie = name + "=" + value + ";expires=" + expires.toUTCString() + ";path=/";
    }

    // すでに認証済みならスキップ
    if (getCookie('age_verified') === 'yes') {
        console.log('すでに年齢認証済みなのでモーダル表示スキップ');
        return;
    }

    // モーダル作成
    var modalHtml = `
        <div id="age-verification-overlay">
            <div id="age-verification-modal">
                <h2>18歳以上ですか？</h2>
                <div class="age-verification-buttons">
                    <button id="age-yes">はい</button>
                    <button id="age-no">いいえ</button>
                </div>
            </div>
        </div>
    `;
    $('body').append(modalHtml);
    console.log('年齢確認モーダルを追加しました');

    // ボタン動作
    $('#age-yes').on('click', function() {
        setCookie('age_verified', 'yes', 7); // 7日間有効なCookieを保存
        $('#age-verification-overlay').fadeOut();
        console.log('「はい」を選択＆Cookie保存');
    });

    $('#age-no').on('click', function() {
        console.log('「いいえ」を選択、ホームへリダイレクト');
        window.location.href = '/'; // サイトのホームに飛ばす
    });
});

#age-verification-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(5px); /* ←ココで背景をぼかす！ */
    background: rgba(0, 0, 0, 0.5); /* 背景は薄めの暗さ */
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Helvetica Neue', 'Arial', sans-serif;
}

#age-verification-modal {
    background: #ffffff; /* 真っ白ベース */
    padding: 40px 30px;
    border-radius: 10px;
    text-align: center;
    color: #333; /* 文字はダークグレーで上品に */
    box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.2); /* ふわっとした影 */
    max-width: 400px;
    width: 90%;
    transition: all 0.3s ease;
}

#age-verification-modal h2 {
    font-size: 24px;
    margin-bottom: 20px;
    font-weight: 600;
}

.age-verification-buttons {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.age-verification-buttons button {
    padding: 12px 24px;
    font-size: 16px;
    border: 2px solid #333;
    border-radius: 6px;
    background: transparent;
    color: #333;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

#age-yes:hover {
    background-color: #4CAF50; /* 緑色でGO感 */
    border-color: #4CAF50;
    color: #fff;
}

#age-no:hover {
    background-color: #f44336; /* 赤色でSTOP感 */
    border-color: #f44336;
    color: #fff;
}