建立客戶可以輕鬆編輯的 WordPress 佈局的 3 種方法
已發表: 2014-07-02Beaver Builder 產品 25% 折扣!快點促銷結束...精益更多!
我們都已經見過很多次這樣的事情了。我在說什麼? WordPress 編輯器,填入了 HTML 或短代碼來建立自訂頁面佈局。如果您是開發人員並且是唯一一個在頁面上工作的人,這可能很好,但如果您建立的頁面是為客戶在完成後想要進行更改怎麼辦?
災難!只需按一下錯誤的按鍵即可完全毀掉您所有的辛勤工作,並收到客戶發送的一封緊急電子郵件,通知您天塌下來了。
幸運的是,有許多方法可以在 WordPress 中建立自訂佈局,讓您的客戶獲得更輕鬆的編輯體驗,同時仍為您提供開發人員所需的靈活性。
在 WordPress 中建立頁面時,您可能已經注意到編輯器下方的自訂欄位方塊。此方塊可讓您輸入欄位名稱和與其關聯的值。你能用它做什麼?
假設您為客戶的主頁編寫了自訂頁面模板,並希望使某些文字可編輯。最簡單的方法是直接在模板文件中編輯文本,但這不太方便用戶使用。相反,使用自訂欄位可以讓您將自訂頁面範本的一部分公開給客戶進行編輯,而不必擔心它們會破壞佈局。這是如何...
您需要做的第一件事是新增一個新的自訂欄位。在自訂欄位方塊中,選擇現有名稱或輸入新名稱,然後輸入所需的值。對於此範例,我們將使自訂頁面範本的標題可編輯。這是我們新的自訂欄位的樣子。
現在我們有了一個自訂字段,讓我們使用下面的程式碼將其添加到我們的自訂頁面模板中。
<div class="my-heading"> <h1><?php echo get_post_meta( get_the_ID(), 'main-heading', true ); ?></h1> </div>
在該程式碼片段中,我們使用 get_post_meta 函數從 WordPress 資料庫中提取自訂欄位值,並將其回顯在 h1 標記中。我們的自訂欄位被命名為“main-heading”,因此如果您的自訂欄位不同,請務必在函數呼叫中將其交換。
這種使用自訂欄位的技術可以重複多次,以便對佈局的不同部分進行編輯。
自訂欄位效果很好,但也有其限制。其一,使用自訂欄位時,您將無法使用基本的編輯器功能(例如粗體和斜體)。如果您嘗試使文字以外的任何內容(例如圖像)可編輯,它們也不太用戶友好。這就是我最喜歡的插件之一——高級自訂欄位(ACF)插件的用武之地。
ACF 允許您做一些真正令人難以置信的事情,例如用您自己的自訂頁面設定替換預設編輯器。這就是我們目前正在為 Connor Group 的新 WordPress 網站上的許多自訂頁面所做的事情。例如,團隊頁面顯示了可點選的員工縮圖網格,可開啟員工簡介。我們使用 ACF 建立了一個簡單的介面,使 Connor Group 的行銷團隊能夠在員工進出時輕鬆新增或刪除員工。
透過使用 ACF 的拖放介面建立欄位組,可以輕鬆新增此類功能。每個群組可以有任意數量的不同欄位類型,甚至包括可以新增或刪除的嵌套重複器欄位群組,就像 Connor Group 團隊頁面的設定一樣。
可以根據您定義的一組規則將欄位組新增至任何貼文編輯畫面。例如,噹噹前編輯的貼文是「團隊」頁面時,上面螢幕截圖中的設定僅適用於貼文編輯畫面。
在自訂頁面範本中使用 ACF 值應該很熟悉,因為這樣做與使用標準 WordPress 自訂欄位類似。
<div class="my-heading"> <h1><?php the_field( '標題' ); ?></h1> </div>
正如您在上面的範例中看到的,我們使用的程式碼看起來與我們用於標準自訂欄位的程式碼非常相似。唯一的區別是我們使用 ACF 函數 the_field 而不是 WordPress 函數 get_post_meta。如果您使用的是圖像字段,則向該函數傳遞字段名稱將輸出已輸入的任何內容或圖像的 URL。
高級自訂欄位是一個真正強大的插件,為開發人員打開了一個充滿可能性的世界。如果您還沒有嘗試過,我強烈建議您嘗試一下。根據我的經驗,實施起來非常有趣,而且我們客戶的反應非常正面。
前端 WordPress 頁面建立器是一個相對較新且有趣的選項。雖然作為開發人員,您必須犧牲一些靈活性,但在許多情況下,使用它可以節省大量時間,並使客戶編輯頁面變得更加直觀。
使用頁面建立器可以讓您直覺、快速地佈局頁面。自從創建我們自己的頁面建立器以來,有很多情況我們甚至不打開 Photoshop。相反,我們在瀏覽器中即時製作模型,與客戶一起審查它們並根據需要進行更改。此工作流程可能不適用於您建立的每個頁面,因此您需要根據客戶想要實現的目標來決定哪種解決方案最適合。
所有這一切的目標是讓您的客戶更輕鬆地進行編輯,而這正是使用前端頁面建立器可以做到的。您的客戶無需在 WordPress 管理員中工作,而是能夠透過指向並點擊其頁面內容來在直覺的前端介面中進行編輯。
當談到在 WordPress 中建立自訂佈局時,有時您需要的只是一個簡單的解決方案,例如內建的自訂欄位。其他時候,您可能需要更強大的東西,例如高級自訂欄位插件,或更直觀的東西,以允許快速開發,例如前端頁面建立器。歸根結底,這些解決方案都有助於實現相同的目標,讓您的客戶更輕鬆地在 WordPress 中編輯自訂佈局。
這是我在 WordPress 開發工具箱中用於建立客戶端網站的最喜歡的三個解決方案。您發現哪些解決方案適合您和您的客戶?
自訂欄位和進階自訂欄位的選項僅說明如何在前端「顯示」欄位。沒有任何關於如何使欄位可從前端編輯以方便用戶端使用的內容。
這是用於 Wordpress.com 線上編輯器還是 Wordpress.org 軟體?