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

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

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

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

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

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

برای ساخت لایت باکس در وردپرس (Lightbox)، می‌توانید از افزونه‌های مختلف استفاده کنید. در اینجا، روش یک افزونه محبوب به نام “Simple Lightbox” نشان داده می‌شود. این افزونه رایگان است و نصب و استفاده از آن بسیار ساده است.

گام 1: نصب افزونه

• وارد پیشخوان وردپرس شوید.
• به بخش “افزونه‌ها” بروید و بر روی “افزودن جدید” کلیک کنید.
• در قسمت جستجو، “Simple Lightbox” را جستجو کنید.
• افزونه “Simple Lightbox” را پیدا کرده و بر روی “نصب کنید” کلیک کنید.
• پس از نصب، بر روی “فعال‌سازی” کلیک کنید.

گام 2: تنظیمات افزونه

• پس از فعال‌سازی، به بخش “تنظیمات” بروید و گزینه “ساده لایت باکس” را انتخاب کنید.
• در اینجا شما می‌توانید تنظیمات لایت باکس را تغییر دهید. این تنظیمات شامل اندازه تصویر، افکت‌های ظاهری و تنظیمات مربوط به نمایش تصاویر است.

گام 3: افزودن تصاویر با لایت باکس

• در صفحه یا نوشته‌ای که می‌خواهید تصاویر را اضافه کنید، به بخش “رسانه” بروید.
• تصاویر مورد نظر را انتخاب کنید یا جدید بارگذاری کنید.
• در پنجره ویرایش تصویر، گزینه “پیوند به” (Link To) را انتخاب کرده و “تصویر در یک لایت باکس” (Media File) را انتخاب کنید.
• تصویر را در مطلب یا صفحه خود درج یا به‌روزرسانی کنید.

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

ساخت لایت باکس تصاویر در وردپرس با کدنویسی و بدون افزونه

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

گام 1: ایجاد فانکشن PHP

با افزودن کد زیر به فایل functions.php قالب فعلی یا یک افزونه سفارشی، یک فانکشن PHP ایجاد کنید.

function custom_lightbox_script() {
    // ایجاد پوشه محل ذخیره جاوااسکریپت
    wp_enqueue_script('custom-lightbox', get_template_directory_uri() . '/js/custom-lightbox.js', array('jquery'), '', true);

    // ارسال متغیرهای جاوااسکریپت به اسکریپت سفارشی
    wp_localize_script('custom-lightbox', 'custom_lightbox_vars', array(
        'lightbox_selector' => '.custom-lightbox', // انتخاب‌کننده تصاویر
    ));
}

add_action('wp_enqueue_scripts', 'custom_lightbox_script');

گام 2: ایجاد اسکریپت جاوااسکریپت

حالا باید یک فایل جاوااسکریپت با نام custom-lightbox.js ایجاد کنید در پوشه js در دایرکتوری قالب یا افزونه شما. سپس کد زیر را به فایل اضافه کنید:

jQuery(document).ready(function($) {
    // فعال‌سازی لایت باکس بر روی تصاویر با استفاده از یک انتخاب‌کننده
    $(custom_lightbox_vars.lightbox_selector).on('click', function() {
        var image_src = $(this).attr('src');
        var lightbox_content = '<div class="custom-lightbox-overlay"></div>';
        lightbox_content += '<div class="custom-lightbox-container">';
        lightbox_content += '<img src="' + image_src + '" class="custom-lightbox-image" />';
        lightbox_content += '</div>';

        $('body').append(lightbox_content);

        // بستن لایت باکس با کلیک بر روی اوورلی
        $('.custom-lightbox-overlay').on('click', function() {
            $(this).remove();
            $('.custom-lightbox-container').remove();
        });
    });
});

گام 3: استفاده از لایت باکس در مطالب

اکنون می‌توانید لایت باکس را بر روی تصاویر در مطالب و صفحات خود اعمال کنید. برای این کار، به تصویر مورد نظر خود کلاس .custom-lightbox را اختصاص دهید.

<img src="URL_TO_YOUR_IMAGE" class="custom-lightbox" alt="Image Description">

حالا، هر تصویری که کلاس .custom-lightbox داشته باشد، با کلیک بر روی آن یک لایت باکس باز خواهد شد.

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

همچنین ما در این کدنویسی دیگه سی اس اس استفاده نکردیم برای خوشکل کردن پنجره می تونید خودتون استایل های دلخواه رو اعمال کنید.

جمع بندی لایت باکس تصاویر در وردپرس

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

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