【WordPress】AMPのときだけ表示する（AMPの時は表示させない）コンテンツをショートコードで本文内へ記述する方法

タイトルは簡潔かつ明瞭に・・・なんて考えに考えましたが結局長くなってしまいました（笑）。

WordPressサイトのAMP対応でSearch Consoleのエラーに立ち向かって、どうにかこうにか苦労してほとんどのコンテンツがAMP対応になった、でも・・・で最終的にたどり着くのが今回のようなケースだと思います。

苦労した方なら当然ご存知かと思いますが、AMPというのは結構要件がきつくて、

といった大原則があります。AMP対応させるためのテーマやプラグインでは正規表現での置き換えコードにより上の２つについては結構確実に変換され、特に気にして記事を書かなくても自動でAMPでもエラーが出にくいようにしてくれます（もちろん例外はありますから自身で対応すべきことも多数あります）。

でもどうにもならないものもあるんです。それが３番目の「独自のスクリプトは原則使用できない」というもの。

例えば・・・

これらは残念ながら本文内で切り分けができないのでAMPでの表示をあきらめるか、AMP対応していないページを作って遷移させるか、はたまた使わないようにするかのいずれかしかありません。が、いずれにしてもパソコン表示（通常のレスポンシブページ）では問題なく使えるわけですから、何も不便な思いをしてまでAMP対応する必要なし！！と割り切って断念される方も多いのではないでしょうか？？

でもこれが簡単なショートコードで囲むだけで、

ようにできたら・・・AMP対応への道がぐっと広がりますよね？？

今回紹介するのはこれを実装するためのコードです。すごく簡単なコードをfnuctions.phpへ追加するだけですので、上のような事態でAMP対応をあきらめよう！AMPのために何かを捨てよう！としている方はぜひ試してみてください。

AMPのときだけ表示する（AMPの時は表示させない）コンテンツをショートコードで本文内へ記述するためのショートコード

ショートコード、ショートコード．．．意味不明ですか？？こういう書き方しか思い浮かばなくてスミマセン（笑）。つまり前述したAMPの時だけ出力する文章などを独自のショートコードで囲んでしまうという手法です。

確認のため、このページをAMPと非AMPでアクセスして見て見てください
※非AMPのURLはhttps://www.momosiri.info/cms/amp-only-content/
※AMPのURLはhttps://www.momosiri.info/cms/amp-only-content/?amp=1
です。

この投稿をInstagramで見る

😍😍🙀

ひまあーと(@hima_art_cat)がシェアした投稿 – 2020年 1月月23日午後11時31分PST

・・・いかがでしょう？？？

パソコンでアクセスした時は

＋インスタグラムの埋め込み（AMPではエラーになるので文字にしてます・・）

が表示され、

AMPでアクセスした時は

と表示されますよね？今回はこれを作ろうという話です。

※もちろん画像の挿入もできますし、別のショートコードを入れて動作させることもできます。

環境によってはダメな場合もあるかも知れませんがとにかくやってみるべきでしょう。それでは進めていきますね。

AMPか非AMPかを判断させる

まずはURLが通常のページのものなのか？AMPのページのものなのかを判断させます。当サイトと同じようにURL末尾に「?amp=1」が付くパターンであれば以下のコードをテーマのfunctions.phpへ追加するだけです。

//AMP判別関数
if ( !function_exists( 'is_amp' ) ):
	function is_amp() {
		$is_amp = false;
		//URLにamp=1パラメータがあるとき$is_ampをtrueにする
		if($_GET['amp'] === '1'){
			$is_amp = true;
		}
		return $is_amp;
	}
endif;

【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー（いわゆるコピペ）してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

1. コードの中に全角の記号が入っていませんか？
半角にすることで解消できます
2. コードの中に全角の空白（スペース）がありませんか？
半角にすることで解決できます
3. コードは合っているはずなのに更新できないときは
特にエラーの出た行内に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があり、Wordpressのエディタチェックではこれを「'」や「)」など閉じ子のエラーとして認識され更新できないことがあります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。
4. 「何かが間違っています．．．」と表示され、更新できないときは
このエラーは本当に何がエラーなのかをWordpressのチェックが判断できない場合に発生します。解決策としてはその画面を開き直すことなのですが、その際希に元のコードがすべて削除されてしまう場合がありますので、今表示されているコードを一旦どこかへコピーしてからページの再読み込みをするようにしてやり直します。
※このエラーは不明なエラーなので予期せぬ動きをする可能性がありますので特に慎重な対処が必要です

これらのエラー対処については以下のページが参考になるかも知れません

Knowledge Base

【Wordpress】コードは合っているのにfunctions.phpの更新ボタンをクリックすると...

https://www.momosiri.info/cms/%E3%80%90wordpress%E3%80%91%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AF%E5%90%88%E3%81%A3%E3%81%A6%E3%81%84%E3%82%8B%E3%81%AE%E3%81%ABfunctions-php%E3%81%AE%E6%9B%B4%E6%96%B0%E3%83%9C%E3%82%BF%E3%83%B3/

コードは合っているのにfunctions.phpの更新ボタンをクリックすると「PHP Parse error: syntax error, unexpected T_STRING in…php on line．．．」が出るのはなぜ？実体験から解消方法を紹介します

コードを転載する場合には

ご自身のサイトで当ページで紹介しているコードを転載される場合には当ページへのリンクを入れていただきますようお願いいたします

※「?amp=1」を付与するパターン以外の場合は自身のパターンに合わせる必要があります
※テーマやプラグインによっては同じ名前の関数（is_amp）が既に設定されており、functions.phpの保存時にエラーが出ることがあります。その場合はコードを追加する必要はありません

この判断ができないと次の項目を設定しても機能しませんので注意ください

AMPと非AMPで出力し分けるショートコードを作る

こちらも簡単で、以下のコードを同じくテーマのfunctions.phpへ追加するだけです

AMPの場合のみ出力するコンテンツを囲むショートコード

/**********************amp-showショートコードでAMPの場合のみにコンテンツを表示**********************/
function amp_show( $atts, $content = null ) {
if(is_amp()) {
$content = do_shortcode( shortcode_unautop( $content ) ); //ショートコードの中にショートコードがあっても実行するようにするコード
return '' . $content . '';
} else {
return '';
}
}
add_shortcode('amp-show', 'amp_show');

非AMPの場合のみ出力するコンテンツを囲むショートコード

/**********************pc-showショートコードでAMPでない場合のみにコンテンツを表示**********************/
function pc_show( $atts, $content = null ) {
if(!is_amp()) {
$content = do_shortcode( shortcode_unautop( $content ) ); //ショートコードの中にショートコードがあっても実行するようにするコード
return '' . $content . '';
} else {
return '';
}
}
add_shortcode('pc-show', 'pc_show');

実際に動かしてみよう

まずはAMPの場合のみ表示させるコンテンツを作るには

[amp-show]
ここにAMPの場合だけ表示させる（出力させる）コンテンツ内容を書く
[/amp-show]

逆にAMPの場合は表示（出力）させないコンテンツを作るには

[pc-show]
ここにAMPの場合は表示させない（出力させない）コンテンツ内容を書く
[/pc-show]

当たり前の話ですが、これらで囲まないものはAMPと非AMPの両方に表示（出力）されます。

え～～ったったこれだけ～～と思われたかも知れませんが、ハイ、これだけです。

おまけ（応用）　ログインしているユーザーだけに表示させるコンテンツも作れる

ここまで紹介したコードはAMPかどうかを判断させて、それぞれに対するコンテンツの表示分けをする方法でしたが、応用すればいろいろな用途に転用できます。今回はおまけとして結構プラグインで実装されている方が多い「ログインしているユーザーだけに表示させるコンテンツ」の作成方法を紹介しておきます。

コードは

/**********************if-loginショートコードでログインユーザーのみにコンテンツを表示**********************/
function if_login( $atts, $content = null ) {
if(is_user_logged_in()) {
$content = do_shortcode( shortcode_unautop( $content ) ); //ショートコードの中にショートコードがあっても実行するようにするコード
return '' . $content . '';
} else {
return '';
}
}
add_shortcode('if-login', 'if_login');

ちなみに

[if-login]
ログインユーザーにだけ表示させるコンテンツ
[/if-login]

この方法をプラグインで実装するとすれば

Knowledge Base

 

1 tweet

投稿の中にログインしたユーザーのみが閲覧できるコンテンツを追加できるプラグイ...

https://www.momosiri.info/wppi/private-content/

【Private Content】はショートコードで囲まれた部分を未登録（未ログイン）の訪問者には非表示にできるようにするプラグイン。ページの一部分だけを表示しておいて、登録ユーザーのみ表示できるコンテンツをショートコードで囲むだけなので、簡単にプライベートコン...

おまけ　特定のプラグインをAMPの時だけ動作させないようにするには

これもおまけ情報ですが、AMPの時はエラーになるから特定のプラグインを動作させないようにしたい・・そんな場合には

Knowledge Base

 

1 user

ページごとに必要ないプラグインの読み込みを停止して表示速度を改善するためのプ...

https://www.momosiri.info/wppi/plugin-load-filter/

複数使うと表示速度に影響があるといわれるプラグイン。そのページを表示するのに必要ないプラグインは「無効になっている」ことにして読み込まないようにすればいいのでは？という発想に基づいて作られたのが、今回紹介する「plugin load filter」です。

ただし、プラグインの出力するものが停止されるだけで前後の文章などは残ってしまいますので、AMPでは出力させたくない前後の文章を

<div class=”amp-no-show”>～</div>

.amp-no-show{
display:none;
}

いかがでしたか？おまけも含め結構使える機能であり、AMP対応には欠かせないと思われる機能かと思いますので、ぜひお試しください。

このページはモバイル端末でもご覧いただけます

左のQRコードを読み取っていただくと、このページのURLが表示され、簡単にアクセスできます。ぜひモバイル端末でもご覧ください。

WordPressのカスタマイズ・不具合対応などご相談ください

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。

このサイトもついにAMP対応させました

テストサイトで行ってきたWordpressサイトのAMP対応、このサイトでも適用させました。まだインデックスされてなかったり、一部の記事でエラーが出たりしてますが、それらが終われば記事は100%爆速表示できるようになります。

サイトのAMP化後はエラーとの闘い！？

このサイトの記事をAMP対応にして数日。毎日エラー対処に明け暮れています。が、それも対応が終われば必ず100%になる！！頑張って修正しています。

【WordPress】AMP対応を解除する（AMPを無効にする）方法

AMP対応させたサイトを非AMPに戻すには？非AMPにした後どうなるのか？について分かる範囲で解説します。

【WordPress】AMPで『許可されていないタグがあります』の原因はコレだった・・

このサイトの記事をAMP対応にしてから早いもので2か月近くが経ちました。 まだまだ60%程度キャッシュされた状態ではありますが、エラーがあるとそこでキャッシュが止まるみたいで少しずつしか進んでいません（笑）。まあキャッシ...

WordPressサイトを無料で真面目にAMP化した経緯と備忘録（AMP化プラグイン使用）

Wordpressのサイトへモバイルアクセスしたときの表示が爆速になるAMP。実際設定してみたら結構面倒でした。AMP化プラグイン導入後に起きた問題や解決策を綴った備忘録です。