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

100 | นายปิ๊ก | มิถุนายน 21, 2019. | WordPress, ความรู้, ปรับแต่ง WordPress, ออกแบบเว็บไซต์, แก้โค้ด WordPress ธีมลูก, ระดับกลาง, แก้โค้ด WordPress, แก้ไขโค้ด WordPress

การใช้งานธีมลูกนั้น เราสามารถแก้ไข theme wordpress ได้ใน 3 ลักษณะด้วยกัน ได้แก่

การแก้ไขไฟล์ style.css
การแก้ไขไฟล์หลัก เช่น header.php, footer.php ต่างๆ
การแก้ไขไฟล์ functions.php

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

ตัวอย่าง
ธีมหลัก มีไฟล์ stye.css, functions.php, header.php
ธีมลูก ก็ให้มีไฟล์แบบเดียวกัน คือ style.css, functions.php และ header.php เมื่อเราต้องการที่จะแก้ header.php ในธีมหลัก ให้เราแก้ที่ header.php ที่ธีมลูก

การแก้ไขไฟล์ฟังก์ชั่น functions.php

ส่วนที่ยากที่สุดในการแก้ไข theme wordpress คือ การแก้ไขฟังก์ชั่น functions.php นั้น ในไฟล์ฟังก์ชั่นนั้นเราจะต้องทำการแก้ไขด้วยการนำออก (Remove) เมื่อเราไม่ต้องการใช้ฟังก์ชั่นนั้นๆ และนำเข้า (Add) เมื่อเราต้องการใช้งานทุกครั้ง ในไฟล์ functions.php เราสามารถแก้ไขข้อมูลดังต่อไปนี้

ฟีเจอร์ของธีม (Theme features) เช่น กลุ่มฟังก์ชั่น add_theme_support() เช่น

post-formats
post-thumbnails
custom-background
custom-header
automatic-feed-links

เราสามารถยกเลิกได้ด้วยการใช้ฟังก์ชั่น remove_theme_support() ตามด้านล่าง

function remove_parent_theme_features() {
    remove_theme_support( 'post-formats' );
    remove_theme_support( 'post-thumbnails' );
    remove_theme_support( 'custom-background' );
    remove_theme_support( 'custom-header' );
    remove_theme_support( 'automatic-feed-links' );
}

function remove_parent_theme_features() {

remove_theme_support( 'post-formats' );

remove_theme_support( 'post-thumbnails' );

remove_theme_support( 'custom-background' );

remove_theme_support( 'custom-header' );

remove_theme_support( 'automatic-feed-links' );

}

ประเภทของบทความพิเศษและกลุ่มบทความพิเศษ (Custom Post Types and Taxonomies) เราสามารถเอาประเภทบทความพิเศษนี้ออกได้ด้วยการนำออก (Remove) โดยใช้ฟังก์ชั่น remove_action() และเรายังสามารถเพิ่มบทความพิเศษเข้าไปได้ด้วยฟังก์ชั่น add_action() เช่นเดียวกันจากตัวอย่างด้านล่างจะเป็นการลงทะเบียนประเภทของบทความพิเศษ (Custom Post Types) ในธีมหลัก (Parent Theme)

// PARENT functions.php
 
add_action( 'after_setup_theme', 'parent_movie_add_post_type' );
 
function parent_movie_add_post_type() {
 
    $parent_args = array(
        // other arguments...
        'rewrite' => array( 'slug' => 'movie' ),
        'supports' => array( 'title', 'editor', 'author', 'excerpt' )
    );
    register_post_type( 'movie', $parent_args );
}

// PARENT functions.php

add_action( 'after_setup_theme', 'parent_movie_add_post_type' );

function parent_movie_add_post_type() {

$parent_args = array(

// other arguments...

'rewrite' => array( 'slug' => 'movie' ),

'supports' => array( 'title', 'editor', 'author', 'excerpt' )

);

register_post_type( 'movie', $parent_args );

}

หากเราไม่ต้องการใช้งานประเภทของบทความพิเศษนั้น ตามตัวอย่างด้านล่าง

// CHILD functions.php
 
function remove_parent_theme_features() {
    // remove Movie Custom Post Type
    remove_action( 'init', 'parent_movie_add_post_type' );
    /*
    alternatively, we can add our custom post type to 
    overwrite only some aspects of the parent function
    */
    add_action( 'init', 'child_movie_post_type' );
}
 
function child_movie_post_type() {
    $child_args = array(
        // other arguments...
        // change Custom Post slug
        'rewrite' => array( 'slug' => 'child-movie' ),
        // remove excerpts and add post thumbs
        'supports' => array( 'title', 'editor', 'author', 'thumbnail' )
    );
 
    register_post_type( 'movie', $child_args );
}

// CHILD functions.php

function remove_parent_theme_features() {

// remove Movie Custom Post Type

remove_action( 'init', 'parent_movie_add_post_type' );

alternatively, we can add our custom post type to

overwrite only some aspects of the parent function

add_action( 'init', 'child_movie_post_type' );

}

function child_movie_post_type() {

$child_args = array(

// other arguments...

// change Custom Post slug

'rewrite' => array( 'slug' => 'child-movie' ),

// remove excerpts and add post thumbs

'supports' => array( 'title', 'editor', 'author', 'thumbnail' )

);

register_post_type( 'movie', $child_args );

}

นอกจากที่เราจะนำออก (Remove) ประเภทของบทความพิเศษได้ทั้งหมดแล้ว เรายังสามารถเอาฟีเจอร์เฉพาะบางอย่างออกโดยไม่จำเป็นต้องนำประเภทของบทความพิเศษออกทั้งหมดก็ได้ จากตัวอย่างจะเห็นว่าเราจะนำเฉพาะฟีเจอร์สิ่งที่คัดตอนมา (Excerpt) ออก แล้วนำฟีเจอร์รูปภาพขนาดเล็ก (Thumbnail) ใส่เข้าไปแทนได้ โดยการใช้ฟังก์ชั่น remove_post_type_support() และ add_post_type_support() ตามลำดับ

function remove_parent_theme_features() {
    add_action( 'init', 'wp_tuts_remove_post_feature' );
}
 
function wp_tuts_remove_post_feature() {
    // remove excerpt
    remove_post_type_support( 'movie', 'excerpt' );
    // add post thumbs
    add_post_type_support( 'movie', 'thumbnail' );
}

function remove_parent_theme_features() {

add_action( 'init', 'wp_tuts_remove_post_feature' );

}

function wp_tuts_remove_post_feature() {

// remove excerpt

remove_post_type_support( 'movie', 'excerpt' );

// add post thumbs

add_post_type_support( 'movie', 'thumbnail' );

}

ในส่วนของ Taxonomy ก็เช่นเดียวกัน เราสามารถนำออก (Remove) ได้ด้วยฟังก์ชั่น remove_action() ไปที่ฟังก์ชั่น parent_taxonomy()

function wp_tuts_after_setup_theme() {
    remove_action( 'init', 'parent_taxonomy' );
}

function wp_tuts_after_setup_theme() {

remove_action( 'init', 'parent_taxonomy' );

}

สำหรับเนื้อหาในส่วนของการใช้งานธีมลูก เราจะเขียนต่อในบทต่อไปนะครับ

หมายเหตุ หากต้องการเรียนผ่านคอร์สออนไลน์ สามารถดูได้ที่คอร์ส โมดิฟาย WordPress Theme อย่างไรให้ตรงใจลูกค้า

อ้างอิงเอกสาร How to modify the parent theme behavior within the child theme

การแก้ไขไฟล์ฟังก์ชั่น functions.php

นายปิ๊ก

คุณอาจสนใจบทความนี้

WordPress • ความรู้ • แก้โค้ด WordPress

ความรู้ • Security • แก้โค้ด WordPress

ความรู้ • WordPress