Пропустить

Как настроить CSS вашего сайта WordPress

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

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

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

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

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

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

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

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

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

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

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

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

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

Как настроить CSS вашего сайта WordPress

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

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

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

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

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

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

как настроить сайт CSS WordPress 1

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

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

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

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

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

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

как настроить сайт CSS WordPress 1 1

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

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

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

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

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

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

WordPress стилей

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

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

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

как настроить сайт CSS WordPress 2

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

Доступ к настройщику WordPress для настройки темы

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

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

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

введите дополнительный код css и опубликуйте

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2. WP Media File Manager

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

WP Media File Manager WordPress Media Library Folders Categories Upload Plugin

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

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

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

3. Меню героя

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

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

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

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

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

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

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

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

Заключение

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

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

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

... 

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

  1. Привет,

    Я хотел бы познакомить вас с плагином Anym Live Editor, который позволяет полностью редактировать CSS или SCSS и Javascript с любой страницы WordPress, и который предлагает живую визуализацию внесенных изменений! Кроме того, плагин оснащен множеством инструментов, позволяющих вам взаимодействовать со страницей, которую вы хотите изменить, и работает как любая обычная IDE (стиль Sublime text), но на этот раз посвящен вашему сайту. WordPress.

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

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

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

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