Как настроить 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, чтобы помочь вам показывать рекламу на вашем сайте. В нем также есть подробный раздел статистики, из которого вы увидите эффективность каждого объявления.

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

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

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

2. WP Media File Manager

WP Media File Manager - это плагин WordPress, который упрощает организацию медиа-библиотеки в виде иерархии с помощью функции перетаскивания. Это один из 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.

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

...