Wordpress

WordPress подключить css: wp_enqueue_style() – Правильно добавляет файл CSS стилей.

25.10.2022

Содержание

Изменение оформления элементов сайта с помощью Дополнительных стилей в WordPress

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

В некоторых темах оформления, особенно в платных вариантах, есть множество опций и настроек позволяющих достаточно подробно настроить внешний вид элементов сайта.

Есть подобные настройки и в стандартных темах, поставляемых вместе с WordPress.

Но, в случаях, когда нужной настройки нет — справиться с вопросом поможет CSS.

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

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

ru, webref.ru и т.д.

Для добавления своего CSS-кода WordPress предоставляет специальный инструмент — Дополнительные стили. Если Вы находитесь на публичной части сайта, в него можно попасть нажав кнопку «Настроить» в верхней части экрана, а затем по пункту «Дополнительные стили». Из админ панели: Внешний вид -> Настроить -> Дополнительные стили.

Данный раздел представляет из себя поле, в которое Вы можете добавлять свои CSS-стили.

Чтобы привязать CSS-правила к определенному элементу необходимо узнать его тег и атрибуты. Для этого воспользуемся Инструментами разработчика на примере браузера Google Chrome.

Щелкнем правой кнопкой мыши по интересующему элементу и в контекстном меню выберем пункт «Просмотреть код». После чего откроется окно инструментов с активной вкладкой «Elements».

Для примера изменим цвет надписи WP TEST на синий. Элемент представляет из себя ссылку (тег a), но не имеет атрибутов class или id, к которым мы могли бы привязать CSS-правила. Уровнем выше есть элемент с тегом h2 (заголовок) и классом «site-title», он является родительским для ссылки WP TEST. Добавим CSS-правило для тега a с учетом родительского класса «site-title» в поле Дополнительные стили.

.site-title a { color: #00f; }

.site-title a {

    color: #00f;

}

#00f — это код синего цвета. С обозначением цветов в CSS Вы также можете ознакомиться на вышеуказанных сайтах.

CSS-код добавленный в поле Дополнительные стили применяется мгновенно, но как мы можем заметить на вкладке «Styles» наше правило переопределилось более приоритетным (или по-другому — специфичным) CSS-правилом темы (оно выделено более ярким цветом).

body.has-header-image .site-title a { color: #fff; }

body.has-header-image .site-title a {

    color: #fff;

}

Усилим наше правило, указав более точный набор тегов и классов.

body.has-header-image .site-title a { color: #00f; }

body.has-header-image .site-title a {

    color: #00f;

}

Чтобы сохранить изменения необходимо нажать кнопку «Сохранить и Опубликовать» в верхней части экрана.

Если синий цвет не подходит, Вы можете подобрать другой с помощью палитры, щелкнув на синий квадратик в CSS-правиле в правом нижнем углу экрана, а затем скопировать код выбранного цвета в правило в поле Дополнительные стили.

Аналогичным образом мы можем, например, изменить размер заголовка страниц. Находим элемент и добавляем свое правило на основе существующего в теме.

body.page:not(.twentyseventeen-front-page) .entry-title { font-size: 24px; }

body.page:not(.twentyseventeen-front-page) .entry-title {

    font-size: 24px;

}

Современные темы WordPress адаптированы под разные разрешения экрана устройств. Вы также можете корректировать отображение элементов на разных устройствах с помощью медиа-запросов. Добавим несколько примеров.

/* Для всех устройств */ body.page:not(.twentyseventeen-front-page) .entry-title { font-size: 12px; } /* Для разрешения планшета в портретной ориентации и выше */ @media (min-width: 768px) { body.page:not(.twentyseventeen-front-page) .entry-title { font-size: 20px; } } /* Для разрешения планшета в альбомной ориентации и выше */ @media (min-width: 1024px) { body.page:not(.twentyseventeen-front-page) .entry-title { font-size: 30px; } }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

/* Для всех устройств */

body.page:not(.twentyseventeen-front-page) . entry-title {

    font-size: 12px;

}

 

/* Для разрешения планшета в портретной ориентации и выше */

@media (min-width: 768px) {

    body.page:not(.twentyseventeen-front-page) .entry-title {

        font-size: 20px;

    }

}

 

/* Для разрешения планшета в альбомной ориентации и выше */

@media (min-width: 1024px) {

    body.page:not(.twentyseventeen-front-page) .entry-title {

        font-size: 30px;

    }

}

Проверить результат можно с помощью режима эмуляции в инструментах разработчика (кнопка Toggle device toolbar). С помощью него мы можем увидеть как сайт выглядит на разных устройствах, выбираю нужное из выпадающего списка в верхней части экрана.

Как подключить CSS — способы подключения. Основы CSS для начинающих. Урок №3

Главная » Основы CSS » Как подключить CSS — способы подключения. Основы CSS для начинающих. Урок №3


23. 01.2017


Всем привет!
В этом уроке я расскажу о способах подключения CSS файла к HTML. Существует 3 способа подключения CSS файла. Спросите, зачем вам знать именно 3 способа? Отвечу, что нужно, потому что бывают случаи, когда необходимо использовать как раз все эти 3 способа подключения.

○ Способ №1 – «Таблица связанных стилей»

Все стили хранятся в одном файле с расширением «.css».
Если связать все HTML файлы веб-страниц с таким CSS файлом, то при изменениях стили страниц (цвет, фон, размер шрифта и т.д.) будут изменяться во всех HTML документах, связанных с CSS файлом.

Схематично это выглядит так:

Чтобы связать HTML документ с CSS файлом, добавьте между тегами <head> специальный тег <link>.
* Закрывающий тег не нужен

<link rel="stylesheet" type="text/css" href="style.css">

href – прописываем путь к  css файлу. В примере выше файл «style.css» находится вместе с остальными HTML файлами в одной директории.
Разберём способ №1 поэтапно и практично от «а» до «я»:

1 этап — создать файл «style.css»

Давайте попробуем на практике создать файл «style.css».
Откройте блокнот, который есть у вас на ПК.
Кнопка «Пуск» =>  «Все программы» => «Стандартные» => «Блокнот»:

В открывшем блокноте нажмите в меню сверху «Файл» => «Сохранить как…»:

Далее укажите место, куда вы хотите сохранить файл, лучше файл разместить вместе с остальными HTML файлами.

В поле «Имя файла» напишите «style.css», а не просто style (это важно!). Таким способом мы создаем файл с расширением «*.css». Далее нажмите на кнопку «Сохранить»:

Вот такая должна получиться общая картина:

Вот и все, файл «style.css» был создан.

Можете вставить в файл «style.css» вот это правило для тега <h2> и сохранить:


h2
{
font-size: 150px; /* Размер шрифта */
color: #cc0000 /* Цвет текста */
}

В HTML файле вставьте вот этот код:


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Пример подключения таблицы CSS</title>
<link rel="stylesheet" type="text/css" href="style. css">
</head>
<body>
<h2>Заголовок</h2>
<p>Текст</p>
</body>
</html>

В результате должно получиться вот такое:

Этот способ поможет делать изменения внешнего вида всего сайта, изменяя только правила в одном файле «style.css». Припустим, меняем цвет и размер для заголовка в «style.css», то на всех 1000 страницах произойдет одновременное автоматическое изменение. На чистом HTML, без CSS, пришлось бы эти изменения делать отдельно на каждой странице из 1000. Ужас!!! 

○ Способ №2 – «Таблицы глобальных стилей»

Этот способ тоже применяется и я уверен, что вы с ним столкнетесь.
Для подключения такого способа CSS стилей достаточно прописать между тегами <head></head> тег <STYLE>.
* Закрывающий тег обязателен

<style type="text/css"></style>

Можно и так:

<style></style>

Между тегами <style></style> прописываются необходимые CSS правила для веб-страницы.
Минус такого способа в том, что эти стили будут только для одной страницы, где размещены эти стили.

Пример:


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Пример подключения таблицы CSS</title>
<style>
h3
{
font-size: 150px; /* Размер шрифта */
color: #cc0000 /* Цвет текста */
}
</style>
</head>
<body>
<h3>Заголовок h3</h3>
</body>
</html>

Результат:

В примере выше я изменил размер и цвет Заголовка h3, используя таблицу стилей CSS.

○ Способ №3 – «Внутренние стили»

Способ №3 я использую в редких случаях, например,  для изменения одиночного тега на веб-странице. Для подключения стиля к любому тегу, нужно прописать параметр style.

style="тут будут CSS правила"

Пример:


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Пример подключения таблицы CSS</title>
</head>
<body>
<h3>Заголовок h3</h3>
</body>
</html>

Результат:

В примере выше я изменил размер и цвет Заголовка h3, используя стили CSS.

○ Комбинированный метод подключения стилей

Все эти три способа можно комбинировать.


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Пример подключения таблицы CSS</title>
<style>
h3
{
font-size: 150px; /* Размер шрифта */
color: #cc0000 /* Цвет текста */
}
</style>
</head>
<body>
<h3>Заголовок</h3>
<h3>Заголовок</h3>
</body>
</html>

На сегодня все! Жду вас на следующих уроках.
Подписывайтесь на обновления блога!

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

Как добавить пользовательский CSS на ваш сайт WordPress: 3 рассмотренных метода

Существует несколько способов добавить пользовательский CSS на ваш сайт WordPress. Вы увидите, как в этой статье.

В эти выходные WordPress я объясню сильные и слабые стороны трех различных методов, чтобы вы могли решить, какой из них вам больше подходит, и позволить вам приступить к настройке вашего сайта.

Продолжить чтение или перейти по следующим ссылкам:

  • Поиск элементов дизайна, которые необходимо настроить
  • Как WordPress и CSS работают вместе
  • Метод № 1: редактирование файла style.css вашей темы
  • Метод № 2: использование дочерней темы для редактирования CSS
  • Метод № 3: использование плагина для редактирования CSS

После того, как вы выделили часть своей темы, которую хотите изменить (например, заголовок сообщения), вам необходимо определить применяемые к ней свойства CSS, чтобы вы могли внести соответствующие изменения. К счастью, этот процесс не сложен.

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

К счастью, популярные браузеры позволяют увидеть, какие селекторы и объявления применяются к элементу на странице всего за несколько кликов. Например, в Google Chrome вы просто выделяете определенную часть документа и затем щелкаете правой кнопкой мыши, как показано ниже.

Выберите Inspect Element из раскрывающегося списка, и вы увидите информацию о проекте в окне справа. Вы можете увидеть пример этого ниже.

Элементы, выделенные красным цветом, показывают конкретные дескрипторы дизайна, применимые к выделенному тексту. Например, элемент «размер шрифта» сообщает вам, что шрифт, отображаемый в выделенном тексте, имеет размер 13 пикселей («13 пикселей»). Дескрипторы заключены в фигурные скобки селекторами. Имя соответствующего файла таблицы стилей отображается справа от селекторов.

После того, как вы вооружитесь всей этой информацией, изменить дизайн не составит труда. Например, если вы хотите изменить шрифт с 13 пикселей на 14 пикселей, вы просто выполняете поиск в файле таблицы стилей, отображаемом справа для этих селекторов («#plugin-info .block-content»), и меняете «13px» на «14 пикселей».

Вы можете сделать то же самое в Firefox, просто выделите определенную часть страницы, щелкните ее правой кнопкой мыши, а затем выберите Inspect Element в появившемся меню.

Как WordPress и CSS работают вместе

Известно, что нет двух одинаковых тем WordPress. Итак, имейте в виду, что ваша тема WordPress может не соответствовать на 100% тому, что вы прочитали в следующих разделах.

При этом более чем вероятно, что CSS, используемый для представления вашего сайта WordPress, находится в файле с именем style.css . Это общее название таблицы стилей для любого типа веб-сайта, а не только для веб-сайта WordPress.

Если вы посмотрите на этот файл, то обнаружите, что он включает исчерпывающие стилистические «инструкции» для вашей темы. Подробное описание синтаксиса CSS выходит за рамки этого руководства, но если вы хотите углубиться в него, мы рекомендуем вам начать с курса W3Schools здесь.

С этим покончено, давайте перейдем к вышеупомянутым трем методам редактирования CSS!

Способ № 1. Редактирование файла

style.css вашей темы

Доступ к файлу style.css вашей темы можно получить двумя способами.

Один из способов — сделать это с панели администрирования WordPress. На левой панели навигации выделите параметр Appearance . Выпадающее меню должно отображать еще несколько параметров. В нижней части этого меню вы увидите Редактор Опция. Нажмите на это.

Перейдя на страницу редактора , вы увидите список файлов на вертикальной полосе в правой части страницы. Прокрутите список файлов вниз. Вы увидите style.css внизу страницы.

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

Другой способ найти таблицу стилей — просмотреть операционную систему вашего хостинг-провайдера и найти файл в папке темы. Точное местоположение зависит от вашего хостинг-провайдера. В приведенном ниже примере имя веб-сайта (в нашем случае thecare ) — это папка в папке public_html . Поскольку для этого сайта установлен WordPress, вы можете увидеть папку wp-content под thecare . Под 9Папка 0035 wp-content — это еще одна папка с именем themes , в которой установлены все темы WordPress. Поскольку этот сайт использует тему под названием Newsletter , правильный style.css находится в папке Newsletter-parent .

WPMU DEV AccountPRO

Наши лучшие профессиональные инструменты WP в одном комплекте