Пропустить

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

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

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

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

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

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

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

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

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

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

Во-первых: CSS означает Каскадные таблицы стилейчто не более понятно, чем аббревиатура. Итак, давайте разберемся.

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

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

CSS Selector

Как бы просто это ни выглядело, 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?

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

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

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

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

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

WordPress стилей

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

Опция # 2: настроить CSS из настройщика

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

Многие темы WordPress используют Customizer для упрощения управления настройками.

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

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

Тема WordPress Всего например, предлагает область редактирования кода CSS из панели инструментов.

CodeCSS Всего WordPress

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

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

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

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

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

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

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

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

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

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

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

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

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 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предлагает адаптивный дизайн и интерфейс «перетаскивания» для создания меню.

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

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

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

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

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

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

Вывод

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

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

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

...

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

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

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

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

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