Luminous - Business Edition

Highly Flexible WordPress Theme

AMP(Accelerated Mobile Pages)表示サンプル

約 4 分
このサイトは DigiPress の AMP 表示確認用デモサイトです。
AMP モードで表示するには、スマートフォンでご覧いただくか、URL の最後に「/amp」を付けて更新してください。
Slide Image
Slide Image
Slide Image
特徴PC、モバイル、AMPテーマ搭載
動画サポートYouTube、Vimeo
価格8,980円/ライセンス

トップページヘッダースライダー

トップページのスライダーは、モバイルテーマ用のスライダー設定と連動し、対象はヘッダー画像のスライダーか指定記事または固定ページのスライダーです。

サイドメニュー&検索フォーム

AMPモードで適用される専用テーマでは、固定表示のフッターバーからサイド(グローバル)メニューとLightboxで現れるサイト内検索フォームを表示できます。
検索結果ページも、もちろんAMP化された状態で表示します。

AMPコンポーネントへの自動置換

AMPでは、iframeタグやJavascriptが禁止されているため、例えばYouTubeの埋め込みプレイヤーをはじめ、埋め込みタグを利用する各種サービスのプラグインはそのままでは利用できず、AMP用の代替タグに置き換え、さらに各サービスのウィジェットの利用に必要なAMPが提供している専用のスクリプトファイルをheadセクション内に定義する必要があります。

DigiPressのAMP制御機能では、記事本文とテキストウィジェットに設置した以下のサービスが提供している埋め込みコンテンツに対して、自動的にAMP用のコードに置換し、必要なときだけ専用のスクリプトファイルをロードし、置換するコードがないページではスクリプトは読み込まず無駄な転送量が発生しないよう設計されています。

AMP自動置換対応コンテンツ

  • YouTube埋め込みプレイヤー
  • Vimeo埋め込みプレイヤー
  • Instagramの投稿
  • Twitterの投稿
  • Facebookの投稿
  • Facebookのビデオ
  • Pinterestの投稿
  • Soundcloudの埋め込みプレイヤー
  • Googleアドセンスの広告コード
  • その他のすべてのiframeタグ → amp-iframeタグへの置換
  • imgタグ → amp-imgタグへの置換
  • videoタグ → amp-videoタグへの置換(※SSL環境が前提)
  • audioタグ → amp-audioタグへの置換(※SSL環境が前提)

投稿ページでのSNSシェアボタン

シングルページでは、テーマオプションまたは投稿オプションでSNSシェアボタンを表示するよう設定されている場合は、フッターバーの「シェア」ボタンをタップすることで、Lightboxで各SNSへのシェアボタンが前面に表示されます。

投稿ページでのコメント

AMPではform要素は専用のライブラリを読み込むことで利用できますが、SSL環境でなければならないことや、inputなどの各フォーム要素に対する細かなルールに対応させる必要があるため、現時点ではAMPモードで投稿ページからコメントするには、一旦、非AMPモード(モバイルテーマ)に遷移してコメントフォームに移動させることでコメントができるようになっています。

また、投稿済みのコメントに表示される返信リンクのコードもAMPの仕様を満たすコードに自動で置換し、返信する際は非AMPページ(モバイルテーマ)に遷移してから返信ができます。

さらに、DigiPressにはFacebookコメントを表示するオプションがありますが、AMPモードでもFacebookコメントプラグインによる埋め込みコメントフォームの表示をサポートしています。

ギャラリーショートコードの表示

WordPressのギャラリーショートコードによる画像ギャラリー表示では、自動的にインラインでCSSが挿入されてしまうため、AMPではこのCSSが出力されないようにし、ショートコードでのカラム数の指定に関係なく、常に3カラムで表示されるように設計されています。

PCテーマでの表示(4カラムの場合)

AMPモード(AMPテーマ)での表示(3カラム固定)

About The Author

DigiPress Inc.フォトグラファー兼デザイナーサマンサ・デジ
これはユーザーのプロフィール情報エリアです。
肩書きや対象ユーザーのSNSアカウントのリンク、紹介文などをWordPressのプロフィール画面から登録するだけで自動的に表示されます。

また、各プロフィール情報はMicrodata形式として出力されるため、検索エンジンにも寄稿者として認識させることができます。

Comments & Trackbacks

  • Comments ( 1 )
  • Trackbacks ( 0 )
  1. AMPコンポーネントへの自動置換テストです。

Leave A Reply

*
*
* (公開されません)

Comment On Facebook