Как подключить CSS, шрифт и скрипты на WordPress
Данная статья научит вас, как подключать стили, шрифты и скрипты к сайту. Дело в том, что верстальщик отлично знает, что такие вещи подключаются в хедере сайта. В WordPress-е так нельзя делать, все подключения осуществляются через специальную функцию.
Почему такие сложности? WordPress и сам устроен намного сложнее, чем статичные сайты, пользователь может ставить кучу плагинов, подключать свои шаблоны, скрипты. Так вот, чтобы все эти прекрасные компоненты не вступали друг с другом в конфликт, нужна строгая система очерёдности их загрузки.
Подключение стилей к WordPress
По умолчанию в файле "функции" темы Underscores уже вставлена функция, которая подключает главный файл стилей нашей темы. В качестве первого параметра мы задаём название - my_theme-style, которое будет использоваться для файла. В качестве второго параметра мы задаём путь, функция get_... сгенерирует путь к главному файлу стилей. Обычно разработчики для своих стилей создают кастомные файлы, а не добавляют их в главный файл.
wp_enqueue_style( 'my_theme-style', get_stylesheet_uri() );
Добавим кастомный test.css. Подключать надо точно так же, как и глобальные стили. В качестве первого параметра передаём название блога + название стилей (my_theme_test). В качестве второго параметра задаём путь к этому файлу, прописываем функцию получения пути к директории, точку (оператор конкатенации, который возвращает строку, представляющую собой соединение левого и правого аргументов) и test.css.
wp_enqueue_style( 'my_theme_test', get_template_directory_uri().'/test.css');
Давайте проверим действительно ли подключился наш кастомный файл во фронтенде, посмотрим исходный код страницы, наш test.css подключен и отображается ниже основного файла стилей. Значит все сделано верно, ведь кастомный файл стилей должен перезаписывать стили текущей темы.
Подключение скриптов
Имеется функция, которая отвечает за подключение JS скриптов. Создадим файл - test.js в папке js. В стартовой теме уже есть одно подключение JS, продублируем его и подставим вместо названий дефолтных параметров, своё название - my_theme-test и укажем локализацию test.js. URL мы не указываем жёстко, он должен определиться динамически.
wp_enqueue_script( 'my_theme-test', get_template_directory_uri() . '/js/test.js', array(), true );
передаются ещё 2 параметра:
array()- отвечает за очередность загружаемых скриптов.
true - все кастомные скрипты рекомендуется подгружать в футере, чтобы сайт быстрее открывался.
Посмотрим успешно ли подключился наш js файл, идём в исходный код и видим, что наш файл находится в футере.
Подключение шрифтов на WordPress (первый способ)
Разберём на примере Google Fonts, как подключить шрифты к WordPress. Мы выбрали шрифт - Pacifico и давайте подключим его самым простым способом.
Копируем код стандартного подключения, и вставляем в хедер, между тегами head.
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
или копируем код @IMPORT
<style>
@import url('https://fonts.googleapis.com/css?family=Pacifico');
</style>
Если вы подключаете больше, чем один шрифт, то пропишите их через разделитель, не создавайте лишних запросов к базе данных.
<link href="https://fonts.googleapis.com/css?family=Pacifico|Oswald" rel="stylesheet">
Второй способ
Подключается так же, как и стили.
wp_enqueue_style( 'googlefonts', 'https://fonts.googleapis.com/css?family=Pacifico:400,700&subset=cyrillic' );
На странице с исходным выводит ссылку:
<link rel='stylesheet' id='googlefonts-css' href='https://fonts.googleapis.com/css?family=Pacifico%3A400%2C700&subset=cyrillic&ver=4.9.6' type='text/css' media='all' />
Независимо от способа подключения, в стилях надо указать название шрифта в соответствующем селекторе. Названия шрифтов пишутся в одинарных или двойных кавычках.
font-family: 'Pacifico', cursive;
Если вы хотите пользоваться WordPress-ом на более высоком уровне, чем просто пользователь, то рекомендую получить базовые знания по PHP, пройдя видео-курс по PHP 7.
-
Создано 24.08.2018 10:38:45
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.