Вопрос или проблема
Я разрабатываю тему, ориентированную на видео. Мне нужно включить встроенный видеоплеер WordPress в мой шаблон страницы. Вот что я делаю:
-
$video url приходит из пользовательского поля. Он выводит url файла видео http://example.com/video.mp4
-
do_shortcode() выводит стандартный шорткод, используемый в записях/страницах.
$video = get_field( "video_file_url");
echo do_shortcode(''.$video.'');
Вот что я получаю:
Цвет панели управления светлый (не темный, как в стандартном плеере WP), и нет кнопки воспроизведения в центре видео.
Я хочу добиться стандартного темного видеоплеера WordPress с кнопкой воспроизведения посередине.
Я полагаю, что мне нужно загрузить mediaelement.js в footer.php моей темы. Я разрабатываю тему с нуля и ничего не делал с mediaelement. Может быть, это причина, по которой я получаю светлый видеоплеер?
Как я могу вывести стандартный видеоплеер в шаблоне?
Я включил wp_head(); в начале моего файла header.php. wp_footer(); был включен в конце файла footer.php.
Неудача в их включении привела к проблеме с видеоплеером. Все работает нормально после добавления wp_head(); и wp_footer();.
Спасибо, birgire!
Ответ или решение
Чтобы загрузить mediaelement.js в шаблоне темы WordPress, вы можете следовать следующему пошаговому руководству. Это позволит вам использовать стандартный видеоплеер WordPress, который включает в себя функционал, необходимый для воспроизведения видео.
Шаг 1: Подключение необходимых хук-функций
Убедитесь, что в вашем header.php и footer.php подключены хуки wp_head() и wp_footer(). Они необходимы для корректной работы скриптов и стилей, которые подключает WordPress. Это то, что вы уже сделали, что устранило вашу проблему с видеоплеером.
<!-- header.php -->
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>><!-- footer.php -->
<?php wp_footer(); ?>
</body>
</html>Шаг 2: Загрузка MediaElement.js
Ваша следующая задача – корректно загрузить библиотеку mediaelement.js. Это можно сделать с помощью функции wp_enqueue_script и wp_enqueue_style в вашем functions.php файле:
function my_theme_enqueue_scripts() {
// Подключаем медиаэлемент
wp_enqueue_media();
wp_enqueue_script('mediaelement');
wp_enqueue_style('mediaelement');
// Ваши дополнительные стили и скрипты могут быть добавлены здесь.
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_scripts');Шаг 3: Использование Shortcode для вывода видео
Если ваш URL видео хранится в кастомном поле, вам нужно правильно выводить его с помощью шорткода. Убедитесь, что вы используете do_shortcode правильно. Вот пример кода, который вы можете использовать:
$video_url = get_field("video_file_url"); // Получаем URL видео из кастомного поля
if ($video_url) {
echo do_shortcode('<a class="wp-embedded-video" href="' . esc_url($video_url) . '">' . esc_html($video_url) . '</a>');
}Шаг 4: Настройка CSS для стандартного плеера
Если вы хотите, чтобы ваш видеоплеер выглядел как стандартный темный плеер WordPress, убедитесь, что у вас установлен правильный CSS стилевой файл. Если необходимый стиль не загружается, вы можете добавить следующее в ваш файл стилей:
.mejs-container {
background-color: #000; /* Цвет фона плеера */
}Шаг 5: Проверка результатов
После выполнения всех вышеперечисленных шагов проверьте страницу с видеоплеером. Он должен отображаться с темным фоном и кнопкой воспроизведения в центре.
Заключение
Теперь вы успешно загрузили mediaelement.js и скорректировали свой видеоплеер на WordPress. Важно всегда проверять, что wp_head() и wp_footer() находятся в правильных местах, чтобы избежать проблем с загрузкой ресурсов. Если у вас возникнут дополнительные проблемы, проверьте консоль разработчика в браузере на наличие ошибок или предупреждений.
Такой подход обеспечит значительно улучшенную работу с видеоплеером, соответствующим стандартам WordPress, и повысит общее качество вашего видеоориентированного шаблона.