3 простых способа добавить пользовательский CSS на ваш сайт WordPress
- Фейсбук
- Твиттер
Пользовательские каскадные таблицы стилей (CSS) позволяют вам проектировать свой сайт с большим контролем над тем, как выглядят страницы и как они ведут себя. Сценарий, который входит в CSS, может управлять всем, от изображений до типов шрифтов, отображаемых на ваших страницах.
Из этих файлов могут быть получены такие вещи, как цвета ссылок, фоновые изображения и даже встроенные звуки. Однако возникает вопрос, как добавить пользовательский CSS в WordPress?
На самом деле изменить файл CSS намного проще, чем вы думаете, и я собрал 3 метода, которые вы можете использовать для добавления пользовательского CSS.
Сколько знаний в области программирования мне нужно?
Если вы предварительно выполнили быстрый поиск в Google по CSS, я уверен, что вы видели бесчисленное количество примеров фрагментов кода CSS.
В настоящее время в Интернете можно найти что угодно, и CSS-код не исключение.
И, как вы увидите в следующих методах, добавление пользовательского CSS не имеет ничего общего с навыками программирования. Вместо этого все дело в том, чтобы найти правильное место или файл для вставки кода.
Таким образом, вам не нужно быть экспертом по программированию, чтобы добавить пользовательский CSS.
3 метода добавления пользовательского CSS в WordPress
1. Изменения на уровне кодирования
Многие владельцы веб-сайтов считают, что напрямую изменить файл CSS — самый простой способ. И, честно говоря, это самый простой метод, потому что это можно сделать прямо из WordPress без каких-либо дополнительных плагинов.
Для этого нажмите «Внешний вид» и выберите «Редактор тем».
Отобразятся все файлы, связанные с темой, которую вы используете в данный момент. В результате вам просто нужно убедиться, что вы редактируете правильный файл CSS. И файл, который вы выбираете для редактирования, зависит от конкретного элемента, который вы хотите настроить.
Хотя многие считают эту часть настройки более простой, у нее есть свои недостатки.
Например, вам может потребоваться перекодировать CSS, если вы решите изменить тему. Большинство тем будут использовать свой собственный файл CSS для общего дизайна. Таким образом, изменения, внесенные вами в файл одной темы, не повлияют на другую.
Однако стоит отметить, что вы не будете часто менять темы.
Хорошим решением этой проблемы является сохранение всех пользовательских стилей CSS, которые вы добавляете в файл темы, в блокнот. Таким образом, вы можете использовать тот же код в другой теме, если захотите.
Однако многие владельцы сайтов предпочитают использовать дочерние темы. Таким образом, любые внесенные вами изменения в CSS не будут удалены, если разработчик обновит основную тему. Вы получаете все преимущества без потери пользовательского кодирования.
2. Плагины CSS для настройки
Как известно любому разработчику WordPress, плагины позволяют вам настроить любую часть вашего веб-сайта в большинстве случаев без написания единой строки кода. Поэтому неудивительно, что существует множество плагинов, которые упрощают добавление пользовательского CSS.
И у этого есть одно большое преимущество перед последним методом.
Вместо сохранения CSS непосредственно в файле темы, он сохраняется в файле плагина. Это означает, что вы можете свободно использовать один и тот же CSS в нескольких темах, не переписывая его. Это огромная экономия времени для тех разработчиков, которые часто меняют темы.
Еще одним огромным преимуществом является то, что многие плагины имеют средства защиты, которые предотвращают сбой кода вашего веб-сайта. В конце концов, при изменении файла темы не требуется много времени, чтобы вывести веб-сайт из строя, и этот метод полностью избегает этого.
Таким образом, это, вероятно, лучший метод для начала.
Вот несколько замечательных плагинов, которые стоит использовать:
Visual CSS Style Editor
Плагин Visual CSS Style Editor — отличный выбор для добавления пользовательского CSS в WordPress. Он построен с помощью визуального редактора и дает вам контроль над более чем 60 свойствами стиля на веб-сайте.
Его отзывчивый инструмент позволяет редактировать любую страницу, сообщение, страницу входа и элемент. Хотя профессиональная версия предоставляет вам множество других функций, таких как более 800 шрифтов Google, бесплатная версия очень мощна для редактирования CSS.
Simple Custom CSS
Simple Custom CSS — самый популярный плагин для добавления пользовательского CSS на ваш сайт. Плагин позволяет вам добавлять пользовательский CSS, который переопределяет любые файлы плагинов или тем. В результате вы можете настроить весь свой сайт с помощью всего одного плагина.
Он также включает проверку ошибок, что отлично подходит для начинающих.
WP Add Custom CSS
Независимо от того, нужно ли вам внести изменения в CSS для всего сайта или только для нескольких страниц, WP Add Custom CSS может их учесть. Изменения, которые вы вносите в этот плагин, переопределяют основную таблицу стилей, чтобы придать вашему сайту тот внешний вид, который вы хотите. Он доступен на английском, немецком и испанском языках.
3. Изменение темы CSS
Большинство тем имеют встроенные разделы, которые позволяют добавлять код из области «Настроить» в WordPress. Это позволяет вам напрямую добавлять CSS в файлы темы, и многие из них позволяют вам видеть изменения в режиме реального времени.
Это дочерние файлы CSS (не путать с дочерними темами в WordPress), и они работают вместе с вашей основной таблицей стилей.
Как и в первом случае, основным недостатком использования этого метода для изменения CSS является возможность потери настроек при переключении тем. Они специфичны для дизайна и не сохранятся после переключения темы.
Тем не менее, это может быть отличным способом внести определенные изменения на основе самой темы. Например, определенные цвета или шрифты, используемые в этом дочернем CSS, в любом случае могут быть визуально непривлекательными в новой теме.
После того, как вы нажмете «Настроить», откроется настройщик WordPress. Прокрутите немного вниз и нажмите «Дополнительный CSS».
Откроется редактор CSS. Здесь вы можете добавить весь свой собственный код CSS.
Вот хороший пример того, как добавление здесь пользовательского CSS сразу отразится на сайте, чтобы вы могли увидеть изменения и то, как они выглядят перед публикацией.
В этом коде мы меняем цвет тени заголовка 1 на сайте.
До добавления кода
После добавления кода
Код, который мы использовали для создания этого вида, был просто добавлен прямо в настройщик.
Вы можете добавить любой пользовательский код CSS прямо в эту область настройки. Это упрощает просмотр всех изменений в режиме реального времени.
Использование пользовательского CSS в WordPress
Использование CSS для изменения вашего сайта может повысить его производительность, дать вам больший контроль и помочь вам точно настроить дизайн. Пока у вас есть общее представление о том, как работает кодирование, или, по крайней мере, вы видите, что делают изменения в режиме реального времени, добавить CSS в WordPress может быть относительно просто.
Это может быть одним из лучших способов предоставить совершенно уникальный опыт для вашей целевой аудитории. А учитывая популярность WordPress как CMS, выделиться как никогда важно.
Какие вещи вы изменили в файле CSS? Считаете ли вы, что проще изменить таблицу стилей напрямую или вы предпочитаете использовать плагин?
- Фейсбук
- Твиттер
Как создать пользовательский CSS в WordPress
Одним из самых быстрых способов настроить внешний вид вашего сайта WordPress является использование CSS. С помощью стилей CSS вы можете редактировать внешний вид своего сайта как глобально, так и на отдельных страницах. Вы можете менять цвета, выравнивать элементы, изменять размеры мультимедиа, менять шрифты и настраивать внешний вид любой темы в вашей теме WordPress. Для этого вам нужно научиться создавать собственные CSS в WordPress.
CSS расшифровывается как Cascading Style Sheets и является одним из самых популярных веб-языков после HTML. В то время как HTML используется для создания основы внешнего вида веб-сайта, CSS используется для его дальнейшего оформления и тонкой настройки.
Существует несколько рекомендуемых способов добавления пользовательского CSS на ваш сайт WordPress:
Способ № 1.
Добавление пользовательского CSS с помощью настройщика темЗдесь вы можете добавить и изменить свой собственный код CSS и просмотреть его, пока не будете удовлетворены тем, как он выглядит на вашем сайте.
Когда закончите, нажмите кнопку « Сохранить и опубликовать» вверху.
Любой пользовательский CSS, добавленный с помощью настройщика темы, доступен только с этой конкретной темой. Если вы хотите использовать CSS для других тем, вам нужно будет скопировать и вставить код в новую тему, используя тот же метод.
Способ № 2: добавление пользовательского CSS с помощью плагина
Если вы хотите, чтобы ваш собственный CSS применялся независимо от используемой вами темы WordPress, без необходимости копировать и вставлять код в новые темы, тогда этот метод может быть лучшим.
Есть несколько плагинов, которые позволят вам это сделать, например SiteOrigin CSS, Custom CSS Pro или Simple Custom CSS и JS.
Способ № 3. Добавление пользовательского CSS с помощью таблицы стилей дочерней темы
После создания дочерней темы вы можете загрузить файл style.css , расположенный в родительской теме, а затем загрузить его в каталог дочерней темы с помощью SFTP. Вы можете найти папку родительской и дочерней тем, перейдя по адресу
После того, как вы скопировали файл style.css вашей темы в каталог дочерней темы, вы можете редактировать код CSS прямо из этого файла.
Всегда помните об осторожности и делайте резервные копии ваших файлов перед использованием этого метода.
Где узнать больше об использовании CSS
В Интернете есть множество бесплатных полезных руководств, которые помогут вам узнать больше об использовании кода CSS и наиболее распространенных элементах, которые вы можете изменить. Если вы изо всех сил пытаетесь понять, какой код вам нужен для внесения определенного изменения, простой поиск в Google обычно поможет и приведет вас к правильному ответу.
Советы и рекомендации по редактированию CSS на вашем веб-сайте
Вы можете использовать инструмент «Проверка» вашего браузера, загрузив свой веб-сайт в браузере, а затем щелкнув правой кнопкой мыши страницу или конкретный раздел страницы, который вы хотите изменить, и выберите
Это откроет панель в вашем браузере, которая показывает все существующие стили CSS на странице. Это отличный способ найти классы CSS, которые вы можете изменить на своем сайте. В этом примере мы выделили текст «Hello world!»
.Если вы хотите изменить размер шрифта на 7rem, вам нужно будет добавить этот пользовательский код CSS:
h3.
entry-title {
размер шрифта: 7rem !важно;
}
ПРИМЕЧАНИЕ. При добавлении пользовательского CSS, который переопределяет существующий CSS, вам необходимо добавить тег !important в каждую строку, которую вы переопределяете.
Это всего лишь базовый пример того, как вы можете использовать свой браузер для поиска и внесения изменений с помощью стилей CSS.