如何在 WordPress 中添加代碼片段

有時,您想更改 WordPress 中的某些內容。 這可能是一個設計元素,如移動端的社交連結位置,也可能是一個核心功能,如評論,或者是在網站上投放廣告。 通常的解決方案是使用外掛程式,另一個更簡便的方法就是使用代碼片段。

什麼是代碼片段?

對於 WordPress 來說,代碼片段就是一段簡單的 PHP、JS、CSS 或 HTML 代碼。 代碼片段用於編輯 WordPress 的預設功能,而不是添加檔或安裝外掛程式。

代碼片段有什麼作用?

代碼片段通常用於為網站添加特定功能或作用。 每個代碼片段都有明確、直接的目的.

代碼片段示例

  • 添加代碼片段,用簡碼顯示當前年份,這樣就不必在每年一月更新版權中的年份了。
  • 編輯搜尋結果中顯示的帖子數量。
  • 自定義 WordPress 後台的管理功能表欄,以顯示特定功能表項、快速連結或不同的歡迎詞。
  • 禁用 WordPress 的預設功能,如嵌入或懶載入圖片。
  • 通過排除某些類別、添加圖片、延遲發佈文章等方式來編輯 RSS 源。

如何在 WordPress 中手動添加代碼片段

添加代碼片段的一種方法是手動創建一個子主題,其中包含要添加代碼片段的 WordPress 檔。 這個過程並不複雜,不過我們建議只有在你熟悉編碼的情況下才採用這種方法。 由於步驟與主題和片段密切相關,因此這隻是手動過程的概述,而不是完整的分步教程。

備份網站

由於您將創建子主題並編輯檔,因此定期對網站進行完整備份非常重要。 這樣,如果在編輯過程中出現任何問題,您就可以隨時恢復到之前的網站備份。

創建子主題


您應該避免直接在原始 WordPress 主題檔中添加自定義代碼。 這是因為您將不可避免地需要更新 WordPress 主題,而更新後的新檔將覆蓋舊檔,包括您的自定義代碼。

解決方法就是使用子主題。 可以將子主題視為主 「父 」主題的克隆。 它依賴於父主題中的大部分主題檔,但允許你進行任意定製。

添加檔

要創建子主題,你需要一個代碼編輯器以及 WordPress 網站的 FTP 訪問許可權。 首先在 wp-content/themes 下創建一個新的主題資料夾。 上傳style.css檔和functions.php檔,style.css檔是子主題的樣式表(用於設計編輯),functions.php檔應包含從父主題調用樣式表的代碼。

style.css檔要包含以下代碼

/*
Theme Name : 子主题的名词 (例如 Total Child Theme)
Theme URI: http://www.example.com (子主题的链接)
Description: 子主题简介
Author: 作者名
Template: 父主题名 (例如 Total, twentyfourteen,等等)
Version: 1.0.0
*/

functions.php要加入下面的代碼引用父主題的樣式

function total_child_enqueue_parent_theme_style() {
	
	// Dynamically get version number of the parent stylesheet (lets browsers re-cache your stylesheet when you update your theme)
	$theme   = wp_get_theme( 'Total' );
	$version = $theme->get( 'Version' );
	
	// Load the stylesheet
	wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css', array(), $version );
	
}
add_action( 'wp_enqueue_scripts', 'total_child_enqueue_parent_theme_style' );

Total這裡是你父主題名

子主題準備就緒后,請在 WordPress 網站外觀 > 主題啟動它。

編輯檔

image 11

現在,您可以在代碼編輯器(或 WordPress 外觀 > 主題文件編輯器)中打開子主題的 functions.php 檔,然後添加您的代碼段。 大多數代碼段都會添加到 functions.php 檔中(但也有一些例外)。

下面我們來說說另外一種更好、更簡便的方法,用於在 WordPress 中添加片段。

如何使用 WPCode 在 WordPress 中輕鬆添加代碼片段

WPCode 是一款免費的 WordPress 外掛程式,當然Wordpress也有許多類似功能的外掛程式,使用方法也是類似的,我們用WPcode作為例子:你可以無需創建子主題或手動編輯檔在 WordPress 中添加代碼片段,而WPCode還能將你的所有片段組織在一個地方,方便你根據需要查找、編輯甚至刪除片段。

安裝免費的 WPCode 外掛程式

要開始使用,首先需要安裝外掛程式。 這非常簡單,因為 WPCode 提供了一個免費版本,您可以在 WordPress 控制面板上隨時使用。 只需進入外掛程式 > 添加新外掛程式,然後搜索 「WPCode」即可。

image 12

下一步點擊安裝並啟動外掛程式。 現在就可以添加片段了!

添加片段

image 13

在 WordPress 面板的Code Snippets,點擊 「+ 添加片段 」功能表項。 這將帶你進入一個螢幕,你可以從空白代碼片段開始或流覽 WPCode 程式碼片段庫。

或者,要添加自定義片段,請在 「+ 添加片段 」頁面點擊空白片段。 這將打開一個編輯器,你可以在其中添加片段代碼。 由於您使用的是空白片段,因此這個片段不會有任何設置。

要使用代碼庫中的現有片段,請使用搜尋框尋找片段。 免費版外掛程式有 59 個免費片段,專業版有 100 多個。 現有的代碼片段會選擇預設設置,您可以在保存和啟動代碼片段前對其進行編輯。

image 14

舉個例子,假設您想更改 WordPress 儀錶板右上角顯示的 「你好,使用者名」,使其顯示得更專業一些。

image 15

如果搜索 「howdy」 就會看到庫中有一個片段,用於 「自定義管理欄中的問候資訊」。 將滑鼠懸停在要使用的片段上,點擊出現的Use snippet藍色按鈕。

編輯片段

image 16

這將打開代碼段編輯器,併為代碼段添加代碼和預設設置。 在本例中,代碼段已經有了標題描述,代碼類型預設為 PHP,代碼預覽本身也已創建,將 “howdy ”更改為 “Welcome”。 如果您想改成別的,只需編輯第 4 行的代碼即可

image 17

在代碼預覽下方,您可以找到片段的插入規則。 由於我們選擇的是預設片段,因此已經選擇了選項。 該片段的插入方式設置為 「自動插入」,但如果你想將片段插入到特定頁面或文章中,還可以選擇簡碼。 位置選項設置為 「僅限Admin」,因為這個片段修改的是管理員的歡迎介面。

免費版本支援的位置

  • 全域:隨處運行、僅限前臺、僅限Admin、前台條件邏輯、全站頁眉、全站正文、全站頁腳
  • 特定頁面:文章前/后、內容前/后、段落前/后、摘錄前/后、文章之間


專業版還增加了更多位置,包括 PHP 片段、Anywhere(CSS 選擇器)、WooCommerce、Easy Digital Downloads 和 MemberPress。

image 18

其次是設備類型。 對於許多片段(包括我們示例中的片段)來說,“任何設備類型 ”選項是最好的選擇。 但如果你要添加一個自定義片段,以便在小型設備上禁用評論表單,那麼你可能需要將片段設置為僅在行動裝置上載入。

image 19

WPCode 還提供添加智慧條件邏輯的選項。 這樣,您就可以為要載入的代碼片段添加更具體的限定條件。

啟動你的片段

image 20

現在,你可以開始使用你的代碼片段了! 前往 「代碼片段 」主功能表項–在這裡,你可以在有用的清單檢視中看到所有片段。

要啟動你的代碼片段,點擊末尾一欄的切換按鈕,使其處於打開狀態。 現在刷新或查看片段生效的頁面。 由於我們的片段示例編輯了管理資訊,因此我們刷新頁面后,可以看到右上角正確顯示了 “Welcome”。

分享你的喜愛

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *