มีผู้ใช้ WordPress^(WordPress)เพียงไม่กี่รายที่ใช้ธีมลูก และนั่นเป็นเพราะว่าผู้ใช้หลายคนไม่รู้ว่าธีมลูกคืออะไร หรือการสร้างธีม^{(Creating Child Theme)}ลูกในWordPress คน^(Well)ส่วนใหญ่ที่ใช้WordPressมักจะแก้ไขหรือปรับแต่งธีมของตน แต่การปรับแต่งทั้งหมดนั้นจะหายไปเมื่อคุณอัปเดตธีม และนั่นคือที่มาของการใช้ธีมลูก เมื่อคุณใช้ธีมลูก การปรับแต่งทั้งหมดของคุณจะถูกบันทึกไว้ และคุณสามารถอัปเดตธีมหลักได้อย่างง่ายดาย

การสร้างธีมลูกใน WordPress

การสร้างธีมลูกจากธีมหลักที่ไม่ได้แก้ไข^{(Creating a Child Theme from an Unmodified Parent Theme)}

ในการสร้างธีมลูกในWordPressคุณต้องลงชื่อเข้าใช้ cPanel และไปที่ public_html จากนั้นไปที่ wp-content/themes ซึ่งคุณต้องสร้างโฟลเดอร์ใหม่สำหรับธีมย่อยของคุณ (ตัวอย่าง /Twentysixteen-child/) ตรวจสอบให้แน่ใจว่าคุณไม่มีช่องว่างในชื่อของไดเร็กทอรีธีมลูกซึ่งอาจส่งผลให้เกิดข้อผิดพลาด

แนะนำ:^{(Recommended:)}คุณยังสามารถใช้ปลั๊กอิน One-Click Child Theme^{(One-Click Child Theme plugin)}เพื่อสร้างธีมย่อย (เฉพาะจากธีมหลักที่ไม่ได้แก้ไขเท่านั้น)

ตอนนี้ คุณต้องสร้างไฟล์ style.css สำหรับธีมลูกของคุณ (ภายในไดเร็กทอรีธีมลูกที่คุณเพิ่งสร้างขึ้น) เมื่อคุณสร้างไฟล์แล้ว ให้คัดลอกและวางโค้ดต่อไปนี้ ( เปลี่ยน^(Change)รายละเอียดด้านล่างตามข้อกำหนดธีมของคุณ):

/*
 Theme Name: Twenty Sixteen Child
 Theme URI: http://example.com/twenty-sixteen-child/
 Description: Twenty Sixteen Child Theme
 Author: WordPress Team
 Author URI: http://example.com
 Template: twentysixteen
 Version: 1.3.0
 License: GNU General Public License v3 or later
 License URI: http://www.gnu.org/licenses/gpl-3.0.html
*/

หมายเหตุ: ^(Note: )บรรทัดเทมเพลต^(Template) ( เทมเพลต^(Template) : ยี่สิบหกสิบหก) จะถูกเปลี่ยนตามชื่อปัจจุบันของไดเร็กทอรีธีมของคุณ (ธีมหลักที่เรากำลังสร้างลูก) ธีมหลักในตัวอย่างของเราคือ ธีม Twenty Sixteenดังนั้นเทมเพลต^(Template)จะมีขนาด ยี่สิบหก

ก่อนหน้านี้ @import ใช้เพื่อโหลดสไตล์ชีตจากพาเรนต์ไปยังธีมย่อย แต่ตอนนี้ไม่ใช่วิธีที่ดี เนื่องจากจะเพิ่มระยะเวลาในการโหลดสไตล์ชีต แทนที่จะใช้ @import วิธีที่ดีที่สุดคือใช้ ฟังก์ชัน PHPในไฟล์ functions.php ธีมลูกของคุณเพื่อโหลดสไตล์ชีต

ในการใช้ไฟล์ functions.php คุณต้องสร้างไฟล์ในไดเร็กทอรีธีมลูกของคุณ ใช้รหัสต่อไปนี้ในไฟล์ functions.php ของคุณ:

<?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' );

}
?>

โค้ดด้านบนจะใช้ได้ก็ต่อเมื่อธีมหลักของคุณใช้ไฟล์ .css เพียงไฟล์เดียวเพื่อเก็บโค้ดCSS ทั้งหมด^(CSS)

หาก style.css ธีมลูกของคุณมี โค้ด CSS จริงๆ (ตามปกติ) คุณจะต้องจัดคิวโค้ดดังกล่าวด้วย:

<?php
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')
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

ได้เวลาเปิดใช้งานธีมลูกของคุณแล้ว ลงชื่อเข้าใช้แผงการดูแลระบบ จากนั้นไปที่ ลักษณะที่ Appearance > Themesและเปิดใช้งานธีมลูกของคุณจากรายการธีมที่มี

หมายเหตุ:^(Note:)คุณอาจต้องบันทึกเมนูของคุณอีกครั้ง ( Appearance > Menus ) และตัวเลือกธีม (รวมถึงภาพพื้นหลังและส่วนหัว) หลังจากเปิดใช้งานธีมย่อย

ตอนนี้เมื่อใดก็ตามที่คุณต้องการเปลี่ยนแปลง style.css หรือ functions.php ของคุณ คุณสามารถทำได้ในธีมลูกของคุณโดยไม่ส่งผลกระทบต่อโฟลเดอร์ของธีมหลัก

การสร้างธีมลูก^{(Child Theme)}ในWordPressจากธีมหลักของคุณ แต่พวกคุณส่วนใหญ่ได้ปรับแต่งธีมของคุณแล้ว ดังนั้นวิธีการด้านบนนี้ไม่ได้ช่วยอะไรคุณเลย ในกรณีนั้น โปรดดูวิธีอัปเดต ธีม WordPressโดยไม่สูญเสียการปรับแต่ง

หากหวังว่าบทความนี้จะเป็นประโยชน์กับคุณ แต่ถ้าคุณยังมีคำถามใดๆ เกี่ยวกับคู่มือนี้ โปรดอย่าลังเลที่จะถามพวกเขาในความคิดเห็น

Creating Child Theme in WordPress

Only a handful of WordPress users usеs a сhild theme and that’s because many of the uѕers don’t know what is a child theme or Creating Child Theme in WordPress. Well, most of the people using WordPress tend to edit or customize their theme but all that customizatіon is lost when you update your theme and that’s where the use of child theme comеs. When you use a chіld theme then all your customizatiоn will be saved and you сan easily update the parent theme.

Creating a Child Theme from an Unmodified Parent Theme

In order to create a child theme in WordPress you need to login to your cPanel and navigate to the public_html then wp-content/themes where you have to create a new folder for your child theme (example /Twentysixteen-child/). Make sure you don’t have any spaces in the name of child theme directory which may result in errors.

Recommended: You can also use One-Click Child Theme plugin to create a child theme(only from an unmodified parent theme).

Now you need to create a style.css file for your child theme (inside the child theme directory you just created). Once you have created the file just copy and paste the following code (Change below details according to your theme specifications):

/*
 Theme Name: Twenty Sixteen Child
 Theme URI: http://example.com/twenty-sixteen-child/
 Description: Twenty Sixteen Child Theme
 Author: WordPress Team
 Author URI: http://example.com
 Template: twentysixteen
 Version: 1.3.0
 License: GNU General Public License v3 or later
 License URI: http://www.gnu.org/licenses/gpl-3.0.html
*/

Note: The Template line (Template: twentysixteen) is to be changed according to your current name of the theme directory(the parent theme whose child we are creating). The parent theme in our example is the Twenty Sixteen theme, so the Template will be twentysixteen.

Earlier @import was used to load the stylesheet from parent to the child theme, but now it’s not a good method as it increases the amount of time to load the stylesheet. In place of using @import its best to use PHP functions in your child theme functions.php file to load the stylesheet.

In order to use functions.php file you need to create one in your child theme directory. Use the following code in your functions.php file:

<?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' );

}
?>

The above code only works if your parent theme uses only one .css file to hold all the CSS code.

If your child theme style.css contain actually CSS code (as it normally does), you will need to enqueue it as well:

<?php
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')
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

It’s time to activate your child theme, login to your admin panel then go to Appearance > Themes and activate your child theme from the available list of themes.

Note: You may need to re-save your menu (Appearance > Menus) and theme options (including background and header images) after activating the child theme.

Now whenever you want to make changes to your style.css or functions.php you can easily do that in your child theme without affecting the parent theme folder.

Creating Child Theme in WordPress from your parent theme, but most of you have already customized your theme then the above method is not going to help you at all. In that case, check out how to update a WordPress Theme without losing customization.

If hope this article was helpful to you but if you still have any question regarding this guide please feel free to ask them in comments.

จิรโชติ หวังกระแทกคาง

About the author

ฉันเป็นนักพัฒนาเว็บที่มีประสบการณ์มากกว่า 10 ปี ฉันเชี่ยวชาญด้านการพัฒนา Chrome OS และเคยทำงานในโครงการต่างๆ มากมายตั้งแต่สตาร์ทอัพขนาดเล็กไปจนถึงบริษัทที่ติดอันดับ Fortune 500 ฉันยังเป็นผู้เชี่ยวชาญในบัญชีผู้ใช้และความปลอดภัยของครอบครัว และได้พัฒนาแอพ Android ที่ประสบความสำเร็จหลายตัว

การสร้างธีมลูกใน WordPress

การสร้างธีมลูกใน WordPress

การสร้างธีมลูกจากธีมหลักที่ไม่ได้แก้ไข^{(Creating a Child Theme from an Unmodified Parent Theme)}

Creating Child Theme in WordPress