CMSサイトで、複数投稿タイプを作るとき、カスタム投稿タイプを使用します。通常投稿を表示する時は、カスタム投稿タイプごとに一覧表示されます。今回は、カスタム投稿タイプの投稿をまとめて、新着情報として一覧表示する方法を紹介します。
出典 : slick
今回は、WORKS、BLOG、DEMOの一覧です。
6つの投稿を、slickで表示しています。サムネイル、CPTのラベル、投稿日、抜粋を表示しています。
コード
PHPの表示させたい場所に下記コードを入力します。
<div class="newtopics_carousel">
<h3 class="newtopics_heading">NEW TOPICS</h3>
<ul class="slider">
<?php
$custom_posts = get_posts(array(
'post_type' => array('all_blogs','all_works','all_demos'),
'posts_per_page' => 6,
));
global $post;
?>
<?php if($custom_posts): ?>
<?php foreach($custom_posts as $post): setup_postdata($post); ?>
<li>
<article class="news">
<div class="about-news-icon zoomIn">
<a href="<?php echo esc_url(get_permalink()); ?>">
<?php if(has_post_thumbnail()): ?>
<?php the_post_thumbnail('medium'); ?>
<?php else: ?>
<img src="<?php echo esc_url(get_theme_file_uri('/assets/images/cxglogo_damy001.jpg')); ?>" alt="damy" >
<?php endif; ?>
</a>
</div>
<a href="<?php echo get_post_type_archive_link( get_post_type() ); ?>">
<div class="detail-link">
<div class="post-category">
<?php echo esc_html(get_post_type_object(get_post_type())->label); ?>
</div>
</div>
</a>
<time class="time"><?php the_time( 'Y.m.d' ); ?></time>
<a class="detail-link" href="<?php echo esc_url(get_permalink()); ?>">
<p class="title"><?php the_title(); ?></p>
<p class="news-text"><?php echo get_the_excerpt(); ?></p>
</a>
</article>
</li>
<?php endforeach; ?>
<?php endif; wp_reset_postdata(); ?>
</ul>
</div> slickのJavaScriptを読み込みます。JavaScriptファイルを作成し、下記コードを記入し、読み込みます。
$('.slider').slick({
autoplay: true,
infinite: true,
slidesToShow: 3,
slidesToScroll: 1,
prevArrow: '<div class="slick-prev"></div>',
nextArrow: '<div class="slick-next"></div>',
dots: true,
responsive: [
{
breakpoint: 1250,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
}
},
{
breakpoint: 740,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
}
}
]
});CSSでslickのスタイルを整えます。
.slider {
width: 100%;
margin: 0 auto;
}
.slider .slick-slide {
margin: 0 30px;
}
.slick-prev,
.slick-next {
position: absolute;
top: 42%;
cursor: pointer;
outline: none;
border-top: 2px solid #333;
border-right: 2px solid #333;
height: 20px;
width: 20px;
z-index:5;
}
.slick-prev {
left: -1.5%;
transform: rotate(-135deg);
}
.slick-next {
right: -1.5%;
transform: rotate(45deg);
}
.slick-dots {
text-align:center;
margin:5px 0 0 0;
}
.slick-dots li {
display:inline-block;
margin:0 5px;
}
.slick-dots button {
color: transparent;
outline: none;
width: 10px;
height: 10px;
display: block;
border-radius: 50%;
background: #ccc;
}
.slick-dots .slick-active button{
background: #333;
}
@media screen and (min-width: 740px) {
.slider .slick-slide {
margin: 0 15px;
}
.slick-prev {
left: -3%;
}
.slick-next {
right: -3%;
}
.slick-dots {
margin: 25px 0 25px 0;
}
}
@media screen and (min-width: 1250px) {
.slick-prev {
left: -2%;
}
.slick-next {
right: -2%;
}
}あとは、見出し、カテゴリー、サムネイルなどのスタイルをCSSで整えて完成です。
デフォルトの投稿は、表示方法が異なります。
デフォルトの投稿（post）とカスタム投稿タイプは表示するコードが異なります。設計時に、まとめて表示する可能性のあるものは、投稿タイプをまとめましょう。
サムネイルの比率に注意
今回のDEMOでは、投稿タイプによってサムネイルの比率が違うため、BLOGのサムネイルが切れています。複数投稿タイプ一覧表示を考える場合、サムネイルの比率を合わせたり、比率に関係ないサムネイルデザインにしましょう。
以上で、今回の説明は終了です。投稿タイプが複数ある場合、新着情報がトップにあると便利ですね。最新の投稿にNEWマークを付けて、目をひくデザインにすることもできます。
