Как в Wordpress к каждой карточке в конкретной категории сделать уникальное оформление?

Question

[sorry_i_noob]

Здравствуйте. У меня в Wordpress есть категория. Я ее открываю, и мне выводятся карточки с постами в этой категории. Я хочу для каждой карточки сделать уникальное оформление (сделать фон карточки определенным цветом, добавить свою картинку-превьюшку). Как мне это сделать?

Answer 1

[yarovikov]

Если вам нужно оформлять индивидуально пост, то не путайте людей и не пишите про категории.

Для записи нужно создать произвольные поля (например, с color picker для фона) с помощью ACF или то же самое, но вручную с помощью metabox (что посложнее). Ну а дальше эти значения прописывать в инлайн-стили блока аля:

<div class="post" style="background-color:<?php the_field('color'); ?>">Котики</div>

Comments

[sorry_i_noob]

Мне еще нужно, чтобы у определенной картегории ВСЕ карточки постов были немножечко другими. Как это сделать? А за ACF спасибо, у меня получилось.

[yarovikov]

sorry_i_noob, к блокам карточек выводить класс таким образом

<div <?php post_class('post'); ?>>Котики</div>

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

post post-4564 post type-post status-publish format-standard hentry category-news

Answer 2

[Орхан Гасанлы]

Здравствуйте!
Желательно предоставить скриншот и какой-нибудь код для конкретизации вопроса.
А если в общем, то можно например, кастомизацию карточек провести при помощи псевдоселектора nth-child()
Предположим, что карточки у вас выводятся в виде:

<ul class="cards">
<li class="card">Запись 1</li>
<li class="card">Запись 2</li>
<li class="card">Запись 3</li>
<li class="card">Запись 4</li>
<li class="card">Запись 5</li>
</ul>

Соответственно, например, чтобы каждая 3-я карточка имела фон красного цвета указываете следующее:

ul.cards li:nth-child(3n) {
background:red;
}

Чтобы каждая вторая карточка имела фон зеленого цвета:

ul.cards li:nth-child(2n) {
background:green;
}

https://www.w3schools.com/cssref/sel_nth-child.asp
htmlbook.ru/css/nth-child

Или же можете завести счетчик и внутри рнр цикла добавлять нужные классы к тем ли иным карточкам, а далее стилизовать... В общем, нужна конкретика

Comments

[sorry_i_noob]

Мне нужно менять карточки ТОЛЬКО для одной категории.
У меня нет какой-либо упорядоченности - каждый третий элемент, например. Мне это не подходит. Превью с картинкой у каждой карточки своя. И фон может быть, а может и не быть - зависит от важности новости.

Answer 3

[id_dmitriy]

в WP уже есть произвольные поля, только не стилизованные... Их можно включить в настройках экрана.

После этого их нужно заполнить как удобно:


Вывод этих полей:

global $post;//поместить вне цикла в начало файла в случае не правильного получения данных
$color  = 'color: ' . get_post_meta( $post->ID, 'color' ) . ';';
$bg     = 'background-image:url("' . get_post_meta( $post->ID, 'url' ) . '");';
$style = 'style="' . $color . $bg . '"';

<div class="карточка" <?= $style; ?>>содержимое карточки</div>