<
  • Главная
Статьи

Как правильно подключать CSS стили и JS скрипты в тему WordPress

Опубликовано: 19.04.2018

видео Как правильно подключать CSS стили и JS скрипты в тему WordPress

Сaйт нa WordPress. Изменить css стили

Эта короткая заметка, которая будет полезна тем кто начинает создавать темы на WordPress. Или возможно вы занимаетесь этим уже некоторое время, и делаете это не на 100% эффективно. Сегодня мы рассмотрим как правильно и корректно подключить CSS стили и JS скрипты к своей теме.



Самый простой способ подключения, это открыть файл header.php и с помощью обычной директивы <link> подключить свои CSS стили. Примерно также можно поступить и с JS скриптами, подключив их тегом  <script> в шапке или футере сайта — header.php или footer.php. Выглядеть это будет вот так.

Подключаем стили:


HTML2WP. Серия #2. Рaзбoр фaйлoв. Пoдключение стилей, скриптoв нaстрoек

<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">

Подключаем скрипты:


Кaк изменить стили CSS Изучaем кoд сaйтa

<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



Новости
  • Виртуальный хостинг

    Виртуальный хостинг. Возможности сервера распределяются в равной мере между всеми... 
    Читать полностью

  • Редизайн сайта

    Редизайн сайта – это полное либо частичное обновление дизайна существующего сайта.... 
    Читать полностью

  • Консалтинг, услуги контент-менеджера

    Сопровождение любых интернет ресурсов;- Знание HTML и CSS- Поиск и обновление контента;-... 
    Читать полностью

  • Трафик из соцсетей

    Сравнительно дешевый способ по сравнению с поисковым и контекстным видами раскрутки... 
    Читать полностью

  • Поисковая оптимизация

    Поисковая оптимизация (англ. search engine optimization, SEO) — поднятие позиций сайта в результатах... 
    Читать полностью