آیا میخواهید در وردپرس یک پاپآپ بسازید ولی افزونه نصب نکنید؟ در این راهنما، قدمبه‑قدم با توابع هسته و کدهای ساده، یک پاپآپ کارا میسازیم. مثالهای عملی و توضیحهای واضح باعث میشود حتی با تجربهٔ کم، به راحتی پیش بروید. ما بهینهسازی CSS، JavaScript پایه و تنظیمات نمایش را گام به گام نشان میدهیم. هر بخش با نکات کلیدی و هشدارهای رایج همراه است تا از خطا جلوگیری کنید. در نهایت، یک پاپآپ سفارشی، سازگار با مرورگرها و بدون افزونهٔ خارجی خواهید داشت.
فهرست مطالب
- آشنایی با اصول پاپ اپ
- ایجاد قالب HTML ساده
- نوشتن کد CSS برای ظاهر
- افزودن اسکریپت JavaScript پایه
- قرار دادن کد در فایل functions
- تنظیم رفتار نمایش شرطی
- تست و بهینهسازی عملکرد
- سوالات متداول
آشنایی با اصول پاپ اپ
پاپ‑اپها ابزار قدرتمندی برای جذب توجه بازدیدکننده هستند، اما برای اثرگذاری واقعی باید اصول پایهای رفتار کاربری و روانشناسی تعامل را درک کنید. اولین اصل این است که زمان نمایش باید بهگونهای تنظیم شود که کاربر هنوز محتوا را میخواند، اما قبل از اینکه کاملاً از صفحه خارج شود، به او یک پیشنهاد ارزشمند ارائه شود. برای مثال، نمایش پاپ‑اپ پس از عبور از ۳۰٪ ارتفاع صفحه یا پس از ۱۰ ثانیه حضور فعال، معمولاً تعادل خوبی بین عدم مزاحمت و دیده شدن فراهم میکند.
دومین اصل، سازگاری با دستگاههای مختلف است. در موبایلها فضای صفحه محدود است؛ بنابراین پاپ‑اپ باید بهصورت تمامعرض (full‑width) یا بهصورت نوار بالای صفحه (top‑bar) ظاهر شود و امکان بستن راحت را با یک دکمه بزرگ فراهم کند. در دسکتاپ میتوانید از پنجرههای وسط صفحه (center modal) استفاده کنید تا توجه کاربر را جلب کنید، اما باید از اندازههای بزرگ که محتوا را مخفی میکند، اجتناب کنید.
سومین نکته مهم، ارزش پیشنهادی واضح است. پیام پاپ‑اپ باید در کمتر از یک خط به بازدیدکننده بگوید چه چیزی برایش مهم است؛ مثل «۱۰٪ تخفیف برای اولین خرید» یا «دریافت راهنمای رایگان سئو». استفاده از برای کلمات کلیدی و برای جزئیات تکمیلی میتواند خوانایی را بالا برد. همچنین افزودن یک دکمهٔ فراخوانی به عمل (CTA) با متن مشخص مثل «همین حالا دریافت کن» باعث میشود کاربر بهسرعت تصمیم بگیرد.
در ادامه یک جدول خلاصهٔ چهار اصل کلیدی پاپ‑اپ ارائه میشود:
| اصل | توضیح کوتاه | نکته عملی |
|---|---|---|
| زمان نمایش | بهموقع و غیرمزاحم | پس از ۳۰٪ اسکرول یا ۱۰ ثانیه |
| پاسخگویی به دستگاه | طراحی مناسب موبایل و دسکتاپ | نوار بالایی در موبایل، مودال مرکزی در دسکتاپ |
| ارزش پیشنهادی | پیام واضح و مختصر | استفاده از کلمات کلیدی و CTA واضح |
| قابلیت بستن | دسترسپذیری برای خروج | دکمهٔ «X» بزرگ و قابل کلیک |
در نهایت، به یاد داشته باشید که تست A/B (تجربهٔ مقایسهای) یکی از بهترین روشها برای بهینهسازی پاپ‑اپهاست. میتوانید دو نسخهٔ متفاوت از پیام یا زمان نمایش را به گروههای تصادفی نشان دهید و نرخ تبدیل (conversion rate) را مقایسه کنید. این کار به شما کمک میکند تا دقیقاً بفهمید کدام ترکیب از اصول فوق برای مخاطب خاص سایتتان موثرتر است.
ایجاد قالب HTML ساده
برای ساختن پاپ‑اپ بدون نیاز به افزونه، ابتدا یک قالب HTML ساده مینویسیم که شامل لایهٔ پوششدار (overlay)، جعبهٔ محتوا، دکمهٔ بستن و محتوای دلخواه باشد. این ساختار پایه به شما این امکان را میدهد که با افزودن CSS و JavaScript فقط رفتار نمایش/پنهانسازی را کنترل کنید، در حالی که تمام عناصر بهصورت واضح و قابل ویرایش در کد HTML باقی میمانند.
در زیر یک نمونهٔ اولیهٔ قالب آورده شده است. میتوانید آن را در فایل popup-template.php یا هر فایلی که میخواهید در قالب خود قرار دهید، کپی کنید. توضیح کوتاهی داخل هر خط کمک میکند تا هر بخش را بشناسید.
پس از قرار دادن کد، با افزودن کلاسهای CSS میتوانید ظاهر را به سلیقهٔ خود تنظیم کنید؛ بهعنوان مثال .popup-overlay میتواند پسزمینهٔ نیمهشفافی با رنگ rgba(0,0,0,0.6) داشته باشد، و .popup-box میتواند حاشیهٔ گرد، سایهٔ ملایم و عرض حداکثر 90٪ صفحه را بهدست آورد. برای بارگذاری مسیرهای تصویر یا استایل از تابع get_template_directory_uri() استفاده کنید تا در محیط وردپرس بهدرستی لینکها تولید شوند.
| عنصر | هدف | توضیح مختصر |
|---|---|---|
| popup-overlay | پوشش پسزمینه | پوشش نیمهشفاف که کلیک روی آن میتواند پاپ‑اپ را ببندد. |
| popup-box | محفظهٔ محتوا | جعبهٔ مرکزی که محتوا و دکمهٔ بستن داخل آن قرار میگیرد. |
| popup-close | دکمه بستن | دکمهٔ «×» برای بسته شدن سریع پاپ‑اپ. |
| popup-content | متن و CTA | قسمتی برای عنوان، متن توضیحی و دکمهٔ اقدام (CTA). |
نکتهٔ کاربردی: برای فعالسازی پاپ‑اپ میتوانید یک اسکریپت سادهٔ JavaScript اضافه کنید که هنگام بارگذاری صفحه یا پس از گذشت زمان مشخص (مثلاً ۵ ثانیه) کلاس active را به #myPopupOverlay اضافه کند. این کار باعث میشود پوشش و جعبهٔ پاپ‑اپ با انیمیشن fade‑in ظاهر شوند؛ بهعلاوه، افزودن یک eventListener برای دکمهٔ بستن یا کلیک روی پوشش، کلاس را حذف میکند و پاپ‑اپ مخفی میشود. این روش کاملاً سبک است و نیازی به کتابخانهٔ بزرگ یا افزونهٔ اضافه ندارید.
نوشتن کد CSS برای ظاهر
برای اینکه پاپآپ بدون افزونه بهصورت حرفهای ظاهر شود، اولین قدم نوشتن CSS است که بهطور دقیق بر ساختار HTML ایجاد شده توسط توابع PHP یا شورتکدها اعمال میشود. این استایلها نه تنها ظاهر زیبایی میدهند، بلکه قابلیت واکنشگرا (responsive) و انیمیشنهای نرم را نیز تضمین میکنند، بهطوری که بازدیدکنندگان حس یک تجربه کاربری بومی را دریافت کنند.
در اکثر پیادهسازیها دو عنصر اصلی وجود دارد: .my-popup-overlay که تمام صفحه را میپوشاند و .my-popup-content که محتوای پاپآپ را در مرکز نمایش میدهد. برای انتخاب این عناصر میتوانید از کلاسها یا شناسهها (ID) استفاده کنید؛ مهم است که این انتخابگرها بهصورت خاص (specific) باشند تا با قالبهای دیگر تداخل نداشته باشند.
چند ویژگی اساسی که بهسرعت ظاهر پاپآپ را بهبود میبخشد عبارتند از:
- پسزمینه شفاف یا رنگی برای لایه پوشش (overlay)؛ معمولاً از
rgba(0,0,0,0.6)استفاده میشود تا محتوا زیرین کمی تار شود. - حاشیهگرد (border‑radius) برای جعبه محتوا؛ مقدار ۸ تا ۱۲ پیکسل ظاهری مدرن میدهد.
- سایه (box‑shadow) جهت برجستهسازی؛ یک مقدار
0 4px 12px rgba(0,0,0,0.2)کافی است. - انیمیشن ظاهر شدن؛ با استفاده از
@keyframes fadeInمیتوانید پاپآپ را بهصورت تدریجی نشان دهید.
| ویژگی | مقدار پیشنهادی | توضیح مختصر |
|---|---|---|
| Overlay background | rgba(0,0,0,0.6) | شفافیت مناسب برای تمرکز بر محتوا |
| Popup width | 90% (max‑width: 500px) | پوشش تمام صفحه در موبایل، محدود در دسکتاپ |
| Border‑radius | 10px | حاشیه نرم و مدرن |
| Box‑shadow | 0 4px 12px rgba(0,0,0,0.2) | ایجاد عمق بصری |
| Animation | 0.3s ease‑out | ظاهر شدن ملایم |
برای واکنشگرا بودن، میتوانید از یک قانون رسانهای (media query) ساده استفاده کنید تا در صفحههای کوچکتر، عرض پاپآپ بهصورت کامل (100 %) تنظیم شود و فاصلههای داخلی (padding) کاهش یابد. بهعنوان مثال:
@media (max-width: 480px) {
.my-popup-content {
width: 100%;
padding: 1rem;
}
}
نکته عملی: اگر در حین توسعه تغییرات CSS را در مرورگر (با ابزارهای توسعهدهنده) تست کنید، میتوانید بهسرعت مقدار z-index را تنظیم کنید تا مطمئن شوید پاپآپ بالای همه عناصر دیگر قرار دارد؛ مقدار 9999 معمولاً کافی است. این کار از بروز مشکلات پوششدادن (overlap) جلوگیری میکند و تجربه کاربری را بهبود میبخشد.
افزودن اسکریپت JavaScript پایه
برای شروع، کافی است یک فایل popup.js در پوشه قالب یا یک زیرپوشه مانند js ایجاد کنید. این فایل شامل توابع سادهای است که باز و بسته کردن پاپ‑اپ را کنترل میکند. در سادهترین حالت، یک تابع togglePopup() میتواند کلاس visible را به المان پاپ‑اپ اضافه یا حذف کند؛ CSS مربوطه مسئول نمایش یا مخفیسازی آن است.
- ایجاد فایل جاوااسکریپت: در مسیر
wp-content/themes/your-theme/js/یک فایل به نامpopup.jsبسازید. - نوشتن کد پایه:
document.addEventListener('DOMContentLoaded', function () { const btn = document.getElementById('open-popup'); const overlay = document.getElementById('popup-overlay'); const close = document.getElementById('close-popup'); function togglePopup() { overlay.classList.toggle('visible'); } btn && btn.addEventListener('click', togglePopup); close && close.addEventListener('click', togglePopup); overlay && overlay.addEventListener('click', function(e) { if (e.target === overlay) togglePopup(); }); }); - بارگذاری اسکریپت در وردپرس: در فایل
functions.phpقالب خود، ازwp_enqueue_script()استفاده کنید تا فایل بهصورت غیرهمزمان (async) لود شود.
کد زیر را در functions.php اضافه کنید. توجه داشته باشید که مسیر نسبت به قالب تنظیم شده و از پارامتر true برای لود در پایین صفحه استفاده میشود تا اطمینان حاصل شود DOM قبلاً آماده است.
function theme_enqueue_popup_script() {
wp_enqueue_script(
'custom-popup',
get_template_directory_uri() . '/js/popup.js',
array(),
null,
true
);
}
add_action('wp_enqueue_scripts', 'theme_enqueue_popup_script');در صورت نیاز به پشتیبانی از مرورگرهای قدیمی یا افزودن انیمیشنهای ساده، میتوانید از توابع fadeIn و fadeOut با CSS Transitions بهره ببرید. بهعنوان مثال، اضافه کردن کلاس fade به المان پاپ‑اپ باعث میشود که تغییر شفافیت بهصورت نرم اتفاق بیفتد. این کار تنها با یک خط CSS انجام میشود و نیازی به کتابخانههای سنگین نیست.
| عملیات | کد JavaScript | توضیح |
|---|---|---|
| باز کردن پاپ‑اپ | overlay.classList.add('visible'); | کلاس CSS visible را اضافه میکند. |
| بستن پاپ‑اپ | overlay.classList.remove('visible'); | کلاس را حذف میکند تا پاپ‑اپ مخفی شود. |
| تغییر وضعیت | overlay.classList.toggle('visible'); | اگر موجود باشد حذف، اگر نباشد اضافه میکند. |
در نهایت، برای تست سریع میتوانید یک دکمه ساده در قالب خود بگذارید: . وقتی این دکمه کلیک شد، اسکریپت بالا اجرا میشود و پاپ‑اپ با انیمیشن دلخواه شما ظاهر میشود. این روش پایه، بدون هیچ افزونهای، به شما امکان میدهد تا کنترل کامل بر رفتار و ظاهر پاپ‑اپ داشته باشید و در صورت نیاز به گسترش، بهراحتی توابع یا رویدادهای جدید اضافه کنید.
قرار دادن کد در فایل functions
فایل functions.php در قالب وردپرس محلی است که میتوانید توابع PHP دلخواه خود را بهصورت مستقیم اضافه کنید. پیش از هر تغییری، حتماً یک نسخه پشتیبان از این فایل بگیرید و اگر از قالب اصلی استفاده میکنید، بهتر است یک قالب فرزند (child theme) بسازید تا بهروزرسانیهای قالب اصلی باعث از دست رفتن کدهای شما نشود.
برای نمایش پنجرهٔ پاپ‑اپ بدون نیاز به افزونه، سادهترین روش این است که یک هوک (hook) به wp_footer اضافه کنید؛ این هوک در انتهای هر صفحه اجرا میشود و میتواند کد HTML، CSS و JavaScript مورد نیاز پاپ‑اپ را درج کند. نمونهٔ زیر یک بلوک سادهٔ پاپ‑اپ را با استفاده از add_action ایجاد میکند:
add_action( 'wp_footer', function() {
?>
مراحل دقیق افزودن این کد به functions.php به صورت زیر است:
- از طریق FTP یا مدیر فایلهای هاست، مسیر
/wp-content/themes/your-child-theme/functions.phpرا باز کنید. - کد بالا را در انتهای فایل، پس از آخرین خط
?>(اگر وجود داشت) بچسبانید. اگر تگ بستهگذاری PHP وجود نداشته باشد، فقط کد را بهصورت مستقیم وارد کنید. - فایل را ذخیره کنید و صفحهٔ وبسایت را در مرورگر باز کنید؛ پس از ۳ ثانیه پاپ‑اپ باید ظاهر شود.
- در صورت نیاز به تغییر زمان نمایش یا محتوا، مقادیر داخل توابع JavaScript و HTML را مطابق با هدف خود تنظیم کنید.
برای جلوگیری از بارگذاری مستقیم اسکریپتها در هر صفحه، میتوانید از wp_enqueue_script استفاده کنید و اسکریپت را تنها در صفحات خاص (مثلاً صفحهٔ فرونت) بارگذاری کنید. بهعنوان مثال، با شرط is_front_page() میتوانید مطمئن شوید که کد فقط در صفحهٔ اصلی اجرا میشود و بهینهسازی سرعت بارگذاری سایت حفظ میگردد.
تنظیم رفتار نمایش شرطی
در بسیاری از موارد میخواهید پاپ‑اپ فقط در شرایط خاصی نمایش داده شود؛ مثلاً فقط برای اولین بازدید کاربر، یا تنها در صفحات دستهبندی مشخص. این کار را میتوان با ترکیب توابع شرطی وردپرس (مانند is_front_page() یا is_single()) و یک اسکریپت سادهٔ جاوااسکریپت انجام داد. وقتی شرط درست باشد، اسکریپت کد HTML پاپ‑اپ را به صفحه اضافه میکند؛ در غیر این صورت، هیچ چیز نمایش داده نمیشود.
برای شروع، کد زیر را به فایل functions.php قالب فرزند خود اضافه کنید. این قطعه کد یک هک سادهٔ wp_footer مینویسد که قبل از بسته شدن تگ