آموزش وردپرس نحوه استفاده از ویدئو در هدر سایت


آموزش وردپرس نحوه استفاده از ویدئو در هدر سایت

نسخه جدید وردپرس دارای قابلیت استفاده از ویدئو در هدر است در واقع وجود این قابلیت در هسته وردپرس قرار دادن ویدئو را که در بسیاری از سایت ها دیده می شود را آسان و ساده تر کرده است.

نمایش ویدئو در هدر سایت

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

برای نمایش ویدئو در هدر شما باید دو مرحله را انجام دهید

۱_ در اختیار داشتن قالبی که از ویدئو در هدر پشتیبانی کند ۲_ استفاده از برچسب the custom header markup
برای انجام اولین مرحله می توانید قطعه کد زیر را در فایل توابع functions.Php قرار دهید تا قالب شما از ویدئو در هدر پشتیبانی کند.

add_theme_support( 'custom-header', array(
 'video' => true
));

برای مشخص نمودن محل نمایش ویدئو ها دو روش وجود دارد.
استفاده از فیلتر is header video active و استفاده از پارامتر video active callback header
با استفاده از فیلتر به سادگی ویدئو در هدر تمام صفحات سایت نمایش داده می شود تنها کافی است از کد زیر استفاده کنید

add_filter( 'is_header_video_active', 'custom_video_header_pages' );
 
function custom_video_header_pages( $active ) {
 if( is_home() || is_page() ) {
 return true;
 }
 
return false;
}

زمانی که قالب از این ویژگی پشتیبانی کند بعد می توان از پارامتر ذکر شده در بالا بهره بگیرید تا شرایط را برای نمایش ویدئو تغییر دهید با یک کد امکان نمایش ویدئو برای کاربران مهمان در تمام صفحات به جز صفحه اصلی از تابع زیر برای ایجاد تغییرات بهره بگیرید

add_theme_support( 'custom-header', array(
 'video' => true,
 'video-active-callback' => 'custom_video_active_callback'
));
 
function custom_video_active_callback() {
 if( !is_user_logged_in() && !is_home() ) {
 return true;
 }
  
 return false;
}

برای محدود کردن اندازه ویدئو برای نمایش از فیلتر زیر بهره بگیرد چرا که بطور پیش فرض حداقل ۵۰۰*۹۰۰ پیکسل برای نمایش در نظر گرفته می شود که شما می توانید آن را تغییر دهید.

add_filter( 'header_video_settings', 'my_header_video_settings');
function my_header_video_settings( $settings ) {
 $settings['minWidth'] = 680;
 $settings['minHeight'] = 400;
 return $settings;
}

با فیلتر header video settings متن های عناصر را نیز تغییر دهید

 'pause' => __( 'متوقف کن' ),

سفارش سازی استایل
به طور پیش فرض عناصر استایل خاصی ندارند در این صورت از استایل قالب استفاده می شود با کلاس Wp custom header در داخل کد عناصر ویدئو می توان به آنها استایل داد به کد زیر توجه کنید



با تشکر از شما عزیزان. امیدوارم این آموزش نیز نیاز های شما را رفع کند.

    دیدگاهتان را بنویسید

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

    راهنمایی میخوای ؟با ما صحبت کن