Как подключить стили css в wordpress

Как редактировать CSS сайта WordPress

Вступление

Изменить оформление сайта, можно в файлах активной темы WordPress, а именно в файле под названием style.css. Это простой текстовой файл в расширении CSS. Переводится CSS как Cascading Style Sheets — каскадные таблицы стилей. Согласен, перевод мало о чем говорит. Какими способами можно редактировать CSS сайта WordPress пойдет речь далее.

CSS это

С одной стороны CSS это расширение текстового файла. С другой стороны CSS это язык программирования, на котором пишется это файл. С третьей стороны CSS это свод правил для задания шрифта, цвета сайта, относительного расположения блоков сайта (влево, центр, право, отступы от верха и низа) и других представлений внешнего вида страниц сайта, которые в этом файле и прописаны.

Сразу замечу, файлы CSS могут иметь пугающие размеры, но в них нет ничего сложного. Это очень простые, хотя и разнообразные, правила, написанные в простом синтаксисе.

Также замечу, что запоминать все правила CSS наизусть совершенно не обязательно. Достаточно понимать синтаксис написания правил CSS. Этого достаточно, чтобы редактировать файл CSS, да и справочник всегда поможет. Главное знать, что править и как править. Кроме справочника есть инструменты в браузерах, о них чуть ниже, которые позволяют редактировать CSS онлайн.

Где лежит файл style.css WordPress

Несколько прописных истин:

А лежит файл style.css WordPress в папке с темой (шаблоном) WP. Полный адрес, одинаков для всех тем: wp-content/themes/название_темы/style.css.

Три способа редактировать CSS сайта WordPress

Предложу три варианта редактирования файла style.css.

Редактирование из панели администратора

Вам, наверное, известно, что система WordPress имеет внутренний редактор файлов установленных тем. Войти в него можно из консоли сайта через вкладку: Внешний вид→Редактор.

Справа вы видите список файлов темы, в поле редактора открывается содержимое файлов. Если у вас установлено несколько тем, обратите внимание на правый верхний угол. Там есть поле выбора темы. По умолчанию откроется активная тема, но редактировать можно любую установленную тему без её активации.

Совет: Ошибки в редактировании style.css не могут обрушить сайт, вы можете изуродовать только внешний вид. Поэтому, перед прямым редактированием из консоли можно обойтись без резервной копии сайта, достаточно сделать копию самого файла style.css и в случае неудачного редактирования вернуть файлу прежний вид.

Редактирование файла style.css по FTP

Говорят, что есть хостинги, которые не поддерживают редактирование файлов темы из административной панели сайта. Не беда. Можно и на самом деле это правильно, редактировать файл style.css по FTP. Правильно, потому что безопасно и у вас всегда есть оригинальная копия файла.

Оба способа редактирования относятся к прямому редактированию, «живого» файла активной темы. У прямого редактирования есть большой недостаток: при обновлении темы все ваши изменения потеряются и тема примет исходный внешний вид. Чтобы этого избежать используется способ дочерней темы.

Дочерняя тема WordPress

Система WordPress позволяет создавать дочерние темы, для родительской активной темы. Дочерняя тема может полностью быть копией родительской темы или с помощью функции import, «забирать» и переопределять стиль родительской темы. То есть, после создания и активации темы наследницы редактируется файл style.css дочерней темы и изменения не пропадают после обновления шаблона. О дочерней теме я писал подробную статью: Зачем нужна дочерняя тема WordPress.

На этом принципе основан и третий способ редактирования стилей.

Редактирование файла style.css с помощью плагинов

Есть несколько плагинов для улучшения редактора файлов темы. Для редактирования стилей мне нравится плагин Jetpack. О плагине я писал подробную статью: Плагин Jetpack заменит 33 плагина WordPress. Плагин очень большой и для редактирования стилей темы нужно активировать модуль Custom CSS.

После его активации в меню консоли в пункте Внешний вид появляется вкладка «Редактировать CSS».

редактировать CSS сайта WordPress

Теперь не нужно редактировать style.css напрямую, достаточно вписать кусок кода css в поле редактора и изменения появятся на сайте. Причем при обновлении темы они не потеряются.

Как понять, что нужно редактировать

Если вы бегло не читаете CSS нужно воспользоваться онлайн инструментами, для чтения CSS и понять, что нужно редактировать.

Самый простой инструмент, это инструмент в любом браузере: «Просмотр кода элемента» в Chrom. В других браузерах название похожее. Доступ к инструменту через правую кнопку мыши или короткими клавишами (Ctrl+Shift+I).

Показываю, как им пользоваться:

Например, хотим поменять заголовок сайта.

Для примера, я поменял онлайн размер шрифта названия.

Источник

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

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

Такой способ хоть и является рабочим, но не есть правильным. Как минимум могут возникнуть проблемы с плагинами кэширования — они не будут корректно видеть css и js файлы темы, которые необходимо минифицировать, объединить в один и закэшировать.

Правильный способ подключения css стилей и js скриптов в тему WordPress

Корректнее делать подключение специальными PHP функциями, внутр файла functions.php вашей темы. Рассмотрим в качестве примера, то как это организовано в официальной теме twentytwelve для WordPress.

Финальный код подключения стилей и скриптов будет в конце статьи. А пока разберем все по частям.

Аналогичная конструкция скорее всего уже присутствует в вашем шаблоне, если вы взяли за основу готовую WordPress тему.

Теперь нам остается только подключить наши CSS и JS, в данном случае внутри функции twentytwelve_scripts_styles()

Рассмотрим пример подключения стилей.

Подключаем CSS стили в теме WordPress

Сначала необходимый CSS файл регистрируем, и затем подключаем его. Выглядит это вот так:

Регистрация происходит функцией wp_register_style(); в которую передаются 4-ре параметра:

После регистрации подключаем зарегистрированные файлы стилей функцией 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 коде.

Источник

Как подключить CSS файл к WordPress

Подключение CSS файла к WordPress не многим отличается от стандартного подключения в нединамической (обычной) HTML странице. Но все-же есть ньюансы и отличия, о которых и пойдет речь в данной статье.

Для начала приведу основные способы подключения СSS к HTML файлу. То-есть сначала рассмотрим обычное, стандартное подключение стилей к сайту, это пригодится в дальнейшем.

Чтобы подключить CSS файл к обычной HTML странице нужно:

Первый способ подключения CSS к HTML странице

прописать следующий код:

Тут все довольно просто, css — это папка, куда помещен файл стилей, reset.css — сам подключаемый файл.

Или так, с указанием полного адреса URL нахождения стилевого файла:

Данным кодом можно подключить любой css файл, даже если он размещен на стороннем ресурсе.

Второй способ подключения CSS к HTML странице

Для этого нужно в самом начале style.css (см. название своего файла) прописать следующий код:

Или для стороннего файла стилей, с указанием полного адреса:

Как видно из примера, в код подключения просто вставляется ссылка на сторонний ресурс.

Из личного опыта

Данный способ подключения не очень хорош, т.к пока не подгрузится сторонний CSS файл, ваши стили сайта будут подгружаться дольше обычного или подгрузятя частично.

В этой статье я не буду затрагивать такие моменты как «точечное подключение» или компановка стилей в HTML файле. А лучше перейду к главному.

Как подключить CSS файл к WordPress

Подключать файлы CSS к WordPress можно и вышепреведенными способами, но правильнее будет последовать следующим примерам.

Первый способ подключить CSS файл к WordPress

Открываем файл header.php и сразу перед закрывающим тегом нужно прописать такой код:

Но самым правильным способом считается подключение CSS файлов к сайту на WordPress является нижеприведенный пример.

Регистрация CSS файлов в WordPress

Добавляем в файл functions.php этот код:

Ну и рассмотрим, что нужно минимально знать и учитывать при подключении CSS файла к WordPress используя данную функцию.

function my_style_load() — my_style_load — название функции, можете придумать свое, пишется без пробелов в нижнем регистре букв и без знака — (тире). Обратите внимание, что встречается оно в коде два раза.

$theme_uri = get_template_directory_uri(); — get_template_directory_uri(); значит, что подключаемый файл должен обязательно находится внутри папки вашей темы, в директории шаблона.

/css/my-style.css — это как можно догадаться, путь к папке и название подключаемого CSS файла.

Вот и все, стоит потратить 5-10 минут и немного разобраться просто что-где прописывать и ваши стили CSS не будут загружаться по два раза.

Если вы уверены, что к сайту не подключен подобный CSS файл, то для подключения подойдут все способы указанные в статье. Выбирайте какой нравится!

Возможно вам будет интересно

— Как вам статья «Как на WordPress подключить CSS файл?» Если что, пишите.

Лучший способ отблагодарить автора

Похожие по Тегам статьи

WordPress может использоваться для создания широкого спектра веб-сайтов. Вы можете создать портфолио сайты, новостные…

Сайдбар — часть практически любого сайта, размещается обычно слева, справа от зоны контента, либо…

В данной статье мы разберемся, что такое дочерний шаблон WordPress, для чего он нужен…

Источник