child-theme-1

การใช้งานธีมลูก (Child Theme) ตอนที่ 1

ธีมลูก (Child Theme) คือ ธีมที่มีฟังก์ชั่นการใช้งานที่ได้มาจากธีมแม่ (Parent Theme) มีไว้เพื่อวัตถุประสงค์ในการปรับเปลี่ยนแก้ไขธีมที่ใช้อยู่ สาเหตุที่ใช้ธีมลูก (Child Theme) มีเหตุผลดังต่อไปนี้

  • ถ้าเราปรับเปลี่ยนธีม (Parent Theme) แบบตรงๆ และเมื่อธีมนั้นได้รับการอัพเดท ค่าการปรับแต่งหรือฟังก์ชั่นต่างๆ ที่เราได้สร้างมาในธีมนี้จะหายและสูญเสียไป แต่หากเราใช้ธีมลูก (Child Theme) ในการปรับแต่งจะทำค่าและฟังก์ชั่น ต่างๆ จะยังคงอยู่
  • การใช้ธีมลูก (Child Theme) นั้นจะช่วยเราในการร่นระยะเวลาในการพัฒนาธีมของเรา
  • นอกจากนั้นแล้วการใช้ธีมลูก (Child Theme) จะช่วยให้เราได้เรียนรู้พัฒนาธีมของเวิร์ดเพรส (WordPress Theme) อีกด้วย

การสร้างธีมลูก (Child Theme) สามารถทำได้โดยให้เราสร้างโฟลเดอร์ธีมลูก (Child Theme) ขึ้นมาจำนวน 1 โฟลเดอร์และ 2 ไฟล์ เริ่มต้น ได้แก่ functions.php และ style.css ดังขั้นตอนต่อไปนี้

  1. ให้ตั้งชื่อโฟลเดอร์เป็นชื่อธีมของเราตามด้วย –child เช่น ธีมหลักของเราชื่อ Themevilles ดังนั้นธีมลูกของเราจะตั้งชื่อเป็น themevilles-child
  2. ให้นำโฟลเดอร์ Child Theme นั้นใส่ไว้ใน wp-content/themes
  3. ให้สร้างไฟล์ style.css ของธีมลูก (Child Theme) แล้วเปิดไฟล์ดังกล่าว ให้ใส่ข้อมูลเริ่มต้นคล้ายกับธีมหลัก (Parent Theme) ในส่วนหัวของไฟล์ โดยให้เราระบุชื่อ Theme Name, Theme URI, Description และ Text Domain ให้มีคำว่า Child ดังรูป ข้อสำคัญคือในส่วนของ Template: จะต้องมีการระบุชื่อธีมแม่ (Parent Theme) ของเราไว้ด้วย ในที่นี้คือ Themevilles
    /*
     *  Theme Name: Themevilles Child
     *  Theme URI: http://demo-theme-1.themevilles.com
     *  Description: Passport is a responsive WordPress theme for magazines, newspaper, publishing, and others.
     *  Author: Worapong N.
     *  Author URI: https://themevilles.com/author/worapong
     *  Template: themevilles
     *  Version: 1.0.0
     *  License: GNU General Public License version 3.0 
     *  License URI: http://www.gnu.org/licenses/gpl-3.0.html
     *  Tags: left-sidebar, right-sidebar, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, post-formats, sticky-post, threaded-comments, translation-ready
     *  Text Domain: themevilles-child
     **/
  4. ขั้นตอนสุดท้ายคือ ให้ธีมลูก (Child Theme) ของเรารู้จักกับไฟล์ style.css ของธีมหลัก (Parent Theme) โดยจะต้องสร้างฟังก์ชั่นแรกขึ้นมาหนึ่งฟังก์ชั่นแล้วให้ใช้ฟังก์ชั่นของเวิร์ดเพรส ชื่อ wp_enqueue_style ดึงไฟล์ style.css ของธีมหลักมาใช้งาน ฟังก์ชั่นแรกนี้จะเหมาะสมในกรณีที่ธีมหลัก (Parent Theme) มีไฟล์ style.css เพียงไฟล์เดียว หากมีหลายไฟล์เราจะต้องทำการทำการดึงมาทั้งหมด
    <?php
    add_action( 'wp_enqueue_scripts', 'themevilles_enqueue_styles' );
    
    function themevilles_enqueue_styles() {
    
        wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    
    }
    ?>

    แต่ถ้าเราต้องการใช้งาน style.css ในธีมลูก (Child Theme) ด้วย เราจะเขียนโค๊ดเพิ่ม โดยต้องลำดับการเรียกไฟล์ให้ไปเรียกที่ธีมหลัก (Parent Theme) ก่อนแล้วตามด้วยธีมลูก (Child Theme) ตามลำดับ การระบุเวอร์ชั่นในธีมลูก (Child Theme) ก็เป็นสิ่งจำเป็นเพื่อป้องกัน Cache ที่จะเกิดขึ้น

    <?php
    function themevilles_enqueue_styles() {
    
        $parent_style = 'parent-style'; 
    
        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', 'themevilles_enqueue_styles' );
    ?>

 

ถึงขั้นตอนนี้แล้วเราสามารถที่จะเลือกใช้งานธีมลูก (Child Theme) ได้โดยเมื่อเราไปที่ Administration Panels > Appearance > Themes เราก็จะเห็น Child Theme อยู่ในรายการเลือกธีม (Theme list) พร้อมให้เราเลือกใช้งาน

child-theme
Child Theme

สำหรับรูปที่อยู่ในกล่อง Child Theme ที่เราเห็นไม่มีนั้น เราสามารถสร้างขึ้นมาได้ด้วยการบันทึกรูปให้อยู่ในโฟลเดอร์เดียวกันนี้แล้วตั้งชื่อว่า screenshot.png โดยให้มีขนาด 1200×900 pixel เมื่อแสดงผลจะลดขนาดเหลือ 387×290 pixel อัตโนมัติ

child-theme-and-screenshot
Themevilles Child Theme

เพียงเท่านี้เราก็สามารถใช้ Child Theme ในการเพิ่มหรือแก้ไขฟังก์ชั่น และสามารถใช้ในการปรับแต่ง Style Sheet ของเราได้แล้วครับ สำหรับในบทความถัดไปเราจะแนะนำถึงวิธีการใช้งานธีมลูก (Child Theme) นะครับ

avatar

นายปิ๊ก


ผู้ก่อตั้งเว็บไซต์ Themevilles.com เป็นอาจารย์สอน WordPress และ WooCommerce ในเว็บคอร์สออนไลน์ Skilllane และรับทำเว็บไซต์ ทำการตลาดออนไลน์ เช่น SEO, Facebook และ LINE

สอบถามผ่านทาง Line QR Code qr-code.png