Настройка тем WordPress с помощью CSS

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

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

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

Добавьте пользовательский CSS с помощью Theme Customizer

Уровень опыта: начинающий

Настройщик WordPress позволяет вам вносить изменения в дизайн вашего веб-сайта и просматривать их в режиме реального времени. Чтобы получить к нему доступ, войдите в свою панель управления WordPress и перейдите на вкладку «Внешний вид»> «Настроить» :

Здесь есть много настроек, с которыми вы можете поиграть. Однако прямо сейчас найдите вкладку «Дополнительные CSS» . Как только вы нажмете на него, откроется новый раздел с полем, в котором вы можете добавить собственный CSS:

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

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

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

Добавьте пользовательский CSS с помощью плагина

Уровень опыта: от начального до среднего

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

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

Расширенный редактор CSS

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

После установки плагина WordPress перейдите на вкладку «Внешний вид» > «Настройка» на панели инструментов. Вы должны увидеть новую опцию «Расширенный редактор CSS» , предоставляющую вам доступ к нескольким редакторам для каждого типа устройства:

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

Плюсы:

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

Минусы:

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

Средняя оценка: 4,5/5

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

Модульный пользовательский CSS

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

Чтобы получить доступ к этим полям, вам нужно вернуться в раздел Внешний вид > Настройщик > Дополнительный CSS . Как только вы там, вы можете начать вносить изменения.

Плюсы:

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

Минусы:

• «Глобальный» CSS может не работать с каждой темой, поэтому вам нужно быть осторожным при переходе на новую.

Средняя оценка: 5/5

CSS исходного сайта

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

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

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

Плюсы:

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

Минусы:

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

Средняя оценка: 4,9/5

Редактирование CSS с помощью таблицы стилей дочерней темы

Уровень опыта: продвинутый

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

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

После того, как вы подключитесь к своему веб-сайту через FTP, вам нужно будет найти корневую папку, которая часто называется public_html или www или названа в честь вашего веб-сайта:

Затем перейдите в каталог wp-content/themes . Там вы найдете отдельные папки для всех ваших тем, включая созданную вами дочернюю тему. Откройте папку дочерней темы и найдите в ней файл style.css :

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

Когда вы закончите, сохраните изменения в файле и закройте редактор. Затем вы можете посетить свой веб-сайт, чтобы увидеть, сработали ли внесенные вами изменения должным образом. Если они этого не сделали, вы можете вернуться к своему файлу style.css и продолжить настройку CSS.

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

Пользовательский CSS с настройщиком тем, плагины CSS и таблица стилей дочерней темы

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

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

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

Расширьте возможности цифровых технологий с помощью отличного дизайна и первоклассного хостинга

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

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