WordPress развивался на протяжении многих лет, и сегодня это довольно гибкая и легко настраиваемая платформа с помощью редактора блоков Gutenberg. Тем не менее, будут моменты, когда вам понадобится немного больше охвата, чем предоставляет редактор Гутенберга.
Вот тут-то и пригодится собственный CSS. Стили CSS позволяют редактировать цвета, интервалы, шрифты, макеты и практически любой другой визуальный элемент вашего веб-сайта WordPress, что позволяет сделать его таким, каким вы хотите.
В этой статье мы познакомим вас с основами настройки вашего веб-сайта WordPress с помощью CSS.
Зачем настраивать свой сайт с помощью CSS?
Добавление собственного CSS - это лишь один из методов, которые вы можете использовать для точной настройки внешнего вида вашего сайта. Другие методы включают использование хорошо оборудованная тема WordPress премиум-класса, или установив конструктор страниц.
Хотя эти два метода немного проще использовать для новичков и не требуют знаний кодирования, использование пользовательского CSS более выгодно по двум основным причинам:
Нулевая стоимость
Премиум-темы и конструкторы страниц WordPress могут быть удобны, но они стоят дорого - в долларах и центах. С другой стороны, обладая знаниями о том, как писать собственный CSS, вы можете добиться тех же эффектов, не неся никаких дополнительных затрат.
Минимальное вздутие живота
Конструкторы страниц и хорошо оснащенные темы призваны предоставить пользователям большую гибкость и широкий спектр возможностей для настройки своих веб-сайтов. Из-за этого они, как правило, увеличивают объем веб-сайтов, потенциально замедляя их работу.
С другой стороны, при написании пользовательского CSS вы будете добавлять только необходимые функции, что обычно приводит к облегчению веб-сайтов и увеличению скорости загрузки.
3 простых метода настройки вашего сайта на WordPress с помощью CSS
Надеюсь, ты уже знаешь как писать CSS. Когда вы ознакомитесь с основами, вы можете использовать любой из следующих методов, чтобы добавить собственный CSS на свой сайт WordPress:
Метод 1: используйте настройщик WordPress
В WordPress 4.7 или любой последующей версии вы можете добавить собственный CSS прямо из области администрирования. Это наиболее простой метод, и поскольку доступен предварительный просмотр в реальном времени, вы можете видеть любые внесенные вами изменения в режиме реального времени.
Он также является наиболее рекомендуемым, поскольку все вносимые вами изменения сохраняются в самом WordPress. Это означает, что даже если вы измените или обновите свою тему, вы не потеряете свой собственный CSS.
Вот шаги, которые необходимо предпринять:
Шаг 1: Перейдите к Внешний вид> Настроить.
Это откроет настройщик тем WordPress, который покажет вам предварительный просмотр вашего сайта справа, а также некоторые параметры настройки слева. Прокрутите вниз до нижней части левой панели, и вы найдете Дополнительный CSS таб.
Шаг 2: Нажать на Дополнительный CSS Табл.
Это откроет небольшое поле на левой панели, где вы можете добавить свой собственный CSS. Вы можете ввести столько строк кода CSS, сколько захотите. Самое замечательное в этом редакторе то, что он проверяет ваш код, предупреждая вас, если есть какие-либо ошибки.
Шаг 3: Опубликуйте свои изменения.
Любое допустимое правило CSS, которое вы добавляете, будет отображаться в области предварительного просмотра справа. Чтобы применить изменения к своему сайту, нажмите кнопку Публиковать нажмите кнопку в верхней части левой панели, если вас устраивает. Если вы не хотите, чтобы изменения вступили в силу немедленно, вы также можете запланировать публикацию на более позднее время или сохранить свою работу как черновик.
Важно отметить, что любые изменения, которые вы вносите с помощью настройщика, привязаны к вашей текущей теме. Если вы когда-нибудь переключитесь на другую тему, изменения будут потеряны, если вы не скопируете свой собственный CSS и не добавите его в новую тему. Хорошей практикой является сохранение всего настраиваемого CSS, который вы добавляете в тему, в блокноте. Таким образом, вы можете просто скопировать код и вставить его в раздел «Дополнительные CSS» для другой темы.
Если это кажется слишком большим трудом, и вы предпочитаете решение, которое позволяет вам применять собственный CSS к любой теме WordPress, которую вы используете, следующий метод для вас.
Способ 2. Используйте плагин
Пользовательские плагины CSS хранят ваш собственный CSS отдельно от вашей темы, что позволяет применять ваши изменения независимо от того, какую тему вы используете. Эти плагины также имеют дополнительные функции, такие как автозаполнение, которые могут упростить добавление CSS.
Единственный недостаток заключается в том, что это стороннее программное обеспечение, а это означает, что они потенциально могут замедлить работу вашего сайта. Однако большинство этих плагинов легковесны, поэтому обычно мало влияют на производительность вашего сайта. Вот некоторые из лучших пользовательских плагинов CSS, которые вы можете использовать:
- Простой пользовательский CSS
Простой пользовательский CSS - один из самых популярных настраиваемых плагинов CSS. Он легкий, простой в использовании и предлагает отличные функции. Настроить очень просто. Все, что вам нужно сделать, это установить и активировать плагин. Затем перейдите к Появление раздел на левой панели вашей панели инструментов.
Вы увидите новую опцию под названием Пользовательские CSS. При нажатии на нее откроется редактор, в который вы можете добавить свой собственный CSS. Щелкните значок Обновить собственный CSS кнопку, чтобы сохранить изменения. Чтобы увидеть изменения, просто обновите свой сайт.
- Простой пользовательский CSS и JS
Если вам нужно еще больше возможностей, Простой настраиваемый плагин CSS и JS отличный вариант. Помимо добавления CSS, он позволяет добавлять записи JavaScript.
- CSS Hero
Если вы не хотите писать ни одной строчки кода, Плагин CSS Hero идеально подходит для вас. Этот плагин предлагает визуальный редактор CSS с раскрывающимися меню и полями ввода, которые позволяют редактировать практически любой стиль CSS на вашем сайте без необходимости писать какой-либо код.
Способ 3. Отредактируйте исходный код
Два метода, которые мы описали выше, позволяют вам добавлять собственный CSS на ваш сайт без необходимости касаться каких-либо файлов вашей темы. Но в некоторых случаях вы можете захотеть отредактировать CSS своей темы или напрямую добавить собственный CSS в код своей темы.
Для этого вам потребуется доступ к таблице стилей вашего сайта. Легкий способ получить доступ к этой таблице стилей - через Редактор тем на панели управления WordPress.
Однако прежде чем мы двинемся дальше, вам необходимо принять некоторые меры предосторожности. Первый, сделайте резервную копию вашего сайта. При редактировании файлов темы легко сделать ошибки, которые потенциально могут привести к сбою вашего сайта.
Резервная копия гарантирует, что у вас есть работающий веб-сайт, на который можно вернуться. Следующий, создать дочернюю тему. Если вы вносите прямые изменения в родительскую тему, изменения будут потеряны при каждом обновлении темы.
Как только эти меры безопасности будут приняты, войдите в свою серверную часть WordPress. Перейти к Внешний вид> Редактор тем. Когда вы нажмете на опцию редактора темы, вы увидите всплывающее окно, предупреждающее вас не вносить прямые изменения в файлы темы. Если вы выполните описанные выше шаги, все готово.
Нажмите я понимаю продолжать.
После нажатия вы должны по умолчанию увидеть таблицу стилей вашего сайта. Если нет, просто посмотрите на правую панель и нажмите style.css под Таблица стилей вариант.
Отсюда вы можете вносить прямые изменения в файлы своей темы. Только не забывай нажимать Сохранить и обновить как только вы закончите.
Управляйте внешним видом вашего сайта с помощью настраиваемого CSS
Изучение того, как писать собственный CSS в WordPress, может занять некоторое время у новичков, но это даст вам настоящий контроль над внешним видом вашего сайта. И это при нулевых затратах и с минимальным влиянием на производительность вашего сайта.
Однако, если вы не хотите заниматься проектированием вручную, есть другие способы выполнить эту работу, например, используя один из лучших конструкторов страниц для WordPress.
Хотите, чтобы ваш сайт на WordPress выглядел потрясающе, но не можете позволить себе разработчика? Вместо этого попробуйте эти конструкторы страниц WordPress.
Читать далее
- Программирование
- CSS
- Wordpress
- Веб-разработка
Дэвид - любитель WordPress, который с энтузиазмом помогает малому бизнесу расти!
Подписывайтесь на нашу новостную рассылку
Подпишитесь на нашу рассылку технических советов, обзоров, бесплатных электронных книг и эксклюзивных предложений!
Нажмите здесь, чтобы подписаться
