Пропустить

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

Divi: самая простая тема WordPress для использования

Divi: Лучшая тема WordPress всех времен!

Более Загрузка 701.000, Divi - самая популярная тема WordPress в мире. Он является полным, простым в использовании и поставляется с более чем бесплатными шаблонами 62. [Рекомендуется]

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

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

Но раньше, если вы никогда не устанавливали WordPress, откройте для себя Как установить WordPress блог шаги 7 et Как найти, установить и активировать WordPress тему на своем блоге 

Тогда вернемся к тому, почему мы здесь.

Как найти предметы, которые вы хотите настроить

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

CSS использует селекторы, чтобы определить, какие элементы будут испытывать различные конкретные изменения. Обычно это делается путем указания " класс "Элемента (или элемент DOM). Тем не менее, CSS также может быть использован для определения макета всего элемента (например, тег " ") или используя идентификатор тега.

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

blogpascher-осмотр

Нажав на кнопку " Осмотрите элемент В появившемся раскрывающемся меню вы увидите HTML-код страницы в новом окне с проверенным элементом, выделенным в окне справа (или ниже). Вы можете видеть пример ниже.

blogpascher-логотип

Тексты этих элементов (или атрибуты) Выделенный красным цветом показывает различные конкретные стили, применимые к элементу, который вы выделили при проверке кода.

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

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

Как только вы запомните эту информацию, изменение стиля станет легким. Например, если вы хотите изменить шрифт с 13px на 14px, вы просто ищете свой файл таблицы стилей, селектор, который соответствует одному из выделенного элемента. Как правило, в таком виде: (« # Информация .block-плагин-контента"). Затем вы можете изменить различные значения атрибутов.

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

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

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

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

См. Также: Как изменить размер изображения Gravatar на WordPress

Теперь пришло время пройти через различные процессы редактирования.

Метод # 1: редактирование файла стиля вашей темы WordPress

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

Легко создайте свой сайт с Elementor

Elementor позволяет легко создать любой дизайн сайта с профессиональным дизайном. Прекратите платить дорого за то, что вы можете сделать сами. [Free]

Во-первых, сделать это с вашей панели WordPress. В левой части меню выберите меню apparence "А потом" Издатель .

меню редактора картинную края

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

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

меню WordPress-редактор кода

Другой способ найти таблицу стилей - пройти через операционную систему вашего хостинг-провайдера и найти файл в папке темы WordPress (с помощью FTP-клиента). Точное местоположение будет зависеть от вашего хостинг-провайдера. В приведенном ниже примере имя веб-сайта (в нашем случае thecare) Является ли папка в папке public_html.

Поскольку WordPress установлен, вы можете увидеть папку wp-content в "thecare". Подпапка wp-content - это еще одна папка под названием " WP-темы«, Где установлены все темы WordPress.

С этого сайта используется тема под названием Подписаться на новости », Файл стиля« style.css Находится в папке " родитель бюллетень .

Информационный бюллетень родительская папка-800x401

Метод # 2: использование плагина для изменения CSS

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

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

Вот несколько премиальных плагинов, которые вы также можете использовать для изменения CSS-кода вашей темы WordPress:

1. Желтый карандаш: визуальный редактор стилей CSS

Yellow Pencil - это редактор визуальных стилей, который можно использовать с любой темой, чтобы персонализировать свой веб-сайт за считанные минуты (шрифты, цвета, анимация и многое другое…).YellowPencil Visual CSS Style Editor плагин для wordpress

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

Узнайте также наш Плагины 5 WordPress показывать уведомления

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

скачать | Демонстрация | веб-хостинг

2. Кастомные JS и CSS для Гутенберга

Премиальный плагин WordPress Custom JS и CSS для Гутенберг позволит вам добавлять неограниченное количество пользовательских стилей в редактор WYSIWYG для ваших сообщений и страниц WordPress. Он полностью совместим с версией WordPress для Гутенберга.

Вы ищете лучшие темы и плагины WordPress?

Загрузите лучшие плагины и темы WordPress на Envato и легко создайте свой сайт. Уже больше, чем 49.720.000. [ЭКСКЛЮЗИВ]

Пользовательский JS и CSS для плагина Gutenberg WordPress

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

скачать | Демонстрация | веб-хостинг

3. SiteOrigin CSS

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

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

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

Читайте также нашу статью о 10 WordPress плагины для увеличения продаж вашего сайта

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

скачать | Демонстрация | веб-хостинг

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

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

Simple Custom CSS - плагин для WordPress WordPress.org

Узнайте также наш Как сделать ваш блог быстрым: управление файлами CSS и JS.

Он был установлен более 100 000 раз и получил пять звезд.

скачать | Демонстрация | веб-хостинг

5. WP Добавление пользовательских CSS

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

сор-надстройка на заказ

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

скачать | Демонстрация | веб-хостинг

6. Тема Junkie Пользовательские CSS

Если вы ищете решение, которое предлагает предварительный просмотр ваших изменений в реальном времени, вы можете рассмотреть возможность использования Тема Junkie Custom CSS

тема-наркоман-CSS

Легко создайте свой интернет-магазин

Загрузите бесплатные WooCommerce, лучшие плагины для электронной коммерции, чтобы продавать свои физические и цифровые продукты в WordPress. [Рекомендуется]

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

скачать | Демонстрация | веб-хостинг

Другие рекомендуемые ресурсы

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

Заключение

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

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

Если вам понравилась эта статья, нне стесняйтесь поделиться в ваших любимых социальных сетях

...  

Эта статья содержит 1 комментарий

  1. Большое спасибо за разные статьи на вашем сайте !! Для новичка вроде меня это всегда очень ясно и понятно… Думаю, я буду возвращаться очень часто !!

Оставить комментарий

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

Этот сайт использует Akismet для уменьшения нежелательности. Узнайте больше о том, как используются ваши комментарии.

Вверх
4 акции
доля2
чирикать
Регистрация2