WordPressのカスタマイズ方法やプラグインレビューを中心に、パソコン/動物/植物のことなどを紹介するホームページです

【WordPress】AMP対応したページ本文にnextpageタグがあると、以降の内容が出力されない現象と簡易的な対処方法

公開日:2020(令和2)年2月7日/最終更新日:

AMP対応できているときの画面



【景品表示法に基づく表記】ページ内のコンテンツには、商品プロモーションが含まれています

WordPressで標準的なテーマを使用している場合、本文内に

<!--nextpage-->

というタグを挿入することで、ページが分割され、ページ番号が本文下に表示されるようになっているのは多分どなたでもご存知でしょう。

このタグは通常のコメントタグと区別するため、以下のように余分なスペースがあると普通にソース内のコメントとして処理され、ページ分割が効かないのでご注意を!

<!-- nextpage -->

ページ分割を私はほとんど使わないので今まで気にしていませんでしたが、どうやらテーマによって、また、AMP対応させるためのプラグインによってはこのタグ以降の本文の内容が出力されない(表示されない)ことがあるようです。

このサイトの記事もAMP対応、しかも自力で行っているのはいつも読んでくださっている方ならご存知かと思いますが、自力AMP対応のために作ったテストサイトでページ分割させてみたところ、今回の現象を発見しました。

AMP対応をテーマの機能任せにしている方、プラグインを使って対応している方、ひょっとすると同じ現象が起こっているかもしれませんのでチェックをお勧めします(SEO云々というよりも、訪問した方に対して尻切れトンボな記事になってしまう可能性があります・・)。

もしも同じ現象があるようでしたら、テーマやプラグインのソースとにらめっこしなくても解消できる方法がありますので、紹介しておきます。

AMP対応したページ本文のnextpageタグ以降の内容が表示されない場合の対処

パソコンの場合だと、ずーーーっと続く長い文章は分割した方が読みやすい場合も多いのかも知れませんが、スマホの場合はスクロールして読み進めることが多いと思いますので特に分割する必要なし!と判断して、AMP対応ページの場合はnextpageタグを無効にして、すべての内容を表示するようにする方法を紹介します。

カスタマイズする内容は以下の大きく2つになります。どちらが欠けても動作しませんのでご注意ください。

AMP対応ページかどうかを判断させる

こちらの説明の方が難しいですが・・・がんばります。通常AMP対応テーマやAMP対応プラグインではAMP対応ページかどうかの判断をさせるコードがどこかに書かれています。

そして、AMP対応ページは通常ページのURLの末尾に「?amp=1」や「amp」といったパラメーターと呼ばれる付随文字列が追加されています。

次のコードはAMP対応ページと判断し、プログラム上の動作条件に「is_amp」というのがあったらAMP対応ページの場合のみそのコードを適用しなさいという判断基準を示すものです

// AMPページの判断
function is_amp() {
if(isset($_GET['amp']) && $_GET['amp'] == 1){
return true;
} else {
return false;
}
}

これをまずはテーマのfunctions.phpへ追加して保存してみてください。もしも既にこのコードが存在する場合にはエラーが出ますので削除して保存してください。
※WordPressの最近のバージョンではコード(関数)の重複やエラーがあった場合にはロールバック(保存していない状態にする)が効きますが、古いバージョンでは真っ白な画面になってその後の操作ができなくなりますのでご注意ください

AMP対応ページだった場合、nextpageタグを無視して全文表示させる

//AMPの場合にページ分割を無効にする(nextpageタグを削除する)
function habt_no_pageing_hook( $post ) {
global $pages, $multipage, $numpages;
if ( is_amp() ) {
$multipage = 0;
$content = str_replace("\n<!--nextpage-->\n", '<!--nextpage-->', $post->post_content);
$content = str_replace("\n<!--nextpage-->", '<!--nextpage-->', $content);
$content = str_replace("<!--nextpage-->\n", '<!--nextpage-->', $content);
$pages = array( str_replace('<!--nextpage-->', '', $content) );
$numpages = 1;
}
}
add_action( 'the_post', 'habt_no_pageing_hook' );

超簡潔にコード説明すると、先ほど追加したis_ampに合致するページの場合(つまりamp対応ページの場合)、nextpageタグがないかどうかを探し、もしもあれば無視(削除)しなさいというものになります。

ちなみにAMPにはamp-nextpageというタグが用意されていて
<amp-nextpage>~</amp-nextpage>の間に書かれているものが次のページの内容という風にできるようですが、これを本文内のnextpageタグに対して正規表現で置き換えるのは至難の業(終わりを判断して終了タグを挿入するのが特に難しいでしょう)ですし、何より前述したようにだらーーっと読まれることが多いのですから無理にこのタグを使う必要はないと思います。

著:清水 由規, 著:清水 久美子, 著:鈴木 力哉, 著:西岡 由美, 読み手:星野 邦敏, 読み手:吉田 裕介
¥2,889 (2024/02/08 17:07時点 | Amazon調べ)