【WordPress 教學】讓網站像 DuckDuckGo 那樣可以直接在 Android / iOS 上成為一個 App(Fake Progressive Web App)


如果你有用過 DuckDuckGo,應該有發現我們可以把一些常用的網站變成手機上的 App,這個功能也是最近 Apple 與 Google 開始努力推廣的。這種另類的手機 App 雖然暫時還沒有普及,但由於其較保護使用者穩私,加上使用方便還是蠻受歡迎,也很適合推廣使用。

如果你有使用 WordPresss 的話,其實你也可以通過手動增加一些 <code> 以讓你的網站提供相類似的功能,以下就跟大家分享如何使用吧!

把網站加到主頁面的使用步驟


2017-04-21 09.47.19.png

作為 Android 手機用戶,如果要把網站加到手機的主頁面上,只要選擇 Menu > Add to homescreen > Add 即可,當中沒有太多奇怪難做的,只要根據步驟即可。

2017-04-21 09.47.27.png

在 Request desktop site 上就有 Add to Home screen

2017-04-21 09.47.34.png

看到相關的網站 ICON 與名字後按 Add 即可。


 在 WordPress Theme 裡動手腳

首先,你要到 WordPress > Appearance 裡的 Theme,然後選擇 Editor,然後找到 header.php 這個檔案,在裡面的 </head> 前加入這段 code.

<link rel=”manifest” href=”{{ ‘manifest.json’ | asset_url }}”>
<link rel=”manifest” href=”/manifest.json”>
<link rel=”icon” sizes=”192×192″ href=”適合 Android 裝置使用的圖檔連結”>
<meta name=”apple-mobile-web-app-capable” content=”yes”>
<link rel=”apple-touch-icon” href=”適合 iOS 裝置使用的圖檔連結”>
<link rel=”apple-touch-startup-image” href=”適合 iOS 裝置使用的圖檔連結”>
<meta name=”apple-mobile-web-app-title” content=”你網站的名字”>
<meta name=”apple-mobile-web-app-status-bar-style” content=”你想要的背景顏色號碼如 #000000″>

theme_001

然後,你需要進入到 FTP(沒錯,你要有 FTP 權限才能做到),在 root 的位置(也就是 public_html 那個 Folder 裡)新增一個名為「manifest.json」檔案。


在這個檔案裡,你需要輸入以下的 code:

{
“name”: “你的網站名字”,
“icons”: [
{
"src”: "適合 Android 裝置使用的圖檔連結”,
"sizes”: "192×192”,
"type”: "image\/png”,
"density”: 4.0
}
],
“background_color”: “white”,
“start_url”: “\/”,
“display”: “standalone”,
“orientation”: “landscape”
}

通過這兩段 code,你便可以成功把你的 WordPress 網店成為一個可以新增到 iOS  與 Android 上的 Fake Progressive Web App,而它在運作上雖然也是瀏覽器,但使用上並不會出現網址列,看起來會超吸引。






【此文章刊載於石先生部落;標題:【WordPress 教學】讓網站像 DuckDuckGo 那樣可以直接在 Android / iOS 上成為一個 App(Fake Progressive Web App);本篇文章為贊助內容;強制廣告:HisTrend.HK 給你不一樣的科技產品】