Amp for WordPressで直帰率を下げるために関連記事を表示する

Amp for WordPressで直帰率を下げるために関連記事を表示する

どうも、だいち(@spountant)です。

「Amp for WordPress」プラグインを実装したてのときにアナリティクスを見ると、直帰率がやけに高くなっていることに気付くはず。

これはAMP表示のときに関連記事が表示されておらず、ほとんどの読者がブログから離脱してしまっているためだ。

なのでこのページでは、AMP表示時に関連記事を表示させる方法を紹介する。

 

FileZillaでワードプレスの「テーマの編集」をいじる

まずは下準備としてFileZillaというツールを使って、ワードプレスの子テーマにAMP用のphpを追加しよう。

詳しい手順は以下の記事で解説しているので、ぜひ参考にしてみてほしい。

関連記事:FileZillaでWordPressのテーマにAMPのphpを実装する手順【図解】

 

AMP表示時に関連記事を表示させる

ではAMPに関連記事を表示させよう。

以下のコードはsakura-boxの「【AMP】コピペOK!関連記事をプラグインなしで簡単に表示させる」という記事を参考にした。

「テーマの編集」→「amp」→「single.php」の27行目から始まる<div class=”amp-wp-article-content”></div>内に以下のコードを記述する。

<!-- AMP関連記事 -->
<div class="amp-related">
<h3>関連記事</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関連記事ここまで -->

 

次に見た目を整えるために、「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;
}

これで以下のような関連記事カードができあがる。

 

ほかにもおすすめなAMPのデザイン調整

AMPでは関連記事の表示だけでなく、SNSシェアボタンや見出しのデザインを変更することもできる。

詳しくは以下の記事にまとめたので、AMPのデザインを整えたい場合はぜひご一読いただきたい。

関連記事:AMP表示におけるおすすめのデザイン変更・調整まとめ

 

URL :
TRACKBACK URL :

Warning: getimagesize(/home/spountant/wonderland02.com/public_html/wp-content/themes/dp-escena/img/json-ld/nologo.png): failed to open stream: No such file or directory in /home/spountant/wonderland02.com/public_html/wp-content/themes/dp-escena/functions.php on line 932