WP サイトアイコン、ファビコン、PWAの設定〜WEBサイトの加飾とアプリボタン化機能の追加

WordPress 4.3以降、管理画面でサイトアイコンを設定できるようになり、ウェブサイト独自のアイコンをブラウザのタブや、スマホのホーム画面などに表示することができるようになりました。しかしながら万能ではなさそうなので、昔ながらのファビコン設定も併用した方がいいでしょう。

サイトアイコンの設定

まずサイトアイコンに使用する画像(512x512、PNG)を用意します。
管理画面の[外観]>[カスタマイズ]からカスタマイズ画面を表示させます。[サイトの基本設定]をタップ。[サイトアイコン]>[画像の変更]からサイトアイコンに使用する画像を登録できます。

最新のMac/iPhoneのsafariブラウザでは問題なく表示されますが、Windows8/10のIE系やOS・ブラウザの古いバージョンでは上手く表示されない場合もあります。

ファビコンの設定

昔はファビコン用画像をいろいろ揃えたり、設定もいちいち面倒でしたが、いまでは設定画像さえ用意すれば各デバイス向けの段取りを全てやってくれるサービスがあります。

https://realfavicongenerator.net/

設定方法は英文ですが難易度は低いです。先程準備した画像(512x512、PNG)をそのまま使えます。またデバイス毎に画像を変える設定も出来るようになっています。敷居が高いと感じるヒトは、Chromeの日本語翻訳機能を使うなり、設定方法を解説されている方のサイトを参考にしてみてください。

PWA対応の設定

PWAは「Progressive Web Apps」の略称、モバイル端末でWebサイトをHOME画面上でアプリのように扱える仕組みです。対応要件としてGoogleが定めるレスポンシブデザイン、HTTPS化等を備えたWebサイトである必要があります。またオフライン表示対応やプッシュ通知対応のブラウザAPI(Service Workerなど)を利用することもできます。

iPhoneで当サイトをアプリボタン化

WordPressで簡易的にPWAを機能追加するプラグインは幾つかありますが、本サイトではSuper Progressive Web Apps を使ってみました。基本的にはインストール後有効化して設定画面で、Application Short NameとApplication Icon、Splash Screen Iconの2種類の画像(192x192、512x512、PNG)を登録するだけのデフォルト設定で機能します。

 

【iPhoneのホーム画面にWEBサイト・ボタンを登録する手順】
SafariブラウザでWEBサイトを表示、下段中央の[追加・共有・保存]ボタンをタップ。

アンダーバーの「ホーム画面に追加」ボタンをタップ。

確認画面でホーム画面に設定されるアイコンを確認して[追加]をタップ。

ホーム画面に設定されたアイコンをタップして起動確認。

アプリ:inmycab.comとして表示されている(Safariブラウザ表示ではない)ので、URL表示やブックマーク等のサービス機能が省略された表示になります。

お気に入りサイトをPWA機能でホーム画面にアプリボタン化しておけばワンタップでWEB起動できるし表示時間も短くなって便利です。ただブラウザ表示ではないので外部リンクには制約があり、あくまでそのサイト内での閲覧に特化した仕様(アプリ)になります。