Как подключить файл css в вордпресс
Обновлено: 01.07.2024
Регистрирует CSS файл в WordPress. После регистрации файл можно добавить в html документ с помощью функции wp_enqueue_style() .
Ищем WP-разработчика! Фулл-тайм, удаленка, хорошая зарплата, соц. пакет. Подробности.Компания Boosta.
Нужно использовать эту функцию, чтобы правильно подключить CSS файлы в WordPress. Для скриптов такой функцией является wp_register_script().
Эта функция только регистрирует файл, чтобы он был подключен и выведен, его нужно добавить в очередь с помощью wp_enqueue_style(). Файл будет добавлен в <head> часть документа.
Подключать файлы так, а не напрямую в коде, выгодно для дальнейшей оптимизации. Если все файлы подключены через систему регистрации WP, то затем можно использовать плагины, чтобы объединить все стили в один и отдавать их в сжатом виде, на лету.
Для вызова этой функции используйте события: wp_enqueue_scripts и/или admin_enqueue_scripts . Вызов функции за пределами этого события может вызвать ошибки.
Возвращает
true|false . 3 возвращает true/false. До этого ничего не возвращала.
Использование
$handle(строка) (обязательный) Название подключаемого файла стилей (буквы в нижнем регистре). Должен быть уникальным, так как он будет использован как идентификатор в системе. $src(строка) (обязательный)$deps(массив) Массив идентификаторов других стилей, от которых зависит подключаемый файл стилей. Указанные тут стили, будут подключены до текущего.
По умолчанию: array() $ver(строка/логический) Строка определяющая версию стилей. Версия будет добавлена в конец ссылки на файл: ?ver=3.5.1 . Если не указать (установлено false), будет использована версия WordPress. Если установить null, то никакая версия не будет установлена.
По умолчанию: false $media(строка)
Устанавливается значение атрибута media. media указывает тип устройства для которого будет работать текущий стиль. Может быть:
Подключение CSS файла к WordPress не многим отличается от стандартного подключения в нединамической (обычной) HTML странице. Но все-же есть ньюансы и отличия, о которых и пойдет речь в данной статье.
Для начала приведу основные способы подключения СSS к HTML файлу. То-есть сначала рассмотрим обычное, стандартное подключение стилей к сайту, это пригодится в дальнейшем.
Чтобы подключить CSS файл к обычной HTML странице нужно:
Первый способ подключения CSS к HTML странице
прописать следующий код:
Или так, с указанием полного адреса URL нахождения стилевого файла:
Данным кодом можно подключить любой css файл, даже если он размещен на стороннем ресурсе.
Второй способ подключения CSS к HTML странице
Можно подключить CSS файл через @import . В данном случае подключаемый файл импортируется в основной файл CSS, дополняя его.
Для этого нужно в самом начале style.css (см. название своего файла) прописать следующий код:
Или для стороннего файла стилей, с указанием полного адреса:
Как видно из примера, в код подключения просто вставляется ссылка на сторонний ресурс.
Из личного опыта
Данный способ подключения не очень хорош, т.к пока не подгрузится сторонний CSS файл, ваши стили сайта будут подгружаться дольше обычного или подгрузятя частично.
Как подключить CSS файл к WordPress
Подключать файлы CSS к WordPress можно и вышепреведенными способами, но правильнее будет последовать следующим примерам.
Первый способ подключить CSS файл к WordPress
Открываем файл header.php и сразу перед закрывающим тегом </head> нужно прописать такой код:
Это то-же самое, что и в верхнем примере, только написано на языке PHP. Нужно только правильно прописать путь к папке и файлу /css/reset.css .
Но самым правильным способом считается подключение CSS файлов к сайту на WordPress является нижеприведенный пример.
Дабы избежать подключения одного и того-же файла CSS несколько раз, разработчики WordPress придумали функцию wp_register_style . Дублирование стилевых файлов может возникать, если к примеру несколько плагинов подключают одни и те же стили.
Добавляем в файл functions.php этот код:
Ну и рассмотрим, что нужно минимально знать и учитывать при подключении CSS файла к WordPress используя данную функцию.
Вот и все, стоит потратить 5-10 минут и немного разобраться просто что-где прописывать и ваши стили CSS не будут загружаться по два раза.
Если вы уверены, что к сайту не подключен подобный CSS файл, то для подключения подойдут все способы указанные в статье. Выбирайте какой нравится!
Возможно вам будет интересно
Лучший способ отблагодарить автора
Похожие по Тегам статьи
Здравствуйте, в этом посте публикую способы подключения скрипта к сайту, делая акцент на подключение скрипта в WordPress, который имеет особенности и кардинально отличается от обычного HTML-подключения. Имеются ввиду JavaScript и JQuery
Для начала вкрадце напишу про подключение скрипта к обычному HTML сайту или странице.
Что-бы подключить скрипт к обычной HTML странице нужно между тегами
прописать такой код:
Для подключения сторонних скриптов, например, если вы не хотите использовать библиотеку JQuery локально, а подгружать ее со стороннего ресурса, нужно прописывать полностью путь к этому файлу. Выглядеть будет все это следующим образом:
Если скрипт не влияет на формирование страницы, то лучше его подключать в footer между тегами
В этом случае этот скрипт будет подгружаться в последнюю очередь и не будет сильно влиять на скорость загрузки страницы.
Есть еще способ подключения скриптов непосредственно в HTML код страницы. Делается это когда скрипт короткий. Это также позволяет немного ускорить скорость загрузки страницы. Берется непосредственно содержание js файла и прописывается непосредственно в head или footer . Только его нужно обязательно заключить в теги:
Теперь рассмотрим как осуществляется правильное подключение скрипта к WordPress.
Конечно для этого можно подключать скрипты стандартным методом, о котором написано выше, но в таком случае возможно подключение одного и того-же скрипта несколько раз, если какой-то из плагинов его уже использует, также из за такого подключения может отказаться работать какой либо плагин.
Для подключения скриптов в WordPress существует специальная функция wp enqueue script Что-бы подключить скрипт в WordPress, нужно открыть файл functions.php и добавить в окончание файла, перед закрывающей скобкой ?> (в некоторых темах такой скобки нет, тогда подключайте файл также, прямо в окончание файла) такой код:
Все аналогично первому варианту. На данном примере подключаю другой скрипт bootstrap.min.js
Оба способа подключения скриптов к WordPress являются верными, но предпочтительней второй вариант.
Подключение стороннего скрипта к WordPress
Как и в варианте локального подключения скриптов, описанного выше, в файл functions.php ставьте такой код:
Лучший способ отблагодарить автора
Похожие по Тегам статьи
10 thoughts on “ Подключение скрипта к WordPress ”
Егор, полезная статья =) А вот смотри, получается, вместо того, чтобы прописывать скрипт между тегами head, можно просто в functions его подключить? Этот метод всегда срабатывает или проверять нужно?
Привет, почти все свои скрипты так или иначе на WP подключаются через файл functions.php, это стандарт . Если все правильно прописывать в функции подключения wp enqueue script , то естественно, все правильно работать будет. Обрати внимание, почти все свои скрипты лучше подключать в footer.php , через functions.php. Если все работает, то так и оставлять, если нет, то поменять true на false
В статье об этом сказано.
Еще нежно не забывать про зависимости при подключении библиотек. А то я помню намучался в свое время.
Здравствуй, я там ссылочку оставил на WP кодекс. Кстати, я сознательно не стал углубляться в тему, у меня сайт рассчитан на обычных блоггеров, в основном. Кто серьезно занимается разработкой сайтов на WordPress, тому кодекс в руки и на ГитХаб 🙂
Все подключается, только почему-то не работает. Нужно разбираться. Время нет на это.
Регистрирует CSS файл в WordPress. После регистрации файл можно добавить в html документ с помощью функции wp_enqueue_style() .
Ищем WP-разработчика! Фулл-тайм, удаленка, хорошая зарплата, соц. пакет. Подробности.Компания Boosta.
Нужно использовать эту функцию, чтобы правильно подключить CSS файлы в WordPress. Для скриптов такой функцией является wp_register_script().
Эта функция только регистрирует файл, чтобы он был подключен и выведен, его нужно добавить в очередь с помощью wp_enqueue_style(). Файл будет добавлен в <head> часть документа.
Подключать файлы так, а не напрямую в коде, выгодно для дальнейшей оптимизации. Если все файлы подключены через систему регистрации WP, то затем можно использовать плагины, чтобы объединить все стили в один и отдавать их в сжатом виде, на лету.
Для вызова этой функции используйте события: wp_enqueue_scripts и/или admin_enqueue_scripts . Вызов функции за пределами этого события может вызвать ошибки.
Возвращает
true|false . 3 возвращает true/false. До этого ничего не возвращала.
Использование
$handle(строка) (обязательный) Название подключаемого файла стилей (буквы в нижнем регистре). Должен быть уникальным, так как он будет использован как идентификатор в системе. $src(строка) (обязательный)$deps(массив) Массив идентификаторов других стилей, от которых зависит подключаемый файл стилей. Указанные тут стили, будут подключены до текущего.
По умолчанию: array() $ver(строка/логический) Строка определяющая версию стилей. Версия будет добавлена в конец ссылки на файл: ?ver=3.5.1 . Если не указать (установлено false), будет использована версия WordPress. Если установить null, то никакая версия не будет установлена.
По умолчанию: false $media(строка)
Устанавливается значение атрибута media. media указывает тип устройства для которого будет работать текущий стиль. Может быть:
Читайте также: