Пропустить

Как придать уникальный стиль для различных категорий WordPress

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

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

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

Хотите по-разному классифицировать категории в WordPress?

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

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

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

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

Зачем придавать разный стиль категориям в WordPress?

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

Читайте также: Как отображать RSS содержание только для подписчиков на WordPress

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

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

Тем не менее, давайте посмотрим, как легко настроить отдельные категории в WordPress.

Как придать стиль категориям

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

Использование шаблона одной категории в теме WordPress

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

Например, он ищет файл category.php для отображения страниц архива категорий.

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

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

WordPress также позволяет вам создавать модели для отдельных категорий. Предположим, вы хотите классифицировать категориюApple«Иные слова. Вы можете сделать это, добавив новый файл шаблона в тему WordPress и присвоив ему имя категория-apple.php.

Подключитесь к своему веб-сайту WordPress с помощью FTP-клиента, затем перейдите к / Wp-содержание / темы / ваш-тема / и создайте новый файл с именем category-apple.php. Не забудьте заменить «Apple» названием своей категории.

Добавить новую категорию wordpress

Вы можете использовать файл " category.php Из вашей темы WordPress в качестве отправной точки. Просто отредактируйте и скопируйте все его содержимое. Теперь переименуйте новый файл в " категория-apple.php И вставляем код внутрь.

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

Придайте стиль категориям, используя код CSS

WordPress автоматически добавляет классы CSS к различным элементам на вашем сайте. К ним относятся как класс тела, так и класс публикации.

Например, если вы просматриваете страницу архива категории, а затем используете инструмент Inspect, вы заметите классы CSS «категории» и имя категории в теге «body».

Тег категории body wordpress

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

Вот пример CSS, который вы можете использовать в качестве отправной точки.

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

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

body.category-яблоко {цвет фона: #EEE; фон: URL ( «http://example.com/wp-content/uploads/2017/background.jpg«) не повторять фиксированной; цвет: #FFFFFF; } .category-яблочный .Выходные {фон: #232323; } .category-яблочного {цвет: #cccccc; }

Не забудьте изменить название категории в классе CSS на название вашей категории.

Редактирование категории кода css wordpress

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

1. Easy Custom JS и CSS 

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

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

Смотрите наши статьи на Как потребовать принятия условий использования на WordPress

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

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

2. Пользовательский JavaScript и CSS на страницах!

Благодаря этому плагину WordPress у вас есть возможность добавить Стили CSS и пользовательский JavaScript на определенных страницах. Это также позволяет вам определять правила для нескольких страниц. Таким образом, вы можете иметь предопределенные или уникальные стили для определенных разделов.

Пользовательский javascript css на страницах плагин wordpress e1558356028853

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

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

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

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

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

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

Заключение

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

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

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

...  

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

  1. Salut!
    Пожалуйста, посмотрите, можете ли вы мне помочь, потому что я курю голову
    Я создаю интернет-магазин с divi и woocommerce, и у меня проблема, потому что я не могу настроить страницу категории.
    Я передаю ссылку для вас, чтобы увидеть:
    https://chachocarp.com/product-category/los-mas-vendidos
    Что я хочу изменить:
    1. У меня 24 продукта в этой категории, и вместо того, чтобы показывать его на двух страницах из 12 продуктов, он показывает их на трех страницах из 9, 9 и 6, и это предельно ясно.
    2. Я не сохранил конфигурацию наведения при наведении курсора на продукты. Хотелось бы, чтобы прозрачность была синей, а буквы «посмотреть товар будет наранажа», как в модуле магазина на главной странице.
    3. Я хочу, чтобы на левой боковой панели отображались все категории и подкатегории.
    Как он это сделал?
    Merci влить тонный помощник

    1. Привет Мигель,

      Задайте вопрос по статье о WooCommerce или Divi. И с удовольствием отвечу вам. 😉

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

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

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

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