WordPress

WordPressで「ホーム画面に追加」に対応する方法。PWA化とは。

2019年1月28日

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

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

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

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

PWA化すればOK。PWAとは。

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

無料プラグイン「Super 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(ブラウザ表示)。

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

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

\記事リクエスト募集中/


【お願い】
ワーカホリックダイアリーでは「社会人に役立つ仕事術、ライフハック情報」を毎日23時50分に発信しております。

社会人の方はぜひブックマークしていただき明日もお越しいただけたら嬉しいです。

[ブックマーク手順]
iPhone Safariの方:
 下部の[↑](共有ボタン) > [ホーム画面に追加]もしくは[ブックマーク追加]

Android Chromeの方:
 右上の [︙](縦3点リーダー) > [ホーム画面に追加] もしくは[☆タップ]

パソコンの方:
 キーボードの[Ctrl]+[D] もしくは 右上の[☆クリック]

\面白かったらシェアお願いします!/
記事タイトルとURLをコピー

-WordPress
-, , ,

Copyright© ワーカホリックダイアリー , 2019 All Rights Reserved.