【Cocoon】AMP で画像拡大表示のライトボックスを実装する方法

Akira

福岡在住の Web デザイナー。Web サイト制作に役立つ情報を紹介しています。AMP が大好き。

FacebookTwitter で記事の更新をお知らせしています。

Cocoon 1.1.8 で amp-image-lightbox が実装されたため、カスタマイズは不要になりました。また、当記事をもとにカスタマイズをされた場合は、カスタマイズ箇所を削除し、Cocoon 親テーマをアップデートされることを強くおすすめします。Cocoon での設定方法は、「AMP ページの画像拡大効果の Lightbox・ギャラリー表示について」をご参考ください。

WordPress テーマ「Cocoon」の AMP ページに、画像の拡大表示を実装する方法の紹介です。

基本的に 3 ステップ、かつ 100% コピペでカスタマイズは完了します。

動作

今回のカスタマイズは、AMP ページで画像をクリックすると拡大表示するものです。

画像をクリックすると、ページを移動せず、コンテンツを覆うように拡大します。また、背景は暗くなります。

その暗い背景をクリック・タップをすると、元に戻ります。

多くのサイトが導入している Lightbox とほぼ同じ動作です。ただし、スライドショーの機能はありません。

拡大対象の画像

今回のカスタマイズで拡大可能になる画像は、URL に wp-content/uploads が含まれた <a> タグで囲まれ、さらに <p> タグで囲まれた <amp-img> です。

<p>
  <a href="サイトURL/wp-content/uploads/〜">
    <amp-img src="#" alt="" width="" height="" layout=""></amp-img>
  </a>
</p>

想定しているのは、「メディアを追加」から「リンク先」を「メディアファイル」で埋め込んだ投稿本文内の画像です。

対象を制限しているのは、アフィリエイトバナーなどの画像が拡大すると意図しない動作になるためです。

それでは、実装方法を説明します。

amp-image-lightbox ライブラリの読み込み

AMP での画像拡大には、AMP コンポーネントの amp-image-lightbox を使用します。

まず行うことは、amp-image-lightbox ライブラリの読み込みです。

子テーマの tmp-user/amp-head-insert.php に、下記の <script> タグを追加します。

<script async custom-element="amp-image-lightbox" src="https://cdn.ampproject.org/v0/amp-image-lightbox-0.1.js"></script>

amp-image-lightbox タグの設置

次に、<amp-image-lightbox> タグを設置します。

子テーマの tmp-user/amp-footer-insert.php に、下記の <amp-image-lightbox> タグを追加します。

<amp-image-lightbox id="amp-lightbox" layout="nodisplay"></amp-image-lightbox>

amp-img の置換

amp-image-lightbox は、<amp-img> タグに必要な属性を追加することで動作します。

子テーマの functions.php に下記のコードを追加し、必要な属性を追加する置換処理をします。

// 独自の AMP 用へのコンテンツ置換
function my_convert_content_for_amp( $the_content ) {
  if ( ! is_amp() ) {
    return $the_content;
  }
  
  // amp-img を amp-image-lightbox 用に置換
  $pattern     = '/<p><a href="[^"]+?\/wp-content\/uploads.+?"><amp-img(.+?)><\/a><\/p>/i';
  $append      = '<p><amp-img on="tap:amp-lightbox" role="button" tabindex="0"$1></p>';
  $the_content = preg_replace( $pattern, $append, $the_content );
  
  return $the_content;
}

// AMP 化処理
function html_ampfy_call_back( $html ) {
  if ( is_admin() ) {
    return $html;
  }
  
  if ( !is_amp() ) {
    return $html;
  }
  
  global $post;
  
  $transient_id    = TRANSIENT_AMP_PREFIX.$post->ID;
  $transient_file  = get_theme_amp_cache_dir().$transient_id;
  $file_path_cache = get_transient( $transient_id );
  
  if ( $file_path_cache && DEBUG_CACHE_ENABLE ) {
    if ( file_exists( $transient_file ) ) {
      $html_cache = get_file_contents( $transient_file );
      if ( $html_cache ) {
        return $html_cache;
      }
    }
  }
  
  $head_tag = null;
  $body_tag = null;
  $style_amp_custom_tag = null;
  
  if ( preg_match( '{<!doctype html>.+</head>}is', $html, $m ) ) {
    if ( isset( $m[0] ) ) {
      $head_tag = $m[0];
    }
  }
  
  if ( preg_match( '{<body .+</html>}is', $html, $m ) ) {
    if ( isset( $m[0] ) ) {
      $body_tag = $m[0];
    }
  }
  
  if ( preg_match( '{<style amp-custom>.+</style>}is', $head_tag, $m ) ) {
    if ( isset( $m[0] ) ) {
      $default_style_amp_custom_tag = $m[0];
      $dieted_style_amp_custom_tag  = get_dieted_amp_css_tag( $default_style_amp_custom_tag, $body_tag );
      
      $head_tag = str_replace( $default_style_amp_custom_tag, $dieted_style_amp_custom_tag, $head_tag );
    }
  }
  
  if ( $head_tag && $body_tag ) {
    $body_tag = convert_content_for_amp( $body_tag );
    // 独自の置換処理で body タグ内を AMP 化
    $body_tag = my_convert_content_for_amp( $body_tag );
    $html_all = $head_tag . $body_tag;
    
    $is_include_body = includes_string( $html_all, '</body>' );
    if ( $is_include_body && DEBUG_CACHE_ENABLE ) {
      set_transient( $transient_id, $transient_file, DAY_IN_SECONDS * 1 );
      put_file_contents( $transient_file, $html_all );
    }
    
    return $html_all;
  }
  
  return $html;
}

amp-image-lightbox の動作に必要な属性を追加しつつ、<amp-img> の親要素の <a> タグを削除しています。これは、画像が <a> タグで囲まれていると、amp-image-lightbox が動作しないためです。

これで、基本的な実装は完了です。

尚、amp-image-lightbox はキャプションを表示できますが、今回の置換処理はキャプションは考慮していません。

function.php に追加するコードの注意点

function.php に追加するコードには、注意点が 1 つあります。

それは、親テーマの lib/amp.php で定義してある html_ampfy_call_back() 関数を使っていることです。

今後の Cocoon のアップデートで html_ampfy_call_back() 関数が変更された場合は、ご自身で変更に対応しなければなりません。

ご自身での対応に不安がある場合は、今回のカスタマイズはおすすめしません。

必要であれば CSS を指定

amp-image-lightbox は、基本的に CSS の指定は不要です。

ただ、必要に応じて、子テーマの amp.css に CSS を指定します。

マウスカーソルの形状

マウスポインターが画像の上にある時に、マウスカーソルの形状が変化すると、瞬時に拡大が可能だと分かります。

下記の CSS の指定で、マウスカーソルの形状が + アイコン付きの虫眼鏡に変化します。

amp-img[role=button] {
  cursor: zoom-in;
}
ホバーで虫眼鏡を確認

拡大時の背景色

画像拡大時の黒い背景色は変更できます。

初期値は下記のとおりです。必要であれば、background の値を変更します。

amp-image-lightbox {
  background: rgba(0, 0, 0, .95);
}

z-index

<amp-image-lightbox> タグには、自動的に CSS の z-index: 1000; が指定されます。

この値より大きな z-index を指定した要素は、拡大時の画像に被ってしまいます。被る要素がある場合は、下記のように値を変更します。

amp-image-lightbox {
  z-index: 199999;
}

コメント

  1. Akira 様

    はじめまして大西みなみと申します。
    cocoonの画像拡大についての記事を読ませていただきました。
    私は、ワードプレスの知識もほとんどなく、最近cocoonを使いはじめました。
    記事の内容は、私にとって呪文のように何も理解できません。
    cocoon設定のAMP内の内容ですら何がなんだか?
    私の様な無知識な人間でも画像の拡大がcocoonで出来るように設定方法をご説明いただけませんでしょうか。宜しくお願い致します。

    • Cocoon 公式サイトの「AMPページの画像拡大効果のLightbox・ギャラリー表示について」がご参考になると思います。

      WordPress 管理画面 → Cocoon 設定 → AMP → 「画像の拡大効果」で、「AMP Lightbox(単一拡大)」か「AMPギャラリー(複数画像ギャラリー表示対応)」のどちらかを設定されると画像の拡大ができます。この記事で説明しているのは、「AMP Lightbox(単一拡大)」の方です。

      ちなみに、AMP ページではなく通常のページで画像を拡大するには、WordPress 管理画面 → Cocoon 設定 → 画像 → 「画像の拡大効果」で、「baguetteBox(スマホ向け)」「Lity(単機能・軽量)」「Lightbox」のどれかを選びます。どれを選べばいいのか分からない場合は、こんな風にお考えになるといいように思えます。

      • 「AMP Lightbox(単一拡大)」を選んだ時は、「Lity(単機能・軽量)」がおすすめ
      • 「AMPギャラリー(複数画像ギャラリー表示対応)」を選んだ時は、「baguetteBox(スマホ向け)」か「Lightbox」がおすすめ
      • 「baguetteBox(スマホ向け)」か「Lightbox」で迷った時は、個人的に「baguetteBox(スマホ向け)」がおすすめ
  2. 初めまして!
    gifのような画像展開の動きにしたくいろいろ調べていたところ、
    こちらにお邪魔しました。

    冒頭の「AMPページの画像拡大効果のLightbox・ギャラリー表示について」
    で設定をしてみたのですが、cocoon設定の「画像」の設定が反映されております。

    AMPというのはスマホなどで開いたページでしょうか。
    スマホページでも同じ状況です。

    無知な質問で申し訳ございませんがご教示お願いします。

    • おそらく、AMP ページではなく通常ページをご覧になっているために、Cocoon 設定の「画像」の設定が反映されているのだと思います。

      AMP に対応しているサイトの多くで、1 つのページにつき通常ページと AMP ページと 2 つのページが存在します。Cocoon も、このタイプです。

      Cocoon の AMP 機能を有効にしていらっしゃるのなら、ページ URL の末尾に ?amp=1 を加えると AMP ページを確認できます。

      例えば、https://example.com/sample/ というページ URL であれば、https://example.com/sample/?amp=1 です。詳しくは、下記のページの「AMP対応後の動作」がご参考になると思います。

      テーマをAMP対応する方法

      また、スマホの検索結果からでも AMP ページにアクセスできるはずです。AMP ページにアクセスされると、Cocoon 設定の「AMP」タブで設定した拡大効果を確認できるように思えます。

      尚、Cocoon 設定の「AMP」タブにある「画像の拡大効果」の「AMP Lightbox(単一拡大)」が、この記事に書いている画像拡大効果です。

      可能であれば、Cocoon 設定の「画像」タブにある「画像の拡大効果」は、「Lity(単機能・軽量)」をお選びになるのがおすすめです(こちらの設定は通常ページの画像拡大のもの)。「AMP Lightbox(単一拡大)」と「Lity(単機能・軽量)」は拡大効果が似ているので、通常ページと AMP ページを似せることができます。

  3. ご連絡ありがとうございます。
    Cocoon 設定
    画像-Lity(単機能・軽量)
    AMP-AMP Lightbox(単一拡大)
    に設定しました。

    URLの最後に「?amp=1」を記入したらおそらくAMPになったのでしょうか。
    画像が少し小さくなりました。
    ですが、開き方は「画像-Lity(単機能・軽量)」と同じ別ページをひらく感じです。

    画像系のプラグインは何も入れてない(むしろプラグインを全て無効にして試している)
    ですが反映されないようです。
    どうしてでしょう・・・

    話題は少しずれて根本的な質問をしてしまいます。
    「AMP」というのは表示を早くできるというメリットがあるようなのですが、
    毎回「?amp=1」と付け足さないと開かないのでしょうか。

    また、私のサイトでは「AMP」で開いたら画像が半分くらいに小さくなっていました。
    これは正常なのでしょうか。

    初歩的な質問ばかりで申し訳ございません。
    お知恵をお貸しください。

    • 開き方は「画像-Lity(単機能・軽量)」と同じ別ページをひらく感じです。

      画像を挿入される際に、「リンク先」を「メディアファイル」にされているでしょうか?「メディアファイル」以外では、通常ページの「Lity」も AMP ページの「AMP Lightbox」も動きません。

      毎回「?amp=1」と付け足さないと開かないのでしょうか。

      PC で AMP ページをご覧になる場合は、基本的に付け足す必要があります。または、Cocoon 設定の「管理者画面」タブにある「管理者パネルの表示」を「表示しない」以外に設定すると、サイトの下部に「AMPページへ」のリンクが出てきます。このリンクから AMP ページを開けます。

      ※「管理者パネル」は、管理者にしか表示されません(一般のユーザーには見えない)。

      スマホの場合には、検索結果からも AMP ページを開けます(PC の検索結果からは開けません)。

      例えば、スマホで Cocoon と検索すると、1 番上に Cocoon 公式サイトが出てきます。そして、Cocoon 公式サイトの URL の横には、雷マークが付いています。この雷マークは、AMP ページの証です。つまり、スマホの検索結果で出てくる Cocoon 公式サイトは AMP ページです。

      ※雷マークは、AMP 公式サイトのロゴと同じです。

      ひよこさんのサイトも雷マークが付いているはずですので、「?amp=1」を付けずともスマホの検索結果から AMP ページを確認できます。

      私のサイトでは「AMP」で開いたら画像が半分くらいに小さくなっていました。これは正常なのでしょうか。

      正常ではありません。何かしらの原因があって、小さくなっています。

      ただ、実際にサイトを拝見しないと、原因も解決方法も分かりません。サイト URL をご提示いただければ、少し時間がかかるかもしれませんが確認します。また、画像が拡大しない原因もサイトを拝見すると分かると思います。

  4. ご返信ありがとうございます!

    ①「リンク先」は全て「メディアファイル」になっていました。

    ②Cocoon 設定での開き方、ありがとうございます。全然知りませんでした!

    スマホで「Cocoon」と検索したときの雷マーク発見しました。
    そこで自分のサイトを同じようにスマホで調べてみたところ、
    雷マークがなかったです。

    「AMP」タブの「AMP機能を有効化する」はチェックはいっている状態ですが、
    これだけでは雷マークが出ないのでしょうか。
    念のためプラグインも全て無効にしてみましたが変化なしでした。

    ③画像が半分しか表示されなかったのもAMPに設定できていない状態(雷マークが無い状態)
    だったからかもしれません。

    何から何まで申し訳ございません。
    今は一時的に画像を「Lightbox」に変更しております。

    お手すきの時でかまいませんのでご確認よろしいでしょうか。
    何から何まで申し訳ございません。

    エスの日常
    https://es-flames.tokyo/

    • ひよこさんからコメントを頂いたことで、Cocoon の不具合が見つかりました。

      AMP で画像が拡大しないのも、「Lity(単機能・軽量)」で画像が拡大しないのも Cocoon の不具合です。

      この不具合は、Cocoon フォーラムに報告いたしました。わいひらさんが修正されると思います。ただ、Lity の不具合は厄介でして、すぐに修正されるかは分かりません。

      画像拡大の不具合

      「画像が半分くらいに小さくなる」症状は、原因が分かりませんでした。申し訳ありません。

      直接的な原因は、画像の幅と高さを取得できていないことです。けれど、なぜ幅と高さを取得できないのかが分かりません。怪しいのはプラグインです。

      通常は、画像の src 属性に、こんな画像の URL が指定されます。

      サイトURL/wp-content/uploads/年/月/画像のファイル名.jpg

      一方、ひよこさんのサイトでは、画像の src 属性にサイトURL/wp-contentがない URL が指定されています。

      /uploads/年/月/画像のファイル名.jpg

      これがちょっと怪しいので、サイトURL/wp-content を省略するプラグインを一旦停止されるとどうなるでしょうか。例えば、「WP Fastest Cache」が該当するかもしれません。また、プラグインの停止後は、Cocoon 設定の「キャッシュ削除」にある「AMPキャッシュの削除」が必要かもしれません。あるいは、プラグインを停止せずに、とりあえず「AMPキャッシュの削除」をお試しになるのもいいかもしれません。

      解決しない時は、Cocoon フォーラムへのご質問をおすすめします。

      ※雷マークが出ない

      申し訳ありません。例が悪かったです。サイト名ではなく、記事名で検索されると雷マークが出ると思います。

      というのも、Cocoon の AMP 機能は、投稿ページと固定ページが対象です。Cocoon のトップページは固定ページで作られており、AMP ページなので雷マークが出ます。ひよこさんのトップページは一覧ページなので AMP ページではなく、トップページでは雷マークが出ません。

  5. お忙しい中、検証ありがとうございました!

    不具合報告ありがとうございました。
    不具合だったんですね・・・
    内容を拝見しても難しすぎてわかりませんでした^^;

    画像URLなんですが、どこかのサイトで「ドメインを変えたときに面倒なので画像フォルダごとルートに置くと便利」的なことが書いてあったので、手動で移動してURLも一括変換かけたのですが、それがまずかったのでしょうか・・・
    余計なことしてしまった。

    それが原因か、AMPで表示したときに画像サイズ(ヘッダー画像も)が変なサイズになっておりました。(初めてAMP表示にしたのでいつからなのか不明)

    雷マークの件、理解力が低くて申し訳ございませんでした。
    Cocoon は固定ページ、私のは一覧ページ
    どこがAMPに対応するかさえわかっておらずご迷惑をおかけしました。

    • Cocoon のコードを見てみると、AMP で画像が小さくなるのは画像フォルダを移動されたのが原因でした。

      Gutenberg エディターをお使いの場合は、uploads フォルダが wp-content フォルダの下の階層(wp-content/uploads)にないと、画像が小さくなる仕様です(正確には幅も高さも 300px になる)。
      実際にひよこさんのサイト環境で試さないと確信できませんが、旧エディターで記事を作成されると画像は小さくならない気がします。

      ただ、すでに AMP を無効にされたようですが、無効にするのが手っ取り早い解決方法だと思います。
      Cocoon 設定の「高速化」の項目を全て有効にすると、サイトはかなり速くなります。
      AMP を有効にせずとも Cocoon は速いテーマですので、無理をされてまで AMP を有効にする必要はないように思えます。

      画像拡大の不具合は、すでにわいひらさんが修正に入られています。
      おそらく、次の Cocoon のアップデートで修正がなされると思います。

      野方ホープの記事を拝見して、1 時なのにすごくラーメンを食べたいです。

  6. ありがとうございます。

    >(wp-content/uploads)にないと、画像が小さくなる仕様です
    そうとも知らずやっちゃいました…
    なんか悔しいので元の場所に戻します!!
    なんとなく覚えたてのAMPを使ってみたいので…

    ラーメンありがとうございます
    夜食べたくなりますよね(ノ∀`)

送信に失敗しました

ボットと判定された可能性があります。

大変お手数をおかけしますが、以下の内容をご確認の上、再度のコメントの送信をお願い申し上げます。