AMPページに「抜粋」と「続きを読む」ボタンの表示する方法。

AMPページだけ本文がまったく表示されない記事を発見し、対処法をいくつか考えた結果、「本文が空の時だけ、抜粋と続きを読むボタンを表示する」ことにしたんですが、通常時でも同じことをしたい方がいるかもしれないので、カスタマイズ方法をご紹介します。

AMPページの本文が空になる主な原因と効果的な対処法。

カスタマイズの概要

今回のカスタマイズの概要は以下の通り。

AMPページの時だけ、抜粋（先頭の120文字）と続きを読むボタンを表示
続きを読むボタンをタッチすると、通常のモバイルページに移動する
ナビ、広告、シェアボタン、関連記事…など、本文以外の部分はすべて表示

要は、ニュースサイトのようにするカスタマイズです。

検索→導入ページ→全文が表示されているページ…というサイトをよく見かけると思いますが、それと同じです。

カスタマイズ後の画面

コード

HTMLコードとCSSがこちら。

HTMLコード

the_content();
wp_link_pages();

の部分に下記のコードを上書き（コピペ）します。

//--本文が空の時の処理--//
$content = apply_filters( 'the_content', get_the_content() );
$content = str_replace( ']]>', ']]&gt;', $content );
$excerpt = get_post(get_the_ID())->post_content;
$excerpt = esc_html(strip_tags(str_replace(array("\r\n", "\r", "\n"), '', $excerpt)));
$excerpt = mb_strimwidth($excerpt, 0, 240, "...", "utf-8");
 echo '<p>'.$excerpt.'</p>
 <div class="to-mobile-page"><a href="'.get_the_permalink().'">続きを読む</a></div>';
//--終わり--//

CSS

<style amp-custom>内でデザインを指定します。サンプルCSSはこちら。

.to-mobile-page {
 width: 90%;
 max-width: 480px;
 clear: both;
 position: relative;
 margin: 2rem auto;
 padding: 2% 2% 2% 8%;
 background: #ff9c23;
 border-radius: 2px;
 font-size: 18px;
 line-height: 1.6;
 text-align: center;
}
.to-mobile-page:after {
 color: #fff;
 font-size: 30px;
 position: absolute;
 top: 50%;
 left: 5%;
 margin-top: -25px;
 font-family: "FontAwesome";
 content: "\f105";
}
.to-mobile-page a {
 display: block;
 color: #fff;
}