![](https://cxg-design.jp/wp-content/uploads/2024/06/noloppslide_thumb02.png)
ACFの関係フィールドで、関連投稿をslickのループ無しカルーセルで表示
当BLOGやDEMO等では、関連のある投稿を、RECOMMENDで表示しています。これは、ACFの関係フィールドを使用しています。今回は、ACFの関係フィールドで、関連投稿をslickのループ無しカルーセルで表示する方法を紹介します。
![](https://cxg-design.jp/wp-content/uploads/2024/05/b05b261c03acb899e3af8c939828b627.png)
出典 : slick
今回のDEMOは、DEMOの関連一覧です。
8つの投稿をカルーセルで表示しています。ループされず、最初と最後の投稿が表示される時、矢印が非表示になります。キャプションは、抜粋に入力しています。
ACF設定
フィールドタイプは、関係です。フィールドラベルに編集画面に表示する名前、フィールド名にPHPに記入する名前を設定します。投稿タイプでフィルターは、DEMOに設定します。投稿ステータスで絞り込むは、公開済みに設定します。フィルターは、検索、タクソノミーにチェックを入れます。戻り値の形式は、投稿オブジェクトです。
![](https://cxg-design.jp/wp-content/uploads/2024/06/180fcca3acceba19ed320b1b02f3b416.png)
フィールドタイプは、関係
コード
シングルページループ内に下記コードを入力します。
<div class="noloop_carousel">
<ul class="noloopslider fade-in fade-in-up">
<?php $acf_post_objects = get_field('nholoop_connection'); if( $acf_post_objects ): ?>
<?php foreach( $acf_post_objects as $post): ?>
<?php 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_large'); ?>
<?php endif; ?>
</a>
</div>
<div class="detail-link">
<div class="post-category">
<?php
$terms = get_the_terms($post->ID, 'demo-cat');
if ($terms) :
foreach ($terms as $term) {
echo '<a href="' . get_term_link($term) . '">' . $term->name . '</a>';
}
endif;
?>
</div>
</div>
<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 wp_reset_postdata(); ?>
<?php endif; ?>
</ul>
</div>
jQueryとslickを読み込みます。新たにJavaScriptファイルを作成し、下記コードを入力し、読み込みます。
$('.noloopslider').slick({
autoplay: false,
infinite: false,
slidesToShow: 4,
slidesToScroll: 1,
prevArrow: '<div class="slick-prev"></div>',
nextArrow: '<div class="slick-next"></div>',
dots: false,
responsive: [
{
breakpoint: 1250,
settings: {
slidesToShow: 3,
slidesToScroll: 1,
}
},
{
breakpoint: 740,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
}
}
]
});
CSSでスタイルを整えます。
.noloop_carousel {
padding: 10em 0;
margin: auto;
width: 80%;
max-width: 1700px;
}
.noloopslider {
width: 100%;
margin: 0 auto;
}
.noloopslider .slick-slide {
margin: 0 10px;
}
.noloopslider .slick-prev,
.noloopslider .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;
}
.noloopslider .news .title{
text-align: left ;
font-size: 1.5em ;
padding: 0.2em 0 0.5em;
margin: 0 ;
}
.noloopslider .news-text {
padding: 0 ;
}
.noloopslider .about-news-icon {
width:100%;
height:120px;
overflow: hidden;
float:left;
margin-right:20px;
object-position:50% 50%;
margin-bottom:12px;
border-radius: 5px;
will-change: transform;
}
.noloopslider .slick-prev {
left: -20px;
transform: rotate(-135deg);
}
.noloopslider .slick-next {
right: -20px;
transform: rotate(45deg);
}
.about-news-icon {
}
.noloopslider .about-news-icon img {
width: 100%;
height: 100%;
object-fit: cover;
}
.noloopslider .news .post-category {
font-weight: 400;
font-style: italic;
float: left;
font-size: 1.2rem;
padding-left: 7px;
padding-right: 7px;
padding-top: 4px;
margin-right: 1rem;
border:solid 1px #272727;
border-radius: 5px;
}
.zoomIn img {
transform: scale(1);
transition: .3s ease-in-out;
}
.zoomIn a:hover img {
transform: scale(1.2);
}
.slick-disabled {
visibility: hidden;
}
@media screen and (min-width: 740px) {
.noloopslider .about-news-icon {
height: 150px ;
}
}
@media screen and (min-width: 1250px) {
.noloopslider .about-news-icon {
height: 220px ;
}
}
設置
ACFノーループカルーセルのフィールドが作成されます。左のセレクターに、DEMOのタイトルが表示されるので、ACF POPUPをクリックします。右のBOXに表示されるので、これで1つ設置完了です。同じように、他、7つの投稿も設置します。
![](https://cxg-design.jp/wp-content/uploads/2024/06/edb80726bf20af3773d53a84b53dc0a0.png)
ACF POPUPをクリック
![](https://cxg-design.jp/wp-content/uploads/2024/06/ef6813d59a0dea8f3b0f492f17ea5280.png)
右のBOXに表示されるので、これで1つ設置完了
![](https://cxg-design.jp/wp-content/uploads/2024/06/e063773f1f51554ac5f8ca31dcdab611.png)
他、7つの投稿も設置
補足として、今回のACF設定では、タクソノミーを選択のセレクターからタクソノミーでソートすることが出来ます。また、検索BOXにキーワードを入力し、検索することもできます。
![](https://cxg-design.jp/wp-content/uploads/2024/06/9faf14a0ad03caaa1a00da9d090e76fe.png)
タクソノミーを選択のセレクターからタクソノミーでソート
![](https://cxg-design.jp/wp-content/uploads/2024/06/c8d8e4a97b7e10768078d35815da3a9d.png)
検索BOXにキーワードを入力
以上で、今回の説明は終了です。関連記事も、カルーセルにすると、コンパクトに表示できます。また、記事によって、関連記事数を変えても、デザイン的に崩れないので便利です。