WordPressをPWA化するプラグイン【PWA for WP&AMP】の設定方法

  • 3 min read
WordPressをPWA化するプラグイン【PWA for WP&AMP】の設定方法

WordPressは、プラグインで簡単にサイトをPWA(Progressive Web App)することができます。

WordPressをPWA化するプラグインはいくつかありますが、そのなかでも当サイトが使用しているPWA for WP&AMPは設定がとても簡単なうえに機能も優秀

今回は、PWA for WP&AMPの設定方法を解説します。

サイトをPWA化するとリピーターを獲得してCVRをアップすることができますよ。

ちなみにサイトスピードを改善したい人は、プラグイン『Wp Rocket』もチェックしましょう!

サイトスピードが瞬間高速!

WP Rocket - WordPress Caching Plugin

【 WP Rocketの特徴 】

  • クリックだけでサイト表示高速化!
  • 多様なプラグインとの互換性あり
  • 年間$36.75~(月々340円前後)
  • 14日間の返金保証制度

\ コード知識は一切不要!

>>WP Rocketのレビューはこちら

PWA for WP&AMPの設定方法

PWA for WP & AMP
PWA for WP & AMP
PWA for WP&の設定項目

  • Dashboard(ダッシュボード)
  • Setup(セットアップ)
  • Features(特徴)
  • Tools(ツール)
  • Advance(アドバンス)

PWA for WP&AMPは有料プランもあるプラグインですが、無料プランでも機能は充分

無料プランでの設定項目はそれほど多くないので、5分ですべて設定可能です。

Dashboard(ダッシュボード)

PWA for WP&AMPのDashboards
PWA for WP&のDashboards

WordPressをPWA化すること自体に設定は必要ありません。

PWA for WP&AMPを有効化するだけでPWA化され、Dashboard画面のStatus(ステータス)に『PWA is working(PWA稼働中)』と表示がでます。

Setup(セットアップ)

PWA for WP & AMPのSetup
PWA for WP & AMPのSetup

App Name(アプリ名)/App Short Name(アプリ短縮名)/App Description(アプリ説明)

PWAのアプリ名とアプリの説明の設定です。

ブラウザでの設定と特に変更がなければデフォルトでOK!

App Icon(アプリアイコン)/App Splash Icon(アプリスプラッシュアイコン)

PWAのスマートフォン追加アイコン
PWAのスマートフォン追加アイコン

App Iconは、ホーム画面にサイトを保存したときのホーム画像で192×192pxサイズです。

一方、App Splash Iconはアプリ起動時の表示画像のことで512×512pxサイズが推奨されています。

Offline page/404 Page/Start Page/Orientation/Display

各種表示ページの設定項目です。

ブラウザでの表示とは別に、PWAでモバイル向けページをカスタムレイアウトしていない限りは、デフォルト設定のままでOK!カスタムページがある場合は、選択するだけで設定することができます。

Features(特徴)

PWA for WP&AMPのFeatures
PWA for WP&AMPのFeatures

Push Notification(プッシュ通知)

プッシュ通知の設定項目です。

Push Notificationは、別途プラグインで設定を行います。

プラグイン『Push Notification』

PWA for WP&AMPのPush Notification
PWA for WP&AMPのPush Notification

画面表示に従って、各種設定をすることでプッシュ通知の設定ができます。

Pre Caching(プリキャッシュ)

PWA for WP&AMPのPre Caching
PWA for WP&AMPのPre Caching

記事や固定ページのプリキャッシングを行うかどうかの設定で、この項目は設定が必須です。設定をしないとPWA機能がうまく機能しません。

PWAはページをプリキャッシュすることで、サイトを高速表示することができます。

Custom Add To Home Banner(ホーム画面へのバナー通知)

PWA for WP & AMPのBunner
PWA for WP & AMPのBunner

ブラウザでサイトを開いたとき、ホーム画面にバナーを表示してユーザーへアプリの保存を知らせるかどうかの設定です。

特にこだわりの設定がなければデフォルトでOKです。

UTM Tracking(UTMトラッキング)

PWA for WP & AMPのUTM tracking
PWA for WP & AMPのUTM Tracking

UTMトラッキングを設定することで、通常のアナリティクスとは異なり、PWAでのアクセス数をトラッキングすることができます。

PWAのトラッキングをしりたい場合は設定しておきましょう。

Loader(ローダー)

PWA for WP & AMPのLoader
PWA for WP & AMPのLoader

ローダーは、読み込み表示をする設定です。

ローダーは無料版ではそれほど細かい設定ができないため、チェックを入れても入れなくてもOK。

その他

その他はPRO版(有料版)の設定です。

無料版の機能だけでも充分なので特に設定は必要ないと思われますが、もし設定したい場合は年間49ドルの有料登録をしましょう。

Tools(ツール)

ツールは、設定をリセットする項目です。

PWA for WP&AMPを設定を1からし直したい場合以外、特に使用することはありません。

Advance(アドバンス)

PWA for WP & AMPのAdvance
PWA for WP & AMPのAdvance

Advance(アドバンス)設定も基本的にデフォルトでOK!

ただ、Offline Google Analytics、prefetch manifest URL linkはチェックを入れておくと良いかもしれません(PWA化がうまくいかなければ、manifest URL linkはチェックを外す)。

WordPressのPWA化を確認する

WordPressのPWAが正常に稼働しているか確認する方法です。

チェックにはGoogle Crome拡張ツールのLighthouseを使用します。

Lighthouse

Lighthouse
Lighthouse

LIghthouseを使用することで次のようなスコアが表示されます。

Lighthouseスコア

WordPressのPWA化チェック方法
WordPressのPWA化チェック方法

WordPressがPWA化されていてれば、PWAにチェックマークがつきます。

もしPWA for WP&AMPを有効化・設定してもPWAにチェックがついていなければ、うまくPWA化することはできていません。PWAの詳細をチェックして、エラーとなっている項目を修正しましょう。

すべての設定がうまくいくとPWAの詳細は、以下のようにすべてグリーンの信号がつきます。

PWAを有効化した状態

LighthouseでPWA化がうまくいっている表示
LighthouseでPWA化がうまくいっている表示

これでWordPressは無事にPWA化されました。

WordPressのPWA化には有料テーマもあり

WordPressは、PWA for WP&AMPのようなプラグインを使用すればAMP化することが可能です。

ただ、設定がめんどくさかったり、エラーが出ていてもどこを修正していいかわからないということもあります。

そのような悩みがある場合は、PWA機能を実装している有料テーマを使用することもあり!

ルクセリタスやCocoonなどPWA機能を実装している無料テーマもありますが、デザイン性やその他の機能も考えると有料テーマの方が良いです。

僕のおすすめはTHE THOR(ザ・トール)

THE THORはPWAをワンクリックで実装できるうえに、デザイン性や機能性も抜群!僕も所有している2つのサイトでTHE THORを使用しています。

もしプラグインの設定が不安・うまくいかなかったという方は、ぜひTHE THORを選んでみて下さい。

おしゃれ&サイトスピード高速化テーマ

banner1 79208

>>THE THOR公式サイトを見る

※当サイト独自『記事作成10の手順』特典付き

>>THE THORの評判・実際の使用感レビューはコチラから

WordPressをPWA化するプラグインまとめ

WordPressなら、PWA for WP&AMPを使えば誰でもかんたんにサイトをPWA化できます。

PWAはサイトを高速表示するのにとても有効なツール。ChromeやAndroidを中心としてiOSにも対応しているため、検索でモバイルユーザーが多くなっている現在にはうってつけです。

ぜひあなたのサイトをPWA化して、UX(ユーザー体験)・SEO評価の高いサイトを作っていきましょう。

nv-author-image

4つの特化ブログを運営しながら、月収6桁を稼ぐブロガー。現在は開業してサロンサポーター&ブログ個別指導など実践しています。 WordPressに関すること(デザイン・カスタマイズ・テーマ・サーバーなど)が得意。なかでもサイトスピード改善サービスは個人/企業から高評価を得ています。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です