WordPress как на ладони
Недорогой хостинг для сайтов на WordPress: wordpress.jino.ru

Как создать разные классы в цикле вывода статей?

Сделал макет сайта, в выводе будет картинка и название.

Но проблема в том, что первые две новости в больших блоках, а остальные в маленьких.
В div-е есть основной класс и дополнительный block_news__elements_1, ...2, ...3

Как сделать чтобы при выводе статей каждой присваивался класс block_news__elements_$n?

На flexbox это так у меня получилось.

            <div class="block_news">
				<div class="container">
					<div class="block_news__row">
						<div class="block_news__elements block_news__elements_1">
							<div class="block_news__content">
								<picture>
									<source srcset="images/5190IMG_02_12_2017_615-410.jpg" type="image/jpeg" media="(min-width:993px)">
									<source srcset="images/5190IMG_02_12_2017_460-307.jpg" type="image/jpeg" media="(min-width:768px)">
									<source srcset="images/5190IMG_02_12_2017_360-240.jpg" type="image/jpeg" media="(max-width:767px)">
									<img src="images/5190IMG_02_12_2017_615-410.jpg">
								</picture>
								<div class="block_news__title">
									Далеко-далеко за словесными горами в стране.
								</div>
							</div>
						</div>
						<div class="block_news__elements block_news__elements_2">
							<div class="block_news__content">
								<picture>
									<source srcset="images/5190IMG_02_12_2017_615-410.jpg" type="image/jpeg" media="(min-width:993px)">
									<source srcset="images/5190IMG_02_12_2017_460-307.jpg" type="image/jpeg" media="(min-width:768px)">
									<source srcset="images/5190IMG_02_12_2017_360-240.jpg" type="image/jpeg" media="(max-width:767px)">
									<img src="images/5190IMG_02_12_2017_615-410.jpg">
								</picture>
								<div class="block_news__title">
									Lorem ipsum dolor sit amet.
								</div>
							</div>
						</div>
						<div class="block_news__elements block_news__elements_3">
							<div class="block_news__content">
								<picture>
									<source srcset="images/5190IMG_02_12_2017_615-410.jpg" type="image/jpeg" media="(min-width:993px)">
									<source srcset="images/5190IMG_02_12_2017_460-307.jpg" type="image/jpeg" media="(min-width:768px)">
									<source srcset="images/5190IMG_02_12_2017_360-240.jpg" type="image/jpeg" media="(max-width:767px)">
									<img src="images/5190IMG_02_12_2017_615-410.jpg">
								</picture>
								<div class="block_news__title">
									Lorem ipsum dolor sit amet, consectetur adipisicing.
								</div>
							</div>
						</div>
						<div class="block_news__elements block_news__elements_4">
							<div class="block_news__content">
								<picture>
									<source srcset="images/5190IMG_02_12_2017_615-410.jpg" type="image/jpeg" media="(min-width:993px)">
									<source srcset="images/5190IMG_02_12_2017_460-307.jpg" type="image/jpeg" media="(min-width:768px)">
									<source srcset="images/5190IMG_02_12_2017_360-240.jpg" type="image/jpeg" media="(max-width:767px)">
									<img src="images/5190IMG_02_12_2017_615-410.jpg">
								</picture>
								<div class="block_news__title">
									Lorem ipsum dolor sit amet, consectetur.
								</div>
							</div>
						</div>
						<div class="block_news__elements block_news__elements_5">
							<div class="block_news__content">
								<picture>
									<source srcset="images/5190IMG_02_12_2017_615-410.jpg" type="image/jpeg" media="(min-width:993px)">
									<source srcset="images/5190IMG_02_12_2017_460-307.jpg" type="image/jpeg" media="(min-width:768px)">
									<source srcset="images/5190IMG_02_12_2017_360-240.jpg" type="image/jpeg" media="(max-width:767px)">
									<img src="images/5190IMG_02_12_2017_615-410.jpg">
								</picture>
								<div class="block_news__title">
									Lorem ipsum dolor sit amet, consectetur.
								</div>
							</div>
						</div>
						<div class="block_news__elements block_news__elements_6">
							<div class="block_news__content">
								<picture>
									<source srcset="images/5190IMG_02_12_2017_615-410.jpg" type="image/jpeg" media="(min-width:993px)">
									<source srcset="images/5190IMG_02_12_2017_460-307.jpg" type="image/jpeg" media="(min-width:768px)">
									<source srcset="images/5190IMG_02_12_2017_360-240.jpg" type="image/jpeg" media="(max-width:767px)">
									<img src="images/5190IMG_02_12_2017_615-410.jpg">
								</picture>
								<div class="block_news__title">
									Lorem ipsum dolor sit amet, consectetur.
								</div>
							</div>
						</div>
						<div class="block_news__elements block_news__elements_7">
							<div class="block_news__content">
								<picture>
									<source srcset="images/5190IMG_02_12_2017_615-410.jpg" type="image/jpeg" media="(min-width:993px)">
									<source srcset="images/5190IMG_02_12_2017_460-307.jpg" type="image/jpeg" media="(min-width:768px)">
									<source srcset="images/5190IMG_02_12_2017_360-240.jpg" type="image/jpeg" media="(max-width:767px)">
									<img src="images/5190IMG_02_12_2017_615-410.jpg">
								</picture>
								<div class="block_news__title">
									Lorem ipsum dolor sit amet, consectetur.
								</div>
							</div>
						</div>
						<div class="block_news__elements block_news__elements_8">
							<div class="block_news__content">
								<picture>
									<source srcset="images/5190IMG_02_12_2017_615-410.jpg" type="image/jpeg" media="(min-width:993px)">
									<source srcset="images/5190IMG_02_12_2017_460-307.jpg" type="image/jpeg" media="(min-width:768px)">
									<source srcset="images/5190IMG_02_12_2017_360-240.jpg" type="image/jpeg" media="(max-width:767px)">
									<img src="images/5190IMG_02_12_2017_615-410.jpg">
								</picture>
								<div class="block_news__title">
									Lorem ipsum dolor sit amet, consectetur.
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

Код CSS

/* BLOCK_NEWS */
.block_news {
	margin-top: 100px;
	/*max-width: 780px;
	margin:0 auto;
	padding-bottom: 20px;*/ /* стоит container */
}
.block_news__row {
	display: flex;
	flex-wrap: wrap;
}
.block_news__elements {
	border:5px solid #fff;
}
.block_news__elements_1 {
	flex: 0 1 50%;
}
.block_news__elements_2 {
	flex: 0 1 50%;
}
.block_news__elements_3,
.block_news__elements_4,
.block_news__elements_5,
.block_news__elements_6,
.block_news__elements_7,
.block_news__elements_8 {
	flex: 0 1 33.333%;
}
.block_news__content {
	width: 100%;
	position: relative; /* для картинки */
}
.block_news__title {
	position: absolute;
	bottom: 5px;
	left: 0;
	width: 100%;
	color: #fff;
	font-size: calc(18px + 12 * ((100vw - 320px) / (1280 - 320)));
	background: rgb(0, 0, 0, 0.6);
	padding: 10px;
}
.block_news__content img { /* адаптация картинки под родительский блок */
	max-width: 100%;
}
Заметки к вопросу:
August_II 16 дней назад

Чтобы выглядело вот так:

Kama 16 дней назад

Так, а где PHP код, в нем это надо делать?

Владимир 15 дней назад
<?php get_header(); ?>

<!-- Здесь контент -->
			<div class="block_news">
				<div class="container">
					<div class="block_news__row">
							<?php // Display blog posts on any page
							$temp = $wp_query; $wp_query= null;
							$wp_query = new WP_Query(); $wp_query->query('showposts=8' . '&paged='.$paged);
							while ($wp_query->have_posts()) : $wp_query->the_post(); ?>
						<div class="block_news__elements block_news__elements_1">
							<div class="block_news__content">
								<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
								<div class="block_news__title">
									<?php title_chars(35, '...'); ?>
								</div>
							</div>
						</div>
		<?php endwhile; ?>
					</div>
					<!-- END block_news__row -->
<!-- Pangination -->
		<?php the_posts_pagination(); ?>
<!-- END Pangination -->
		<?php wp_reset_postdata(); ?>
<!-- КОНЕЦ Вывод содержимого страницы в wp -->
				</div><!-- END Container -->
			</div><!-- END block_news -->
<!-- КОНЕЦ контент -->
<?php get_footer(); ?>
Kama 15 дней назад
...
	$nn = 1;
	while ($wp_query->have_posts()) : $wp_query->the_post(); ?>
		<div class="block_news__elements block_news__elements_<?= $nn++ ?>">
...
Владимир 15 дней назад

Спасибо! Как говорил Крылов - "А ларчик просто открывался"

0
Владимир
16 дней назад

Нет ответов на этот вопрос.

    На вопросы могут отвечать только зарегистрированные пользователи. Вход . Регистрация