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

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

Подключение CSS файла к WordPress отличается от стандартного подключения style.css и осуществляется через файл functions.php . Но для полноты статьи сначала рассмотрим обычное, стандартное подключение стилей к сайту, может кому и пригодиться.

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

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

Второй способ подключить CSS файл через @import , для внешних файлов нужно добавить в самое начало основной таблицы стилей CSS сайта строчку:

@import url("http://google/style/reset.css");

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

разницы нет, нужно лишь указать правильный путь к папке с файлом CSS.

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

Сразу хочу заметить, что подключать CSS файл к WordPress вышеприведенным способом не правильно. К примеру, если какой-либо из плагинов использует уже такой-же фай, то движок WordPress не сможет проверить, был ли этот файл уже загружен и подключит его повторно.
Раньше на WP стили подключались таким образом:

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

Чтобы подключить CSS файл к WordPress нужно:

Добавить в файл functions.php этот код:

function my_style_load() < $theme_uri = get_template_directory_uri(); wp_register_style('my_theme_style', $theme_uri.'/css/my-style.css', false, '0.1'); wp_enqueue_style('my_theme_style'); >add_action('wp_enqueue_scripts', 'my_style_load');

Ну и рассмотрим, что нужно минимально знать и учитывать при подключении CSS файла к WordPress.
function my_style_load() — my_style_load — название функции, можете придумать свое, пишется без пробелов в нижнем регистре букв и без знака — (тире). Обратите внимание, что встречается оно в коде два раза.
$theme_uri = get_template_directory_uri(); — get_template_directory_uri(); значит, что подключаемый файл должен обязательно находится внутри папки вашей темы, в директории шаблона.
wp_register_style(‘my_theme_style’, $theme_uri.’/css/my-style.css’, false, ‘0.1’); — my_theme_style название стилей, я придумал свое, оно пишется так-же как и название функции и встречается в коде два раза.
/css/my-style.css — это как можно догадаться, путь к папке и название подключаемого CSS файла.
Вот и все, стоит потратить 5-10 минут и немного разобраться просто что-где прописывать и ваши стили CSS не будут загружаться по два раза. Хотя если вы уверены, что к сайту не подключен подобный CSS файл, то для подключения подойдут все вышеописанные способы. Выбирайте какой нравится!
Источник

Источник

Подключение файлов CSS и JavaScript в теме WordPress

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

Вставить в HTML шаблона теги или – не катит. Потому что в таком случае вы их захардкодите и например у вас не будут работать плагины оптимизации, которые объединяют все стили и скрипты в один файл. Или же у вас не получится перестроить порядок скриптов.

Чтобы скачать тему WordPress, которая получилась у нас в процессе этого урока, необходимо приобрести курс.

Пример подключения файла CSS и файла JS

Написал для вас вот такой код, чтобы вам удобно было копировать его отсюда при необходимости:

add_action( 'wp_enqueue_scripts', 'true_enqueue_js_and_css' ); function true_enqueue_js_and_css() { // CSS wp_enqueue_style( 'misha_css', // идентификатор стиля get_stylesheet_directory_uri() . '/css/misha.css', // URL стиля array(), // без зависимостей '5.0' // версия, это например ". /misha.css?ver=5.0" ); // JavaScript wp_enqueue_script( 'misha_js', // идентификатор скрипта get_stylesheet_directory_uri() . '/js/misha.js', // URL скрипта array( 'jquery' ), // зависимости от других скриптов time(), // версия каждую секунду разная, чтоб не кэшировать во время разработки true // true - в футере, false – в хедере ); }

• При разработке своих тем вставляем код подключения JS / CSS в functions.php , либо в какой-либо произвольный файл, подключаемый также к functions.php через include() / require() .
• Можете также почитать документацию функций wp_enqueue_style() и wp_enqueue_script().
• Не переживайте так из-за того, что я записал функцию не в одну строчку, а в 7 – согласно кодгайду WordPress, мы можем записывать функцию, чтобы каждый её параметр был на новой строке.

Хуки wp_enqueue_scripts, admin_enqueue_scripts и login_enqueue_scripts

И хотя в уроке мы использовали только хук wp_enqueue_scripts , но есть и другие, а вот их полный список:

• wp_enqueue_scripts – для подключения на страницах сайта.
• admin_enqueue_scripts – для подключения на страницах админки WordPress /wp-admin/.
• login_enqueue_scripts – для подключения на странице авторизации / восстановления пароля / регистрации (wp-login.php).

Есть ещё enqueue_block_editor_assets , но давайте немного притормозим, ладно? 😅

Что делать с кэшированием?

Конечно же обновлять кэш браузера после каждого изменения в style.css вообще не особо вариант?

Поэтому мы и воспользуемся 4-м параметром функции, в который мы можем передать версию, осталось только придумать, как передавать её динамически, чтобы можно было бы забыть о кэше на время разработки.

В уроке мы использовали функцию time() , потому что каждый раз она возвращает нам новое значение, каждую следующую секунду.

Давайте сейчас я покажу вам более хитрый, но чуть более правильный метод – мы можем использовать другую PHP функцию filemtime() , которая возвращает также время, но только не время вообще, а время последнего изменения файла! В секундах.

add_action( 'wp_enqueue_scripts', 'misha_js_and_css' ); function misha_js_and_css(){ wp_enqueue_script( 'scripts', get_stylesheet_directory_uri() . '/js/scripts.js', array( 'jquery' ), filemtime( dirname( __FILE__ ) . '/js/scripts.js' ), // или filemtime( get_stylesheet_directory() . '/js/scripts.js' ), true ); }

Но как же работает filemtime() ?

Как вы возможно догадались, мы передали в неё что-то вроде пути до файла? Да, это именно путь к файлу на сервере, а не URL. Для того, чтобы убедиться наглядно, можете прямо в index.php попробовать вывести echo dirname( __FILE__ );

Перенос уже зарегистрированного в WordPress jQuery в футер сайта

Вообще главный аргумент здесь – что, когда мы переносим наши JS файлы в футер, мы делаем наш сайт чуточку быстрее (да, это не влияет сильно (!) на скорость загрузки сайта, однако Google PageSpeed будет счастлив).

Для того, чтобы это сделать, мы производим следующие манипуляции:

add_action( 'wp_enqueue_scripts', function() { wp_deregister_script( 'jquery' ); wp_register_script( 'jquery', includes_url('/js/jquery/jquery.js'), array(), null, true ); wp_enqueue_script( 'jquery' ); } );

Так скрипт jquery уже зарегистрирован в WordPress ядре по умолчанию (полный список таких скриптов – в таблице), то нам нужно сначала снять его с регистрации функцией wp_deregister_script().

В уроке, для того, чтобы сильно вас не загружать, я не стал использовать includes_url() – она возвращает динамически путь к директории wp-includes .

Также обратите внимание, что в этом примере я не стал создавать какую-то отдельную функцию, а прописал её сразу внутри хука! Типа такая анонимная функция – подобная запись, насколько я знаю, не соответствует WordPress кодгайду, но позволит вам каждый раз не напрягать воображение для придумывания названий функций. Такая возможность записи появилась в PHP 5.3, поэтому, если вдруг каким-то чудесный образом у вас более старая версия, не рекомендую так делать.

Ну а главная суть в этом примере – это 5-й параметр функции wp_register_script(), который равен true, а значит скрипт должен подключиться в футере! Этот параметр есть только у функций скриптов, потому что, что бы там не говорил пейджспид, перенос CSS в футер – это бред.

• 21 видеоурок
• Можно скачать готовый код после каждого урока
• Можно начать проходить курс сразу же после оплаты
• Достаточно базовых знаний HTML и CSS, чтобы пройти курс
• Единоразовый платёж
• Доступ навсегда
• Уроки актуальны в 2023-м году

Источник

Как подключить стили WordPress

Оформление сайта на WordPress осуществляется с помощью стилей. Существует несколько вариантов подключения файла(ов) со стилями к HTML документу. В WordPress самым «правильным» способом (на момент написания статьи) является подключение в файле functions.php. Это решение используется в темах поставляемых вместе с WordPress по-умолчанию, например Twenty Fifteen.

Стили Вордпресс по-умолчанию

Для меня остается загадкой, почему обязательный для любой темы WordPress файл стилей style.css не подключается к этой самой теме (шаблону) автоматически. И необходимо прописать подключение файла таблицы CSS Вордпресс вручную.

В этой статье я расскажу как правильно в WordPress подключить CSS стили.

Таблица стилей WordPress

Для того, чтобы ваша тема WordPress использовала стили оформления из файла style.css необходимо, чтобы в файле functions.php вашего шаблона присутствовали следующие строки:

function theme_name_scripts() < wp_enqueue_style( 'main-style', get_stylesheet_uri() ); >add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );

Дополнительные CSS WordPress

Если вам необходимо подключить к теме несколько файлов со стилями, например вы используете сброс CSS стилей в файле reset.css, то тогда необходимый код в файле functions.php будет выглядеть так:

function theme_name_scripts() < wp_enqueue_style( 'reset-css', get_template_directory_uri() . '/reset.css' ); wp_enqueue_style( 'main-style', get_stylesheet_uri() ); >add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );

Пример приведен для случая, когда файл reset.css лежит в корне вашей темы рядом с файлом style.css.

Устаревшие методы подключения файла CSS стилей

Раньше файл стилей в WordPress можно было подключить к теме добавив следующий код (пример для HTML5) в секцию HEAD или перед закрывающим тегом BODY:

Но теперь этот способ считается устаревшим.

Полезные ссылки

При написании статьи были использованы следующие источники:

Источник