|
前一段時(shí)間在折騰網(wǎng)站時(shí)，發(fā)現(xiàn)網(wǎng)站的主題可以升級(jí)了，于是隨手點(diǎn)擊了升級(jí)，等到反應(yīng)過來已經(jīng)晚了，之前直接在Wordpress主題上修改過的CSS、JS以及函數(shù)代碼都已經(jīng)被升級(jí)后的主題覆蓋掉了，沒辦法花了大半天的時(shí)間才恢復(fù)過來。 其實(shí)，早就知道Wordpress有子主題這么一個(gè)功能，主要使用在于方便你自己對(duì)主題進(jìn)行自定義，例如重新調(diào)整CSS、JS以及函數(shù)代碼，而不受WordPress主題升級(jí)的影響。如果對(duì)子主題不滿意，可以直接刪除子主題，而原來的Wordpress主題依然正常。
這篇文章就來分享一下如何給自己的WordPress主題創(chuàng)建一個(gè)子主題，更多關(guān)于Wordpress優(yōu)化加速的文章，這里還有：
一、一鍵創(chuàng)建WP子主題插件：
不想繼續(xù)深入折騰Wordpress的朋友，可以直接下載Child Theme Creator by Orbisius插件，該插件可以幫你一鍵創(chuàng)建Wordpress子主題，而且支持單個(gè)WP主題創(chuàng)建多個(gè)子主題。
Child Theme Creator by Orbisius這個(gè)插件還支持在線編輯子主題，當(dāng)然你也可以自己手動(dòng)編輯子主題。
二、手動(dòng)創(chuàng)建WP子主題2.1 新建子主題文件夾用FTP或者SFTP登錄到你的服務(wù)器，在 wp-content/themes/ 下新建一個(gè)文件夾，文件夾命名為：你的主題名稱-child，或者你也可以直接在本地新建文件夾，然后命名。如下圖：
2.2 新建子主題CSS在子主題文件夾，新建一個(gè)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 后填寫子主題的名稱，其他項(xiàng)目非必填。然后導(dǎo)入父主題的 CSS 文件。要注意的是Template必須和父主題名完全一致，在除注釋外第一行需要用 @import規(guī)則將父主題（Xxxx）的樣式表（style.css）調(diào)入；然后便可以在這之后自定義樣式，添加的樣式若與父主題重復(fù)，會(huì)自動(dòng)替換父主題的樣式。 最后一句@import url(../twentyfifteen/style.css);是導(dǎo)入主題的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該選項(xiàng)為可選。主要為了在子主題里自定義JS，名稱為：
2.4 新建functions.php該選項(xiàng)為可選。子主題中的
functions.php文件的結(jié)構(gòu)非常簡(jiǎn)單：將PHP起始標(biāo)簽置于頂部，關(guān)閉標(biāo)簽置于底部，它們之間就寫上你自己的PHP函數(shù)。按你的需要任意添加函數(shù)，下面的示例是一個(gè)基本的 <?php
function scp_comment_post( $incoming_comment ) {
$pattern = '/[一-龥]/u';
// 禁止全英文評(píng)論
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! 您的評(píng)論中必須包含漢字!" );
}
return( $incoming_comment );
}
add_filter('preprocess_comment', 'scp_comment_post');
// 禁止日文評(píng)論
function BYMT_comment_jp_post( $incoming_comment ) {
$jpattern ='/[ぁ-ん]+|[ァ-ヴ]+/u';
if(preg_match($jpattern, $incoming_comment['comment_content'])){
wp_die( "禁止有日文字符的評(píng)論 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 啟用子主題你還可以給你的子主題添加一個(gè)預(yù)覽圖片：screenshot.png，最后你的子主題文件夾應(yīng)該看起來文件結(jié)構(gòu)如下：
現(xiàn)在將你的子主題文件夾上傳到你的Wordpress父主題所在的目錄下，如下圖：
回到你的Wordpress主題管理頁面，點(diǎn)擊就可以啟用WP子主題了。
3.2 編輯子主題仔細(xì)觀察一下，你的Wordpress主題會(huì)自動(dòng)加載子主題的CSS、JS和
四、總結(jié)如果你在themeforest有過購買Wordpress主題，創(chuàng)建一個(gè)WordPress子主題還是非常有用的，國(guó)外的Wordpress主題基本上都支持子主題，而且經(jīng)常保持更新。我們?cè)谛薷腤P主題時(shí)可以完全不受主題升級(jí)的影響。 如果要修改父主題中某一模板文件，如footer.php，我們就可以把父主題中的footer.php復(fù)制到子主題目錄中，然后編輯子主題中的footer.php，這樣既更新了網(wǎng)站的footer，又不修改父主題的代碼。以后主題要更新的時(shí)候我們就可以輕松把父主題替換掉，再根據(jù)子主題中的文件做微調(diào)了。 文章出自：挖站否 https:///wp-zi-zhuti/，版權(quán)所有。本站文章除注明出處外，皆為作者原創(chuàng)文章，可自由引用，但請(qǐng)注明來源。部分內(nèi)容參考/appthemes。 |
|
|
