WordPressテーマのSimplicityにローディング画面とAMPの遷移を促す要素を表示してみた

以前、WordPressテーマの「Simplicity」に「AMP」ページへの遷移を促す要素を表示する方法をご紹介いたしました。

WordPressテーマの「Simplicity」に、「AMP」ページへの遷移を促す要素を表示してみた
以前、WordPressの「Simplicity」テーマ内に、AMPデザインテンプレートの「Simp」を導入する方法や、「Google Ad...

次はもっと自然に「AMP」ページへの遷移を促したいと思い、ローディング画面を表示してその範囲内に表示してみました。

js

ローディング画面用のjsは下記のようになります。

上記のスクリプトを「loading.js」などとしてファイルに保存し、「Simplicity2」の子テーマの「simplicity2-child」内にアップロードします。

single.php

ローディング画面はモバイルだけに表示したいので、「Simplicity2」で定義されている「<?php if (is_mobile()) :?>」でhtmlを囲みます。

適用している「AMP」は記事ページのみなので、上記のソースを「Simplicity2」の「single.php」に貼りつけます。私は「<?php get_header(); :?>」のすぐ下に貼りつけました。

mobile.css

ローディング画面はモバイルの画面サイズだけに表示したいので、子テーマの「mobile.css」で「media screen」を指定し、スタイルを記述します。

「Simplicity2」の設定で「レイアウト(全体・リスト)」にある「タブレットはモバイル表示」のチェックを入れていると、タブレットでもローディングが表示されてしまうので、子テーマの「mobile.css」内で「@media screen and」以外の場所に下記の記述をしておきます。

上記の記述をしておけば、タブレットでローディングなどが表示されることはありません。

横向きにも対応する場合

ローディング画面を横向きにも表示する場合は、メディアクエリの記述は下記のようになります。

上記は「画面の横幅が最大500px」まで、または「画面が横表示の場合」の時にスタイルが適用されます。

footer-insert.php

「Simplicity2」の子テーマ、「simplicity2-child」にある「footer-insert.php」に下記の記述をします。

「<?php if (is_mobile() && is_single()) :?>」により、モバイルかつ、「single.php(記事ページ)」のみに「loading.js」が読み込まれます。

ローディング画面から「AMP」ページへ遷移

「AMP」ページへ遷移
「AMP」ページへ遷移

モバイルで記事ページへ遷移する際にローディング画面を表示させ、AMPアイコンから「AMP」ページへ遷移します。

まとめ

  • ローディング用のjsを作り子テーマの「footer-insert.php」に読み込ませる。
  • ローディングとAMP用のcssを作り子テーマの「mobile.css」に貼りつける。
  • ローディングとAMP用のhtmlを作り「single.php」に貼りつける。
  • 変更するphpのファイルは「single.php」と子テーマの「footer-insert.php」。
  • 変更するcssファイルは子テーマの「mobile.css」。

本当はローディング関係ではpjaxを実装したかったのですが、いろいろと壁があったので断念しました。

「Simplicity2」テーマでローディング画面から「AMP」ページへ遷移させたい、といった方の参考になれば幸いです。

スポンサーリンク
記事のタイトルとURLをコピーする

シェアする

フォローする

WordPressテーマのSimplicityにローディング画面とAMPの遷移を促す要素を表示してみた
この記事をお届けした
PC ウェブログの最新ニュース情報を、
いいねしてチェックしよう!