Как правильно подключать CSS и скрипты в WordPress.
Создаю эту страницу для того, чтобы было удобно скопировать-вставить в проект готовую конструкцию. В файле functions.php создаём следующую функцию:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
function register_plugin_styles() { wp_register_style( 'bootstrap-css-min', get_template_directory_uri() . '/vendor/bootstrap/css/bootstrap.min.css', array(), '4.0.0' ); wp_register_style( 'my-css', get_template_directory_uri() . '/css/mystyles.css', array(), null ); wp_register_style( 'owl.carousel.min', get_template_directory_uri() . '/owlcarousel/dist/assets/owl.carousel.min.css', array(), '2.2.1' ); wp_register_style( 'owl.theme.default', get_template_directory_uri() . '/owlcarousel/dist/assets/owl.theme.default.min.css', array('owl.carousel.min'), '2.2.1' ); wp_register_script( 'fontawesome', 'https://use.fontawesome.com/df095216ad.js' , '', '', false ); wp_register_script( 'jquery.min', get_template_directory_uri() . '/vendor/jquery/jquery.min.js' , '', '3.2.1', false ); wp_register_script( 'bootstrap.bundle.min', get_template_directory_uri() . '/vendor/bootstrap/js/bootstrap.bundle.min.js' , '', '4.0.0', false ); wp_register_script( 'owl.carousel.min', get_template_directory_uri() . '/owlcarousel/dist/owl.carousel.min.js' , '', '2.2.1', false ); //wp_register_script( $handle, $src, $deps, $ver, $in_footer ); wp_enqueue_style( 'bootstrap-css-min' ); wp_enqueue_style( 'my-css' ); //наличие зависимости во втором файле позволяет избежать явного указания на ведущий файл, он вставляется автоматически wp_enqueue_style( 'owl.theme.default' ); wp_enqueue_script( 'fontawesome' ); wp_enqueue_script( 'jquery.min' ); wp_enqueue_script( 'bootstrap.bundle.min' ); wp_enqueue_script( 'owl.carousel.min' ); } |
- Параметры для wp_register_style:
wp_register_style( $handle, $src, $deps, $ver, $media );
$handle — имя файла, $src — URL до css файла , $deps — массив названий стилей от которых зависит добавляемый (они должны быть зарегистрированы ранее), $ver — версия стиля, $media — список типов устройств или медиа для которых предназначен данный стиль.
- Параметры для wp_register_script
wp_register_script( string $handle, string $src, array $deps = array(), string|bool|null $ver = false, bool $in_footer = false )
Все параметры — те же, что и у предыдущей функции, кроме последнего. $in_footer — если true, то скрипт будет вставлен в footer до </body> вместо <head>. По-умолчанию ‘false’.
- Параметры для wp_enqueue_script и wp_enqueue_style.
При регистрации script файлов и файлов стилей при помощи функций wp_register_script и иwp_register_style никаких дополнительных параметров (кроме зарегистрированного имени скрипта/стиля) указывать не нужно.
Полезные дополнения.
- wp_dequeue_style(‘my_style’) — удаляет из очереди на вывод css файл стилей. Если на некоторых страницах не нужно выводить этот файл, тогда его можно отключить.
- wp_style_is() определяет был ли файл стилей зарегистрирован, добавлен в очередь на вывод, выведет на экран или ожидает вывода.
- wp_style_add_data() — добавляет данные для подключаемых с помощью wp_enqueue_style() файлов стилей. Используйте когда, например нужно подключить стили только для IE.
WordPress как подключить определенные стили/скипты только на одной странице?
is_single — для записи
is_page — для страниц
|
1 2 3 4 5 6 7 |
function my_styles() { if ( is_page( 933 ) ) { wp_enqueue_style ( 'contact', get_template_directory_uri() . '/altercss.css', array(), '1.0' ); wp_enqueue_script('alterscript', get_template_directory_uri() . '/alterscript.js'); } } add_action( 'wp_enqueue_scripts', 'my_styles' ); |
Свежие комментарии