نحوه نمایش ریسپانسیو ویدیو های خود در وردپرس

هنگامی که یک ویدیو را در وردپرس قرار می دهید ، به طور پیش فرض این فیلم ها ریسپانسیو نیستند. با ظهور قالب های وردپرس ریسپانسیو ، کاربرانمی توانند ویدیو ها را به صورت ریسپانسیو مشاهده کنند . در این مقاله به شما نشان خواهیم داد که چگونه ویدیوهای خود را با FitVids در وردپرس ریسپانسیو نشان دهید.
 
نحوه نمایش ریسپانسیو ویدیو های خود در وردپرس
 
FitVids یک افزونه جی کوئری است که به شما امکان می دهد تا ویدئوهای خود را ریسپانسیو کنید . اگر میخواهید از آن در سایت وردپرسی خود استفاده کنید، باید FitVids را نصب و فعال کنید. پس از فعال سازی، باید به Appearance FitVids بروید و یک کلاس selector CSS را وارد کنید. وردپرس به طور خودکار کلاس پست را به مقالات اضافه می کند، بنابراین شما فقط می توانید از آن استفاده کنید.
 
نحوه نمایش ریسپانسیو ویدیو های خود در وردپرس
 
تغییرات خود را ذخیره کنید و سایت خود را پیش نمایش کنید .
 

FitVids را به صورت دستی اضافه کنید تا ویدیوی شما در وردپرس ریسپانسیو شود


اگر شما نمی خواهید FitVids برای افزونه وردپرس نصب کنید، می توانید FitVids jQuery را به صورت دستی اضافه کنید. اولین چیزی که باید انجام دهید این است که افزونه وردپرسی FitVids jQuery را به کامپیوتر خود دانلود و استخراج کنید. حالا شما باید پوشه FitVids.js استخراج شده را به پوشه js theme خود آپلود کنید.

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

در داخل پوشه js شما باید یک فایل جدید ایجاد کنید و نام آن FitVids.js باشد. این فایل را ویرایش کنید و این کد را داخل آن بگذارید.

 
(function($) {
  $(document).ready(function(){
    // Target your .container, .wrapper, .post, etc.
    $(".post").fitVids();
  });
   
  })(jQuery);
 
 
کد بالا به FitVids میپردازد تا کلاس select.post CSS را جستجو کند. اکنون که FitVids را آماده کرده اید، وقت آن است که جاوا اسکریپت را به درستی در قالب خود اضافه کنید.

به سادگی، کد زیر را در فایل functions.php theme خود کپی و جایگذاری کنید:

 
wp_enqueue_script('fitvids', get_template_directory_uri() . '/js/FitVids.js-master/jquery.fitvids.js', array('jquery'), '', TRUE);
 
wp_enqueue_script('fitvids-xtra', get_template_directory_uri() . '/js/FitVids.js', array(), '', TRUE);

دیدگاه‌ خود را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

به بالای صفحه بردن