// [1] wpQueryでループ
<?php
$args = array(
'post_type' => 'side_ranking',
'order' => 'ASC',
'posts_per_page' => 5,
);
$top_news = new WP_Query( $args );
if($top_news->have_posts()): while($top_news->have_posts()): $top_news->the_post();
?>
// [2] ACF 投稿オブジェクトの宣言
<?php
// 投稿オブジェクトの取得の宣言
$post_objects = get_field('sidebar_ranking'); if( $post_objects ):
?>
// [3] あとは普通にループを書く
<li>
<a href="<?php echo get_permalink($post_objects->ID);?>">
<div class="left">
<div class="img"
style="background-image: url(
<?php if ( has_post_thumbnail($post_objects->ID)): //アイキャッチ画像があれば ?>
<?php //アイキャッチ画像の取得
$thumbnail_id = get_post_thumbnail_id($post_objects->ID);
$image = wp_get_attachment_image_src($thumbnail_id,'st_thumb_1x');
$src = $image[0]; // URL
echo ''.$src.'';
?>
<?php else: ?>
/wp/wp-content/themes/テーマ名/assets/img/common/noimg.svg
<?php endif; ?>
);"></div>
</div>
<div class="right">
<span class="ranking-text"></span>
<h3 class="ranking-ttl">
<?php echo get_the_title($post_objects->ID); ?>
</h3>
</div>
</a>
</li>
<?php endif; ?>
<?php endwhile; endif; wp_reset_postdata(); ?>
// cssで2行 + ……を表示
<style>
.ranking-ttl {
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
</style>
コメントを残す