Как настроить CSS вашего сайта WordPress? Узнайте в этой статье.

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

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

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

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

Тогда вместе узнайте наш список.

CSS: основы и как их использует WordPress

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

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

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

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

Узнайте, как управлять своими уведомлениями, открыв Как управлять уведомления по электронной почте на WordPress

Большинство тем WordPress используют CSS-код, доступный в файле под названием style.css, Если вы откроете этот файл, вы увидите полный список правил стиля для вашей темы WordPress. Что бы вы ни делали, не изменяйте этот файл! Обновления перезапишут ваши изменения.

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

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

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

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

Опция # 1: настроить CSS, используя дочернюю тему

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

Откройте для себя Когда и как установить WordPress в подкаталоге

Создать дочернюю тему довольно просто. Для этого нужно создать папку на вашем веб-хостинге, содержащую файл. style.css который перечисляет родительскую тему в качестве шаблона и импортирует файл style.css родительской темы (вы помните значение «каскадных» таблиц стилей?).

Кодекс WordPress Здесь содержится дополнительная информация о создании дочерних тем.

После создания дочерней темы и ее успешной активации вы можете приступить к настройке вашей темы WordPress. Самый быстрый способ сделать это — отредактировать файл вашей темы. style.css, который может быть доступен двумя способами.

Проверьте эту статью, чтобы узнать Как сжать ваши CSS, HTML и Javascript файлы

Первый способ предполагает использование редактора, встроенного в панель управления WordPress, путем нажатия на Внешний вид> Редактор, L 'редактор отображает список файлов справа, доступных в теме (Отображаются только популярные файлы). Ваш файл style.css будет в самом низу списка, и, нажав на соответствующую опцию, вы сможете это сделать. стилей ваш файл style.css будет заряжать

Вы можете добавить свои изменения в это местоположение и сохранить изменения.

Другой способ получить доступ к вашему файлу. style.css (один мы рекомендуем), чтобы просмотреть файлы на вашем веб-хостинге через FTP-клиент или файловый менеджер. Созданная вами папка дочерней темы будет находиться в папке "wp-content> themes", Вы сможете использовать текстовый редактор для редактирования файла style.css.

Вариант № 2: Настройте CSS из Настройщика

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

Сначала вам нужно перейти на страницу Темы »Настроить.

Это запустит интерфейс настройки темы WordPress.

Вы увидите предварительный просмотр своего веб-сайта в реальном времени справа с множеством опций на левой панели. Щелкните вкладку Дополнительные CSS на левой панели.

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

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

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

Опция # 3: настроить CSS с помощью плагина

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

Вот некоторые плагины:

1. Пользовательский CSS в Jetpack (бесплатно)

Плагин WordPress Jetpack  Установлено более чем на миллионе сайтов WordPress, и, вероятно, на вашем тоже. Оно предоставляет доступ к функциям, доступным на других платформах. WordPress.com для самостоятельных сайтов, а также предлагает модуль для CSS настройки.

После активации модуля в панели управления Jetpack станет доступен редактор пользовательских CSS-стилей, позволяющий настраивать тему WordPress без создания дочерней темы. Доступ к редактору можно получить по следующему пути:Внешний вид> Изменить CSS".

2. Простой пользовательский CSS (бесплатно)

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

Этот плагин не требует настройки; просто установите и активируйте его. Чтобы отредактировать свой CSS-код, перейдите в "Внешний вид> Пользовательский CSS" В панели управления WordPress. Примените изменения CSS в текстовом поле, а затем сохраните настройки.

3. CSS Hero (от 14 долларов в год)

Последний плагин для WordPress, который мы сегодня рассмотрим, — это платный плагин для WordPress под названием... CSS Hero. От 14 $ в год для одного веб-сайта этот плагин позволяет настроить тему WordPress с помощью интуитивно понятного интерфейса.

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

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

Открыть Как перенести комментарии из одной статьи в другую на WordPress

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

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

Идите дальше, открывая для себя Как разрешить пользователям редактировать определенные страницы

Таким образом, есть несколько способов настроить CSS вашей темы WordPress:

1. детская тема.
2. настройщик.
3. CSS плагин.

Откройте для себя также несколько премиальных плагинов WordPress  

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

Мы предлагаем вам несколько премиальных плагинов WordPress, которые помогут вам сделать это.

1. Рекламная реклама

WP PRO Advertising System - это плагин управления рекламой WordPress, который предлагает стратегические местоположения 18, чтобы помочь вам показывать рекламу на вашем сайте. В нем также есть подробный раздел статистики, из которого вы увидите эффективность каждого объявления.

Эта функция крайне важна, поскольку она поможет вам улучшить вашу кампанию и максимизировать прибыль. Этот плагин AdSense для WordPress также обладает уникальной функцией под названием «фоновые объявления». Она позволяет отображать объявления в качестве фона для вашего контента.

Плюс, так как он совместим с плагинами, такими как WPBakery et Слайдер революцияВы можете отображать свои объявления в виде слайдеров или размещать их в любом месте вашего сайта.

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

2. WP Media File Manager

WP Media File Manager — это плагин для WordPress, который упрощает организацию медиатеки в иерархическую структуру с помощью функции перетаскивания. Это один из самых мощных плагинов для управления файлами на CodeCanyon. Вам даже не придётся создавать папки вручную.

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

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

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

3. Меню героя

Hero Menu — это плагин мегаменю для WordPress. И хотя он не делает ничего особенно героического, он предлагает все необходимые функции всего за 19 долларов. Как и Mega Main Menu, он также является рекомендуемым продуктом на CodeCanyon и на сегодняшний день продан почти 4500 раз.

В разделе «Функции» вы быстро поймете, что создать его довольно легко. megamenu, Процесс занимает всего несколько шагов. Но кроме того, вы заметите, что плагин совместим с WooCommerceПредлагает адаптивный дизайн и интерфейс «перетаскивания» для создания меню.

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

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

Рекомендуемые ресурсы

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

• Как защитить паролем форму в WordPress
• Как создать красивые переходы страниц на WordPress
• Как использовать WordPress REST API
• Как связать ваш сайт WordPress с Telegram
• Как почистить WordPress за несколько шагов

Заключение

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

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

Если у вас есть предложения или замечания, оставьте их в нашем разделе Комментарии.

...