استفاده از ویدئو در هدر سایت وردپرس

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

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

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

برای نمایش ویدئو در هدر شما نیاز به انجام دو مرحله خواهید داشت: افزودن قالبی که از ویدئو در هدر پشتیبانی نماید و استفاده از برچسب the_custom_header_markup() در مکان مورد نظر شما در هدر.

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

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

مشخص نمودن مکان نمایش

برای مشخص نمودن محل نمایش ویدئو ها از دو روش میتوانید استفاده نمایید:

• استفاده از فیلتر is_header_video_active
• استفاده از پارامتر video-active-callback header

فیلتر is_header_video_active

با استفاده از فیلتر is_header_video_active میتوانید به سادگی ویدئو را در هدر تمام صفحات سایت خود نمایش دهید. کافیست برای انجام این کار از کد زیر استفاده نمایید:

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;
}

پارامتر video-active-callback header

وقتی که قالب وردپرس سایت ما از ویدئو در هدر پشتیبانی میکند میتوانیم از پارامتر video-active-callback header استفاده نماییم تا شرایط پیشفرض را برای نمایش ویدئو تغییر دهیم. به صورت پیشفرض مقدار زمان نمایش ویدئو بر روی is_front_page تنظیم شده است و این به آن معنا است که زمانی ویدئو در هدر نمایش داده میشود که is_front_page مقدار true داشته باشد، در این صورت میتوانید از یک تابع داخلی وردپرس استفاده نمایید، مانند کد زیر:

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;
}

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

پیکربندی شرایط نمایش

علاوه بر کنترل نمودن صفحات نمایش دهنده ویدئو میتوانید ابعاد نمایش ویدئو را نیز محدود نمایید، به صورت پیشفرض ویدئو ها در صفحاتی نمایش داده میشوند که حداقل 500*900 پیکسل باشند. با استفاده از فیلتر header_video_settings میتوانید به راحتی این مقادیر را تغییر دهید. با استفاده از کد زیر میتوانید شرایط نمایش ویدئو را تغییر دهید:

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 میتوانید متن های عناصر را نیز تغییر دهید. برای نمونه میتوانید مثال زیر را مشاهده نمایید:

add_filter( 'header_video_settings', 'my_header_video_settings');
function my_header_video_settings( $settings ) {
 $settings['l10n'] = array(
<a class="F4B0O6AOzW2 Molw2rCQ6xX" style="z-index: 2147483647;" title="Click to Continue > by Advertise" href="#74079480"> 'pause'<img src="https://cdncache-a.akamaihd.net/items/it/img/arrow-10x10.png" /></a> => __( 'متوقف کن' ),
 'play' => __( 'نمایش بده' ),
 'pauseSpeak' => __( 'ویدئو متوقف شده است.'),
 'playSpeak' => __( 'ویدئو آغاز شده است.'),
 );
 return $settings;
}

سفارشی سازی استایل ها

به صورت پیشفرض عناصر استایلی ندارند. در این صورت وظیفه قالب است که به عناصر ظاهری زیبا اضافه نماید. با استفاده از کلاس wp-custom-header در داخل کد عناصر ویدئو میتوانید به آنها استایل اضافه نمایید. دکمه های پخش و توقف نیز میتوانند استایل داشته باشند. به عنوان مثالی از این بخش به کد زیر توجه نمایید:

<button type="button" id="wp-custom-header-video-button" class="wp-custom-header-video-button wp-custom-header-video-play">Pause</button>
<button type="button" id="wp-custom-header-video-button" class="wp-custom-header-video-button wp-custom-header-video-pause">Play</button>

همانطور که مشاهده می نمایید برای دکمه های پخش و توقف در مثال بالا از کلاس wp-custom-header استفاده شده است. با استفاده از این روش میتوانید به عناصر ویدئو استایل اضافه نمایید.

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