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

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

توی این آموزش اول سراغ امکانات خود وردپرس برای نمایش ویدیو می‌ریم. بعد با افزونه رایگان WP Video Lightbox یک ویدیوی YouTube یا Vimeo رو به‌صورت لایت‌باکس نمایش می‌دیم و تنظیمات مهم افزونه رو قدم‌به‌قدم بررسی می‌کنیم.

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

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

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

معرفی افزونه رایگان WP Video Lightbox

افزونه WP Video Lightbox برای باز کردن ویدیو، تصویر و محتوای iFrame داخل لایت‌باکس ساخته شده. iFrame روشی هست که محتوای یک صفحه دیگه رو داخل سایتتون نشون می‌ده. این افزونه از ویدیوهای YouTube و Vimeo هم پشتیبانی می‌کنه و لایت‌باکس رو با شورت‌کد می‌سازه.

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

این افزونه رایگانه و در زمان آخرین بررسی مقاله، صفحه رسمی اون بیشتر از ۳۰ هزار نصب فعال و نسخه ۱.۹.۱۲ رو نشون می‌داد. تعداد نصب، نسخه و زمان آخرین به‌روزرسانی ممکنه تغییر کنه؛ پس بهتره قبل از نصب، اطلاعات تازه رو در صفحه رسمی افزونه WP Video Lightbox ببینید.

برای نصب افزونه، وارد پیشخوان وردپرس بشید و از مسیر «افزونه‌ها ← افزودن افزونه تازه»، عبارت WP Video Lightbox رو جست‌وجو کنید. بعد روی «هم‌اکنون نصب نمایید» بزنید و وقتی نصب تموم شد، «فعال نمایید» رو انتخاب کنید. اگه قبلاً افزونه نصب نکردید، آموزش نصب افزونه در وردپرس همه مراحل رو ساده‌تر توضیح می‌ده.

امکانات مهم افزونه WP Video Lightbox

• نمایش ویدیوهای YouTube و Vimeo داخل لایت‌باکس
• باز کردن تصویر و محتوای iFrame داخل پنجره لایت‌باکس
• استفاده از متن یا تصویر بندانگشتی به‌عنوان لینک بازکننده ویدیو
• تغییر عرض و ارتفاع پیش‌فرض پنجره
• انتخاب سرعت انیمیشن و میزان تیرگی پس‌زمینه
• نمایش یا مخفی کردن عنوان
• تغییر اندازه محتوا متناسب با فضای صفحه
• انتخاب ظاهر لایت‌باکس
• کنترل پخش خودکار و اسلایدشو
• استفاده از شورت‌کد داخل نوشته یا برگه
• پشتیبانی از حالت حریم خصوصی بهتر برای ویدیوهای YouTube

توی نسخه‌ها یا تصویرهای قدیمی افزونه ممکنه گزینه‌هایی مثل Hide Flash، Wmode یا IE6 Fallback رو ببینید. لازم نیست از این گزینه‌ها استفاده کنید؛ چون Adobe پشتیبانی Flash Player رو در پایان سال ۲۰۲۰ تموم کرد و Microsoft هم در سال ۲۰۲۲ به پشتیبانی Internet Explorer 11 برای نسخه‌های مشمول ویندوز ۱۰ پایان داد.

آموزش تنظیم افزونه WP Video Lightbox

بعد از فعال‌سازی افزونه، در پیشخوان وردپرس به «تنظیمات ← Video Lightbox» برید.

این صفحه معمولاً تنظیمات عمومی و بخشی برای PrettyPhoto داره. PrettyPhoto نام کتابخانه‌ای هست که ظاهر و رفتار پنجره لایت‌باکس رو کنترل می‌کنه.

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

اگه در نسخه نصب‌شده گزینه Privacy-Enhanced Mode یا حالت حریم خصوصی YouTube رو دارید، بهتره فعالش کنید. با این گزینه، ویدیو از دامنه کم‌ردیابی‌تر YouTube جاسازی می‌شه. وقتی تنظیمات دلخواهتون رو انجام دادید، روی Save Changes بزنید.

تنظیمات PrettyPhoto

ممکنه نام یا جای بعضی گزینه‌ها در نسخه‌های مختلف افزونه کمی فرق داشته باشه. گزینه‌های اصلی بخش PrettyPhoto معمولاً این‌ها هستن:

Enable PrettyPhoto: قابلیت لایت‌باکس PrettyPhoto رو روشن می‌کنه. برای اجرای این آموزش باید فعال باشه.

Animation Speed: سرعت باز و بسته شدن پنجره رو مشخص می‌کنه. برای شروع، حالت Normal انتخاب خوبیه.

Slideshow: فاصله زمانی بین اسلایدها رو با میلی‌ثانیه مشخص می‌کنه. هر ۱۰۰۰ میلی‌ثانیه برابر با یک ثانیه هست. این گزینه بیشتر برای چند تصویر یا چند محتوای پشت سر هم به کار میاد.

Autoplay Slideshow: وقتی این گزینه روشن باشه، اسلایدشو بدون کلیک کاربر شروع می‌شه. برای تجربه بهتر کاربر، معمولاً بهتره پخش خودکار رو خاموش نگه دارید.

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

Show Title: عنوان ویدیو یا تصویر رو داخل لایت‌باکس نشون می‌ده.

Allow Resize: به افزونه اجازه می‌ده اندازه محتوا رو با فضای مرورگر هماهنگ کنه. بهتره این گزینه روشن بمونه تا ویدیو در موبایل هم مناسب‌تر دیده بشه.

Allow Expand: به کاربر اجازه می‌ده محتوای داخل پنجره رو بزرگ‌تر کنه.

Default Width: عرض پیش‌فرض پنجره ویدیو رو مشخص می‌کنه.

Default Height: ارتفاع پیش‌فرض پنجره ویدیو رو مشخص می‌کنه. اندازه مناسب به نسبت تصویر ویدیوتون بستگی داره.

تنظیم ظاهر و رفتار لایت‌باکس

Theme: ظاهر لایت‌باکس رو عوض می‌کنه. یکی از گزینه‌ها رو انتخاب کنید و نتیجه رو در یک نوشته آزمایشی ببینید.

Horizontal Padding: فاصله افقی محتوا از لبه‌های پنجره لایت‌باکس رو تعیین می‌کنه.

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

Modal: نحوه بسته شدن پنجره رو کنترل می‌کنه. بعد از تغییر این گزینه، بستن لایت‌باکس با دکمه ضربدر، کلیک بیرون پنجره و کلید Escape رو حتماً امتحان کنید.

Keyboard Shortcuts: کنترل لایت‌باکس با صفحه‌کلید رو فعال می‌کنه. روشن بودن این گزینه کار با سایت رو برای بعضی کاربران راحت‌تر می‌کنه.

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

نمایش ویدیوی Vimeo در لایت‌باکس

برای نمایش ویدیوی Vimeo، یک بلوک «کد کوتاه» به نوشته یا برگه اضافه کنید. بعد یکی از نمونه‌های زیر رو داخل اون بذارید:

[video_lightbox_vimeo5 video_id="13562192" width="640" height="480" anchor="click here to open vimeo video"]
[video_lightbox_vimeo5 video_id="13562192" width="640" height="480" anchor="http://www.example.com/images/vimeo-thumb.webp"]

مقدار video_id شناسه ویدیو هست. معمولاً این شناسه رو داخل نشانی ویدیوی Vimeo می‌بینید. مقدارهای width و height هم عرض و ارتفاع پنجره رو تعیین می‌کنن. در ویژگی anchor می‌تونید متن لینک یا نشانی کامل تصویر بندانگشتی رو بنویسید.

نمایش ویدیوی YouTube در لایت‌باکس

برای YouTube هم یک بلوک «کد کوتاه» اضافه کنید و یکی از نمونه‌های زیر رو داخل اون بذارید:

[video_lightbox_youtube video_id="G7z74BvLWUg" width="640" height="480" anchor="click here to open YouTube video"]
[video_lightbox_youtube video_id="G7z74BvLWUg" width="640" height="480" anchor="http://www.example.com/images/youtube-thumb.webp"]

شناسه ویدیوی YouTube معمولاً همون بخشی هست که بعد از v= در نشانی ویدیو دیده می‌شه. شناسه نمونه رو با شناسه ویدیوی خودتون عوض کنید. اگه می‌خواید تصویر بندانگشتی دیده بشه، نشانی نمونه داخل anchor رو هم با نشانی کامل تصویر خودتون جایگزین کنید.

یادتون باشه گزینه rel=0 دیگه ویدیوهای پیشنهادی YouTube رو به‌طور کامل حذف نمی‌کنه. طبق راهنمای رسمی پارامترهای پخش‌کننده YouTube، این گزینه فقط پیشنهادهای پایان پخش رو به ویدیوهای همون کانال محدود می‌کنه.

بررسی نتیجه و رفع مشکل‌های رایج

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

جمع‌بندی

حالا می‌تونید ویدیوهای سایتتون رو بدون گرفتن فضای زیاد صفحه، داخل یک لایت‌باکس نشون بدید. افزونه WP Video Lightbox رایگانه و برای YouTube، Vimeo، تصویر و iFrame کاربرد داره. فقط یادتون نره قبل از استفاده در صفحه اصلی سایت، نتیجه رو روی موبایل و دسکتاپ آزمایش کنید.

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

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