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

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

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

نمایش پاپ آپ با کلیک روی دکمه در وردپرس چه کاربردی داره؟

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

پاپ آپ کلیکی چه فرقی با پاپ آپ خودکار داره؟

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

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

چه محتواهایی رو بهتره داخل پاپ آپ بذارید؟

• یک فرم کوتاه برای عضویت یا درخواست تماس
• کد تخفیف یا جزئیات یک پیشنهاد
• توضیحات تکمیلی محصول یا خدمات
• شرایط ثبت‌نام، ارسال یا بازگشت کالا
• ویدئو یا تصویر مرتبط با محتوای صفحه
• یک پیام تأیید یا هشدار مهم

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

برای ساخت پاپ آپ کلیکی به چه چیزهایی نیاز دارید؟

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

معرفی ساده افزونه Popup Maker

Popup Maker یک ویرایشگر برای ساخت محتوای پاپ آپ داره و تنظیماتی مثل تریگر، شرط نمایش و ظاهر پنجره رو هم ارائه می‌ده. «تریگر» یعنی اتفاقی که باعث بازشدن پاپ آپ می‌شه. توی این مقاله از تریگر Click Open استفاده می‌کنیم؛ یعنی پنجره بعد از کلیک کاربر باز می‌شه.

بررسی پیش‌نیازها قبل از شروع

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

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

نصب افزونه Popup Maker در وردپرس

1. وارد پیشخوان وردپرس بشید و از منوی «افزونه‌ها» روی «افزودن افزونه تازه» کلیک کنید.
2. عبارت Popup Maker رو داخل کادر جستجو بنویسید.
3. افزونه Popup Maker رو پیدا کنید و نام سازنده و جزئیات اون رو با صفحه رسمی افزونه تطبیق بدید.
4. روی دکمه نصب کلیک کنید و وقتی نصب تموم شد، دکمه فعال‌سازی رو بزنید.

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

ساخت اولین پاپ آپ با Popup Maker

حالا وقتشه خود پنجره و محتوای داخل اون رو بسازید. از پیشخوان به Popup Maker > Create Popup برید. اگه منوی شما ترجمه شده، گزینه‌ای با معنی «ساخت پاپ آپ» یا «افزودن پاپ آپ» رو انتخاب کنید.

1. داخل کادر نام پاپ آپ، یک نام مدیریتی مثل «فرم دریافت مشاوره» بنویسید. این نام کمک می‌کنه بعداً پاپ آپ رو راحت‌تر توی پیشخوان پیدا کنید.
2. اگه می‌خواید بالای پنجره عنوانی دیده بشه، عنوان نمایشی رو هم وارد کنید.
3. داخل ویرایشگر، متن، تصویر، فرم، دکمه یا محتوای دلخواهتون رو اضافه کنید.
4. در بخش تنظیمات پایین صفحه، تریگر و شرط‌های نمایش رو بررسی کنید.
5. روی «انتشار» کلیک کنید تا پاپ آپ ذخیره بشه.

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

اتصال پاپ آپ به دکمه، لینک یا متن

برای وصل‌کردن دکمه به پاپ آپ، اول باید یک تریگر Click Open بسازید. بعد یک انتخابگر CSS به اون می‌دید و همون مقدار رو به‌عنوان کلاس روی دکمه می‌ذارید. «انتخابگر CSS» اینجا فقط یک نشونه برای پیداکردن دکمه‌ست؛ پس برای انجام این کار لازم نیست کدنویسی بلد باشید.

ساخت تریگر Click Open برای پاپ آپ

1. پاپ آپی رو که ساختید برای ویرایش باز کنید.
2. در بخش تنظیمات پاپ آپ، زبانه Triggers رو باز کنید.
3. روی Add New Trigger کلیک کنید.
4. گزینه Click Open رو انتخاب کنید و به مرحله بعد برید.
5. در کادر انتخابگر، یک کلاس اختصاصی مثل .open-contact-popup بنویسید.
6. تنظیمات رو ذخیره کنید و پاپ آپ رو به‌روزرسانی کنید.

نقطه اول .open-contact-popup به افزونه می‌گه که این مقدار یک کلاس CSS هست. وقتی همین کلاس رو داخل تنظیمات دکمه وارد می‌کنید، نقطه رو ننویسید و فقط open-contact-popup رو بذارید.

اتصال پاپ آپ به دکمه در ویرایشگر وردپرس

1. برگه یا نوشته دلخواهتون رو با ویرایشگر وردپرس باز کنید.
2. یک بلوک «دکمه‌ها» اضافه کنید یا دکمه فعلی رو انتخاب کنید.
3. از ستون تنظیمات بلوک، بخش «پیشرفته» رو باز کنید.
4. داخل کادر «کلاس‌های CSS اضافی»، مقدار open-contact-popup رو بدون نقطه بنویسید.
5. برگه رو ذخیره یا به‌روزرسانی کنید.
6. صفحه رو در یک زبانه تازه باز کنید و روی دکمه بزنید.

نام کلاس باید در هر دو بخش دقیقاً یکسان باشه. اگه داخل تریگر .open-contact-popup نوشتید، کلاس دکمه باید open-contact-popup باشه. فاصله اضافه، گذاشتن نقطه داخل کادر کلاس دکمه یا حتی یک تفاوت املایی کوچیک باعث می‌شه اتصال کار نکنه.

اتصال پاپ آپ به دکمه در المنتور

اگه صفحه رو با المنتور ساختید، دکمه دلخواهتون رو انتخاب کنید. بعد به زبانه «پیشرفته» برید و بخش کلاس‌های CSS رو پیدا کنید. مقدار open-contact-popup رو بدون نقطه داخل این کادر بنویسید، صفحه رو به‌روزرسانی کنید و نتیجه رو توی صفحه واقعی امتحان کنید.

اگه از قبل کلاسی داخل این کادر هست، اون رو پاک نکنید. فقط یک فاصله بذارید و کلاس تازه رو کنار کلاس قبلی بنویسید.

اتصال پاپ آپ به لینک یا متن

همین روش برای لینک هم جواب می‌ده. کافیه کلاس تعیین‌شده رو به عنصر لینک بدید. در ویرایشگر بلوکی، بعضی بلوک‌ها کادر «کلاس‌های CSS اضافی» دارن و می‌تونید کلاس رو همون‌جا وارد کنید.

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

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

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

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

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

تنظیم محل نمایش پاپ آپ در سایت

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

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

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

تست پاپ آپ قبل از انتشار نهایی

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

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

حل مشکلات رایج پاپ آپ کلیکی

چرا با کلیک روی دکمه پاپ آپ باز نمی‌شه؟

اول مطمئن بشید پاپ آپ منتشر شده و تریگر Click Open روی اون فعاله. بعد کلاس داخل تریگر و کلاس دکمه رو حرف‌به‌حرف مقایسه کنید. نقطه باید داخل انتخابگر تریگر باشه، ولی توی کادر کلاس CSS دکمه نباید نقطه بذارید.

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

چرا پاپ آپ در همه صفحه‌ها نمایش داده نمی‌شه؟

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

چرا دکمه بستن پاپ آپ کار نمی‌کنه؟

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

چطور تداخل کش و بهینه‌سازی رو بررسی کنید؟

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

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

نکات مهم برای ساخت پاپ آپ بهتر

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

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

جمع‌بندی

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

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

سؤالات متداول

تیم تولید محتوا

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