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

公開日 2018 年 08 月 02 日
更新日 2020 年 02 月 19 日

Akira Web デザイナー

Xでシェアする

動作

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

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

まずは、動作をご覧ください。

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

多くのサイトが導入している 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 での画像拡大には、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> タグを設置します。

子テーマの 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;
}

参考：WordPressの投稿本文をAMP化する方法

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: rgb(0 0 0 / 95%);
}

z-index

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

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

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