Каждой рубрике — свое оформление

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

Оформление категорий WordPress

Начнем с чего попроще. Ставим задачу — чтобы вывод записей в архиве какой-нибудь рубрики, пусть она будет называться «Новости», отличался от всех остальных. Для этого создаем страничку с названием category-ID.php, где ID это собственно ай ди нашей категории. Если у категории «Новости» ID=1, то файл будет называться «category-1.php». Далее в этот файл мы вставляем цикл вывода новостей с индивидуальным оформлением. Например, у всех рубрик в анонсах нет миниатюр, а здесь они будут. В общем, меняем оформление цикла, можно даже подключить другую шапку сайта со ссылкой на другой файл стилей, чтобы совсем кардинально поменять внешний вид. Сохраняем и загружаем в папку с активированной темой оформления блога.
И, как говорится, вуаля — оформление категории «Новости» отличается от остальных.

Однако данный пример не распространяется на сами записи. То есть архив рубрики будет выглядеть по-другому, но записи будут оформлены так же, как все остальные. Чтобы решить эту проблему, качаем плагин с длинным названием Use Parent Category Plus. Его достаточно просто установить и активировать — плагин автоматом будет применять оформление родительской рубрики для всех ее подрубрик и опубликованных постов.

Индивидуальное оформление вывода записей разных категорий на главной странице

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

Давайте попробуем сделать так, чтобы у анонса из категории «Новости» будет желтый фон, у раздела «Музыка» синий, а в «Кино» — зеленый. Давайте это сделаем. Есть два способа.

1. Использование функции «in_category». Используем такой код:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php if ( in_category('1') ) { ?>
<div class="1"><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a>
<?php if ( has_post_thumbnail ()) : ?><a href=<?php the_permalink();?>
<?php the_post_thumbnail();?></a><?php endif; ?>
<?php the_excerpt(''); ?>
</div><?php endif; ?>
<?php if ( in_category('2') ) { ?> <div class="2"><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a> <?php if ( has_post_thumbnail ()) : ?><a href=<?php the_permalink();?> <?php the_post_thumbnail();?></a><?php endif; ?> <?php the_excerpt(''); ?> </div><?php endif; ?> <?php if ( in_category('3') ) { ?> <div class="3"><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a> <?php if ( has_post_thumbnail ()) : ?><a href=<?php the_permalink();?> <?php the_post_thumbnail();?></a><?php endif; ?> <?php the_excerpt(''); ?> </div><?php endif; ?> <?php endif; endwhile; ?>

В данном примере если заметка относится к категории с ID 1, то анонс будет выводиться в блоке с классом 1, если к рубрике 2, то соответственно, блок будет иметь оформление класса 2 и т.д. Остается только задать оформление этим блокам категорий в файле стилей. Примерно так

.1 {background: yellow;}
.2 {background: blue;}
.3 {background: green;}

Если пофантазировать, то можно сделать очень интересные эффекты, включая разные фоновые картинки, цвета шрифтов и так далее.

2. Второй способ оформить категории при выводе новостей в архивах и на главной — прописать эти стили сразу в php. Где-нибудь в начале кода страницы index.php пропишем:

<?php
$category = get_the_category();
$cat_ID = $category[0]->cat_ID;

if ($cat_ID == 1) $cat_class='1';
elseif ($cat_ID == 2) $cat_class='2';
elseif ($cat_ID == 3) $cat_class='3';
elseif ($cat_ID == 4) $cat_class='4';

?>

Этим кодом мы присваиваем каждой категории свой класс стилей.

Теперь наш цикл записей будет выглядеть так:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="<?php echo $cat_class; ?>"><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a>
<?php if ( has_post_thumbnail ()) : ?><a href=<?php the_permalink();?>
<?php the_post_thumbnail();?></a><?php endif; ?>
<?php the_excerpt(''); ?>
</div>
<?php endif; endwhile; ?>

В строке

<div class="<?php echo $cat_class; ?>">

подгружается именно то оформление для блока, которое задано для категории данной записи.

Остается опять же только прописать нужные классы — можно взять из предыдущего примера.
Этот вариант еще очень удобно использоваться, если вы хотите по-разному оформить одиночные записи. Действуем точно также, только с файлом single.php, отвечающим за вывод одиночных новостей.

Поделись этой статьей с друзьями!

Это будет интересно прочитать:

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

    • В этом нет ничего сложного. Просто в том месте шаблона страницы single.php (или header.php или другом, в котором должны быть изменения), откуда начинается отличие, надо применить функцию вида
      < ?php if ( is_single() && in_category( '1' )) { ?>
      оформление записей из категории с ID 1
      < ?php } else { ?>
      оформление записей из остальных категорий
      < ?php } ?>

  • Обычно использую циклы и условия для того, чтобы задать разное отображение.
    А как сделать разные поля в админке для разных рубрик?

  • А я то все думала, как названия рубрик с картинками выводятся. Спасибо за ценную информацию!

  • Ничего так красиво, нужно подумать над такой функцией у себя на блоге.
    А для каждой темы будет выгладить это красиво или нет?

  • Имя класса в css не может начинаться с цифры!, этого не поймут старые браузеры должно только с буквы например .c1 .c2 .c3

    • Спасибо за дополнение! Но как показывает статистика, такими браузерами пользуется очень малый процент посетителей, кроме того, в них не поддерживаются очень многие составляющие современного языка html и css, так что лучше для таких браузеров ставить заглушку и просить пользователя обновться

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

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

  • Простите меня за не очень умный вопрос, но все-таки: подскажите, а в какой файл писать последний код (после слов :Теперь наш цикл записей будет выглядеть так:
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <div class="<?php echo $cat_class; ?>"><a href="<?php the_permalink(); ?>"……</div><?php endif; endwhile; ?>
    Это в файл категорий, или index.php, или в другой? Спасибо.

    • В последнем примере меняется оформление вывода новостей в архиве или на главной в зависимости от категории, значит этот код будем вставлять в index.php или archive.php

Добавить комментарий