ساخت پاپ اپ حرفه ای در وردپرس

ساختار و توضیح عملکرد فنی پاپ‌آپ «چراغ جادو»

این قطعه کد، یک راه‌حل اختصاصی، فوق‌العاده سبک و بدون نیاز به هیچ‌گونه افزونه جانبی برای پیاده‌سازی پاپ‌آپ‌های تعاملی و فروشگاهی در وردپرس و ووکامرس است. نحوه عملکرد و معماری این اسکریپت در ۴ لایه زیر خلاصه می‌شود:

۱. منطق هوشمند کنترل سشن (Session & Storage Control)

• جلوگیری از مزاحمت برای کاربر: به کمک ترکیب sessionStorage و localStorage، سیستم وضعیت بازدید کاربر را بررسی می‌کند. پاپ‌آپ در هر نشست (Session) تنها یک‌بار به کاربر نمایش داده می‌شود تا تجربه کاربری (UX) افت نکند.
• حالت تست توسعه‌دهنده (Test Mode & Force Reset): با فعال‌سازی حالت تست یا ارسال پارامتر بازنشانی، محدودیت حافظه مرورگر دور زده شده و پاپ‌آپ برای تست‌های مکرر دولوپر همواره بازخوانی می‌شود.

۲. سناریوی اجرای انیمیشن‌های سینماتیک (Animation Flow)

• گام اول (ورود قوری): پس از بارگذاری صفحه، نماد چراغ جادو با انیمیشن جهشی (Back-out) وارد کادر شده و با یک لرزش ملایم و افکت درخشش بدنه در جای خود مستقر می‌شود.
• گام دوم (خروج دود نئونی): توده‌های دود سیال و مات به‌صورت داینامیک از دهانه قوری متصاعد شده و فضا را پوشش می‌دهند.
• گام سوم (پدیدار شدن کارت پاپ‌آپ): کارت اصلی پیام با تکنیک 3D Flip از میان هاله‌های دود خارج شده و به شکل یک پاپ‌آپ شیک و مدرن شیشه‌ای در مرکز صفحه قفل می‌شود.

۳. مدیریت پویا از پیشخوان وردپرس (Admin Settings API)

• کلیه محتواها از جمله: عنوان، متن پیشنهاد، کد تخفیف، لینک دکمه CTA و شمارشگر معکوس (تایمر) مستقیماً از طریق پنل اختصاصی در پیشخوان وردپرس بدون نیاز به تغییر در سورس‌کد تنظیم و فراخوانی می‌شوند.
• دکمه پاک‌سازی آنی حافظه کش/سشن در پنل مدیریت تعبیه شده تا مدیر سایت بدون نیاز به باز کردن Inspect یا تغییر مرورگر، تغییرات را در لحظه تست کند.

۴. بهینه‌سازی، سرعت و سازگاری (Zero Overhead)

• کدنویسی استاندارد و بومی: عدم استفاده از کتابخانه‌های سنگین جاوااسکریپت، رندرینگ سریع انیمیشن‌ها از طریق GPU به کمک CSS اختصاصی و سازگاری کامل با استانداردهای راست‌چین (RTL) و ریسپانسیو در تمام دستگاه‌ها.

کد استفاده شده در این پروژه

/* ========================================================
   ۱. ایجاد منوی مدیریت در پیشخوان وردپرس و ثبت تنظیمات
   ======================================================== */

// افزودن منو به نوار کناری پیشخوان وردپرس
add_action( 'admin_menu', 'miladalizadeh_register_popup_admin_menu' );
function miladalizadeh_register_popup_admin_menu() {
    add_menu_page(
        'تنظیمات پاپ‌آپ چراغ جادو',
        'پاپ‌آپ چراغ جادو',
        'manage_options',
        'miladalizadeh-popup-settings',
        'miladalizadeh_render_popup_admin_page',
        'dashicons-superhero-alt',
        58
    );
}

// ثبت گروه تنظیمات و متغیرها در دیتابیس
add_action( 'admin_init', 'miladalizadeh_register_popup_settings' );
function miladalizadeh_register_popup_settings() {
    register_setting( 'miladalizadeh_popup_options_group', 'miladalizadeh_popup_settings', 'miladalizadeh_sanitize_popup_settings' );
}

// اعتبارسنجی و پاک‌سازی داده‌های فرم
function miladalizadeh_sanitize_popup_settings( $input ) {
    $sanitized = array();
    $sanitized['enabled']      = isset( $input['enabled'] ) ? 1 : 0;
    $sanitized['test_mode']    = isset( $input['test_mode'] ) ? 1 : 0; // حالت تست: نمایش در هر رفرش
    $sanitized['badge_text']   = sanitize_text_field( $input['badge_text'] ?? 'آرزوی تخفیف شما برآورده شد!' );
    $sanitized['title']        = sanitize_text_field( $input['title'] ?? 'کوپن طلایی و شگفت‌انگیز اختصاصی' );
    $sanitized['description']  = sanitize_textarea_field( $input['description'] ?? 'این کوپن استثنایی مخصوص همین خرید شماست؛ پیش از اتمام مهلت آن را نهایی کنید.' );
    $sanitized['coupon_label'] = sanitize_text_field( $input['coupon_label'] ?? 'کد تخفیف اختصاصی ۵۰٪' );
    $sanitized['coupon_code']  = sanitize_text_field( $input['coupon_code'] ?? 'MAGIC50' );
    $sanitized['button_text']  = sanitize_text_field( $input['button_text'] ?? 'استفاده از تخفیف و پرداخت نهایی' );
    $sanitized['button_url']   = esc_url_raw( $input['button_url'] ?? '' );
    $sanitized['timer_mins']   = absint( $input['timer_mins'] ?? 110 );
    return $sanitized;
}

// صفحه رندر مدیریت در پیشخوان
function miladalizadeh_render_popup_admin_page() {
    if ( ! current_user_can( 'manage_options' ) ) {
        return;
    }

    $defaults = array(
        'enabled'      => 1,
        'test_mode'    => 0,
        'badge_text'   => 'آرزوی تخفیف شما برآورده شد!',
        'title'        => 'کوپن طلایی و شگفت‌انگیز اختصاصی',
        'description'  => 'این کوپن استثنایی مخصوص همین خرید شماست؛ پیش از اتمام مهلت آن را نهایی کنید.',
        'coupon_label' => 'کد تخفیف اختصاصی ۵۰٪',
        'coupon_code'  => 'MAGIC50',
        'button_text'  => 'استفاده از تخفیف و پرداخت نهایی',
        'button_url'   => function_exists( 'wc_get_checkout_url' ) ? wc_get_checkout_url() : home_url( '/checkout' ),
        'timer_mins'   => 110,
    );

    $opts = get_option( 'miladalizadeh_popup_settings', $defaults );
    $opts = wp_parse_args( $opts, $defaults );
    $site_home_url = home_url( '/' );
    ?>
    <div class="wrap" style="direction: rtl; text-align: right; max-width: 900px; margin-top: 25px;">
        <div class="miladalizadeh-admin-header">
            <h1 style="display: inline-flex; align-items: center; gap: 10px; font-weight: bold; color: #1e1e2d; margin-bottom: 8px;">
                <span class="dashicons dashicons-superhero-alt" style="font-size: 32px; width: 32px; height: 32px; color: #ffb703;"></span>
                تنظیمات پاپ‌آپ چراغ جادو
            </h1>
            <p style="color: #6c757d; margin: 0 0 20px;">مدیریت وضعیت نمایش، استایل انیمیشن، کدهای تخفیف و حالت تست.</p>
        </div>

        <?php settings_errors(); ?>

        <div class="miladalizadeh-admin-card" style="background: #ffffff; border-radius: 12px; border: 1px solid #e2e8f0; padding: 25px; box-shadow: 0 4px 15px rgba(0,0,0,0.03);">
            <form method="post" action="options.php">
                <?php settings_fields( 'miladalizadeh_popup_options_group' ); ?>

                <table class="form-table" role="presentation">
                    <tr>
                        <th scope="row" style="font-weight: bold;">وضعیت کلی پاپ‌آپ</th>
                        <td>
                            <label style="display: inline-flex; align-items: center; gap: 8px; cursor: pointer;">
                                <input type="checkbox" name="miladalizadeh_popup_settings[enabled]" value="1" <?php checked( 1, $opts['enabled'] ); ?> style="transform: scale(1.3);" />
                                <span style="font-weight: bold; color: #2b8a3e;">فعال‌سازی نمایش پاپ‌آپ در فرانت‌اند</span>
                            </label>
                        </td>
                    </tr>

                    <tr style="background: #fff9db; border: 1px dashed #ffd43b;">
                        <th scope="row" style="font-weight: bold; padding: 15px; color: #d9480f;">حالت تست توسعه‌دهنده (بسیار مهم)</th>
                        <td style="padding: 15px;">
                            <label style="display: inline-flex; align-items: center; gap: 8px; cursor: pointer;">
                                <input type="checkbox" name="miladalizadeh_popup_settings[test_mode]" value="1" <?php checked( 1, $opts['test_mode'] ); ?> style="transform: scale(1.3);" />
                                <span style="font-weight: bold; color: #d9480f;">فعال‌سازی حالت تست (نمایش در هر بار رفرش صفحه بدون در نظر گرفتن سشن)</span>
                            </label>
                            <p class="description" style="color: #666; margin-top: 6px;">اگر این گزینه فعال باشد، با هر بار لود مجدد سایت، پاپ‌آپ چراغ جادو باز می‌شود و نیازی به پاک کردن دستی سشن نیست.</p>
                        </td>
                    </tr>

                    <tr>
                        <th scope="row" style="font-weight: bold;">پاک کردن سشن و مشاهده سریع سایت</th>
                        <td>
                            <button type="button" id="miladalizadeh-clean-and-visit-btn" class="button button-primary" style="font-weight: bold; background: #228be6; border-color: #1c7ed6; padding: 4px 16px;">
                                <span class="dashicons dashicons-external" style="vertical-align: middle;"></span> پاک کردن سشن و باز کردن سایت
                            </button>
                            <p class="description">این دکمه سشن و کلیدهای ذخیره شده را صفر کرده و بلافاصله صفحه اصلی سایت را در تب جدید باز می‌کند.</p>
                        </td>
                    </tr>

                    <tr>
                        <th scope="row" style="font-weight: bold;">نشان جادویی (Badge)</th>
                        <td>
                            <input type="text" name="miladalizadeh_popup_settings[badge_text]" value="<?php echo esc_attr( $opts['badge_text'] ); ?>" class="regular-text" style="width: 100%; max-width: 450px;" />
                        </td>
                    </tr>

                    <tr>
                        <th scope="row" style="font-weight: bold;">عنوان پاپ‌آپ</th>
                        <td>
                            <input type="text" name="miladalizadeh_popup_settings[title]" value="<?php echo esc_attr( $opts['title'] ); ?>" class="regular-text" style="width: 100%; max-width: 450px;" />
                        </td>
                    </tr>

                    <tr>
                        <th scope="row" style="font-weight: bold;">توضیحات پاپ‌آپ</th>
                        <td>
                            <textarea name="miladalizadeh_popup_settings[description]" rows="3" style="width: 100%; max-width: 450px;"><?php echo esc_textarea( $opts['description'] ); ?></textarea>
                        </td>
                    </tr>

                    <tr>
                        <th scope="row" style="font-weight: bold;">عنوان کوپن تخفیف</th>
                        <td>
                            <input type="text" name="miladalizadeh_popup_settings[coupon_label]" value="<?php echo esc_attr( $opts['coupon_label'] ); ?>" class="regular-text" style="width: 100%; max-width: 450px;" />
                        </td>
                    </tr>

                    <tr>
                        <th scope="row" style="font-weight: bold;">کد تخفیف</th>
                        <td>
                            <input type="text" name="miladalizadeh_popup_settings[coupon_code]" value="<?php echo esc_attr( $opts['coupon_code'] ); ?>" class="regular-text" style="width: 100%; max-width: 450px; font-family: monospace; font-size: 16px; font-weight: bold; color: #d9480f;" />
                        </td>
                    </tr>

                    <tr>
                        <th scope="row" style="font-weight: bold;">متن دکمه نهایی (CTA)</th>
                        <td>
                            <input type="text" name="miladalizadeh_popup_settings[button_text]" value="<?php echo esc_attr( $opts['button_text'] ); ?>" class="regular-text" style="width: 100%; max-width: 450px;" />
                        </td>
                    </tr>

                    <tr>
                        <th scope="row" style="font-weight: bold;">لینک دکمه نهایی</th>
                        <td>
                            <input type="url" name="miladalizadeh_popup_settings[button_url]" value="<?php echo esc_url( $opts['button_url'] ); ?>" class="regular-text" style="width: 100%; max-width: 450px; direction: ltr;" />
                        </td>
                    </tr>

                    <tr>
                        <th scope="row" style="font-weight: bold;">مدت زمان تایمر معکوس (دقیقه)</th>
                        <td>
                            <input type="number" name="miladalizadeh_popup_settings[timer_mins]" value="<?php echo esc_attr( $opts['timer_mins'] ); ?>" min="1" max="1440" style="width: 120px;" />
                        </td>
                    </tr>
                </table>

                <div style="margin-top: 25px; padding-top: 15px; border-top: 1px solid #f1f3f5;">
                    <?php submit_button( 'ذخیره تنظیمات پاپ‌آپ', 'primary', 'submit', false, array( 'style' => 'font-weight: bold; padding: 6px 24px;' ) ); ?>
                </div>
            </form>
        </div>
    </div>

    <!-- اسکریپت پیشخوان: پاک‌سازی قطعی نشست و باز کردن فرانت‌اند با پارامتر ریست -->
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const cleanBtn = document.getElementById("miladalizadeh-clean-and-visit-btn");
            if (cleanBtn) {
                cleanBtn.addEventListener("click", function () {
                    sessionStorage.removeItem("miladalizadeh_magic_viewed");
                    localStorage.removeItem("miladalizadeh_magic_viewed");
                    // باز کردن سایت با پارامتر فورس ریست
                    window.open("<?php echo esc_url( add_query_arg( 'miladalizadeh_reset_magic', '1', $site_home_url ) ); ?>", "_blank");
                });
            }
        });
    </script>
    <?php
}

/* ========================================================
   ۲. خروجی پاپ‌آپ فرانت‌اند با ساختار مقاوم و بدون باگ خروج
   ======================================================== */

add_action( 'wp_footer', 'miladalizadeh_fluid_magic_lamp_popup' );

function miladalizadeh_fluid_magic_lamp_popup() {
    $defaults = array(
        'enabled'      => 1,
        'test_mode'    => 0,
        'badge_text'   => 'آرزوی تخفیف شما برآورده شد!',
        'title'        => 'کوپن طلایی و شگفت‌انگیز اختصاصی',
        'description'  => 'این کوپن استثنایی مخصوص همین خرید شماست؛ پیش از اتمام مهلت آن را نهایی کنید.',
        'coupon_label' => 'کد تخفیف اختصاصی ۵۰٪',
        'coupon_code'  => 'MAGIC50',
        'button_text'  => 'استفاده از تخفیف و پرداخت نهایی',
        'button_url'   => function_exists( 'wc_get_checkout_url' ) ? wc_get_checkout_url() : home_url( '/checkout' ),
        'timer_mins'   => 110,
    );

    $opts = get_option( 'miladalizadeh_popup_settings', $defaults );
    $opts = wp_parse_args( $opts, $defaults );

    if ( empty( $opts['enabled'] ) ) {
        return;
    }

    $target_url    = ! empty( $opts['button_url'] ) ? $opts['button_url'] : ( function_exists( 'wc_get_checkout_url' ) ? wc_get_checkout_url() : '#' );
    $total_seconds = max( 60, absint( $opts['timer_mins'] ) * 60 );
    $is_test_mode  = ! empty( $opts['test_mode'] ) ? 'true' : 'false';

    wp_enqueue_style( 'miladalizadeh-fa', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css', array(), '6.4.0' );
    ?>

    <!-- والد پاپ‌آپ و لایه مسدودکننده پس‌زمینه -->
    <div id="miladalizadeh-magic-overlay" class="miladalizadeh-overlay" style="display: none;">
        <div class="miladalizadeh-stage-box">

            <!-- قوری جادویی -->
            <div class="miladalizadeh-lamp-container">
                <div class="miladalizadeh-magic-lamp">
                    <!-- نوک قوری و دهانه خروج دود متراکم -->
                    <div class="miladalizadeh-lamp-spout">
                        <div class="miladalizadeh-exhaust-smoke-emitter">
                            <div class="miladalizadeh-exhaust-plume miladalizadeh-plume-1"></div>
                            <div class="miladalizadeh-exhaust-plume miladalizadeh-plume-2"></div>
                            <div class="miladalizadeh-exhaust-plume miladalizadeh-plume-3"></div>
                        </div>
                    </div>

                    <div class="miladalizadeh-lamp-belly"></div>
                    <div class="miladalizadeh-lamp-gem"></div>
                    <div class="miladalizadeh-lamp-lid">
                        <div class="miladalizadeh-lid-top"></div>
                    </div>
                    <div class="miladalizadeh-lamp-handle"></div>
                    <div class="miladalizadeh-lamp-base"></div>
                </div>
            </div>

            <!-- کارت پاپ‌آپ که از نوک قوری می‌چرخد و می‌ماند -->
            <div class="miladalizadeh-magic-card" id="miladalizadeh-magic-card">
                
                <!-- دکمه بستن پاپ‌آپ -->
                <button type="button" class="miladalizadeh-exit-btn" id="miladalizadeh-close-trigger" title="بستن">
                    <i class="fa-solid fa-xmark"></i>
                </button>

                <!-- نشان طلایی -->
                <div class="miladalizadeh-badge-wish">
                    <i class="fa-solid fa-wand-magic-sparkles"></i>
                    <span><?php echo esc_html( $opts['badge_text'] ); ?></span>
                </div>

                <h3 class="miladalizadeh-heading"><?php echo esc_html( $opts['title'] ); ?></h3>
                <p class="miladalizadeh-description"><?php echo nl2br( esc_html( $opts['description'] ) ); ?></p>

                <!-- تایمر معکوس -->
                <div class="miladalizadeh-counter-row">
                    <div class="miladalizadeh-counter-box">
                        <span id="miladalizadeh-sec" class="miladalizadeh-counter-num">00</span>
                        <span class="miladalizadeh-counter-txt">ثانیه</span>
                    </div>
                    <span class="miladalizadeh-colon">:</span>
                    <div class="miladalizadeh-counter-box">
                        <span id="miladalizadeh-min" class="miladalizadeh-counter-num">00</span>
                        <span class="miladalizadeh-counter-txt">دقیقه</span>
                    </div>
                    <span class="miladalizadeh-colon">:</span>
                    <div class="miladalizadeh-counter-box">
                        <span id="miladalizadeh-hour" class="miladalizadeh-counter-num">00</span>
                        <span class="miladalizadeh-counter-txt">ساعت</span>
                    </div>
                </div>

                <!-- کادر کد تخفیف -->
                <div class="miladalizadeh-code-wrapper">
                    <div class="miladalizadeh-code-detail">
                        <span class="miladalizadeh-code-sub"><?php echo esc_html( $opts['coupon_label'] ); ?></span>
                        <span class="miladalizadeh-code-string" id="miladalizadeh-code-target"><?php echo esc_html( $opts['coupon_code'] ); ?></span>
                    </div>
                    <button type="button" class="miladalizadeh-btn-copy" id="miladalizadeh-copy-trigger">
                        <i class="fa-solid fa-copy"></i>
                        <span id="miladalizadeh-btn-txt">کپی کد</span>
                    </button>
                </div>

                <!-- دکمه خرید و پرداخت -->
                <a href="<?php echo esc_url( $target_url ); ?>" class="miladalizadeh-btn-cta">
                    <span><?php echo esc_html( $opts['button_text'] ); ?></span>
                    <i class="fa-solid fa-arrow-left"></i>
                </a>
            </div>

        </div>
    </div>

    <!-- استایل پایدار، بدون غیب شدن یا لرزش ناگهانی -->
    <style>
        .miladalizadeh-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100vw;
            height: 100vh;
            background: rgba(10, 8, 15, 0.94);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            z-index: 9999999;
            display: flex;
            align-items: center;
            justify-content: center;
            direction: rtl;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.4s ease, visibility 0.4s ease;
            perspective: 1200px;
            overflow: hidden;
        }

        /* وضعیت فعال بدون بازگشت */
        .miladalizadeh-overlay.miladalizadeh-is-visible {
            display: flex !important;
            opacity: 1 !important;
            visibility: visible !important;
        }

        .miladalizadeh-stage-box {
            position: relative;
            width: 100%;
            max-width: 520px;
            min-height: 560px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* استایل قوری جادو */
        .miladalizadeh-lamp-container {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 220px;
            height: 130px;
            z-index: 5;
            pointer-events: none;
        }

        .miladalizadeh-magic-lamp {
            position: relative;
            width: 100%;
            height: 100%;
            filter: drop-shadow(0 15px 30px rgba(255, 183, 3, 0.4));
            opacity: 0;
        }

        .miladalizadeh-is-visible .miladalizadeh-magic-lamp {
            animation: miladalizadeh-lamp-enter 1.2s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
        }

        .miladalizadeh-lamp-belly {
            position: absolute;
            bottom: 15px;
            left: 30px;
            width: 130px;
            height: 65px;
            background: linear-gradient(135deg, #ffe066 0%, #ffb703 40%, #b86b00 85%, #6a3500 100%);
            border-radius: 50% 50% 45% 45%;
            box-shadow: inset 0 5px 10px rgba(255, 255, 255, 0.6);
        }

        .miladalizadeh-lamp-gem {
            position: absolute;
            bottom: 40px;
            left: 88px;
            width: 15px;
            height: 15px;
            background: radial-gradient(circle, #ff007f 25%, #69002f 90%);
            border-radius: 50%;
            border: 1px solid #ffd700;
            box-shadow: 0 0 12px #ff007f;
        }

        .miladalizadeh-lamp-spout {
            position: absolute;
            top: 25px;
            right: 15px;
            width: 75px;
            height: 65px;
            border-bottom: 22px solid #ffb703;
            border-right: 20px solid #ffb703;
            border-radius: 0 0 65px 0;
            transform: rotate(35deg);
            z-index: 8;
        }

        .miladalizadeh-lamp-lid {
            position: absolute;
            top: 36px;
            left: 72px;
            width: 48px;
            height: 16px;
            background: #ffe066;
            border-radius: 14px 14px 0 0;
            border-bottom: 2px solid #6a3500;
        }

        .miladalizadeh-lid-top {
            position: absolute;
            top: -10px;
            left: 18px;
            width: 12px;
            height: 12px;
            background: #ffb703;
            border-radius: 50%;
        }

        .miladalizadeh-lamp-handle {
            position: absolute;
            top: 32px;
            left: 8px;
            width: 44px;
            height: 58px;
            border: 10px solid #b86b00;
            border-top-color: #ffe066;
            border-radius: 50% 12% 12% 50%;
            transform: rotate(-10deg);
        }

        .miladalizadeh-lamp-base {
            position: absolute;
            bottom: 5px;
            left: 55px;
            width: 80px;
            height: 14px;
            background: linear-gradient(90deg, #6a3500, #ffb703, #6a3500);
            border-radius: 10px;
        }

        /* دود اگزوز متراکم */
        .miladalizadeh-exhaust-smoke-emitter {
            position: absolute;
            top: -10px;
            right: -8px;
            width: 20px;
            height: 20px;
            z-index: 30;
            pointer-events: none;
        }

        .miladalizadeh-exhaust-plume {
            position: absolute;
            top: 0;
            right: 0;
            background: radial-gradient(ellipse at 40% 50%, rgba(195, 200, 210, 0.85) 0%, rgba(100, 110, 125, 0.7) 45%, rgba(45, 50, 60, 0.45) 75%, rgba(0, 0, 0, 0) 100%);
            border-radius: 50%;
            filter: blur(14px);
            opacity: 0;
        }

        .miladalizadeh-is-visible .miladalizadeh-plume-1 {
            width: 120px;
            height: 180px;
            animation: miladalizadeh-smoke-flow 2.4s cubic-bezier(0.2, 0.8, 0.3, 1) 0.6s forwards;
        }

        .miladalizadeh-is-visible .miladalizadeh-plume-2 {
            width: 170px;
            height: 240px;
            filter: blur(20px);
            animation: miladalizadeh-smoke-flow 2.6s cubic-bezier(0.2, 0.8, 0.3, 1) 0.8s forwards;
        }

        .miladalizadeh-is-visible .miladalizadeh-plume-3 {
            width: 220px;
            height: 300px;
            filter: blur(26px);
            animation: miladalizadeh-smoke-flow 2.8s cubic-bezier(0.2, 0.8, 0.3, 1) 1s forwards;
        }

        /* کارت جادویی با استقرار دائمی بعد از انیمیشن */
        .miladalizadeh-magic-card {
            position: relative;
            width: 92%;
            max-width: 480px;
            background: linear-gradient(165deg, #1b1625 0%, #0d0a14 100%);
            border: 2px solid rgba(255, 183, 3, 0.6);
            border-radius: 28px;
            padding: 38px 28px 30px;
            text-align: center;
            box-shadow: 0 25px 70px rgba(0, 0, 0, 0.95), 0 0 45px rgba(255, 183, 3, 0.25);
            z-index: 50;
            opacity: 0;
            transform: scale(0.01);
        }

        /* انیمیشن چرخش و ماندگاری قطعی در مرکز (forwards) */
        .miladalizadeh-is-visible .miladalizadeh-magic-card {
            animation: miladalizadeh-orbit-in 2.4s cubic-bezier(0.16, 1, 0.3, 1) 0.9s forwards;
        }

        .miladalizadeh-exit-btn {
            position: absolute;
            top: 18px;
            left: 18px;
            background: rgba(255, 255, 255, 0.08);
            border: none;
            color: #b8a9c9;
            width: 38px;
            height: 38px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            transition: background 0.3s, color 0.3s;
        }

        .miladalizadeh-exit-btn:hover {
            background: #e03131;
            color: #ffffff;
        }

        .miladalizadeh-badge-wish {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(255, 183, 3, 0.15);
            color: #ffb703;
            border: 1px solid rgba(255, 183, 3, 0.4);
            padding: 7px 18px;
            border-radius: 50px;
            font-size: 13px;
            font-weight: bold;
            margin-bottom: 18px;
        }

        .miladalizadeh-heading {
            color: #ffffff;
            font-size: 22px;
            font-weight: bold;
            margin: 0 0 10px 0;
        }

        .miladalizadeh-description {
            color: #9d8db3;
            font-size: 14px;
            line-height: 1.8;
            margin: 0 0 24px 0;
        }

        .miladalizadeh-counter-row {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            margin-bottom: 24px;
        }

        .miladalizadeh-counter-box {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 183, 3, 0.25);
            border-radius: 14px;
            padding: 10px 14px;
            min-width: 62px;
        }

        .miladalizadeh-counter-num {
            display: block;
            font-size: 21px;
            font-weight: bold;
            color: #ffe066;
            font-family: monospace;
        }

        .miladalizadeh-counter-txt {
            font-size: 11px;
            color: #8c7a9c;
        }

        .miladalizadeh-colon {
            color: #ffe066;
            font-size: 20px;
            font-weight: bold;
        }

        .miladalizadeh-code-wrapper {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: #140d21;
            border: 2px dashed rgba(255, 183, 3, 0.5);
            border-radius: 16px;
            padding: 12px 18px;
            margin-bottom: 22px;
        }

        .miladalizadeh-code-detail {
            text-align: right;
        }

        .miladalizadeh-code-sub {
            display: block;
            font-size: 11px;
            color: #9584a7;
            margin-bottom: 2px;
        }

        .miladalizadeh-code-string {
            display: block;
            font-size: 20px;
            font-weight: bold;
            letter-spacing: 2px;
            color: #ffb703;
        }

        .miladalizadeh-btn-copy {
            background: linear-gradient(135deg, #ffb703, #fb8500);
            border: none;
            color: #170d00;
            border-radius: 10px;
            padding: 9px 16px;
            cursor: pointer;
            font-weight: bold;
            font-size: 13px;
            display: flex;
            align-items: center;
            gap: 6px;
            transition: filter 0.3s;
        }

        .miladalizadeh-btn-copy:hover {
            filter: brightness(1.2);
        }

        .miladalizadeh-btn-cta {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            width: 100%;
            background: linear-gradient(90deg, #9d4edd, #c77dff);
            color: #ffffff;
            text-decoration: none;
            padding: 15px;
            border-radius: 14px;
            font-size: 15px;
            font-weight: bold;
            box-shadow: 0 10px 25px rgba(157, 78, 221, 0.4);
            transition: transform 0.2s;
        }

        .miladalizadeh-btn-cta:hover {
            transform: translateY(-2px);
            color: #ffffff;
        }

        /* کی‌فریم‌ها */
        @keyframes miladalizadeh-lamp-enter {
            0% {
                opacity: 0;
                transform: scale(0.5) translateY(40px);
            }
            100% {
                opacity: 1;
                transform: scale(1) translateY(0);
            }
        }

        @keyframes miladalizadeh-smoke-flow {
            0% {
                opacity: 0;
                transform: translate(0, 0) scale(0.1);
            }
            30% {
                opacity: 0.85;
            }
            100% {
                opacity: 0;
                transform: translate(-120px, -180px) scale(2.4) rotate(-20deg);
            }
        }

        /* چرخش نرم خروج از دهانه قوری و استقرار قطعی در مرکز (بدون بازگشت یا غیب شدن) */
        @keyframes miladalizadeh-orbit-in {
            0% {
                opacity: 0;
                transform: translate(90px, -30px) scale(0.05) rotate(-35deg);
            }
            35% {
                opacity: 0.85;
                transform: translate(-50px, -100px) scale(0.55) rotate(15deg);
            }
            70% {
                opacity: 1;
                transform: translate(20px, -30px) scale(0.95) rotate(-4deg);
            }
            100% {
                opacity: 1;
                transform: translate(0, 0) scale(1) rotate(0deg);
            }
        }

        @media (max-width: 576px) {
            .miladalizadeh-stage-box {
                min-height: 520px;
            }
            .miladalizadeh-magic-card {
                padding: 26px 18px 22px;
            }
            .miladalizadeh-heading {
                font-size: 18px;
            }
            .miladalizadeh-code-wrapper {
                flex-direction: column;
                gap: 12px;
                text-align: center;
            }
            .miladalizadeh-code-detail {
                text-align: center;
            }
            .miladalizadeh-btn-copy {
                width: 100%;
                justify-content: center;
            }
            .miladalizadeh-lamp-container {
                transform: translate(-50%, -50%) scale(0.8);
            }
        }
    </style>

    <!-- اسکریپت فرانت‌اند دقیق و بدون پرش -->
    <script>
        (function() {
            document.addEventListener("DOMContentLoaded", function () {
                const overlay   = document.getElementById("miladalizadeh-magic-overlay");
                const closeBtn  = document.getElementById("miladalizadeh-close-trigger");
                const copyBtn   = document.getElementById("miladalizadeh-copy-trigger");
                const copyTxt   = document.getElementById("miladalizadeh-btn-txt");
                const codeVal   = document.getElementById("miladalizadeh-code-target");

                if (!overlay) return;

                const isTestMode = <?php echo $is_test_mode; ?>;
                const urlParams  = new URLSearchParams(window.location.search);
                
                // اگر با دکمه تست پیشخوان باز شده باشد سشن را درجا پاک کن
                if (urlParams.has("miladalizadeh_reset_magic")) {
                    sessionStorage.removeItem("miladalizadeh_magic_viewed");
                    localStorage.removeItem("miladalizadeh_magic_viewed");
                }

                const isSeen = sessionStorage.getItem("miladalizadeh_magic_viewed");

                // اجرای پاپ‌آپ اگر سشن ثبت نشده باشد یا حالت تست فعال باشد
                if (!isSeen || isTestMode) {
                    setTimeout(function () {
                        overlay.style.display = "flex";
                        // درخواست انیمیشن با تاخیر یک فریم جهت رندر روان در مرورگر
                        requestAnimationFrame(function() {
                            overlay.classList.add("miladalizadeh-is-visible");
                        });

                        if (!isTestMode) {
                            sessionStorage.setItem("miladalizadeh_magic_viewed", "true");
                        }
                    }, 500);
                }

                // بستن مطمئن و پایدار
                function closeMagicPopup() {
                    overlay.classList.remove("miladalizadeh-is-visible");
                    setTimeout(function () {
                        overlay.style.display = "none";
                    }, 400);
                }

                if (closeBtn) {
                    closeBtn.addEventListener("click", closeMagicPopup);
                }

                overlay.addEventListener("click", function (e) {
                    if (e.target === overlay) {
                        closeMagicPopup();
                    }
                });

                // کپی کد تخفیف
                if (copyBtn && codeVal) {
                    copyBtn.addEventListener("click", function () {
                        const text = codeVal.innerText.trim();
                        if (navigator.clipboard) {
                            navigator.clipboard.writeText(text).then(function () {
                                showCopyDone();
                            });
                        } else {
                            // فال‌بک مرورگرهای قدیمی‌تر
                            const tempInput = document.createElement("input");
                            tempInput.value = text;
                            document.body.appendChild(tempInput);
                            tempInput.select();
                            document.execCommand("copy");
                            document.body.removeChild(tempInput);
                            showCopyDone();
                        }
                    });
                }

                function showCopyDone() {
                    copyTxt.innerText = "کپی شد!";
                    copyBtn.style.background = "#2b8a3e";
                    copyBtn.style.color = "#ffffff";
                    setTimeout(function () {
                        copyTxt.innerText = "کپی کد";
                        copyBtn.style.background = "linear-gradient(135deg, #ffb703, #fb8500)";
                        copyBtn.style.color = "#170d00";
                    }, 2500);
                }

                // تایمر معکوس
                let countdown = <?php echo absint( $total_seconds ); ?>;
                const hr = document.getElementById("miladalizadeh-hour");
                const mn = document.getElementById("miladalizadeh-min");
                const sc = document.getElementById("miladalizadeh-sec");

                function updateTimerUI() {
                    if (!hr || !mn || !sc) return;
                    const h = Math.floor(countdown / 3600);
                    const m = Math.floor((countdown % 3600) / 60);
                    const s = countdown % 60;

                    hr.innerText = String(h).padStart(2, '0');
                    mn.innerText = String(m).padStart(2, '0');
                    sc.innerText = String(s).padStart(2, '0');
                }

                updateTimerUI();

                setInterval(function () {
                    if (countdown <= 0) return;
                    countdown--;
                    updateTimerUI();
                }, 1000);
            });
        })();
    </script>
    <?php
}

راهنمای گام‌به‌گام: چگونه این کد را به سایت وردپرسی خود اضافه کنیم؟

برای اضافه کردن این کد به وردپرس، چندین روش وجود دارد. در ادامه ایمن‌ترین و استانداردترین روش‌ها را با هم بررسی می‌کنیم:

روش اول: ویرایش از طریق مدیریت فایل هاست (روش حرفه‌ای)

گاهی اوقات ممکن است دسترسی به ویرایشگر وردپرس (Theme File Editor) به دلایل امنیتی توسط توسعه‌دهنده قالب بسته شده باشد، یا شاید ترجیح می‌دهید به جای محیط وردپرس، مستقیماً با فایل‌های سرور کار کنید. در این صورت، استفاده از File Manager هاست بهترین راهکار است.

گام‌های اجرای کار در هاست (cPanel یا DirectAdmin):

1. ورود به هاست: ابتدا وارد پنل مدیریت هاست خود (cPanel یا DirectAdmin) شوید.
2. باز کردن فایل منیجر: روی گزینه File Manager کلیک کنید.
3. مسیریابی: به پوشه ریشه سایت خود (معمولاً public_html) بروید. سپس مسیر زیر را دنبال کنید:wp-content > themes > your-theme-name(نکته: به‌جای your-theme-name نام پوسته فعال سایت خود را انتخاب کنید. اگر از Child Theme استفاده می‌کنید، حتماً وارد پوشه فرزند شوید).
4. ویرایش فایل: فایل functions.php را پیدا کنید. روی آن راست‌کلیک کرده و گزینه Edit را انتخاب کنید.
5. جای‌گذاری کد: کد مورد نظر خود را به انتهای فایل اضافه کنید.
6. ذخیره: دکمه Save Changes را در بالای صفحه ویرایشگر بزنید.

روش دوم : اضافه کردن کد به فایل functions.php (روش سریع)

فایل functions.php قلب تپنده قالب شماست و کدهای شخصی‌سازی در آن قرار می‌گیرند.

1. وارد پیشخوان وردپرس شوید: از منوی سمت راست به مسیر نمایش > ویرایشگر پرونده پوسته (Theme File Editor) بروید.
2. فایل مناسب را انتخاب کنید: از ستون سمت چپ (بخش پرونده‌های پوسته)، فایل توابع پوسته (functions.php) را پیدا کرده و روی آن کلیک کنید.
3. قرار دادن کد: به انتهای فایل بروید، یک خط جدید ایجاد کنید و کدهای بالا را دقیقاً در انتهای فایل پیست (Paste) کنید.
4. ذخیره تغییرات: روی دکمه به‌روزرسانی پرونده کلیک کنید.

⚠️ یک هشدار امنیتی بسیار مهم:

پیش از ویرایش فایل‌های قالب، حتماً یک نسخه پشتیبان (Backup) از فایل تهیه کنید. همچنین اگر قالب خود را آپدیت کنید، تغییراتی که در فایل functions.php قالب اصلی اعمال کرده‌اید پاک خواهند شد. برای جلوگیری از این مشکل، پیشنهاد می‌کنیم از پوسته فرزند (Child Theme) استفاده کنید یا به سراغ روش دوم بروید.

روش سوم: استفاده از افزونه‌های مدیریت کدهای سفارشی (روش ایمن و بدون خطر)

اگر نمی‌خواهید فایل‌های قالب را به صورت دستی ویرایش کنید و نگران به هم ریختن سایت یا پاک شدن کدها در آپدیت‌های بعدی قالب هستید، این روش بهترین گزینه است.

1. افزونه رایگان WPcode (Insert Headers and Footers) یا Code Snippets را از مخزن وردپرس نصب و فعال کنید.
2. از منوی جدیدی که در پیشخوان اضافه شده، روی Add Snippet (افزودن کد جدید) کلیک کنید.
3. یک عنوان دلخواه برای آن انتخاب کنید (مثلاً: نوار اعلان بالای هدر).
4. نوع کد (Code Type) را روی حالت PHP Snippet قرار دهید.
5. کدهای بالا را در باکس مربوطه کپی کنید.
6. وضعیت را روی Active (فعال) قرار داده و دکمه Save را بزنید.

اگر به دنبال یادگیری اصولی طراحی و توسعه وردپرس هستی، پیشنهاد می‌کنم حتماً سری به آموزش رایگان وردپرس بزنی. همچنین اگر قصد یادگیری حرفه‌ای و حضوری داری، دوره آموزش وردپرس در تبریز می‌تواند انتخاب بسیار خوبی برای شروع مسیر تخصصی تو باشد.