Wordpress子主題創(chuàng)建與使用方法

看見就非常 2020-04-30

展開全文

前一段時間在折騰網(wǎng)站時，發(fā)現(xiàn)網(wǎng)站的主題可以升級了，于是隨手點擊了升級，等到反應過來已經晚了，之前直接在Wordpress主題上修改過的CSS、JS以及函數(shù)代碼都已經被升級后的主題覆蓋掉了，沒辦法花了大半天的時間才恢復過來。

其實，早就知道Wordpress有子主題這么一個功能，主要使用在于方便你自己對主題進行自定義，例如重新調整CSS、JS以及函數(shù)代碼，而不受WordPress主題升級的影響。如果對子主題不滿意，可以直接刪除子主題，而原來的Wordpress主題依然正常。

這篇文章就來分享一下如何給自己的WordPress主題創(chuàng)建一個子主題，更多關于Wordpress優(yōu)化加速的文章，這里還有：

PS：2019年9月15日更新，如果你的Wordpress的文章比較長，這時候加一個目錄導航是非常有必要的：WordPress文章目錄側邊固定滾動-Easy Table 和LuckyWP Table插件。

PS：2020年3月23日更新，如果想要購買國外的主題，可以看看：WordPress付費主題平臺AppThemes：主題購買,安裝,升級及問題。

一、一鍵創(chuàng)建WP子主題

插件：

https:///plugins/orbisius-child-theme-creator/

不想繼續(xù)深入折騰Wordpress的朋友，可以直接下載Child Theme Creator by Orbisius插件，該插件可以幫你一鍵創(chuàng)建Wordpress子主題，而且支持單個WP主題創(chuàng)建多個子主題。

Child Theme Creator by Orbisius這個插件還支持在線編輯子主題，當然你也可以自己手動編輯子主題。

二、手動創(chuàng)建WP子主題

2.1 新建子主題文件夾

用FTP或者SFTP登錄到你的服務器，在 wp-content/themes/ 下新建一個文件夾，文件夾命名為：你的主題名稱-child，或者你也可以直接在本地新建文件夾，然后命名。如下圖：

2.2 新建子主題CSS

在子主題文件夾，新建一個style.css 文件，代碼如下：

/*
Theme Name:     Twenty Fifteen Child
Theme URI:      http:///
Description:    Child theme for the Twenty Fifteen theme 
Author:         Your name here
Author URI:     http:///
Template:       twentyfifteen
Version:        1.0
*/

@import url(../twentyfifteen/style.css);

Template 后填寫父主題的文件夾名稱，Theme Name 后填寫子主題的名稱，其他項目非必填。然后導入父主題的 CSS 文件。要注意的是Template必須和父主題名完全一致，在除注釋外第一行需要用 @import規(guī)則將父主題（Xxxx）的樣式表（style.css）調入；然后便可以在這之后自定義樣式，添加的樣式若與父主題重復，會自動替換父主題的樣式。

最后一句@import url(../twentyfifteen/style.css);是導入主題的CSS，如果不寫上，你需要在子主題函數(shù)寫上。

/*
Theme Name:     Clipper 優(yōu)惠否子主題
Theme URI:      https:///
Description:    one child theme for the Clipper theme
Author:         qi
Author URI:     https:///
Template:       clipper
Version:        2019.8.15
*/

/* Add you custom styles below */

2.3 新建子主題JS

該選項為可選。主要為了在子主題里自定義JS，名稱為：general.js，如果你要添加JS，就可以放在這里了。

2.4 新建functions.php

該選項為可選。子主題中的functions.php不會覆蓋父主題中對應功能，而是將新的功能加入到父主題的functions.php中，因而它不是必須的。（其實它會在父主題文件加載之前先載入）

functions.php文件的結構非常簡單：將PHP起始標簽置于頂部，關閉標簽置于底部，它們之間就寫上你自己的PHP函數(shù)。按你的需要任意添加函數(shù)，下面的示例是一個基本的functions.php文件的寫法，作用是防止垃圾評論。

<?php
 
function scp_comment_post( $incoming_comment ) {
    $pattern = '/[一-龥]/u';

    // 禁止全英文評論
    if(!preg_match($pattern, $incoming_comment['comment_content'])) {
        wp_die( "You should type some Chinese word (like \"你好\") in your comment to pass the spam-check, thanks for your patience! 您的評論中必須包含漢字!" );
    }
    return( $incoming_comment );
}
add_filter('preprocess_comment', 'scp_comment_post');

// 禁止日文評論
function BYMT_comment_jp_post( $incoming_comment ) {
$jpattern ='/[ぁ-ん]+|[ァ-ヴ]+/u';
if(preg_match($jpattern, $incoming_comment['comment_content'])){
wp_die( "禁止有日文字符的評論 You should type some Chinese word" );
}
return( $incoming_comment );
}
add_filter('preprocess_comment', 'BYMT_comment_jp_post');
 
?>

以下functions.php是讓子主題加載CSS、JS以及自定義函數(shù)。

<?php 
/* Clipper child theme functions.
 *
 * BEFORE USING: Move the clipper-child theme into the /themes/ folder.
 *
 * @package Clipper\Functions
 * @author AppThemes
 * @since Clipper 2.0.2
 */ 

/**
 * Registers the stylesheet for the child theme.
 */
function clipper_child_styles() { 
  global $clpr_options; 
  wp_enqueue_style( 'child-style', get_stylesheet_uri() );

  // Enqueue color scheme. 
  wp_enqueue_style( 'at-color', get_template_directory_uri() . '/styles/' . $clpr_options->stylesheet );

  // Disable the Clipper default styles.
  //wp_dequeue_style( 'at-main' );

  // Disable the Foundation framework styles.
  //wp_dequeue_style( 'foundation' );
}

add_action( 'wp_enqueue_scripts', 'clipper_child_styles', 999 );

/**
 * Registers the scripts for the child theme.
 */
function clipper_child_scripts() {

  wp_enqueue_script( 'child-script', get_stylesheet_directory_uri() . 'https://wzfou.cdn./general.js' );


  // Disable the Clipper default scripts.
  //wp_dequeue_script( 'theme-scripts' );


  // Disable the Foundation framework scripts.
  //wp_dequeue_script( 'foundation' );
  //wp_dequeue_script( 'foundation-motion-ui' );
}

add_action( 'wp_enqueue_scripts', 'clipper_child_scripts', 999 );


/**
 * This function migrates parent theme mods to the child theme.
 */
function clipper_child_assign_mods_on_activation() {

  if ( empty( get_theme_mod( 'migrated_from_parent' ) ) ) {

    $theme = get_option( 'stylesheet' );
    update_option( "theme_mods_$theme", get_option( 'theme_mods_clipper' ) );
    set_theme_mod( 'migrated_from_parent', 1 );
  }
}

add_action( 'after_switch_theme', 'clipper_child_assign_mods_on_activation' );


// 現(xiàn)可以添加自定義函數(shù)了.

三、啟用編輯WP子主題

3.1 啟用子主題

你還可以給你的子主題添加一個預覽圖片：screenshot.png，最后你的子主題文件夾應該看起來文件結構如下：

現(xiàn)在將你的子主題文件夾上傳到你的Wordpress父主題所在的目錄下，如下圖：

回到你的Wordpress主題管理頁面，點擊就可以啟用WP子主題了。

3.2 編輯子主題

仔細觀察一下，你的Wordpress主題會自動加載子主題的CSS、JS和functions.php，你只需要編輯Wordpress子主題的CSS、JS和functions.php文件就可以達到自定義主題的目的了。

四、總結

如果你在themeforest有過購買Wordpress主題，創(chuàng)建一個WordPress子主題還是非常有用的，國外的Wordpress主題基本上都支持子主題，而且經常保持更新。我們在修改WP主題時可以完全不受主題升級的影響。

如果要修改父主題中某一模板文件，如footer.php，我們就可以把父主題中的footer.php復制到子主題目錄中，然后編輯子主題中的footer.php，這樣既更新了網(wǎng)站的footer，又不修改父主題的代碼。以后主題要更新的時候我們就可以輕松把父主題替換掉，再根據(jù)子主題中的文件做微調了。