Как правильно подключать CSS стили и JS скрипты в тему WordPress
Опубликовано: 28.08.2018
Эта короткая заметка, которая будет полезна тем кто начинает создавать темы на WordPress. Или возможно вы занимаетесь этим уже некоторое время, и делаете это не на 100% эффективно. Сегодня мы рассмотрим как правильно и корректно подключить CSS стили и JS скрипты к своей теме.
Самый простой способ подключения, это открыть файл header.php и с помощью обычной директивы <link> подключить свои CSS стили. Примерно также можно поступить и с JS скриптами, подключив их тегом <script> в шапке или футере сайта — header.php или footer.php. Выглядеть это будет вот так.
Подключаем стили:
HTML2WP. Серия #2. Разбор файлов. Подключение стилей, скриптов настроек
<link href="<?= bloginfo('template_directory'); ?>/css/style.css?v=1.5" rel="stylesheet" type="text/css" /> <link href="<?= bloginfo('template_directory'); ?>/css/addon.css?v=1.1" rel="stylesheet" type="text/css" /> <link href="<?= bloginfo('template_directory'); ?>/libs/owl-carousel/owl.carousel.css" rel="stylesheet">
Подключаем скрипты:
Как изменить стили CSS Изучаем код сайта
<script src="<?= bloginfo('template_directory'); ?>/libs/owl-carousel/owl.carousel.min.js"></script> <script src="<?= bloginfo('template_directory'); ?>/libs/reveal/jquery.reveal.js" type="text/javascript"></script> <script src="<?= bloginfo('template_directory'); ?>/js/common.js"></script>
Такой способ хоть и является рабочим, но не есть правильным. Как минимум могут возникнуть проблемы с плагинами кэширования — они не будут корректно видеть css и js файлы темы, которые необходимо минифицировать, объединить в один и закэшировать.
Корректнее делать подключение специальными PHP функциями, внутр файла functions.php вашей темы. Рассмотрим в качестве примера, то как это организовано в официальной теме twentytwelve для WordPress.
Финальный код подключения стилей и скриптов будет в конце статьи. А пока разберем все по частям.
// Описываем функцию в которй будем подключать CSS и JS function twentytwelve_scripts_styles(){ global $wp_styles; //... код подключения стилей } // Добавляем action для запуска этой функции add_action( 'wp_enqueue_scripts', 'twentytwelve_scripts_styles', 1 );Выглядит это следующим образом, есть функция twentytwelve_scripts_styles , ее название может быть любой. Внутри которой мы будем подключать CSS стили и JS скрипты. После ого как эта функция объявлена, мы вызываем ее через add_action