[Wordpress] How to describe the contents displayed only in AMP (not displayed in AMP) in the text with short code

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

公開日:2020年1月28日 AMP
Knowledge Base Wordpress パソコン カスタマイズ 設定

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

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

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

  • 独自のhtmlタグに変換しなければならない
  • 画像は幅と高さ、扱い方を指定しなければならない
  • 独自のスクリプトは原則使用できない

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

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

例えば・・・

  • インスタグラムの埋め込みなど外部からの埋め込みで独自スクリプトを使っているもの
  • コンタクトフォームなど本文内にショートコードなどを入れて表示するコンテンツで独自スクリプトを使っているもの

これらは残念ながら本文内で切り分けができないので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)がシェアした投稿 –


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

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

ここに書かれている部分はパソコンまたはレスポンシブ表示時のみ表示されます
ここに書かれている部分はパソコンまたはレスポンシブ表示時のみ表示されます
ここに書かれている部分はパソコンまたはレスポンシブ表示時のみ表示されます

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

が表示され、

AMPでアクセスした時は

ここに書かれている部分はAMPのURLでアクセスした場合のみ表示されます
ここに書かれている部分はAMPのURLでアクセスした場合のみ表示されます
ここに書かれている部分はAMPのURLでアクセスした場合のみ表示されます

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

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

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

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

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

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

※「?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の場合だけ表示させる(出力させる)コンテンツ内容を書く」へAMPでアクセスされたときだけ表示されるものを書きます

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

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

というショートコードで囲み、「ここにAMPの場合は表示させない(出力させない)コンテンツ内容を書く」をAMPでない場合のみ表示されるものを書きます

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

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

【WordPress】サイトをAMP対応にするか否かの判断基準&最低限やっておきたいこと

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

【WordPress】自力での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]

で囲めばログインユーザーにだけ見せるコンテンツを作ることができます。もちろん1つの記事内に何度でも使えます。

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


あたりが有名処ですが、こんな簡単なコードでやれるなら・・・プラグインは1つ削減できますね(笑)。このプラグインでは特定の〇〇という条件が複数使えますが、このコードを応用すれば同じ機能を持たせることも可能です。

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

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


というプラグインが便利です。

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

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

で囲み、テーマのCSSへ
.amp-no-show{
display:none;
}

を追加すれば、その部分はAMPでは一切表示されないようになります。
※display-noneは見かけ上表示しないだけですから、AMPエラーとなるコンテンツがある場合にはエラーのままになりますのでご注意ください


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

ひまあーと(管理人)
  • 記事の作者: ひまあーと(管理人)

  • ☆最後までお読みいただきありがとうございました。記事作者のひまあーとです。
    ☆Wordpressでサイトをカスタマイズしていく上で有用な情報を配信しつつ、「ココナラ」でサイトカスタマイズのお手伝い、不具合の修復、サイト引っ越し代行などをさせていただいております。
    ☆Wordpressネタが多いですが、趣味の「園芸」「卓球」などの情報や日々の出来事などもどんどん増やしていきますのでよろしくお願いいたします。


いつでもご相談・サイトカスタマイズの依頼を受け付けています

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

※一度もココナラを使ったことがない方はココナラへの無料登録が必要です。こちらから登録後、上のリンクをクリックする、またはココナラトップページから「ひまあーと」を検索してお問い合わせください。


【スポンサーリンク】


記事の拡散にご協力をお願いします

閲覧いただきありがとうございました。役に立つ情報でしたら是非SNSでシェアをお願いします

関連情報