چگونه در وردپرس هدر ویدیویی بسازیم؟

0 687 خواندن این مطلب 5 دقیقه زمان میبرد

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

بعد از فعال سازی گزینه پشتیبانی از هدر ویدیویی در وردپرس، در بخش Wp Customizer’s Header Media گزینه انتخاب یک ویدیو برای هدر را خواهید داشت. وردپرس از فایل های ویدئویی با حداکثر اندازه 8 مگابایت و با فرمت .mov و .mp4 پشتیبانی می کند. همچنین امکان نمایش یک ویدیوی YouTube به عنوان پس زمینه هدر وجود دارد.

قبل از اینکه تصمیم بگیرید هدر ویدیویی را در وب سایت وردپرس خود قرار دهید، تأثیر ویدئو را در سرعت بارگیری و پهنای باند وب سایت خود در نظر بگیرید. فایل های .mov و .mp4 که وب سایت خودتان آن ها را میزبانی می کند، سرعت بارگیری وب سایت شما را به میزان قابل توجهی کاهش می دهد.

علاوه بر این اگر وب سایت شما بازدید زیادی داشته باشد، خیلی زود به سقف پهنای باند خود می رسید. بنابراین پیشنهاد می کنیم از فیلم های کوتاه حداکثر 10 ثانیه و با حجم فایل بهینه شده استفاده کنید. راه حل بهتر استفاده از فیلم های YouTube است.

فعال کردن پشتیبانی از هدر ویدیویی در وردپرس

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

/* Enable video header support */

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

یک دکمه جدید در منوی WP Customizer به نام Header Media مشاهده خواهید کرد. منوی فرعی آن برای اضافه کردن یک ویدیو از کتابخانه رسانه یا چسباندن پیوند ویدیویی YouTube ارائه می دهد. همچنین گزینه ای برای انتخاب تصویر پس زمینه هدر وجود دارد. این یک روش خوب است که یک تصویر پس زمینه را به عنوان جایگزین برای مرورگر هایی اضافه کنید که هدر ویدیویی را در وردپرس پشتیبانی نمی کنند.

با فعال کردن پشتیبانی از هدر ویدیویی و افزودن فیلم و تصویر پس زمینه هدر، هنوز تمام مراحل تکمیل نشده است. کار بعدی اضافه کردن function به تمپلیت وردپرس است که هدر ویدیو را نمایش می دهد.

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

برای نمایش هدر ویدیویی در وردپرس یک تگ تمپلیت جدید به نام ()the_custom_header_markup را معرفی کنید. این تگ تمپلیت بسته به آنچه در Customizer تعریف کردیم، یک عنصر حاوی تصویر، فیلم یا iframe را ایجاد می کند. بهترین روش افزودن تگ ()the_custom_header_markup درست قبل از بلوک هدر وب سایت است.

فایل header.php قالب خود را باز کنید و قطعه کد زیر را درست قبل از تگ هدر وارد کنید:

<?php the_custom_header_markup() ?>

به طور پیش فرض ()the_custom_header_markup ویدیو هدر را فقط در صفحه اصلی وب سایت و تصویر پس زمینه از پیش تعریف شده را در صفحات یا پست های دیگر نمایش می دهد. برای هدر ویدیویی وردپرس به طور پیش فرض یک دکمه پخش / مکث را نیز اضافه می شود. برخی از رفتار های پیش فرض ()the_custom_header_markup با افزودن چند عملکرد دیگر به قالب امکان پذیر است.

سفارشی سازی و اصلاحات

چند مورد شخصی سازی برای رفتار تگ ()the_custom_header_markup وجود دارد. برخی از گزینه های رایج عبارتند از:

نمایش هدر ویدیویی فقط در post type های از پیش تعریف شده (صفحه اصلی، صفحات، پست ها)
فعال یا غیرفعال کردن هدر ویدیویی برای وضوح یک صفحه نمایش خاص (به عنوان مثال غیر فعال کردن آن برای تلفن های همراه)
شخصی سازی دکمه های کنترل ویدیو

برای سفارشی کردن هدر ویدیویی، وردپرس هیچ تنظیماتی در Customizer ارائه نمی دهد. سفارشی سازی با افزودن توابع مربوط به ()the_custom_header_markup به فایل functions.php انجام می شود.

تعریف post type ها برای نمایش هدر ویدیویی در وردپرس

وردپرس بصورت پیش فرض هدر ویدئویی را فقط در صفحه اصلی نمایش می دهد. در سایر صفحات و پست ها تصویر هدر تعریف شده در Customizer را نمایش می دهد. برای غلبه بر این رفتار باید تابعی ایجاد کنیم که post type را فیلتر کند و هدر ویدیویی را فقط در جایی که تعریف می کنیم نمایش دهد. قطعه کد زیر را به فایل functions.php خود اضافه کنید تا هدر ویدیویی را در همه صفحات و پست ها نمایش دهد.

function custom_video_header_locations( $active ) {
  if( is_home() || is_page() || is_single() ) {
    return true;
  }

  return false;
}

برای تنظیم مکان هایی که می خواهید هدر ویدیویی با حذف پارامتر ها نمایش داده شود، کد را تغییر دهید:

()is_home هدر ویدیویی را در صفحه اصلی نمایش می دهد.
()is_page هدر ویدیویی را در صفحات دیگر نمایش می دهد.
()is_post هدر ویدیویی را در پست ها نمایش می دهد.

تعریف رزولوشن صفحه برای نمایش هدر ویدیویی

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

این رفتار پیش فرض با ایجاد یک تابع فیلتر و اضافه کردن آن به فایل functions.php سفارشی سازی می شود. با قطعه کد زیر، با این فرض که عرض صفحه گوشی هوشمند بالاتر از 420 پیکسل نباشد، نمایش هدر ویدیویی را فقط در تلفن های هوشمند غیرفعال خواهیم کرد:

add_filter( 'header_video_settings', 'header_video_resolution');

function header_video_resolution( $settings ) {
  $settings['minWidth'] = 420;
  $settings['minHeight'] = 100;
  return $settings;
}

دکمه پخش / مکث ویدیو را سفارشی کنید

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

add_filter( 'header_video_settings', 'my_header_video_settings');
function my_header_video_settings( $settings ) {
  $settings['l10n'] = array(
    'pause'      => __( 'Pause video' ),
    'play'       => __( 'Start video' ),
    'pauseSpeak' => __( 'Video paused'),
    'playSpeak'  => __( 'Video playing.'),
  );
  return $settings;
}

اگر می خواهید دکمه پخش / مکث را پنهان کنید، قانون CSS زیر را به stylesheet قالب خود اضافه کنید:

#wp-custom-header-video-button { display: none; }

responsive کردن پس زمینه ویدئو

به طور پیش فرض وردپرس برای responsive بودن هدر ویدیویی شما کاری انجام نمی دهد. همیشه مقداری برش به صورت ناخواسته در ویدئو وجود دارد و ارتفاع هدر ویدئویی معمولاً به مقدار مشخصی ثابت می شود. برای responsive شدن هدر ویدیوئی باید برخی از قوانین CSS را به stylesheet خود اضافه کنیم.

اگر ویدئویی را نمایش می دهید که خودتان میزبانی آن را می کنید، این مجموعه ساده از قوانین CSS باید هدر ویدیویی را در اکثر قالب ها responsive نشان دهد:

#wp-custom-header {
    max-width: 100%;
    overflow: hidden;
}

#wp-custom-header video {     max-width: 100%; width: 100%; height: auto; }

.html5-video-player .video-click-tracking, .html5-video-player .video-stream { 
    height: auto !important;
    width: 100% !important;
}

درصورتی که از یک ویدیوی YouTube به عنوان هدر ویدیویی استفاده می کنید، responsive بودن آن کمی پیچیده تر است. ممکن است در یک قالب به خوبی کار کند اما در یک قالب دیگر نه. کد CSS زیر در بیشتر موارد به ویژه برای فیلم های 16:9 به خوبی کار خواهد کرد. اگر برای شما مناسب نیست یا از فرمت ویدیویی دیگری استفاده می کنید، ممکن است لازم باشد کد را کمی تغییر دهید (مقدار padding-bottom را تنظیم کنید).

.wp-custom-header {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

.wp-custom-header iframe,  
.wp-custom-header object,  
.wp-custom-header embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


.wp-custom-header iframe, 
.wp-custom-header object, 
.wp-custom-header embed {
        max-width: 100%;
}

#wp-custom-header-video-button { position: relative; }

نتایج نهایی در مورد هدر ویدیویی در وردپرس

افزودن هدر ویدیویی به سایت وردپرسی شما اگر به درستی انجام شود از ویژگی های مفید و افزایش زیبایی بصری است. بخاطر داشته باشید که اندازه ویدیو های هدر خود را بهینه کنید تا تأثیر آن بر سرعت بارگذاری وب سایت کاهش یابد. استفاده از فیلم های YouTube در بیشتر موارد تأثیر کمتری روی سرعت بارگذاری خواهد داشت اما گاهی اوقات می تواند از نظر responsive بودن با مشکل روبرو شود.