Последние 5 сообщений (пользовательский тип сообщения), каждое сообщение отличается CSS
При создании нашего портфолио я хотел бы сделать динамический заголовок с последними 5/6 изображениями в строке. Все эти сообщения выходят из пользовательского типа сообщений "приложения".
<div id="header">
<div class="latest_post"> <img src="featured image" class="class-name" /></div>
<div class="second_post"> <img src="featured image" class="class-name" /> </div>
<div class="third_post"> <img src="featured image" class="class-name" /> </div>
<div class="fourth_post"> <img src="featured image" class="class-name" /> </div>
<div class="fifth_post"> <img src="featured image" class="class-name" /> </div>
</div>
Как бы я создал что-то подобное?
Заранее благодарю.
2 answers
Сначала настройте запрос WP_, чтобы получить последние 5 сообщений из вашего пользовательского типа сообщений "приложения". Вам также необходимо обновить "счетчик" для каждой записи в цикле. Затем просто повторите количество в классе для div.
<?php
//Query posts
$query = new WP_Query(array(
'post_type' => 'apps',
'posts_per_page' => 5
));
//Reset counter
$count = 0;
?>
<?php if ($query->have_posts()) : ?>
<div id="header">
<?php while ($query->have_posts()) : $query->the_post(); ?>
<?php $count++; //update count ?>
<div class="post_<?php echo $count; //prints the class as "post_XX" ?>">
<?php if( has_post_thumbnail() ) { the_post_thumbnail(); } ?>
</div>
<?php endwhile; ?>
</div>
<?php endif; ?>
<?php wp_reset_query(); ?>
Это должно возвращать результаты в виде
<div class="post_1"><img src=".." /></div>
<div class="post_2"><img src=".." /></div>
<div class="post_3"><img src=".." /></div>
<div class="post_4"><img src=".." /></div>
<div class="post_5"><img src=".." /></div>
Один вторичный цикл с WP_Query()
; используйте счетчик циклов $query->current_post
для вывода этих пяти классов css из массива;
Пример (на основе кода jzatt):
<?php
$query = new WP_Query(array(
'post_type' => 'apps',
'posts_per_page' => 5,
'meta_key' => '_thumbnail_id'
));
$css_classes = array( 'latest', 'second', 'third', 'fourth', 'fifth' ); ?>
<?php if ($query->have_posts()) : ?>
<div id="header">
<?php while ($query->have_posts()) : $query->the_post(); ?>
<div class="<?php echo $css_classes[$query->current_post%5]; ?>_post"> <?php the_post_thumbnail('thumbnail',array('class' => 'class-name' )); ?> </div>
<?php endwhile; ?>
</div>
<?php endif; wp_reset_postdata(); ?>
Отрегулируйте 'thumbnail'
в соответствии с вашим размером изображения;
для 6 сообщений измените значение на posts_per_page' => 6,
, добавьте еще один элемент 'sixth'
в массив классов css и измените значение $query->current_post%5
на $query->current_post%6