Как правильно подключить стили в wordpress
Как правильно подключать CSS стили и JS скрипты в тему WordPress
Эта короткая заметка, которая будет полезна тем кто начинает создавать темы на WordPress. Или возможно вы занимаетесь этим уже некоторое время, и делаете это не на 100% эффективно. Сегодня мы рассмотрим как правильно и корректно подключить CSS стили и JS скрипты к своей теме.
Самый простой способ подключения, это открыть файл header.php и с помощью обычной директивы <link> подключить свои CSS стили. Примерно также можно поступить и с JS скриптами, подключив их тегом <script> в шапке или футере сайта — header.php или footer.php. Выглядеть это будет вот так.
Такой способ хоть и является рабочим, но не есть правильным. Как минимум могут возникнуть проблемы с плагинами кэширования — они не будут корректно видеть css и js файлы темы, которые необходимо минифицировать, объединить в один и закэшировать.
Правильный способ подключения css стилей и js скриптов в тему WordPress
Корректнее делать подключение специальными PHP функциями, внутр файла functions.php вашей темы. Рассмотрим в качестве примера, то как это организовано в официальной теме twentytwelve для WordPress.
Финальный код подключения стилей и скриптов будет в конце статьи. А пока разберем все по частям.
Выглядит это следующим образом, есть функция twentytwelve_scripts_styles. ее название может быть любой. Внутри которой мы будем подключать CSS стили и JS скрипты. После ого как эта функция объявлена, мы вызываем ее через add_action
Аналогичная конструкция скорее всего уже присутствует в вашем шаблоне, если вы взяли за основу готовую WordPress тему.
Теперь нам остается только подключить наши CSS и JS, в данном случае внутри функции twentytwelve_scripts_styles()<. >
Рассмотрим пример подключения стилей.
Подключаем CSS стили в теме WordPress
Сначала необходимый CSS файл регистрируем, и затем подключаем его. Выглядит это вот так:
Регистрация происходит функцией wp_register_style(); в которую передаются 4-ре параметра:
- Имя стиля, которое в дальнейшем будем использовать при подключении данного стиля. Имя придумываем самостоятельно.
- Путь к CSS файлу. В примере выше он содержит переменную для определения пути каталога с темой.
- Массив с перечислением зависимостей. Например мы подключаем reset.css для сброса стилей, и все остальные CSS файлы должны быть подключены после него. Соответственно при подключения файла style.css мы поставим ему зависимость от файла у него будет зависимость от файла reset.min.css которому мы дали имя my_reset и поэтому параметр с зависимостями будет выглядеть вот так array('my_reset')
- Четвертый параметр — версия файла. Параметр необязательный.
- Пятый — тип устройства для которого должен быть применен данный стиль. В нашем случае это 'screen'
После регистрации подключаем зарегистрированные файлы стилей функцией wp_enqueue_style( 'style_name'); в которую передаем один параметр — имя зарегистрированного стиля.
Можно делать подключение файла сразу через функцию wp_enqueue_style(); передав в нее те же параметры которые мы передаем в функцию wp_register_style(); при регистрации стилей.
Подключаем JS скрипты в теме WordPress
Аналогично стилям, JS скрипты сначала регистрируются, и затем подключаются.
Либо их можно сразу подключить, записав все необходимые параметры в wp_enqueue_script(); функцию.
Готовый пример подключения CSS и JS файлов в файле function.php в теме WordPress
Привожу итоговый рабочий пример подключения CSS и JS файлов в шаблоне WordPress в файле functions.php
Как я уже писал выше, плюс такого подключения в том, что теперь CSS и JS файлы будут корректно определятся и обрабатываться плагинами в WordPress. Например плагином для кэширования и минификации стилей и скриптов.
Подключив скрипты образом как указано выше и установив плагин WP Rocket я получил ощутимый прирост в скорости работы сайта. Чего не было ранее, когда стили и скрипты подключались в HTML коде.
Понравился пост? Поделитесь ссылкой с друзьями, они оценят:
Поделиться в Facebook
Как записать свои стили CSS в админку WordPress
Для всех пользователей, которые спрашивают у меня "как записать свои стили в админку WordPress" или "изменение стиля админки WordPress через тему" решил написать этот пост.
И так, предположим что нам нужно чуток подправить стили отображения нашей админки WordPress, с чего начнем? Ну собственно начать надо с написания этих самых стилей.
Существует много способов добавления стилей в админку WordPress, я расскажу и покажу вам только два способа .
В связи с изменениями произошедшими с CMS wordpress добавился еще один способ подключения стилей. Думаю о нем стоить рассказать в самом начале поста, так как его рекомендуют для использования в плагинах и новых темах.
Важно: остальные способы, не рекомендованные к использованию. Если вы делаете тему или плагин для WP, с целью выложить в репозиций то вас попросят изменить код.
Правильно добавляем стили на сайт WordPress
Предлагаю вашему вниманию самый правильный вариант для добавления стилей на сайт WordPress и его админку (так советуют делать разработчики CMS WordPress).
Краткое руководство: как подключить стили в wordpress
- Открываем админку.
- Заходим во Внешний вид - Редактор.
- Открываем для правки файл functions.php и забрасываем туда вот такой код:
add_action( 'wp_enqueue_scripts', 'my_stylesheet' );
function my_stylesheet()<
wp_enqueue_style("style-1",get_bloginfo('stylesheet_directory')."/css/mystyle.css");
>
Только что ми подключили файл стилей с именем mystyle.css, который должен находится в вашей теме, в папке css, для клиентской части сайта. (Не забудьте создать файл с таким именем и каталог css, если его еще нет, и загрузить это все на сервер)
То есть стили CSS будут доступны только на самом сайте но не в админке Вордпресс.
Если вам нужно записать стили динамически, то есть вам нужно выводить стили css на PHP, то в этом вам поможет функция wp_add_inline_style. Единственный момент, ее нельзя использовать просто так. Надо зарегистрировать хотя бы одно имя. Код будет следующим:
add_action( 'wp_enqueue_scripts', 'my_stylesheet' );
function my_stylesheet()<
$my_style_line=".clInSite";
wp_enqueue_style("style-1",get_bloginfo('stylesheet_directory')."/css/mystyle.css");
wp_add_inline_style('style-1',$my_style_line);
>
Этим кодом мы опять подключили стили mystyle.css + дописали к ним, по идентификатору "style-1" еще один класс стилей, в нашем случае для clInSite.
Как правильно подключить стили для админки wordpress
Для подключения стилей в админку вордпрес мы будем использовать все те же функции, но код обращения будет немножко другой.
Предположим у нас есть файл стилей style-admin.css для админки сайта, который находится в папке темы css.
Открываем файл functions.php и записываем туда вот такой код:
function my_stylesheet1()<
wp_enqueue_style("style-admin",get_bloginfo('stylesheet_directory')."/css/style-admin.css");
>
add_action('admin_head', 'my_stylesheet1');
Вот и все, только что мы правильно подключили стили для админки сайта WordPress.
Аналогично делается с линейными стилями, смотрите пример выше.
Добавление стилей в админку WordPress через файл темы functions.php
Этот способ добавления стилей заключается в том, чтоб записать стили CSS прямо в PHP код function.php, конечно править такие стили не очень удобно, но зато они всегда под рукой. Вот код добавления стилей CSS в админку WordPress:
Этим кодом я выравнивал пользовательские поля (дополнительные поля) в посте WordPress. Для использования вставьте этот код в начало файла function.php и замените мои стили своими. Теги "<style>" и "</style>" должны присутствовать обязательно.
Подключить файл стилей CSS к админке WordPress через файл темы functions.php
Второй способ немного проще. Для начала нужно создать файл стилей CSS например my-wp-admin-style.css и загрузить его внутрь вашей темы. Потом открыть файл function.php и в начало записать вот такие строчки:
add_action('admin_head', 'mystylesheet');
function mystylesheet()<
echo '<link href="'.get_bloginfo( 'stylesheet_directory' ).'/my-wp-admin-style.css" rel="stylesheet" type="text/css">';
>
Стили для админки WordPress из файла my-wp-admin-style.css подключены, теперь вы всегда сможете их править с редактора или по фтп.
Пару слов о том, как не нужно или нельзя править стили админки WordPress.
Нельзя править CSS самого WordPress или стили его плагинов, так как при обновлении эти все стили просто потеряются. Если у вас не получается добавить стили одним из способов описанных выше, посмотрите в свои стили может там ошибка, или просто силы CSS не хватает для их применения. В таком случае используйте приставку !important, например вот так: body #cft dt
Если после прочтения этого поста у вас всё равно не получается добавить свои стили CSS в админку WordPress напишите мне свой вопрос в разделе Вопрос/Ответ .
Как подключить JavaScript-код и CSS-стили в WordPress
Если в создаваемом плагине или теме WordPress есть код на JavaScript, важно правильно этот код подключить. Как избежать проблем? Возможно подключение JavaScript не на все страницы сайта, а только на нужные?
Например, плагин добавляет шоткод (shortcode) и использует jQuery:
Как нельзя поключать JavaScript
Начинающий разработчик WordPress, возможно, просто добавит свой скрипт (add_my_script) в <head> с помощью хука wp_head :
Что не есть хорошо:
Во-первых, путь к файлам так указывать нельзя, т.к. в WordPress (начиная с версии 2.6) папку wp-content можно поместить в другое место!
Во-вторых, jQuery следует подключать, только убедившись, что это еще не сделал, например, другой плагин.
В WordPress эти проблемы решаются так:
Подключение JavaScript без проблем: wp_enqueue_script
Этот скрипт делает то же, что и первый, но также:
- получает URL файла
- проверяет, вдруг jQuery уже подключен (wp_enqueue_script )
template_redirect вызывается перед определением файла шаблона для отображения запрашиваемой страницы
Если вместо template_redirect использовать хук wp_footer. скрипт будет записан в footer (внизу страницы), и, следовательно, основное содержимое страницы будет загружаться быстрее.
wp_enqueue_scripts (admin_enqueue_scripts в админке) подключает JavaScript-файл, только если он еще не подключен.
И все же одна проблема пока остается, если JavaScript используется не на всех страницах сайта. Зачем загружать ненужный код на другие страницы?
Как добавить JavaScript и CSS только на нужные страницы
wp_enqueue_script() следует вызывать до wp_head(). получается, что принять решение о добавлении JavaScript нужно до обработки страницы.
Но есть способ добавления JavaScript после отображения страницы!
Условие для wp_print_scripts и wp_print_styles
Здесь JavaScript добавляется, только если определена глобальная переменная $add_my_script. Вывод скрипта выполняет wp_print_scripts() .
Флаг $add_my_script можно установить в любой функции, в том числе и в обработчике шоткода:
Так скрипт должен добавляться, только когда на странице есть шоткод [myshortcode. ].
Еще вариант: поиск шоткода в тексте страницы:
Загрузка JS-скриптов и CSS-стилей только на странице с шоткодом в WordPress 3.3
(Дополнение, 14.01.2012)
Самое приятное в этой истории то, что в WordPress 3.3 задача упрощается, т.к. wp_enqueue_script() , а также wp_enqueue_style() - подключение стилей можно просто вызвать внутри обработчика шоткода:
( использованы материалы статьи scribu. net "How to load JavaScript like a WordPress Master", 16.01.2010)
Walentin Pushkarew говорит:
Можно матом, можно молча. Используйте принцип аналогии и подбора, наконец манипуляции с кодом. Здесь классические примеры(выше).
Если методы различны, значит и шифрование скрипта явы может быть уместным. Так, например, западные умники шифруют коды защиты контента, который заносят в отдельный файл, к которому дописывают код подключения(по типу подключения CSS), который прописывают в соответствующие страницы index, header, fotter, archive и прочие, главная цель отрубить возможность использования ctrl+u, shift+ctrl+i, ну и соответственно вызов контекстного меню обозревателя пользуясь оптической мышью.
В сети не мало сервисов для зашифровки, правда не все браузеры могут положительно отвечать, а некоторые и не замечают, однако в примере есть вэб-ресурс который хорошо определён такой защитой.
Спасибо.
Долго не мог подключить css к плагину. Оказалось, оф.документация на "родном" сайте устарела, и обработку можно задавать через шоткат. Впервые прочитал об этом у вас, когда уже отчаялся - вроде все делаю по докуметации, а css не подгружается.
Куда вносить все эти функции? Нужно подключить стили к конкретной странице на сайте от другой похожей темы. Обьясните пошагово действия, пожалуйста.
Источники: http://rightblog.ru/2974, http://help-wp.ru/kak-zapisat-svoi-stili-v-adminku-wordpress/, http://mblogm.ru/blog/kak-podklyuchaet-javascript-kod-master-wordpress/
Комментарии: 1
- 01.06.18, 01:44Marina ZeminaЗдравствуйте! Массив идентификаторов других стилей, от которых зависит подключаемый файл стилей. Указанные тут стили, будут подключены до текущего.
Поделитесь своим мнением