【AMP】コピペOK！関連記事をプラグインなしで簡単に表示させる

2018年6月18日2019年7月3日

AMPページにプラグインなしで簡単に関連記事を表示させることができる。

1. 【AMP】プラグインなしで関連記事を表示させる
- 1.1. CSSで整える
2. AMPページの直帰率を下げる

【AMP】プラグインなしで関連記事を表示させる

/amp/single.phpなど、関連記事を表示させたい任意のampページに以下のコードを記述。

<!-- AMP関連記事 -->
<div class="amp-related">
<h3>Related Posts</h3>
<ul>
<?php
$categories = get_the_category($post->ID);
$category_ID = array();
foreach($categories as $category):
array_push( $category_ID, $category -> cat_ID);
endforeach ;
$args = array(
'post__not_in' => array($post -> ID),
'posts_per_page'=> 5,
'category__in' => $category_ID,
'orderby' => 'rand',
);
$query = new WP_Query($args); ?>
<?php if( $query -> have_posts() ): ?>
<?php while ($query -> have_posts()) : $query -> the_post(); ?>

<li>
<?php if ( has_post_thumbnail() ): ?>
<?php
$image_id = get_post_thumbnail_id();
$image_url = wp_get_attachment_image_src($image_id, 'thumbnail',true);
?>
<a href="<?php the_permalink(); ?>"><amp-img src="<?php echo $image_url[0]; ?>" width="80" height="80" class="list-amp-img"></amp-img></a>

<?php else: ?>
<a href="<?php the_permalink(); ?>"><amp-img src="<?php echo get_template_directory_uri(); ?>/images/nopic.png" width="80" height="80" class="list-amp-img" ></amp-img></a>
<?php endif; ?>

<a class="amp-rerated-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</li>
<?php endwhile; ?>
<?php endif; ?>
</ul>
</div><!-- AMP関連記事ここまで -->

CSSで整える

/amp/style.phpでデザインを整える。

/* AMP関連記事 */
.amp-related {margin: 40px 0;}
.amp-related ul {margin: 0;}
.amp-related ul li {margin-bottom: 15px; border-bottom: 3px solid #e4e4e4; list-style: none; clear: both; display: flex;}
.amp-related ul li a {color: #333; text-decoration: none; font-weight:normal;}
.amp-rerated-title {margin-bottom: 5px;}
.amp-related .list-amp-img {margin-right: 10px; margin-bottom: 5px;}