Программирование на Python и Objective-C в Mac OS

Программирование на Python и Objective-C под Mac OS и для iPhone / iPod Touch

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

Содержание

Подключение CSS в WordPress

Вариант 2 — Добавление Custom CSS WordPress через настройщик темы

Вы можете легко добавить произвольный CSS в WordPress, если версия вашей CMS 4.7 и выше, так как она включает встроенный инструмент в настройке темы. Чтобы использовать его, перейдите в раздел Внешний вид › Настроить в админ консоли. Прокрутите вниз до раздела Дополнительные стили.
Для вас будет открыт встроенный инструмент, который позволит вам добавить любой код CSS. Он прост в использовании и позволяет просматривать как мобильные, так и планшетные версии вашего сайта, что очень ценно, учитывая, насколько важна мобильность в настоящее время.
Поздравления! Теперь вы знаете, как применять пользовательский CSS в WordPress без каких-либо плагинов.

Вариант 3 — Добавление стилей Custom CSS WordPress, используя дочернюю тему

Все приведенные выше примеры показали вам, как добавить свой собственный CSS в уже живой сайт (запущенный онлайн) на WordPress. Однако есть ситуации, когда вам нужно сначала проверить это. Возможно, вы ещё не знаете точно, что хотите сделать, или не хотите рисковать своим сайтом. Чтобы этого не произошло, мы рекомендуем создать дочернюю тему WordPress. Это позволит вам развязать своё воображение и попробовать различные комбинации CSS. И самое главное, ваш живой сайт при этом никак не пострадает!

Разрешение общих вопросов, связанных с пользовательскими стилями в WordPress

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

Изменения не появляются

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

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

И наконец, некоторые хостинг-провайдеры предлагают встроенные инструменты кэширования, чтобы улучшить работу вашего сайта на WordPress. Мы делаем это и на Hostinger. Наши встроенные плагины для WordPress могут быть отключены или очищены через раздел Плагины › Установленные › Must-Use.

Ошибки в синтаксисе CSS

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

Слишком много вариантов

Иногда с произвольными стилями CSS можно перестараться. Добавляя две или более ссылки на селектор, можно вызвать конфликт. Поскольку CSS не может читать мысли, он не знает, какое значение применять. Это обычное явление при вызове новой таблицы стилей поверх существующей. Если вы пытаетесь изменить заголовок h3, но ничего не происходит, дважды проверьте таблицу стилей для существующих записей.

Отсутствие идей

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

Заключительное слово

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

Если вы нашли это руководство полезным, не стесняйтесь делиться им на Facebook, Twitter или в других социальных сетях. И, наконец, если у вас есть какие-либо советы, хитрости или идеи, которыми вы хотите поделиться, мы с нетерпением ждём их в комментариях ниже!

wp_enqueue_style() — подключение стилей CSS — WordPressify

Рекомендуемый метод подключения CSS-стилей в WordPress. Так же, как и wp_enqueue_script(), эта функция ставит файл в очередь на вывод. После этого выводит его в HTML либо между тегами <head>, либо в футере сайта.

Стили выводятся в футере (перед </body>) только в том случае, если они были поставлены в очередь на вывод где-то в середине HTML-документа.

wp_enqueue_style( $handle, $src = false, $deps = array(), $ver = false, $media = 'all' )
$handle
(строка) рабочее название, идентификатор таблицы стилей, которую нужно подключить (поставить в очередь)
$src
(строка|логическое) абсолютный URL таблицы CSS-стилей на сайте. Этот параметр (а также все последующие) нужен только в том случае, если WordPress ещё не знает про таблицу стилей с указанным идентификатором, то есть, если файл CSS уже зарегистрирован при помощи wp_register_style(), то этот и последующие параметры отпадают.
$deps
(массив) зависимости от других CSS-файлов, то есть, если есть какие-то стили, которые нужно загрузить перед нашим подключаем файлом, то нужно перечислить их идентификаторы в массиве
$ver
(строка|логическое) версия файла. По умолчанию — текущая версия WordPress. Можно указать null, тогда версия не будет указана вообще. Параметр нужен для того, чтобы посетитель получал актуальную версию файла, а не из кэша.
$media
(строка) атрибут media таблицы стилей. По сути означает — для каких устройств предназначен данный CSS-файл, например all — для всех, print — для печати и т.д.

Примеры

Во всех примерах будем использовать один и тот же файл true_style.css. Стили также можно подключать через хуки wp_enqueue_scripts и admin_enqueue_scripts, хотя это и не обязательно, как со скриптами.

Итак, сначала подключим файл во фронтэнде сайта:

function true_style_frontend() {
    wp_enqueue_style( 'true_style', get_stylesheet_directory_uri() . '/css/true_style.css' );
}
 
add_action( 'wp_enqueue_scripts', 'true_style_frontend' );

Можно подключить файл непосредственно на сайт, вставив функцию прямо в HTML-шаблон, или же в functions.php, при этом не забыв воспользоваться условным тегом is_admin().

if( !is_admin() )
    wp_enqueue_style( 'true_style', get_stylesheet_directory_uri() . '/css/true_style.css', array(), '14981210', 'screen' );

Теперь сделаем так, чтобы файл подключался только в админке:

function true_style_backend() {
    wp_enqueue_style( 'true_style', get_stylesheet_directory_uri() . '/css/true_style.css' );
}
 
add_action( 'admin_enqueue_scripts', 'true_style_backend' );

А что, если файл с указанным рабочим названием уже зарегистрирован через wp_register_style()? Тогда подключить его будет ещё проще. Опять-таки пример для админки:

if( is_admin() )
    wp_enqueue_style( 'true_style' );

Кстати, список всех зарегистрированных стилей можно узнать следующим образом:

/*
 * Объект $wp_styles содержит информацию обо всех зарегистрированных на данный момент стилях
 */
global $wp_styles;
print_r( $wp_styles );

CSS специально для настроек плагина

В данном случае очевидно, что файл с таблицей стилей нужно использовать только на одной-единственной странице — странице настроек данного плагина. WordPress позволяет реализовать это при помощи специального хука.

Итак, предположим, у нас есть какой-то плагин, вставляем в него следующий код:

/*
 * Пример будет работать начиная с версии WordPress 2.6.3, 
 */
add_action( 'admin_init', 'true_plugin_init' );
add_action( 'admin_menu', 'true_plugin_menu' );
 
function true_plugin_init() {
    /* 
     * Сначала регистрируем стили
     * файл CSS должен находиться в папке с выполняемым файлов плагина
     */
    wp_register_style( 'trueplugin', plugins_url('true-plugin.css', __FILE__) );
}
 
function true_plugin_menu() {
    /*
     * Создаем страницу настроек плагина, она будет находиться в разделе Параметры
     */
    $page_suffix = add_submenu_page( 'options-general.php', 'True плагин', 'True плагин настройки', 'administrator', __FILE__, 'true_plugin_html' );
 
    /*
     * Создаем хук, содержащий суффикс созданной страницы настроек $page_suffix
     */
    add_action( 'admin_print_styles-' . $page_suffix, 'true_plugin_styles' );
}
 
function true_plugin_styles() {
    /*
     * Ставим в очередь на вывод
     */
    wp_enqueue_style( 'trueplugin' );
}
 
function true_plugin_html() {
    /*
     * Собственно содержимое страницы настроек
     */
    echo 'Это страница настроек';
}

Как редактировать CSS в WordPress.Изменение CSS стилей в WordPress.Как добавить CSS в WordPress

Здравствуйте, друзья! В этом уроке мы поговорим о том, как в WordPress можно добавить свои CSS стили или изменить существующие.

Замечу, что данных урок рассчитан в большей степени для тех, кто уже имеет базовые знания в использовании CSS стилей. И так, давайте начнем!

Способ №1

1. Заходим в административное меню и переходим в Внешний вид -> Редактор.

2. В открывшейся странице по умолчанию будет открыто окно редактирования стилей вашей темы (шаблона). После того как вы добавите свои новые стили или измените уже существующие, не забудьте сохранить изменения нажав кнопку «Обновить файл».

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

Способ №2

Для редактирования стилей этим способом нам нужно:

1. Найти файл style.css в корне папки вашей активированной темы (шаблона).

Путь к файлу: wp-content\themes\название_вашей темы\style.css

2. Открываем с помощью текстового редактора (я пользуюсь Notepad++) файл style.css и вносим необходимые изменения.

3. После того как внесете все необходимые правки в стилях не забудьте сохранить файл style.css.

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

Согласитесь, проще и быстрее нажать Ctrl+S в текстовом редакторе и сразу смотреть изменения на сайте, чем после каждого обновления стилей пересохранять страницу в административном меню.

Если у вас что-то не получилось или возникли вопросы, смело пишите в комментариях!

Здравствуйте, друзья! В этом уроке мы поговорим о том, как в WordPress можно добавить свои CSS стили или изменить существующие. Замечу, что данных урок рассчитан в большей степени для тех, кто уже имеет базовые знания в использовании CSS стилей. И так, давайте начнем! Способ №1 1. Заходим в административное меню и переходим в Внешний вид -&gt; Редактор. 2. В открывшейся странице по умолчанию будет открыто окно редактирования стилей вашей темы (шаблона). После того как вы добавите свои новые стили или измените уже существующие, не забудьте сохранить изменения нажав кнопку «Обновить файл». Как видите, с административной панели всего за несколько кликов можно&hellip;

Проголосуйте за урок

100

Оценка

Итог : Уважаемые читатели! Не поленитесь проголосовать и оставить комментарий. Таким образом я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!

Рейтинг: 4.49 ( 14 голосов )
100

Как подключить CSS к HTML

Существует три способа подключения CSS к HTML:

  • Внешние таблицы стилей.

  • Внутренние таблицы стилей.

  • Встроенные таблицы стилей.

Рассмотрим каждый из них на примерах.

Внешние таблицы стилей

Внешние таблицы стилей подключаются при помощи отдельного файла с расширением .css и тега <link>, “встроенного” в HTML-документ. Например:

<html>

<head>

<title>Страница</title>

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

</head>

<body>

Текст.

</body>

</html>

Внутренние таблицы стилей

Внутренние таблицы стилей “включаются” в HTML-документ, а используется для этого атрибута style. Например:

<html>

<head>

<title>Страница</title>

</head>

<body>

<h2>Текст<h2>

</body>

</html>

Встроенные таблицы стилей

Встроенные таблицы стилей “прописываются” в заголовке HTML-документа. Например:

<html>

<head>

<title>Моя страница</title>

<style type=»text/css»>

h2 {

«color:red

}

</style>

</head>

<body>

hello! <h2>

</body>

</html>

Как подключить CSS. Методы и способы подключений.

» Как подключить CSS. Методы и способы подключений.

Здравствуйте,  мои уважаемые читатели блога bloggood.ru. В сегодняшней статье пойдет речь о методах или способах подключения таблицы стилей CSS. Я вам расскажу, как можно подключить CSS  к html сайту четырьмя способами. Эти четыре способа подключения вам в дальнейшем пригодятся, так как бывают случаи, когда необходимо использовать на сайте эти все методы подключения. Для тех, кто не знает, что такое таблицы стилей CSS, прочитайте эту статью.

Приступим… 

Как подключить CSS. Методы и способы подключений.

Таблицы связанных стилей.

Способ подключения  CSS — №1

Способ №1 — самый удобный способ определения стилей для сайта. Все стили для сайта хранятся в одном отдельном файле и используются для любых веб-страниц. Для подключения или для связки таблицы CSS к html странице используется тег LINK в заголовке страницы.

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

или

<link rel="stylesheet" type="text/css" href="https://ВАШ САЙТ/style.css">

Пример подключение таблицы CSS:


<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>

Плюсы данного способа:

1. Использование одного файла стилей CSS для всех веб-страниц веб-сайта;

2. Можно изменять вид сайта через таблицу стилей без редактирования веб-страниц;

3. При изменении стиля в одном файле style.css, стиль автоматически применяется ко всем страницам, где только есть на CSS файл подключение. Это очень удобно;

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

Таблицы глобальных стилей.

Способ подключения  CSS — №2

Способ №2 не так эффективен и удобен как способ №1, но бывают моменты, что и этот способ подключения CSS необходим.
Этот стиль подключается и прописывается в самом документе и размещается в заголовке веб-страницы между тегами <head></head>. Подключается стиль тегом <STYLE>.

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

Пример подключение таблицы CSS:


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

В этом примере я показал изменение стиля заголовка <h3>. Теперь на этой веб-странице достаточно только указать тег <h3> и стили добавятся к нему автоматически.

Внутренние стили.

Способ подключения  CSS — №3

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

Пример подключение таблицы CSS:


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

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

Способ подключения  CSS — №4

В этом способе используется сразу несколько стилей, которые мы использовали выше (способ №1 — №3).

Пример подключение таблицы CSS:


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

В итоге по примеру у нас получится первый заголовок красного цвета с размером 50 пикселей, а следующий — зеленым цветом и с размером 90 пикселей.

Повторюсь, что все описанные методы использования CSS могут применяться самостоятельно, а могут совмещаться друг с другом. Это можно увидеть в способе№4.

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Последние новости категории:

Похожие статьи

Популярные статьи:

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

Метки: css, для начинающих, основы

Как использовать CSS в WordPress для легкой настройки стиля

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

Cascading Style Sheets (CSS) — один из важнейших языков веб-дизайна. Внесение изменений в CSS на вашем сайте позволяет вам настроить его внешний вид, макет, шрифты, цвета и многое другое.CSS предлагает более полный контроль над внешним видом вашего сайта, чем ваша тема, — и работать с ним не так уж и сложно.

Если вы новичок в CSS, вы попали в нужное место. Мы объясним, что это такое, как он влияет на ваш сайт и как начать использовать CSS в WordPress. Давайте прямо сейчас!

Что такое CSS (и как он работает)

Во-первых, давайте немного вернемся и поговорим о языке гипертекстовой разметки (HTML). Это основной язык, используемый для создания вашего веб-сайта WordPress, и он носит описательный характер.Код HTML сообщает веб-браузерам о различных элементах вашего контента. Например, он указывает, какой текст является частью заголовка, а какой — частью основного абзаца.

Если вы когда-нибудь проверяли вкладку Text в редакторе WordPress, вы видели HTML в действии:

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

Вот где на помощь приходят каскадные таблицы стилей (CSS). Этот язык используется для определения внешнего вида элементов HTML, включая их размеры, макеты, цвета, шрифты и т. Д. Например, вы можете изменить цвет всех заголовков на своем сайте с помощью нескольких строк кода с помощью CSS, не изменяя HTML-код вашего контента.

Разделение структуры и стиля таким образом дает вам полный контроль над внешним видом вашего сайта и позволяет легко вносить изменения в любое время.Это также означает, что вы можете начать использовать базовый CSS в WordPress, не зная HTML (хотя понимание основ HTML действительно помогает ускорить процесс).

Где добавить CSS в WordPress

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

К счастью, есть более простое решение. Чтобы добавить CSS в WordPress, вам просто нужно:

  • Перейдите к Внешний вид> Настроить на панели инструментов WordPress, чтобы открыть настройщик WordPress
  • Выберите опцию Additional CSS в меню слева в интерфейсе настройщика WordPress:

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

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

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

Как начать настройку вашего сайта WordPress с помощью CSS

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

Мы уже упоминали об изменении цвета текста, так что начнем с этого.Если вы действительно хотите, чтобы ваши сообщения WordPress привлекали внимание посетителей, вы можете поэкспериментировать с изменением цвета заголовка каждого сообщения. Вот как выглядит базовый пост в теме Twenty Seventeen WordPress:

Теперь добавьте этот код в поле Additional CSS в настройщике:

h2 {
цвет: пурпурный;
}

Как видите, цвет заголовка сообщения изменился с черного на фиолетовый:

Эта же настройка будет применяться ко всем остальным сообщениям на вашем сайте.Вместо того, чтобы просто называть цвет, вы также можете использовать шестнадцатеричные коды, чтобы получить нужный оттенок. Просто замените фиолетовый на # 9C33FF (или любой другой цвет, который вы хотите использовать). Когда вы будете довольны новым оттенком, выберите Опубликовать вверху экрана, чтобы изменения вступили в силу.

Затем, что, если вы хотите внести некоторые изменения в основной текст? Давайте отредактируем семейство и размер шрифта, добавив этот код в новую строку:

p {
font-family: Georgia;
размер шрифта: 20 пикселей;
}

Опять же, вы можете сразу увидеть результаты в настройщике:

Наконец, давайте немного выделим боковую панель, добавив голубой фон и небольшой отступ.В новой строке вставьте этот CSS:

.widget {
background: # B9EBFA;
отступ: 25 пикселей;
}

Это помещает простой фон позади вашей боковой панели:

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

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

Где узнать больше о CSS

В Интернете есть множество полезных руководств, которые помогут вам узнать больше о CSS и наиболее распространенных элементах, на которые вы можете повлиять.А до тех пор, если вы изо всех сил пытаетесь понять, какой код вам нужен для внесения того или иного изменения, простой поиск в Google обычно приведет вас к ответу. Ресурсы, такие как веб-документы MDN от Mozilla, обычно имеют высокий рейтинг в Google и прекрасно объясняют различные аспекты CSS.

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

Заключение

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

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

У вас есть вопросы о том, как использовать CSS в WordPress? Спросите нас о чем угодно в разделе комментариев ниже!

Бесплатный гид

5 основных советов по ускорению

вашего сайта WordPress

Сократите время загрузки даже на 50-80%

, просто следуя простым советам.

Как использовать CSS в WordPress (редактировать, добавлять и настраивать внешний вид вашего сайта)

Хотите попробовать редактировать WordPress CSS, но не знаете, с чего начать? С помощью стилей CSS вы можете редактировать внешний вид своего сайта глобально или на определенных страницах.Добавьте цвета, разнесите определенные элементы, создайте макет и в основном измените внешний вид вашей темы WordPress.

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

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

Готовы начать? Давай сделаем это!

Предпочитаете посмотреть видео версию?

Что такое редактирование CSS?

CSS означает каскадные таблицы стилей, и это самый популярный веб-язык помимо HTML. Два из них идут рука об руку, поскольку CSS используется для стилизации элементов HTML. HTML закладывает основу внешнего вида веб-сайта, а CSS используется для его дальнейшего стилизации.

Пример кода CSS (Источник: w3schools.com)

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

Когда вы углубляетесь в разработку WordPress, вам необходимо знать HTML, CSS, JavaScript и PHP. Это то, во что встроено ядро ​​CMS, а также множество тем и плагинов.

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

Готовы придать своему сайту #WordPress индивидуальный вид? 👀 Узнайте, как использовать стили CSS для редактирования цветов 🎨, изменить макет ✨ и многое другое.

WordPress и CSS

В WordPress CSS немного отличается. Он управляется темами, которые состоят из файлов шаблонов, тегов шаблонов и, конечно же, таблицы стилей CSS. Хотя они созданы вашей темой, все они доступны для редактирования вами.

Файлы шаблонов разделяют части вашего веб-сайта на разделы (например, header.php или archive.php), а теги шаблонов используются для вызова их и другого содержимого из вашей базы данных. Эти файлы на самом деле состоят в основном из PHP и HTML, хотя при необходимости вы можете добавить CSS.

Что вам действительно нужно, так это таблица стилей или style.css. Чтобы изменить внешний вид вашего веб-сайта, вам нужно научиться добавлять и редактировать код в этом файле.

Как настроить тему WordPress с помощью CSS

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

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

Таблица стилей похожа на «список инструкций» для вашего веб-сайта, в котором точно указывается его стиль и обработка кода CSS.Здесь вы будете выполнять основную часть редактирования, но мы также покажем вам, как получить доступ к другим файлам шаблонов тем, таким как header.php и footer.php.

Есть два способа получить доступ к таблице стилей вашего сайта WordPress: через панель управления WordPress или через FTP-клиент. Мы рассмотрим их обоих.

Не удобно делать это самому? Подумайте о том, чтобы нанять разработчика WordPress, который сделает этот шаг за вас.

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

Самый простой и удобный способ получить доступ к вашей таблице стилей CSS — прямо в панели управления WordPress.Нет необходимости устанавливать программы FTP или редакторы кода. Вы можете напрямую редактировать любой файл со встроенной подсветкой синтаксиса и функциональной документацией.

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

После того, как вы сделали резервную копию и дочернюю тему, войдите в свой бэкэнд.Вы можете найти редактор, перейдя в меню и нажав Внешний вид> Редактор тем .

Вы должны увидеть всплывающее окно, предупреждающее вас о недопустимости прямого редактирования этих файлов. Не волнуйтесь, просто нажмите «Я понимаю». Это всего лишь предупреждение о необходимости использования дочерней темы и резервного копирования вашего сайта перед внесением каких-либо серьезных изменений. Следуйте этим инструкциям, и вы сможете редактировать.

Прямое редактирование файлов WordPress

И вот вы в деле! Вы должны быть в таблице стилей по умолчанию, но посмотрите меню справа, чтобы просмотреть файлы темы, если нет.

Помимо style.css, у вас также будет доступ к файлам шаблонов, таким как functions.php, header.php и single.php. Все это влияет на работу определенных страниц вашего сайта.

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

Редактирование таблицы стилей style.css в теме WordPress

Просто помните: большинство изменений CSS, которые вы здесь делаете, будут глобальными. Например, если вы измените заголовки h2 на определенный шрифт, это вступит в силу для каждой отдельной страницы вашего сайта.Вам нужно будет использовать специальный синтаксис для настройки стиля определенных страниц.

Редактировать файлы темы напрямую

Что делать, если у вас нет доступа к редактору тем или вы предпочитаете работать через FTP? Бэкэнд-редактор использовать проще, но некоторые темы или плагины могут его отключить. В этом случае вам нужно будет подключиться к своему сайту через FTP.

FTP, или протокол передачи файлов, позволяет удаленно получать доступ к файлам веб-сайта и изменять их. Первое, что вам нужно сделать, это загрузить FileZilla или любой другой FTP-клиент.

Затем вы должны связаться с вашим хостом и запросить свои учетные данные FTP (хост, порт и имя пользователя / пароль, если применимо). Если у вашего хоста есть панель управления, вы можете найти их, войдя в систему.

Учетные данные FTP в MyKinsta

Учетные данные пользователей

Kinsta находятся на панели управления MyKinsta в разделе Сайты> SFTP / SSH .

Когда они у вас есть, запустите FTP-клиент и введите эту информацию. Если это не сработает, попробуйте поставить sftp: // перед URL-адресом в разделе Host .

Использование FileZilla

Войдя в систему, вы можете найти свой файл style.css, щелкнув папку wp-content , чтобы открыть ее, затем папку своей темы (например, тему T goy Twenty ), а затем прокрутите страницу до тех пор, пока не увидите стиль. css.

Дважды щелкните, чтобы открыть его (или щелкните правой кнопкой мыши и выберите View / Edit ) и внесите изменения. Не забудьте сохранить и загрузить обратно на сервер.

Если вам нужно отредактировать другие файлы шаблонов, например home.php, single.php, archive.php, вы можете найти их в той же папке, что и style.css.

Редактирование файлов темы через FTP или панель управления не всегда необходимо. На самом деле, лучше этого не делать, если вы просто добавляете дополнительный код.

Для небольших дополнений, вот лучший способ добавить CSS на ваш сайт WordPress.

Как добавить собственный CSS в WordPress

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

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

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

Подпишитесь на информационный бюллетень

Хотите узнать, как мы увеличили наш трафик более чем на 1000%?

Присоединяйтесь к 20 000+ других, которые получают нашу еженедельную рассылку с инсайдерскими советами WordPress!

Подпишитесь сейчас

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

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

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

1. Редактирование CSS с помощью настройщика WordPress

Попробуйте это вместо редактора тем. Войдите в свой сервер WordPress и нажмите Внешний вид> Настроить , чтобы открыть экран настройки темы. Вы увидите предварительный просмотр своего веб-сайта в реальном времени с параметрами слева для настройки таких элементов, как цвета, меню или другие виджеты.

В самом низу этого меню вы должны найти поле Additional CSS .

Щелкните, чтобы открыть.Вы попадете на новый экран с полем для ввода кода и несколькими инструкциями. Экран Дополнительный CSS включает подсветку синтаксиса, как и Редактор тем, а также проверку, которая позволяет узнать, ошибочен ли ваш код.

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

Любой код, который вы пишете, автоматически появляется в области предварительного просмотра справа, если он не содержит ошибки (хотя вы все равно можете опубликовать его).

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

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

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

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

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

Если вам сложно использовать эту опцию или вам нужно решение, которое работает с разными темами и может более легко настраивать таргетинг на определенные страницы, вам следует попробовать плагин.

2. Добавление собственного CSS в WordPress с помощью плагинов

Есть несколько причин, по которым вы можете захотеть использовать плагин для добавления CSS в WordPress.Хотя эта функция аналогична дополнительному меню CSS, стили обычно сохраняются, даже если вы переключаете / обновляете темы.

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

Простой пользовательский CSS

Simple Custom CSS — самый популярный плагин для редактирования CSS, благодаря простоте использования, минимальному интерфейсу и легкому внутреннему интерфейсу. Короче говоря, это очень маленький плагин для WordPress, обладающий большой мощностью.

Простой настраиваемый плагин CSS для WordPress

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

Простой пользовательский CSS и JS

Простой настраиваемый плагин CSS и JS для WordPress

Simple Custom CSS и JS — хорошая альтернатива. Он также позволяет настроить таргетинг на верхний колонтитул, нижний колонтитул, интерфейс или даже серверную часть администратора.

SiteOrigin CSS

SiteOrigin CSS плагин для WordPress

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

WP Добавить собственный CSS

WP Добавить собственный плагин CSS для WordPress

Если вы изо всех сил пытаетесь добавить CSS на определенные страницы, WP Add Custom CSS добавляет настраиваемое поле CSS на экран редактирования, а также имеет глобальный стиль.

CSS Герой

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

CSS Hero

CSS Hero — это плагин для визуального редактирования премиум-класса с некоторыми очень мощными функциями (анимация, редактирование для конкретных устройств и неразрушающее редактирование, и многие другие).

Где изучать CSS

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

Изучение CSS

Это может быть сложно, но если вы не пытаетесь сделать что-то действительно продвинутое, CSS не так уж и сложен! Простые вещи, такие как изменение цвета фона или настройка стиля шрифта, довольно просты, и в Интернете есть множество примеров.

(Рекомендуемая литература: 50+ современных шрифтов для использования на вашем веб-сайте WordPress)

Большинство руководств по программированию, которые вы найдете в Интернете, также совершенно бесплатны. Есть много информации бесплатно / за небольшую плату.

Вот несколько примеров из лучших руководств по CSS для начинающих.

  • W3Schools CSS Tutorial: Здесь можно найти огромное количество информации: подробные руководства, примеры и справочные материалы, с которыми вы можете поработать. Учебники W3Schools максимально просты и понятны, поэтому даже если вы новичок, это отличное место для начала.
  • Codeacademy Изучение CSS: с помощью шести бесплатных практических уроков вы изучите основы CSS. Это не простой видеоурок, а интерактивный урок, который заставит вас работать с реальным кодом. С профессиональной версией вы также получаете викторины и проекты произвольной формы для работы.
  • Изучите CSS за один час. Многие люди хотят выучить новый язык программирования, но у них просто нет времени на это. Но если вы можете выделить всего один час, вы можете изучить CSS с помощью этого бесплатного курса из 20 частей.Даже если вы к концу не станете мастером, вы должны хорошо разбираться в основах.
  • Введение в базовый HTML и CSS для пользователей WordPress: Ищете что-то особенное для WordPress? Если вы всегда боролись с написанием HTML и CSS, этот курс идеально подходит для вас. Он платный, но включает в себя 52 лекции и пять часов видео, на которых можно учиться.

Узнайте, как использовать CSS для настройки и оптимизации вашего веб-сайта, от используемых цветов до промежутков между элементами ✨Нажмите, чтобы твитнуть

Сводка

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

Файлы тем

можно редактировать либо с вашего сервера, либо через FTP, чтобы изменить внешний вид вашего сайта, но этого обычно следует избегать, если вам не нужно редактировать существующий код.

Если вы просто хотите добавить свой собственный CSS, используйте страницу дополнительных CSS в разделе Внешний вид> Настроить или попробуйте плагин, если вам нужно что-то более мощное.

Изменения в вашей таблице стилей будут потеряны при обновлении темы, если вы не используете дочернюю тему.То же самое не относится к дополнительному CSS. Ваш код защищен от обновлений, но не забывайте: только плагин сохранит CSS при изменении темы.

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

Удачного стайлинга!

Рекомендуемая литература: Лучшие онлайн-курсы по веб-дизайну


Если вам понравилась эта статья, то вам понравится хостинговая платформа Kinsta WordPress.Ускорьте свой сайт и получите круглосуточную поддержку от нашей опытной команды WordPress. Наша инфраструктура на базе Google Cloud ориентирована на масштабируемость, производительность и безопасность. Позвольте нам показать вам разницу в Kinsta! Ознакомьтесь с нашими тарифами

Как найти файл CSS WordPress

17 января 2014 г.

Тема, купленная на торговой площадке, никогда не может на 100% соответствовать задумке вашего веб-сайта. Всегда есть мелочи, которые нужно изменить.

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

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

От чего зависит внешний вид веб-сайта

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

Когда вы посещаете веб-сайт, ваш браузер загружает этот файл css вместе с другими важными документами и показывает его вам.

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

.

/ * Это говорит нашему браузеру, что он должен оставлять пробел в 18 пикселей после каждого абзаца * /
п {
нижнее поле: 18 пикселей;
}

В CSS есть намного больше, чем небольшой фрагмент кода выше, и это не относится к теме этой публикации. Если вы новичок в CSS, я бы посоветовал хотя бы проверить часть CSS в Code Academy, прежде чем пытаться изменить какие-либо файлы CSS в своей теме wordpress.

Где находится этот файл CSS

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

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

СЕРЬЕЗНОЕ ПРИМЕЧАНИЕ: Независимо от того, какой метод вы использовали для редактирования файлов CSS, всегда сохраняйте резервную копию, прежде чем вносить какие-либо изменения! Если вы случайно взломаете свой сайт, это будет большой катастрофой! Вы, наверное, не хотели бы, чтобы это произошло 🙂

Метод 1

Перейдите в «Внешний вид»> «Редактор» и щелкните style.css.

Вы можете редактировать файлы прямо из этого окна и нажать «Сохранить», когда закончите.Не забудьте очистить кеши, если вы используете какие-либо CDN или плагины кеширования. (Не уверены? Проверьте свои плагины в WordPress и посмотрите, активировали ли вы плагин с кеш-словом.

Метод 2

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

Для этого метода вам потребуется доступ к службе хостинга вашего домена (например, Dreamhost, Hostgater и Bluehost).

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

Перейдите в wp-content> themes> ВАШЕ ИМЯ ТЕМЫ и попробуйте найти папку, в которой находятся файлы css. Обычно они называются таблицами стилей CSS или стилями.

Затем вы можете загрузить его и отредактировать с помощью программы для редактирования текста на вашем компьютере.

После редактирования перейдите в тот же каталог, в котором вы нашли файлы CSS, и нажмите «Загрузить».

Конец

Это два метода поиска и редактирования файлов CSS вашей темы. Они определенно не кодируют передовой опыт, и такое редактирование часто вызывает неодобрение.

Но послушайте, вам не нужно беспокоиться о передовых методах, если вы не собираетесь разрабатывать темы.

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

Если вам понравилась эта статья, расскажите о ней другу! Поделитесь этим в Твиттере. Если вы заметили опечатку, я буду признателен, если вы сможете исправить ее на GitHub. Спасибо!

Как добавить собственный CSS на свой сайт WordPress: изучено 3 метода

Есть несколько способов добавить собственный CSS на ваш сайт WordPress.

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

Поиск элементов дизайна, которые нужно настроить

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

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

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

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

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

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

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

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

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

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

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

Разобравшись с этим, давайте перейдем к трем вышеупомянутым методам редактирования CSS!

Метод № 1. Редактирование файла темы

style.css

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

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

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

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

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

В этот момент вы могли бы спросить себя: «Почему существует папка — родительский информационный бюллетень и дочерний информационный бюллетень — ?» Это очень хороший вопрос, и на него скоро будет дан ответ.

Метод № 2: Использование дочерней темы для редактирования CSS

Если вы загрузили отличную тему и хотите внести в нее некоторые изменения, вам следует сделать это с дочерней темой, а не редактировать основную (или родительскую) тему.

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

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

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

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

Метод № 3: Использование подключаемого модуля для редактирования CSS

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

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

Вот несколько отличных плагинов для изменения CSS:

  • Простой настраиваемый CSS — один из самых популярных вариантов. Он был установлен более 100 000 раз и получил пятизвездочную оценку.

  • WP Add Custom CSS — это плагин, который позволяет изменять представление всего веб-сайта или только отдельных сообщений. Это отличный вариант, если вы ищете гибкость дизайна от публикации к публикации.

    Плагин был загружен более 10 000 раз и в настоящее время имеет рейтинг 4,3 звезды.

  • Если вам нужен плагин для CSS, который предлагает предварительный просмотр ваших изменений в реальном времени, подумайте о Custom CSS для Theme Junkie. Это решение добавляет настраиваемый менеджер CSS в консоль администрирования, куда вы можете добавлять свои собственные стили. Он также предлагает альтернативу дочерней теме.

  • Easy Code Placement — это гораздо больше, чем просто решение CSS.Он также позволяет добавлять другие типы кода, включая PHP, JavaScript, HTML или просто текст.

    Вы можете обнаружить, что для правильного изменения макета вашей темы вам потребуется изменить не только CSS. В таком случае поместите Easy Code Placement в начало вашего короткого списка, чтобы вы могли внести всесторонние изменения, необходимые для получения правильной презентации.

  • И последнее, но не менее важное, это конфигуратор дочерних тем. Это решение, которое позволяет вам настроить макет вашего веб-сайта с помощью дочерней темы.

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

    Конфигуратор дочерних тем

    был загружен более 40 000 раз, и ему присвоен рейтинг 4,8 звезды.

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

Заключение

Если вы хорошо разбираетесь в коде, создайте дочернюю тему и копайтесь в style.css. Но если вы предпочитаете оставить их в покое, существует множество доступных плагинов, и, скорее всего, они достаточно хорошо удовлетворят ваши потребности.

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