如何使用 AppPresser 將您的 Divi 網站變成移動應用程序
已發表: 2017-05-06確保您的 WordPress 網站支持移動設備從未如此重要。 畢竟，移動用戶現在佔在線流量的大部分。 這意味著您必須竭盡全力確保他們的體驗盡可能好。
借助 AppPresser 等服務，您現在可以為 WordPress 網站創建簡單的應用程序，即使您沒有開發背景。 在本文中，我們將教您如何使用該平台開發移動應用程序。 但是，讓我們首先談談移動應用程序、網絡瀏覽的未來以及 AppPresser 可以為您提供什麼。
為什麼移動應用是網頁瀏覽的未來
鑑於統計數據，您可能正在通過移動設備閱讀此內容——這甚至可能是您目前與網絡互動的主要方式。 畢竟，我們大多數人一有機會就會拿出智能手機，包括上網衝浪。
使您的網站具有響應性並不意味著您必須犧牲樣式才能使其可用。
作為網站所有者，迎合智能設備用戶的最簡單方法是針對較小的視口優化您的網站。 這樣，無論使用何種設備，用戶都將獲得一致的體驗。 但是，還有另一種選擇——儘管需要做更多的工作——那就是為您的網站創建一個應用程序。
與常規的移動友好型網站相比，應用程序具有一些明顯的優勢：
- 它們為讀者提供有關您網站的持續提醒。 在他們的設備上安裝專用應用程序可能會導致一些用戶考慮檢查新內容。 您還可以使用比平時更高的訪問頻率。
- 您可以包含專用的、特定於移動設備的功能。 許多應用程序都包含有趣的功能，例如社交登錄和推送通知。 當然，也可以在常規站點上實現這些，但它們作為應用程序的一部分感覺更自然。
- 看起來很專業。 為您的網站安裝應用程序只會讓它看起來很專業。 只要您提供現代、穩定的產品，用戶就很可能會留下深刻的印象。
當然，為您的網站創建應用程序並不意味著您應該放棄使其適合移動設備。 將其視為最大化其曝光度的補充措施。 最好的部分是，應用程序創建過程並不復雜，這要歸功於一些有趣的新服務。
AppPresser 簡介
AppPresser 是一項服務，可讓您將現有的 WordPress 網站轉變為外觀現代的移動應用程序。 使用該平台，您可以添加任何現有頁面、創建菜單並受益於包括推送通知在內的高級功能，使您的應用程序看起來更專業。
最好的部分是，使用該服務非常簡單。 事實上，完全有可能使用 AppPresser 在幾個小時內啟動並運行一個工作（和時尚）的應用程序。
您可能希望預先選擇每月 19 美元的入門計劃，該計劃支持單個應用程序。 如果您需要的不止這些（或者您打算通過應用獲利），還有其他可用的層級。
主要特點：
- 允許您創建適用於 Android 和 iOS 的移動應用程序。
- 包括一個 WordPress 主題和插件，使您能夠訪問高級應用程序功能。
- 提供社交登錄和共享選項。
價格：每月 19 美元 | 更多信息
如何使用 AppPresser 將您的 Divi 網站變成移動應用程序
在我們深入學習本教程之前，您需要在 AppPresser（正如我們之前提到的，這是一項付費服務）和 Phonegap（您需要在最後一步使用）上註冊一個帳戶。
註冊前者後，您將收到一封電子郵件，其中提供對 AppPresser 插件及其補充主題（在其他地方找不到）的訪問權限。
至於主題，別擔心——您不需要激活它。 它只需要安裝以啟用 AppPresser 插件和 Web 應用程序來訪問數據，它只會顯示在您的移動應用程序中。 如果您是 Divi 用戶，使用 AppPresser 的主題和插件不會影響您的安裝。
一旦你安裝並激活了 AppPresser 插件，然後上傳了它的主題（但沒有激活它），進入第一步！
第 1 步：創建一個新應用程序並自定義其樣式
首先，您需要使用您註冊時使用的相同憑據登錄您的 AppPresser 帳戶。 該服務將提示您創建一個新的應用程序，因此添加標題後，單擊Create App ：
接下來，您需要在開始自定義之前將您的網站鏈接到您的應用程序。 為此，請單擊 AppPresser 儀表板上的“常規”選項卡，然後查找顯示API 設置的部分：
複製您的站點 slug和應用程序 ID ，然後前往 WordPress 儀表板上的AppPresser選項卡。 您會找到兩個相應的字段，因此將您的數據粘貼到那裡，然後保存更改：
這樣一來，您就可以開始進行應用程序的自定義了。 返回您的 AppPresser 儀表板，導航到Customize ，然後單擊Customize and Build App按鈕：
下一個屏幕應該看起來很熟悉，因為它是在 WordPress 實時定制器之後建模的，您還將看到一個移動設備的模型，其中顯示了您的應用程序的原型。 完成後，您將能夠下載它的完整工作版本。
在接下來的幾個步驟中，我們將介紹定制器中最關鍵的部分，但現在讓我們關注顏色選項卡。 在這裡，您會找到多個選項來更改您的應用程序的顏色以及每個選項的作用的解釋：
一旦您調整了應用程序的調色板並對結果感到滿意，就該查看您的菜單了。
第 2 步：更改應用程序的菜單
每個 AppPresser 應用程序都以相同的默認菜單開始：主屏幕、介紹和關於頁面，以及指向服務主頁的鏈接。 要替換它們，您需要進入定制器中的“菜單”選項卡，然後單擊“應用程序菜單”選項：
在下一個屏幕上，您可以從左側菜單中選擇元素。 在這種情況下，主頁、介紹和關於按鈕都會引導您進入自定義頁面，您現在可以通過單擊刪除選項來選擇是否刪除它們的菜單項：
您還可以保留這些菜單項並自定義它們各自的頁面（一分鐘內更多）。 現在，刪除您不想要的任何菜單項，並使用“添加項”選項用其他頁面填充您的菜單。 為此，您將能夠選擇現有的 WordPress 頁面、帖子或自定義頁面（使用 AppPresser 構建）……
…單擊WordPress/外部鏈接按鈕將為您提供包含指向 WordPress 網站頁面之一的鏈接的選項：
一旦您的菜單被填充（並安裝了 AppPresser 主題），該應用程序將能夠“導出”您網站的內容並自動顯示它：
在不到一分鐘的時間裡，您就向您的應用程序添加了一個新的移動就緒頁面。 在查看設置自定義頁面之前，根據需要對其他頁面重複此過程。
第 3 步：將自定義頁面添加到您的應用程序
要設置自定義頁面，請前往自定義程序中的相應選項卡。 與標準菜單一樣，您會發現三個現有頁面：主頁、介紹和關於。 在這個階段，您可以選擇將它們中的每一個重新用於您自己的應用程序，或者只是忽略它們並創建新頁面：
單擊“添加新頁面”按鈕將為您提供兩個選項：使用自定義 HTML 創建新頁面……
...或從 AppPresser 的預構建樣式之一中進行選擇，其中包括列表格式和卡片佈局：
要設置其中任何一個，您需要使用 WordPress API 創建自定義列表頁面。 然後，只需將鏈接粘貼到應用程序內置樣式正下方的字段中的新頁面：
當您完成對自定義頁面的修改後，是時候通過為您的應用程序調整一些額外的設置來結束這些事情了。
第 4 步：自定義應用程序的設置
在這個階段，你應該有一個可以工作的應用程序——至少在定制器中——但一個仍然帶有 AppPresser圖標和徽標的應用程序。 要替換它們，請導航到定制器中的“設置”選項卡：
在這裡，您可以指明您希望應用程序使用哪些菜單。 目前，我們建議您堅持使用您之前創建的那個，除非您想設置其他的。
如果您繼續向下滾動，您將看到更改應用程序名稱、描述和作者信息的選項。 如有必要，請填寫這些字段，然後繼續滾動直到到達圖標和啟動圖像部分：
您需要在此處為每個可用選項上傳 PNG 文件。 完成後，您的圖標將出現在您的主菜單上方，並且您的應用程序加載時將顯示您的啟動畫面。
請記住，AppPresser 包含有關您應該上傳的圖像大小的一些信息，因此除非您希望圖像看起來失真，否則您應該遵守這些信息。 在這裡完成後，是時候最終啟動並運行您的應用程序了。
應用準備好啟動後該怎麼做
要完成構建您的應用程序，您需要進入定制器中的構建和預覽部分。 在那裡，您將看到一個用於輸入 Phonegap 身份驗證令牌的選項。 對於初學者來說，Phonegap 是一個框架，您需要使用它來將您的應用程序安裝到設備上，或將其提交到商店。
更新令牌後，您將看到編譯應用程序的選項，該服務將為您執行此操作。 然後，只需將其提交到 Android 和 iOS 商店（或兩者），等待批准，並從您的常規網站鏈接到它們。
如果您正在考慮直接從您的站點分發您的應用程序，我們建議您不要這樣做——主要是出於安全原因。 更重要的是，用戶可能會覺得下載未經任何服務批准的應用程序並不安全，因此如果您跳過提交步驟，您的努力可能會付諸東流。 當然，WordPress 插件（例如 Easy Digital Downloads）可能符合要求，但上述相同的考慮因素仍應適用。
結論
為您的 WordPress 網站構建一個應用程序可能聽起來有點矯枉過正，但實際上它可能是一個聰明的主意。 畢竟，諸如 AppPresser 之類的服務比以往任何時候都更容易。 此外，借助推送通知等功能，應用程序可能正是您進一步吸引移動用戶的需要。
在這篇文章中，我們向您展示瞭如何使用 AppPresser 在移動應用程序中打開您的 Divi 網站。 讓我們快速回顧一下這些步驟：
- 創建一個新應用程序並自定義其樣式。
- 更改應用程序的菜單。
- 向您的應用程序添加自定義頁面。
- 自定義您的應用程序的設置。
您對使用 AppPresser 為 Divi 創建移動應用程序有任何疑問嗎？ 在下面的評論部分提問！
文章縮略圖由 31moonlight31/shutterstock.com 提供