Контроль фону дозволяє встановити такі властивості фону:
- Колір фону
- Зображення фону
- Відео фону (вимагає скрипт
eslBackgroundVideoInit. Дивіться приклад коду нижче)
Існує багато налаштувань для зображення та відео фону. Ви можете виключити колір/зображення/відео налаштування за допомогою параметра exclude.
Оскільки контроль фону, ймовірно, служить як налаштування CSS, наступний приклад показує, як встановити параметр css, щоб застосувати його до HTML елементів .prefix-test-wrapper.
Додавання фонового відео вимагає завантаження скрипта eslBackgroundVideoInit та використання методу EslFrontend::get_element_background_video_wrapper() для його рендерингу.
Коли ви просто хочете встановити колір фону, краще скористатися контролем кольору. Контроль фону зручніший під час використання зображення фону або відео поверх кольору.
class Prefix_Element_Background extends EslElement {// Потрібно для фонового відеопublic $scripts = ['eslBackgroundVideoInit'];// Налаштування контролера двигунупublic function set_controls() {$this->controls['exampleBackground'] = [ // Ключ налаштування'tab' => 'content','label' => esc_html__( 'Фон', 'esl' ),'type' => 'background','css' => [['property' => 'background','selector' => '.prefix-background-wrapper',],],'exclude' => [// 'color',// 'image',// 'parallax',// 'attachment',// 'position',// 'positionX',// 'positionY',// 'repeat',// 'size',// 'custom',// 'videoUrl',// 'videoScale',],'inline' => true,'small' => true,'default' => ['color' => ['rgb' => 'rgba(255, 255, 255, .5)','hex' => '#ffffff',],],];}// Рендеринг HTML елементаpublic function render() {echo '<div class="prefix-background-wrapper">';// Фонове відеоecho EslFrontend::get_element_background_video_wrapper(['settings' => $settings],'exampleBackground' // Ключ налаштування);echo get_bloginfo( 'name' );echo '</div>';}}