AMPページと通常ページとで要素ごとに表示を分岐させる方法 ~ WordPress条件分岐 ~

最適なユーザビリティを

 

こちらの記事では「この画像だけAMPページでは表示させたくない」や「AMPページだけではこっちの画像を使いたい」など、投稿ページ内における通常ページとAMPページで要素ごとに表示非表示の分岐をさせる方法を紹介します。当記事の方法ではプラグインは使用せずにphpのみでの制御方法となりますので、プラグインを使用するよりも動作も軽快となることが期待されます。

サイトやページ自体をAMP対応させる方法ではございませんのでご注意ください。

当サイト内にある別記事(WordPress条件分岐 ~ PC表示とモバイル表示を条件分岐で制御する方法 ~)でも触れておりますが、PC表示とモバイル表示だけではなく、AMPページと通常ページでもユーザーにとって最適なデザイン構築を行っていくことは必須となるでしょう。

 

 


AMPとは?

誰もがコンテンツを利用しやすい環境を作るためのオープンソースの取り組みが「AMP」です。AMP では、ページの読み込みが一瞬で完了し、スムーズに表示される魅力的なウェブページを簡単に作成できるオープンソース ライブラリです。AMP では、既存のスキルセットとフレームワークを活用してウェブページを作成できます。AMP は多種多様なプラットフォームでサポートされており、各種ブラウザと互換性があります。AMP のエコシステムには、2,500 万のドメイン、100 社以上のテクノロジー プロバイダ、大手プラットフォームが含まれ、その範囲は出版、広告、e コマース、地域企業、小規模ビジネスなど多岐にわたります。

とありますが、簡単に「どのブラウザでも高速表示が可能なページ」であるためストレスフリーなページ閲覧が可能なページがAMPと理解しておきましょう。

AMPに対応させるメリット

ウェブページの高速化によって、ユーザー エクスペリエンスや主要なビジネスの指標を改善できます。AMP ページはほぼ一瞬で読み込まれるため、あらゆる端末や、AMP ページにリンクしている各種プラットフォーム(Google、Bing、LinkedIn など)でいつでも高速なユーザー エクスペリエンスを提供できます。このような優れたパフォーマンスが、ページの滞在時間、リピート アクセス、CTR などの重要な指標の改善につながるのです。

AMP最大のメリット、それはやはりAMPに対応させることによって「検索順位に影響がある」ことです。googleが推奨している動きのため、googleによる検索では今後大きく影響出てくるのかなと思っております。また、AMPページではgoogleがキャッシュを保持してくれるため自サイトのサーバーの負荷が軽減されページを高速で表示させることができるため、ユーザビリティの向上により自サイトの集客にも繋がってくるでしょう。

 

※上記引用はAMPの公式情報ページの引用掲載です。

 

 


phpによる通常ページとAMPページの分岐

 

まず、分岐させる条件として下記の2項目がありますのでご注意ください。

1). URLパラメータ「?amp=1」でAMPページの判定をしている
2). singleページ(投稿ページ)である

AMPページのURLが「https://fragment.love/single_page/?amp=1」のように、投稿ページ(is_single関数)かつURLのパラメーターに「/?amp=1」がある場合に使える判別関数です。

functions.phpにコードを挿入

お使いのテーマに子テーマがある場合は、必ず子テーマへの挿入をお願いします。下記のコードはAMPページの判別をする関数として「is_amp()」 を定義して作成されているものです。

 

//通常ページとAMPページで表示を分岐させる

//AMPページ
function add_amp_page($str, $amp_str = null) {

//文字列に含まれているショートコードを展開する
$amp_str = do_shortcode($amp_str);

//ページがAMPページか判別する関数に渡して判別
if(is_amp()){
//AMPページならAMP用の文字列を返却
return $amp_str;
}
//通常ページなら終了
return;

}

//AMPページ用文字列でショートコードを呼び出す
add_shortcode('add_amp', 'add_amp_page');

//通常ページ
function add_normal_page($str, $nml_str = null) {

//文字列に含まれているショートコードを展開する
$nml_str = do_shortcode($nml_str);

//ページがAMPページか判別する関数に渡して判別
if(!is_amp()){
//通常ページなら通常ページ用の文字列を返却
return $nml_str;
}
//AMPページなら終了
return;

}
//通常ページ用文字列でショートコードを呼び出す
add_shortcode('add_nml', 'add_normal_page');

//AMP判別関数
function is_amp(){
//AMPチェック
$is_amp = false;
if ( empty($_GET['amp']) ) {
return false;
}

//ampのパラメーターが1で
//singleページのみ$is_ampをtrueにする
if(is_single() &&
$_GET['amp'] === '1'
){
$is_amp = true;
}
return $is_amp;
}

// 指定したショートコード内のbrタグを空白に置換
function shortcode_br_delete($the_content) {

// ショートコードのパターンを格納
$shortcode_pattern = '/\[add_amp\].+?\[\/add_amp\]|\[add_nml\].+?\[\/add_nml\]/ims';

// 指定したショートコード内のbrタグを空白に置換
$the_content = preg_replace_callback($shortcode_pattern,
function($matches) {
$str = preg_replace('/
/ims', '', $matches[0]);
return $str;
}
, $the_content);
return $the_content;

}

// wpautop実行後、ショートコード実行前にbrタグを削除する
add_filter('the_content', 'shortcode_br_delete',10);

※上記コードは下記サイト「コピペで使える自動処理」からの引用掲載です。

 

 


ショートコードによる分岐の実装

 

上記をfunctions.phpにコピペしたら、下記のショートコードで実装が可能となります。

・[add_nml][/add_nml]で通常ページでのみ表示されるコンテンツ
・[add_amp][/add_amp]でAMPページでのみ表示されるコンテンツ

※上記の[]は全角ですので半角に直してご使用ください。

 

 


 

 

以上が通常ページとAMPページでコンテンツ表示を分岐させる方法となります。ショートコードを含めたコードは全て、下記サイトから引用したものを掲載させて頂いております。有益な情報をありがとうございます。

 

上記の他にも別な分岐方法(プラグインを使用した方法など)がたくさんあるので、自サイトに合った実装方法を探していきましょう。

また、上記の方法ではgoogleのSearchConsoleからのAMPエラー対応などに重宝します。エラーが出すぎて対応がめんどくさい場合は、AMPページだけその要素自体を消せばいい考えです。当サイトでは余計なプラグインなどを入れずにシンプルな設計を心掛けているため、当記事のようなコンテンツごとのAMP対応はあまり必要に迫られているわけではないのですが、プラグインなどを多く取り入れたり装飾の多いサイトなどでは大変役に立つ内容だと思います。

是非ご活用くださいませ。