WordPress

WordPressで「ホーム画面に追加」に対応する方法|PWAについて

「ホーム画面に追加」機能の実装

スマートフォンでサイトを見ている時に、画面下部から「ホーム画面に追加」とメッセージが表示されることがありませんか?

こちらの実装方法をご紹介します。

アイコン画像さえ準備できれば3分程度で設定できます。

PWA化すればOK。PWAとは。

ブログなどのウェブサイトをアプリケーション化する技術PWA(Progressive Web Apps)」を使うことで『ホーム画面に追加』することができます。

無料プラグイン「Super Progressive Web Apps」で簡単に設定できます。

無料プラグイン「Super Progressive Web Apps」

「Super Progressive Web Apps」という無料プラグインを利用することで、簡単に対応することができます。

 

設定方法

Super PWA 設定例

Application Name(アプリ名)
「ワーカホリックダイアリー」

Application Short Name(アプリ略称名)
「ワーカホ」(アイコンの下部に表示されます)

Description(説明)
「ワーカホリックから抜け出すヒント」

Application Icon(アプリアイコン)
「(192x192 のPNG画像ファイル)」

Splash screen Icon(起動画面のアイコン)
「(512x512 のPNG画像ファイル)」

Background Color(背景色)
「(起動画面の背景色)」
※デフォルト色(#d5e0eb)で良いと思います。

Theme Color(テーマカラー)
「(ブログのテーマ色)」

Start Page(開始ページ)
「ーHomePageー」
※ルートパスであるHomepageで良い。

Offline Page(オフラインページ)
「Default」

Orientation(方向)
「Portrait(縦画面表示)」
※Landscape(横画面表示)or Follow device Orientation(端末設定に従う)

Display(表示)
「Minimal UI」
※デフォルトStandalone(ほぼ全画面、ステータスバーは残る)。fullscreen(完全な全画面表示、ステータスバーは表示しない)、Minimal UI(基本的にブラウザ表示、ブラウザヘッダー省略表現) browser(ブラウザ表示)。

「ホーム画面に追加」についての実装方法についてでした。

以上、ワーカホリックダイアリーでした。

---- 当サイトのPRをさせてください ----

当サイトは「社会人に役立つ仕事術、生活術、スキルアップ術」を発信しております。また来ていただけたらたいへん嬉しいです。

ぜひブックマークをお願いします。

iPhoneの方:
ブラウザ下部の[↑]ボタン > [ホーム画面に追加]もしくは[ブックマーク追加]

Androidの方:
ブラウザ右上の [︙]ボタン > [ホーム画面に追加(アプリをインストール)] もしくは[☆タップ]

PCの方:
ブラウザ 右上の[☆]ボタン、もしくはキーボード[Ctrl]+[D]

またのお越しをお待ちしております。

\面白かったらシェアお願いします/

-WordPress
-, ,