在 WordPress 開發領域，擁有正確的工具可以發揮重要作用。這就是為什麼我們很高興地宣布推出 Assistant 的新代碼應用程序，這是一款多功能且功能強大的工具，旨在簡化您的編碼工作流程並讓您輕鬆管理 WordPress 中的程式碼片段。

程式碼應用程式位於助手外掛程式內，可讓您建立、編輯和管理網站的 CSS 和 JavaScript 程式碼片段。使用程式碼應用程式，您可以輕鬆添加新的程式碼片段，將它們分配到特定部分，並控制它們的啟動狀態。功能包括複製、匯出片段以及將片段儲存到庫中（使用 Assistant Pro）。直覺的介面可確保在啟用和停用的片段之間快速切換，從而簡化您的網站客製化流程。

讓我們深入探討它的一些創新特性和功能：

什麼是助理碼應用程式？

您可能已經知道可以將程式碼片段保存在 Assistant Pro 庫中。現在，透過添加程式碼應用程序，您可以在助手外掛程式中輕鬆新增、編輯和管理 WordPress 網站的程式碼片段：

程式碼應用程式取代了對多個外掛程式的需求，並透過將所有網站程式碼片段保存在一個易於訪問的位置來提高您的工作效率。

• 輕鬆的程式碼片段管理：直接在程式碼應用程式中管理網站的 CSS 和 JavaScript 程式碼。不再需要兼顧多種工具和平台，您所需的一切都觸手可及。
• 在 Assistant Pro 雲端中儲存程式碼片段： Assistant Code 應用程式與您的 Assistant Pro 帳戶無縫集成，可讓您在雲端庫中儲存和組織程式碼片段。透過在多個網站專案中輕鬆重複使用程式碼片段來簡化您的工作流程，從而節省您的寶貴時間。
• 與您的團隊合作：協作是關鍵，我們的程式碼應用程式使與您的團隊合作比以往任何時候都更容易。透過即時編輯，您可以在 WordPress 網站上即時協作，無論您身在何處，都可以與您的團隊保持同步。

除了這些功能之外，Assistant 的程式碼應用程式還提供了專為開發人員設計的時尚直覺的介面。無論您是經驗豐富的專業人士還是剛起步，我們認為您都會發現我們的程式碼應用程式易於導航且易於使用。

如何在 WordPress 中新增程式碼片段

Assistant Code App 提供了一種無縫的方式，透過自訂 CSS 和 JavaScript 片段來增強您的網站。入門很簡單：

第 1 步：在 Assistant 中開啟程式碼應用

如果您還沒有安裝並啟動助手插件，請繼續安裝並啟動它。安裝後，點擊鉛筆圖示以開啟助理側邊欄。導航到應用程式和設置，然後點擊應用程式清單中的程式碼：

請注意，如果您希望代碼應用程式圖示顯示在側邊欄中，您可以透過將程式碼應用程式向上拖曳到清單中的較高位置來重新排序應用程式：

第 2 步：使用 Code App 建立程式碼片段

現在我們準備好創建我們的第一個程式碼片段。在此範例中，我們首先確保選擇 CSS 選項卡，然後輸入標題並點擊返回按鈕來建立 CSS 檔案：

在下一個畫面上，您將看到代碼應用程式接受以下內容：

• 標題：這是您的程式碼片段的唯一名稱。
• 描述：解釋該程式碼的用途或您或您的團隊需要記住的任何其他重要資訊：

• 程式碼片段：在程式碼區塊中輸入您的程式碼片段：

向下捲動到位置部分並將狀態和規則分配給您的程式碼片段：

• 狀態：切換以啟用或停用程式碼片段的狀態。
• 規則：選擇您希望載入此程式碼段的位置。這看起來與主題位置規則類似。按一下“新增規則”以啟用其他規則。

第 3 步：按一下「更新」以儲存您的更改

在 Assistant Code App 中完成新增程式碼片段後，點擊右上角的「更新」按鈕以儲存變更：

接下來，刷新頁面以使更改生效。

複製、儲存到庫、匯出或刪除程式碼片段

使用 Code App 新增第一個程式碼片段後，讓我們探索一些附加功能。向下捲動經過“位置”部分以查找“操作”部分中的選項：

在這裡，您可以使用 Assistant Pro 管理程式碼片段設置，例如啟用、複製、匯出或儲存到您的庫，從而使您能夠更好地控制網站的自訂並具有更大的靈活性。

• 複製：建立目前程式碼片段的精確副本。在程式碼應用程式中查看程式碼類型的清單檢視時，您也可以按一下重複圖示。
• 儲存到庫：儲存到雲端庫需要 Assistant Pro 連線。當您將程式碼片段儲存到庫時，它不會保存您為程式碼片段指定的位置。當您從庫匯入程式碼片段時，您需要將程式碼片段指派到一個位置。
• 匯出：將程式碼片段檔案匯出為 .txt 檔案。
• 刪除：這將從助手中永久刪除程式碼片段。您將看到一條確認訊息，以確保您要刪除該程式碼段。此操作無法撤銷。

現在，當您按一下「程式碼應用程式」圖示時，您將在清單檢視中看到所有程式碼片段，並且全部位於一個位置：

請注意，在清單檢視中，您可以開啟和關閉各個片段，無需單獨編輯每個片段，從而節省時間和精力。如果某個代碼段已停用，您將看到「已停用」 ，如果已啟用，您將看到「已啟用」並帶有綠點。您可以透過點擊該指示器來快速切換它。

WordPress 程式碼片段範例

WordPress 有許多 CSS 和 JavaScript 程式碼片段，通常用於增強功能、樣式元素或為網站添加互動性。以下是一些流行的例子：

CSS 程式碼片段

• 自訂字體：使用 CSS 實作自訂字體，可以來自 Google Fonts 或其他來源。
• 表單樣式：自訂 WordPress 網站上表單的外觀和風格。
• 隱藏元素：用於隱藏網站的特定元素或部分的 CSS 程式碼。
• 動畫：CSS 動畫或過渡，為元素添加視覺效果。
• 懸停效果：為按鈕、連結、圖像等新增懸停效果。
• 自訂導覽選單：設定導覽選單的樣式以適合您網站的設計和佈局。
• 黏性頁首/頁尾：當使用者滾動時，使頁首或頁尾黏在頁面的頂部或底部。
• 深色模式：使用 CSS 為您的網站實現深色模式主題。

JavaScript 程式碼片段

• 平滑滾動：JavaScript 程式碼，用於在使用者點擊內部連結時實現平滑滾動。
• 延遲加載圖像：透過僅在需要時加載圖像來實現延遲加載，以縮短頁面加載時間。
• 模態視窗：建立模態視窗或彈出視窗以顯示其他內容或訊息。
• 手風琴/可折疊部分：JavaScript 程式碼，用於建立點擊時展開或折疊的手風琴樣式部分。
• 切換可見性：用於切換頁面上元素的可見性的 JavaScript 程式碼。
• 無限滾動：當使用者向下滾動頁面時加載更多內容，而無需單擊分頁連結。
• 下拉式選單：使用 JavaScript 透過下拉功能增強導覽選單。
• 滑桿/輪播：創建圖像滑桿或輪播，以具有視覺吸引力的方式展示內容。
• Ajax 載入更多：動態載入附加內容，無需重新載入整個頁面，對於部落格或作品集很有用。

這些只是幾個範例，您還可以使用無數其他 CSS 和 JavaScript 片段來自訂和增強您的 WordPress 網站。與往常一樣，請務必在開始之前備份您的網站，並確保您添加的任何程式碼都經過正確測試並且不會與您現有的主題或外掛程式衝突。

結論

準備好將您的網頁設計工作流程提升到新的水平了嗎？我們的助手外掛最新加入的Code App就是您的最佳選擇。無論您是在處理下一個 WordPress 專案還是解決程式設計難題，此工具都旨在簡化您的工作流程並提高工作效率。

但這還不是全部 - 透過免費的 Assistant Pro 帳戶，您將解鎖更多功能來增強您的開發過程。與其他 Web 開發人員一起節省寶貴的時間並輕鬆組織您的專案。不要再等待了——立即註冊並親自體驗與眾不同！