آموزش ساخت پاپ آپ در وردپرس؛ روش‌های ایجاد و شخصی‌سازی پاپ آپ

ساخت پاپ آپ در وردپرس با افزونه

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

در ادامه، مراحل ساخت پاپ آپ با Popup Maker را از نصب و فعال‌سازی افزونه تا افزودن محتوا، تنظیم نحوه نمایش و مدیریت روش بسته‌شدن پنجره بررسی می‌کنیم.

نصب و راه‌اندازی افزونه Popup Maker

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

ایجاد پاپ آپ جدید

پس از انجام تنظیمات اولیه، از منوی Popup Maker گزینه Add Popup را انتخاب کنید تا صفحه ساخت اولین پاپ آپ باز شود.

افزودن عنوان و محتوای پاپ آپ

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

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

تنظیم نحوه بازشدن پاپ آپ

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

تنظیم اندازه و نحوه نمایش پاپ آپ

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

تنظیمات Overlay نیز به لایه پس‌زمینه‌ای مربوط است که هنگام بازشدن پاپ آپ روی محتوای اصلی صفحه قرار می‌گیرد. با تغییر تنظیمات این قسمت می‌توانید نحوه نمایش این لایه را متناسب با طراحی سایت تنظیم کنید.

تنظیم انیمیشن و موقعیت پاپ آپ

در بخش تنظیمات نمایش، گزینه‌های زیر را هم برای کنترل انیمیشن و موقعیت پاپ آپ در اختیار دارید:

• Animation Type: نوع انیمیشن بازشدن پاپ آپ را مشخص می‌کند.
• Animation Speed: سرعت اجرای انیمیشن را تعیین می‌کند.
• Animation Origin: مشخص می‌کند انیمیشن نمایش پاپ آپ از کدام جهت یا موقعیت آغاز شود.
• Position: محل قرارگیری پاپ آپ در صفحه را تعیین می‌کند.

با تنظیم این گزینه‌ها می‌توانید نحوه ظاهرشدن پنجره را با طراحی و ساختار صفحات سایت هماهنگ کنید.

تنظیم نحوه بستن پاپ آپ

در بخش Close Settings تنظیمات مربوط به بسته‌شدن پاپ آپ در دسترس است. از قسمت Close Text می‌توانید متن یا علامت مربوط به بستن پنجره را مشخص کنید و سایر تنظیمات مرتبط با نحوه بسته‌شدن آن را تغییر دهید.

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

انتشار و بررسی پاپ آپ

پس از انجام تنظیمات، پاپ آپ را منتشر کنید و صفحه‌ای که برای نمایش آن انتخاب کرده‌اید را باز کنید. سپس نحوه بازشدن و بسته‌شدن پاپ آپ و نمایش صحیح محتوای آن را بررسی کنید تا مطمئن شوید که همه تنظیمات به‌درستی اعمال شده‌اند.

ساخت پاپ آپ با المنتور

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

نکته مهمی که باید بدانید این است که قابلیت Popup Builder در Elementor Pro ارائه می‌شود و در نسخه رایگان المنتور در دسترس نیست. بنابراین، برای دنبال‌کردن مراحل این آموزش باید نسخه Pro روی سایت شما فعال باشد.

ایجاد قالب پاپ آپ

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

در این بخش روی گزینه Add New کلیک کنید. در پنجره بازشده، نوع قالب را روی Popup قرار دهید، یک نام برای پاپ آپ وارد کنید و سپس گزینه Create Template را بزنید.

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

طراحی محتوای پاپ آپ

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

برای مثال، از ابزارک‌های مربوط به متن و عنوان برای نوشتن پیام پاپ آپ، از Image برای افزودن تصویر و از Button برای ایجاد دکمه فراخوان به اقدام استفاده کنید. اگر هدف پاپ آپ دریافت اطلاعات کاربران است، می‌توانید ابزارک Form را هم به قالب اضافه کنید و فیلدهایی مانند نام، ایمیل یا شماره تماس را در آن قرار دهید.

از طریق آیکون تنظیمات پاپ آپ هم به سه بخش اصلی Settings، Style و Advanced دسترسی دارید که برای کنترل ظاهر و رفتار پنجره استفاده می‌شوند.

تنظیم ابعاد و چیدمان پاپ آپ

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

در قسمت Layout عرض و ارتفاع پاپ آپ و موقعیت افقی و عمودی آن را مشخص کنید. همچنین می‌توانید نمایش Overlay و Close Button را فعال یا غیرفعال کنید. گزینه‌های مربوط به انیمیشن هم امکان تعیین نحوه ورود و خروج پاپ آپ و سرعت اجرای انیمیشن را فراهم می‌کنند.

در تنظیمات عمومی می‌توانید اطلاعات مربوط به پاپ آپ را مدیریت کنید. بخش Preview Settings هم برای انتخاب محتوایی مانند یک نوشته یا برگه و مشاهده نتیجه طراحی در شرایط نزدیک‌تر به صفحه موردنظر کاربرد دارد.

شخصی‌سازی ظاهر پاپ آپ

برای تغییر ظاهر پنجره به بخش Style بروید. در این قسمت تنظیمات مربوط به خود Popup، لایه Overlay و دکمه بستن در دسترس است.

در قسمت Popup می‌توانید مواردی مانند پس‌زمینه، حاشیه، گوشه‌ها و سایه پنجره را شخصی‌سازی کنید. بخش Overlay برای تنظیم ظاهر لایه‌ای است که هنگام بازشدن پاپ آپ روی صفحه قرار می‌گیرد. همچنین در قسمت Close Button می‌توانید ویژگی‌های ظاهری دکمه بستن مانند رنگ، اندازه و محل قرارگیری آن را تنظیم کنید.

تنظیم رفتار پاپ آپ

برای کنترل جزئی‌تر رفتار پنجره وارد بخش Advanced شوید. این قسمت علاوه بر تنظیمات پیشرفته، امکان افزودن CSS سفارشی را نیز در اختیار شما قرار می‌دهد.

مهم‌ترین گزینه‌های این قسمت عبارت‌اند از:

• Show Close Button After: تعیین مدت‌زمانی که پس از آن دکمه بستن نمایش داده شود.
• Automatically Close After: تعیین زمان بسته‌شدن خودکار پاپ آپ.
• Prevent Closing on Overlay: جلوگیری از بسته‌شدن پنجره با کلیک روی فضای بیرون پاپ آپ.
• Prevent Closing on ESC Key: جلوگیری از بسته‌شدن پاپ آپ با کلید ESC.
• Disable Page Scrolling: جلوگیری از اسکرول صفحه پشت پاپ آپ هنگام نمایش پنجره.
• Avoid Multiple Popups: جلوگیری از نمایش هم‌زمان چند پاپ آپ.
• Open By Selector: تعیین بازشدن پاپ آپ از طریق Selector مشخص.

همچنین در صورت نیاز می‌توانید در قسمت Custom CSS برای تغییرات بیشتر در طراحی،  CSS سفارشی اضافه کنید.

تنظیم شرایط و زمان نمایش پاپ آپ

پس از تکمیل طراحی، باید مشخص کنید پاپ آپ کجا، چه زمانی و تحت چه شرایطی به کاربران نمایش داده شود. المنتور برای این کار سه بخش Display Conditions، Triggers و Advanced Rules را در اختیار شما قرار می‌دهد.

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

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

در Advanced Rules هم می‌توانید شرایط دقیق‌تری برای نمایش تعریف کنید. برای مثال، می‌توانید نحوه نمایش را براساس دستگاه کاربر، تعداد دفعات نمایش یا تعداد صفحاتی که کاربر مشاهده کرده است کنترل کرد.

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

ساخت پاپ آپ در وردپرس بدون افزونه

برای ساخت پاپ آپ در وردپرس بدون افزونه، می‌توانید از HTML، CSS و JavaScript استفاده کنید. در این روش، HTML ساختار پنجره را ایجاد می‌کند، CSS ظاهر آن را مشخص می‌کند و JavaScript وظیفه نمایش و بسته‌شدن پاپ آپ را بر عهده دارد.

در نمونه زیر، یک پاپ آپ ساده می‌سازیم که چند ثانیه پس از ورود کاربر به صفحه نمایش داده می‌شود و کاربر می‌تواند آن را با دکمه بستن یا دکمه داخل پنجره ببندد. برای جلوگیری از حذف تغییرات هنگام به‌روزرسانی قالب، بهتر است کدها را در Child Theme قرار دهید. اگر نمی‌خواهید فایل‌های قالب را ویرایش کنید، می‌توانید از افزونه‌هایی مانند Code Snippets برای افزودن و مدیریت کدهای سفارشی استفاده کنید.

ایجاد ساختار پاپ آپ با HTML

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

add_action( 'wp_footer', 'custom_add_popup' );

function custom_add_popup() {
    if ( is_admin() ) {
        return;
    }
    ?>
    <div id="custom-popup" class="custom-popup-overlay" style="display:none;">
        <div class="custom-popup-modal">
            <button class="custom-popup-close" type="button" aria-label="بستن">&times;</button>

            <div class="custom-popup-content">
                <h3>پیشنهاد ویژه</h3>
                <p>برای مشاهده پیشنهاد ویژه ما روی دکمه زیر کلیک کنید.</p>
                <button class="custom-popup-btn" type="button">متوجه شدم</button>
            </div>
        </div>
    </div>
    <?php
}

در این کد، custom-popup-overlay لایه‌ای است که هنگام بازشدن پاپ آپ روی صفحه قرار می‌گیرد و custom-popup-modal پنجره اصلی را ایجاد می‌کند. عنوان، توضیحات و متن دکمه را هم می‌توانید متناسب با محتوای موردنظر خود تغییر دهید. همچنین ویژگی display:none باعث می‌شود پاپ آپ در ابتدا مخفی باشد. در مراحل بعد با JavaScript مشخص می‌کنیم که چه زمانی نمایش داده شود.

طراحی ظاهر پاپ آپ با CSS

در مرحله بعد باید ظاهر پنجره را طراحی کنید. کد CSS زیر را در فایل style.css قالب فرزند قرار دهید:

.custom-popup-overlay {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 99999;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.custom-popup-modal {
    position: relative;
    background: #fff;
    width: 90%;
    max-width: 480px;
    padding: 40px 30px;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
}

.custom-popup-close {
    position: absolute;
    top: 10px;
    right: 15px;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

.custom-popup-content {
    text-align: center;
}

.custom-popup-content h3 {
    margin-top: 0;
    font-size: 22px;
}

.custom-popup-btn {
    margin-top: 10px;
    padding: 12px 30px;
    border: 0;
    border-radius: 4px;
    background: #1e73be;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
}

.custom-popup-btn:hover {
    background: #155a96;
}

این کد یک پس‌زمینه نیمه‌شفاف روی صفحه ایجاد می‌کند و پنجره پاپ آپ را در مرکز آن قرار می‌دهد. با تغییر مقادیری مانند background، max-width، padding و border-radius می‌توانید رنگ، اندازه، فاصله داخلی و میزان گردی گوشه‌های پاپ آپ را متناسب با طراحی سایت تغییر دهید.

استفاده از width: 90% و max-width: 480px هم کمک می‌کند عرض پنجره در نمایشگرهای کوچک از فضای موجود بیشتر نشود.

کنترل باز و بسته‌شدن پاپ آپ با JavaScript

اکنون باید مشخص کنید پاپ آپ چه زمانی باز شود و کاربر چگونه بتواند آن را ببندد. در پوشه قالب فرزند یک فایل با نام popup.js ایجاد کنید و کد زیر را داخل آن قرار دهید:

document.addEventListener('DOMContentLoaded', function () {
    const popup = document.getElementById('custom-popup');
    const closeButton = document.querySelector('.custom-popup-close');
    const actionButton = document.querySelector('.custom-popup-btn');

    if (!popup) {
        return;
    }

    function getCookie(name) {
        const value = `; ${document.cookie}`;
        const parts = value.split(`; ${name}=`);
        if (parts.length === 2) {
            return parts.pop().split(';').shift();
        }
    }

    function setCookie(name, value, days) {
        const date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        document.cookie = `${name}=${value}; expires=${date.toUTCString()}; path=/`;
    }

    function showPopup() {
        popup.style.display = 'flex';
    }

    function closePopup() {
        popup.style.display = 'none';
        setCookie('custom_popup_closed', 'yes', 30);
    }

    if (!getCookie('custom_popup_closed')) {
        setTimeout(showPopup, 3000);
    }

    if (closeButton) {
        closeButton.addEventListener('click', closePopup);
    }

    if (actionButton) {
        actionButton.addEventListener('click', closePopup);
    }

    popup.addEventListener('click', function (event) {
        if (event.target === popup) {
            closePopup();
        }
    });
});

در این کد، تابع setTimeout باعث می‌شود پاپ آپ ۳ ثانیه پس از آماده‌شدن صفحه نمایش داده شود. مقدار 3000 برحسب میلی‌ثانیه است و می‌توانید آن را برای تغییر زمان انتظار قبل از نمایش پنجره تغییر دهید.

برای جلوگیری از نمایش پاپ آپ در هر بار بازکردن صفحه یا رفرش، از Cookie استفاده شده است. پس از اینکه کاربر پنجره را بست، یک Cookie با نام custom_popup_closed در مرورگر او ذخیره می‌شود. در بازدیدهای بعدی، JavaScript ابتدا وجود این Cookie را بررسی می‌کند و اگر هنوز فعال باشد، پاپ آپ دوباره نمایش داده نمی‌شود.

کاربر می‌تواند پنجره را از طریق علامت ×، دکمه داخل پاپ آپ یا کلیک روی فضای تیره اطراف آن ببندد. در این مثال، Cookie به مدت ۳۰ روز فعال می‌ماند و پس از پایان این مدت، امکان نمایش دوباره پاپ آپ برای کاربر وجود خواهد داشت.

 

بارگذاری فایل JavaScript در وردپرس

ساخت فایل popup.js به‌تنهایی کافی نیست و باید آن را در وردپرس بارگذاری کنید. برای این کار کد زیر را هم به فایل functions.php قالب فرزند اضافه کنید:

add_action( 'wp_enqueue_scripts', 'custom_load_popup_script' );
function custom_load_popup_script() {
    wp_enqueue_script(
        'custom-popup',
        get_stylesheet_directory_uri() . '/popup.js',
        array(),
        '1.0',
        true
    );
}

تابع wp_enqueue_script() فایل popup.js را به سایت اضافه می‌کند. مقدار true در انتهای تابع هم مشخص می‌کند که اسکریپت در بخش پایانی صفحه بارگذاری شود. در پایان، ساختار فایل‌های قالب فرزند باید به این شکل باشد:

child-theme/
├── functions.php
├── style.css
└── popup.js

در این ساختار، کدهای مربوط به ایجاد پاپ آپ و فراخوانی فایل JavaScript در functions.php قرار دارند. همچنین ظاهر پاپ آپ در فایل style.css تنظیم می‌شود و فایل popup.js نیز وظیفه کنترل باز و بسته‌شدن پنجره را بر عهده دارد.

بررسی عملکرد پاپ آپ

پس از ذخیره تغییرات، یکی از صفحات سایت را باز کنید. اگر کدها به‌درستی قرار گرفته باشند، پاپ آپ پس از ۳ ثانیه در مرکز صفحه نمایش داده می‌شود. سپس علامت ×، دکمه داخل پنجره و فضای اطراف پاپ آپ را امتحان کنید و مطمئن شوید هر سه روش باعث بسته‌شدن آن می‌شوند.

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

تنظیم نحوه نمایش و بهینه‌سازی پاپ آپ

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

نمایش بیش‌ازحد یا در زمان نامناسب می‌تواند باعث مزاحمت برای کاربر شود، به همین دلیل بهتر است تعداد دفعات نمایش پاپ آپ محدود شود. برای مثال، معمولا پیام‌های تبلیغاتی نباید بیشتر از یک‌بار در روز به یک کاربر نمایش داده شوند. برای کمپین‌های کوتاه‌مدت هم می‌توان فاصله نمایش را چند روز یا بیشتر در نظر گرفت.

تنظیم زمان و نحوه نمایش پاپ آپ

پاپ آپ را می‌توان بلافاصله پس از ورود کاربر به صفحه یا در واکنش به رفتار مشخصی نمایش داد. در Popup Maker و Elementor می‌توانید Triggerهای مختلفی برای نمایش پاپ آپ تنظیم کنید. برای مثال، می‌توان نمایش پنجره را به گذشت زمان مشخص، کلیک روی یک دکمه یا تعامل کاربر با بخش خاصی از صفحه مرتبط کرد.

در حالت Timer نیز با تعیین زمان انتظار، پاپ آپ پس از تعداد مشخصی ثانیه نمایش داده می‌شود. انتخاب Trigger مناسب باید براساس هدف پاپ آپ انجام شود. برای مثال، نمایش یک پیشنهاد فروش پس از اینکه کاربر مدتی در صفحه حضور داشته یا با محتوا تعامل کرده است، معمولا تجربه بهتری نسبت به نمایش فوری پنجره هنگام ورود ایجاد می‌کند.

تعیین صفحات و کاربران هدف

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

در Popup Maker و Elementor می‌توانید با استفاده از تنظیمات نمایش، مشخص کنید پاپ آپ در چه صفحات یا بخش‌هایی از سایت نمایش داده شود. برای مثال، می‌توان نمایش یک پاپ آپ فروش را فقط به صفحات محصول محدود کرد یا یک پیام اطلاع‌رسانی را در صفحه اصلی نمایش داد.

برای مثال، یک پیشنهاد مرتبط با محصول بهتر است در صفحات مرتبط با همان پیشنهاد نمایش داده شود. (نه در تمام بخش‌های سایت) همچنین محدودکردن نمایش به صفحات و مخاطبان مرتبط کمک می‌کند پیام پاپ آپ با محتوایی که کاربر در حال مشاهده آن است هماهنگی بیشتری داشته باشد.

کنترل تعداد دفعات نمایش

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

این قابلیت ممکن است بسته به ابزار مورد استفاده، با گزینه‌هایی مانند Frequency Capping یا تنظیمات مربوط به بازدیدکنندگان قبلی ارائه شود. برای نمونه، می‌توان از نمایش مجدد یک پاپ آپ برای کاربری که قبلا آن را بسته یا اقدام موردنظر را انجام داده است جلوگیری کرد. 

این قابلیت بسته به ابزار مورد استفاده، ممکن است با گزینه‌هایی مانند Frequency Capping یا تنظیمات مربوط به بازدیدکنندگان قبلی ارائه شود. برای مثال، در Popup Maker می‌توان Cookie را به تنظیمات نمایش متصل کرد تا پس از بسته‌شدن پاپ آپ یا انجام اقدام موردنظر، پنجره برای مدت مشخصی دوباره نمایش داده نشود.

طراحی پاپ آپ برای تجربه کاربری بهتر

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

برای مثال، در Popup Maker و Elementor می‌توانید تنظیمات ظاهری پاپ آپ مانند اندازه پنجره، موقعیت نمایش، ظاهر پس‌زمینه و دکمه بستن را مدیریت کنید. بهتر است اندازه پنجره متناسب با صفحه باشد، دکمه بستن واضح طراحی شود و کاربر بتواند بدون مشکل به محتوای اصلی سایت بازگردد.

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

بهینه‌سازی پاپ آپ برای موبایل

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

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

حفظ سرعت سایت و بهبود نرخ تبدیل

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

پس از ایجاد پاپ آپ هم عملکرد صفحه را در دسکتاپ و موبایل بررسی کنید تا مطمئن شوید استفاده از آن باعث کاهش محسوس سرعت سایت نشده است. برای این بررسی می‌توانید از ابزارهایی مانند Google PageSpeed Insights، GTmetrix و Lighthouse استفاده کنید تا تاثیر فایل‌های JavaScript، تصاویر و سایر منابع مرتبط با پاپ آپ را ارزیابی کنید.

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

رفع مشکلات رایج پاپ آپ وردپرس

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

پاپ آپ نمایش داده نمی‌شود

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

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

اگر تنظیمات صحیح هستند، Cache مرورگر، افزونه Cache، سرور و CDN را پاک کنید و دوباره نتیجه را بررسی کنید. همچنین آزمایش صفحه در حالت Incognito می‌تواند برای تشخیص مشکلات مربوط به Cache یا Cookie مفید باشد.

پاپ آپ باز یا بسته نمی‌شود

بازنشدن پاپ آپ می‌تواند به Trigger نامناسب، خطای JavaScript یا تداخل کدها مربوط باشد. در این شرایط Console مرورگر را بررسی کنید، زیرا یک خطای JavaScript در قالب یا افزونه پاپ آپ وردپرس (یا افزونه دیگری)، ممکن است اجرای اسکریپت پاپ آپ را هم متوقف کند.

اگر دکمه بستن کار نمی‌کند، ابتدا تنظیمات مربوط به Close Button را بررسی کنید. در Popup Maker، دکمه‌های سفارشی باید کلاس‌های لازم برای بسته‌شدن پنجره را داشته باشند. اگر دکمه استاندارد افزونه هم کار نمی‌کند، احتمال تداخل CSS، JavaScript، قالب یا افزونه دیگری وجود دارد.

پاپ آپ به‌صورت مکرر نمایش داده می‌شود

اگر پاپ آپ با وجود تنظیم محدودیت نمایش، همچنان در هر بار ورود به سایت نمایش داده می‌شود، ابتدا وضعیت Cookie مرورگر را بررسی کنید. پاک‌شدن Cookie، غیرفعال بودن ذخیره Cookie در مرورگر یا استفاده از مرورگر ناشناس می‌تواند باعث شود محدودیت نمایش اعمال نشود. همچنین پس از تغییر تنظیمات پاپ آپ، پاک‌کردن کش مرورگر، افزونه‌های کش وردپرس یا CDN می‌تواند به نمایش صحیح تنظیمات جدید کمک کند.

مشکلات نمایش پاپ آپ در موبایل

اگر پاپ آپ وردپرس در موبایل نمایش داده نمی‌شود، ابتدا تنظیمات Targeting را بررسی کنید و مطمئن شوید نمایش آن برای موبایل یا تبلت غیرفعال نشده است. پس از تغییر تنظیمات هم Cache سایت و مرورگر را پاک کنید.

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

تداخل پاپ آپ با قالب یا افزونه‌های دیگر

برخی مشکلات پاپ آپ به تداخل CSS یا JavaScript با قالب، افزونه‌ها یا کدهای سفارشی مربوط می‌شوند. برای بررسی این موضوع، بهتر است عیب‌یابی را ابتدا در یک سایت Staging انجام دهید.

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

همچنین گاهی اوقات افزونه‌های Cache و بهینه‌سازی JavaScript هم می‌توانند فایل‌های موردنیاز پاپ آپ را تغییر دهند یا مانع بارگذاری صحیح آن‌ها شوند، بنابراین تنظیمات Minify ،Combine یا Delay JavaScript را هنگام عیب‌یابی بررسی کنید.

مراحل کلی عیب‌یابی پاپ آپ

برای پیدا کردن سریع‌تر علت مشکل پس از ساخت پاپ آپ در وردپرس، بهتر است بررسی را به‌ترتیب انجام دهید. ابتدا فعال‌بودن پاپ آپ و Trigger را کنترل کنید، سپس سراغ بررسی Targeting و Cookieها بروید و در نهایت Cache را پاک کنید. در مرحله بعد Console مرورگر را برای خطاهای JavaScript بررسی کرده و در آخرین مرحله سراغ احتمال تداخل قالب، افزونه‌ها و کدهای سفارشی بروید.

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

جمع‌بندی

ساخت پاپ آپ در وردپرس با روش‌های مختلفی امکان‌پذیر است و انتخاب روش مناسب به ابزارهای سایت و میزان کنترل موردنیاز شما بستگی دارد. در این آموزش، ساخت پاپ آپ با المنتور و افزونه Popup Maker را بررسی کردیم و دیدیم که این ابزارها امکان طراحی پاپ آپ در وردپرس و مدیریت شرایط و زمان نمایش آن را بدون نیاز به کدنویسی فراهم می‌کنند. همچنین روش ساخت پاپ آپ در وردپرس بدون افزونه را با استفاده از HTML ،CSS و JavaScript توضیح دادیم تا در صورت نیاز بتوانید کنترل بیشتری روی ساختار و عملکرد پنجره داشته باشید.

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