X
Заказать услугу

Подключение стилей в WordPress

Плагины и Шаблоны для Wordpress
  • 2019-05-27
  • 1986 просмотр

    1 комментарий

  • Дизайн и разработка сайта

Доброго времени суток. 🙂

Данная статья будет по сути уроком, для тех кто учится создавать свои темы для WordPress. В ней мы рассмотрим варианты как подключить стили к своей теме. Однажды я писал о том как подключить скрипты к теме WordPress, с этим материалом вы можете ознакомится в статье - Как и где подключить скрипт?. Материал из сегодняшней статьи будет схожим.

Подключение стилей в WordPress

Чаще всего начинающие мастера, при создании своей темы WordPress, пользуются простейшим способом подключением стилей. Хотя не всегда и начинающие. Иногда мастера используют простой способ при оптимизации темы, чтобы уменьшить количество обращений к базе данных, потому как при данном способе нет обращений к базе данных и тд. В общим, суть способа просто, просто добавляем ссылки link rel="stylesheet". Выглядит это примерно так:

<link rel="stylesheet" type="text/css" media="all" href="http://site.com/wp-content/themes/mytheme/style.css" />

Данная строка, как вы понимаете, добавляется в шапку темы, то бишь в файл header.php между тегами head. Очень часто в данном способе добавляют стандартную функцию WordPress - bloginfo(). В итоге строка выглядит так:

<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('template_url'); ?>/style.css" />

Как вы понимаете тут уже идет обращение к базе данных и оптимизированным этот способ не назвать. Поэтому, если вас не очень беспокоит вопрос с нагрузкой на БД, тем более если он очень малый, я бы даже сказал, практически невидимый, то можно воспользоваться уже способом, который рекомендуют сами разработчики WordPress. Его суть в том, чтобы использовать функцию wp_enqueue_scripts. Именно поэтому я в начале просил вас ознакомится с материалом из прошлой статьи. Так же как и скрипты можно подключать и стили. Просто добавляете функцию в ваш файл functions.php

function mythem_enqueue_style() {
wp_enqueue_style( 'style', get_template_directory_uri(). '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'mythem_enqueue_style' );

Как видите мы используем ту же функцию wp_enqueue_scripts как и в подключении со скриптами для регистрации стилей, но сам файл подключаем с помощью wp_enqueue_style.

Давайте немножко разберем что за параметры указаны и что они означают. Схема выглядит так wp_enqueue_style( $handle, $src, $deps, $ver, $media ). После wp_enqueue_style, в нашем случаи в скобках в примере всего два из возможных.

  1. style - $handle - Рабочее название скрипта или идентификатор. Если вы будете подключать много файлов, то у каждого должно быть свое уникальное название.
  2. get_template_directory_uri(). '/style.css' - $src - Тот самый путь к файлу в корневой папке вашей теме. Если файл style.css не в корне, а в вложенной папке, то естественно путь указывается с папкой, например - /style/style.css. get_template_directory_uri() - это функция что создает ссылку на папку с темой.

Помимо этих параметров, можно еще указывать и другие.

  1. $deps - Массив идентификаторов других стилей, от которых зависит тот файл стилей что вы подключаете. Указанные тут стили, будут подключены до текущего.
  2. $ver - Версия вашего файла. Указанная версия, будет добавлена в конец ссылки на файл и будет выглядеть так - ?ver=1.1.1
  3. $media - Параметр, что устанавливает значение атрибута media.

Теперь давайте расмотрим, когда вам нужно подключить несколько файлов стилей. В примере будет 2 файла из папки с темой и один сторонний файл, для подключения стилей шрифта font-awesome, что создает иконки. Выглядит это примерно так:

function mythem_enqueue_style() {
wp_enqueue_style( 'style', get_template_directory_uri(). '/style.css' );
wp_enqueue_style( 'tw_style', get_template_directory_uri(). '/tw_style.css' );
wp_enqueue_style( 'font-awesome', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' );
}
add_action( 'wp_enqueue_scripts', 'mythem_enqueue_style' );

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

На этом все, спасибо за внимание. 🙂

Если Вам был полезным мой труд, можете поддержать сайт, обменяться со мной текстовыми ссылками или посмотреть рекламку, что займет 2 минуты :)

Оцените статью
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
Проголосовало: 3, в среднем: 5 из 5
Читайте также
Опубликован 1 комментарий

Добавить комментарий

Чтобы оставить комментарий - заполните поля ниже. Ваш e-mail не будет опубликован. Все поля обязательны

Нажмите, чтобы добавить код в комментарий. Далее добавьте свой код внутрь тегов <code> тут код </code>
Я ознакомлен(а) с политикой конфиденциальности и даю согласие на обработку персональных данных*

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.