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

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

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タグに対して正規表現で置き換えるのは至難の業(終わりを判断して終了タグを挿入するのが特に難しいでしょう)ですし、何より前述したようにだらーーっと読まれることが多いのですから無理にこのタグを使う必要はないと思います。

これからはじめる人・駆け出しのWebデザイナーに向けて シリーズ27万部以上の大ヒット! 「1冊ですべて身につく」の最新作が新登場! 今度は世界中で大人気のWordPress! この本でWebサイトが作れる!著:Mana
¥2,200 (2023/03/24 23:30時点 | Amazon調べ)
WordPressによるWebサイト制作のための,究極のレシピ集が登場。制作の現場で使われる定番テクニックからプロ技まで,余すところなく集めました。著:狩野 祐東
¥2,905 (2023/03/24 23:30時点 | Amazon調べ)
アバター画像

作者:

☆Wordpressでサイトをカスタマイズしていく上で有用な情報を配信しつつ、このサイトでも使用している【HABONE】テーマの制作と配布を行っています。

年齢:50代 趣味/園芸・ペット・卓球