子主題 · WordPress開發手冊

子主題允許您改變網站外觀的小部分，但仍保留主題的外觀和功能。要理解子童主題如何運作，首先要了解父主題與子主題之間的關系。 ## 什么是父主題？父主題是一個完整的主題，其中包含所有必需的WordPress模板文件和主題的資源。所有主題 - 不包括子主題 - 被認為是父主題。 ## 什么是子主題？如概述所示，子主題繼承父主題及其所有功能的外觀，可用于對主題的任何部分進行修改。以這種方式，自定義與父主題的文件保持分離。使用子主題可以升級父主題，而不影響您對自己的站點的自定義。子主題： - 使您的修改便攜和可復制; - 保持定制與父主題功能分離; - 允許更新父主題，而不會破壞您的修改; - 讓你利用這些努力和測試放在父母主題中; - 節省開發時間，因為您沒有重新創建輪子; 并且是開始學習主題發展的好方法。 >[warning] 注意：如果您進行廣泛的自定義 - 超出樣式和一些主題文件 - 創建父主題可能比一個較小的主題更好的選擇。創建父主題可以避免將來使用已棄用的代碼的問題。這需要根據具體情況決定。 # 如何創建一個子主題 ## 1. 創建一個子主題文件夾首先，在您的主題目錄中創建一個位于wp-content/themes的新文件夾。該目錄需要一個名稱。最好的做法是給子主題與父主題一樣的名字，但是將-child附加到最后。例如，如果您正在制作一個twentyfifteen的子主題，那么該目錄將被命名為twentyfifteen-child。 ## 2. 創建一個樣式表：style.css 接下來，您將需要創建一個名為style.css的樣式表文件，該文件將包含控制主題外觀的所有CSS規則和聲明。您的樣式表必須包含文件頂部的以下必需的標題注釋。這告訴WordPress關于主題的基本信息，包括它是一個具有特定父項的子主題的事實。 ``` /* Theme Name: Twenty Fifteen Child Theme URI: http://example.com/twenty-fifteen-child/ Description: Twenty Fifteen Child Theme Author: John Doe Author URI: http://example.com Template: twentyfifteen Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready Text Domain: twenty-fifteen-child */ ``` 需要以下信息： - Theme Name – 需要您的主題獨特 - Template – 父主題目錄的名稱。我們的例子中的父母主題是“twentyfifteen”主題，所以模板將是twentyfifteen。您可能正在使用不同的主題，因此進行相應調整。根據需要添加剩余信息。唯一必需的子主題文件是style.css，但是functions.php是正確排列樣式所必需的（如下）。 ## 3. 入隊樣式表最后一步是排列父主題和子主題的主題樣式表。 >[warning] 注意：在過去，常用的方法是使用@import導入父主題樣式表;這不再是推薦的做法，因為它增加了加載樣式表所需的時間。此外，父樣式表可以包含兩次。 - 推薦使用父主題樣式表的方法是添加一個`wp_enqueue_scripts`動作，并在您的子主題的`functions.php`中使用wp_enqueue_style（）。因此，您將需要在您的子主題目錄中創建一個`functions.php`。您的子主題的`functions.php`的第一行將是一個開放的PHP標簽（`<？php`），之后您可以排列父母和子主題樣式表。以下示例函數僅在您的父主題僅使用一個主style.css來保存所有css的情況下才起作用。如果你的孩子主題有多個.css文件（例如ie.css，style.css，main.css），那么你必須確保保持所有的父主題依賴關系。 ``` <?php add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' ); function my_theme_enqueue_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); } ?> ``` 如果你的子主題style.css包含實際的CSS代碼（通常是這樣），你也需要排隊它。將“父樣式”設置為依賴關系將確保在其后面加載子主題樣式表。包括子主題版本號碼可確保您也可以為子主題突破緩存。完整的（推薦）示例變為： ``` <?php add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' ); function my_theme_enqueue_styles() { $parent_style = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme. wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ), wp_get_theme()->get('Version') ); } ?> ``` 在父主題注冊樣式表時，父樣式與父主題中使用的$句柄相同。 ## 激活子主題您的子主題現在可以激活了。登錄到您的網站的管理屏幕，然后轉到管理屏幕>外觀>主題。您應該看到您的子主題已列出并準備激活。（如果您的WordPress安裝已啟用多站點，則可能需要切換到網絡管理屏幕以啟用主題（在“網絡管理主題屏幕”選項卡中），然后可以切換回到特定于站點的WordPress管理屏幕激活你的子主題。） >[warning] 注意：激活子主題后，您可能需要從外觀>菜單和主題選項（包括背景和標題圖像）重新保存菜單。 ## 添加模板文件除了functions.php文件（如上所述），您添加到您的子主題的任何文件將覆蓋父主題中的相同文件。在大多數情況下，最好從父主題創建要更改的模板文件的副本，然后對所復制的文件進行修改，使父文件保持不變。例如，如果要更改父主題的header.php文件的代碼，您可以將該文件復制到您的子主題文件夾并在那里進行自定義。 >[info] 提示：有幾個插件允許您檢測正在查找的頁面上正在使用的具體模板。 - What The File - What Template File Am I Viewing? - Debug Bar 您還可以在父主題中未包含的子主題中包含文件。例如，您可能需要創建一個比您的父主題中更具體的模板，例如特定頁面或類別歸檔的模板（例如，頁面3php將為ID為3的頁面加載）。有關WordPress如何確定要使用哪個模板的更多信息，請參閱“模板層次”頁面。 ## 使用functions.php 與style.css不同，子主題的functions.php不會覆蓋其父對象。而是除了父項的functions.php之外加載它。（具體來說，它是在父文件之前加載的。）這樣，一個子主題的functions.php提供了一個聰明，無故障的修改父主題功能的方法。假設你想添加一個PHP函數到你的主題。最快的方式是打開它的functions.php文件并把功能放在那里。但這不聰明：下次主題更新時，您的功能將會消失。但是有一種替代方法是聰明的方法：您可以創建一個子主題，在其中添加一個functions.php文件，并將該函數添加到該文件中。該功能也將從那里做同樣的工作，其優點是不會受到父主題的未來更新的影響。不要將父主題的functions.php的完整內容復制到child主題的functions.php中。 functions.php的結構很簡單：在頂部打開PHP標簽，下面是PHP的位。在其中，您可以根據需要放置盡可能多的功能。下面的例子顯示了一個基本的functions.php文件，它提供了一個簡單的事情：向HTML頁面的頭元素添加一個favicon鏈接。 ``` <?php // Opening PHP tag - nothing should be before this, not even whitespace // Custom Function to Include function my_favicon_link() { echo '<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />' . "\n"; } add_action( 'wp_head', 'my_favicon_link' ); Tip: The fact that a child theme’s functions.php is loaded first means that you can make the user functions of your theme pluggable —that is, replaceable by a child theme— by declaring them conditionally. if ( ! function_exists( 'theme_special_nav' ) ) { function theme_special_nav() { // Do something. } } ``` 這樣一來，一個子主題就可以通過簡單地聲明它來代替父代的PHP函數。有關您的子主題的functions.php文件中包含的內容的詳細信息，請閱讀“主題功能”頁面。 ## 參考或包括其他文件當您需要包含位于子主題目錄結構中的文件時，您將需要使用get_stylesheet_directory()。由于style.css位于子主題子目錄的根目錄中，所以get_stylesheet_directory()指向您的子主題目錄（而不是父主題目錄）。要引用父主題目錄，可以使用get_template_directory()。下面是一個示例，說明如何在引用存儲在子主題目錄中的文件時使用get_stylesheet_directory()： ``` <?php require_once( get_stylesheet_directory(). '/my_included_file.php' ); ?> ``` 同時，此示例使用get_stylesheet_directory_uri()顯示存儲在子主題目錄中的/ images文件夾中的圖像。 ``` <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/my_picture.png" alt="" /> ``` 與返回文件路徑的get_stylesheet_directory()不同，get_stylesheet_directory_uri()返回一個URL，這對前端資源很有用。 ## 入隊樣式和腳本每個腳本和樣式都應該使用自己的功能排隊，然后應該包含在一個動作中。有關更多信息，請閱讀包含CSS和JavaScript的頁面。 WordPress不會自動加載您的孩子主題的樣式表在前端。以下是使用wp_enqueue_scripts()動作鉤子調用排序子主題樣式表的函數的示例。 ``` <?php add_action( 'wp_enqueue_scripts', 'my_plugin_add_stylesheet' ); function my_plugin_add_stylesheet() { wp_enqueue_style( 'my-style', get_stylesheet_directory_uri() . '/style.css', false, '1.0', 'all' ); } ``` ## 帖子格式子主題繼承父主題定義的帖子格式。但是當創建子主題時，請注意使用add_theme_support（'post-formats'）會覆蓋父主題定義的格式，而不添加它。 ## RTL支持要支持RTL語言，請將rtl.css文件添加到您的子主題中，其中包含： ``` /* Theme Name: Twenty Fifteen Child Template: twentyfifteen */ ``` 即使父主題沒有rtl.css文件，建議將rtl.css文件添加到您的子主題中。只有在is_rtl()為true時，WordPress才會自動加載rtl.css文件。 ## 國際化子主題可以通過使用WordPress國際化API來準備翻譯成其他語言。有關子主題國際化的特殊考慮。要使子主題國際化，請按照下列步驟操作： - 1.添加語言目錄。例如：twentyfifteen/language/ - 2.添加語言文件。您的文件名必須是he_IL.po＆he_IL.mo（取決于您的語言），不同于plugin-he_IL.xx的插件文件。 - 3.加載文本域在after_setup_theme動作期間，在functions.php中使用load_child_theme_textdomain()。在load_child_theme_textdomain()中定義的文本域應該用于翻譯子主題中的所有字符串。 - 4.使用GetText函數為字符串添加i18n支持。 ## 示例：textdomain ``` <?php /** * Set up My Child Theme's textdomain. * * Declare textdomain for this child theme. * Translations can be added to the /languages/ directory. */ function twentyfifteenchild_theme_setup() { load_child_theme_textdomain( 'twentyfifteenchild', get_stylesheet_directory() . '/languages' ); } add_action( 'after_setup_theme', 'twentyfifteenchild_theme_setup' ); ?> ``` 此時，子主題中的字符串已準備好進行翻譯。為了確保它們被正確地翻譯成國際化，每個字符串需要有twentyfifteen文本域。示例：gettext函數這是一個回應短語“Code is Poetry”的例子： ``` <?php esc_html_e( 'Code is Poetry', 'twentyfifteenchild' ); ?> ``` 在load_child_theme_textdomain()中定義的文本域應該用于翻譯子主題中的所有字符串。如果父類中包含一個模板文件，則應將該文本域從父主題中定義的模板文件更改為子主題定義的文本。