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

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

กลับมาสู่เนื้อหาการใช้ธีมลูกกันต่อนะครับ หลังพักหยุดยาวไปสามวัน ฮ่าๆ เรามาเริ่มต้นกันข้อที่ 3 เลยครับ

1. การนำเมนูออกจากธีมหลัก เราสามารถนำออก (Remove) ออกได้ ด้วยฟังก์ชั่นที่ชื่อว่า unregister_nav_menu() โดยให้ทำการใส่รหัสของเมนู (Menu ID) ที่ธีมเราสร้างขึ้นมาเป็นพารามิเตอร์ของฟังก์ชั่นนี้ ยกตัวอย่างเช่น ตามโค๊ดธีมหลักของเรามีเมนูที่ลงทะเบียนไว้ชื่อ Header Menu
```
// PARENT functions.php
 
add_action( 'after_setup_theme', 'register_my_menu' );
 
function register_my_menu() {
    register_nav_menu( 'header-menu', __( 'Header Menu' ) );
}
```
  เมื่อเราไม่ต้องการใช้เมนูนี้ในธีมลูก ให้เราใช้ฟังก์ชั่น unregister_nav_menu() แล้วใส่พารามิเตอร์เป็นรหัสของเมนู
```
// CHILD functions.php
 
function remove_parent_theme_features() {
    unregister_nav_menu( 'header-menu' );
}
```

1. การนำวิดเจ็ต (Widgets) และแถบด้านข้างออก (Sidebar)ในกรณีที่เป็นวิดเจ็ต เราสามารถนำออก (Remove) ด้วยฟังก์ชั่น unregister_widget() โดยหากเป็นวิดเจ็ตพื้นฐาน (Default Widgets) ที่มาจากระบบเวิร์ดเพรส เราก็สามารถนำออกได้เลยโดยใช้ชื่อของวิดเจ็ตนั้นๆ เป็นพารามิเตอร์ เช่น unregister_widget( ‘WP_Widget_Pages’ ); แต่ถ้าเป็นวิดเจ็ตที่มาจากธีมที่เราใช้งาน ซึ่งจะเป็นการขยายมาจากฟังก์ชั่น WP_Widget ของระบบเวิร์ดเพรสในลักษณะ Class เราห้ามทำการนำออกทั้งก้อนที่เป็น WP_widget แต่ให้เรานำออกในส่วนที่ขยายเท่านั้น
```
// PARENT theme
class ParentWidgetName extends WP_Widget {
    // widget code
}
```
```
add_action( 'widgets_init', 'wp_tuts_parent_unregister_widgets', 10 );
 
function wp_tuts_parent_unregister_widgets() {
 
    // remove (some) WordPress default Widgets
    unregister_widget( 'WP_Widget_Pages' );
    unregister_widget( 'WP_Widget_Calendar' );
 
    // remove Parent registered Widget
    unregister_widget( 'ParentWidgetName' );
 
    // register a custom Widget (if needed)
    register_widget( 'MyCustomWidget' );
}
 
// don't forget to add the Widget Class
class MyCustomWidget extends WP_Widget {
    // Custom Widget code
}
```
  จากโค๊ดด้านบนในกรณีที่เราต้องการเพิ่มวิดเจ็ตเข้าไปใหม่ในธีมลูก ให้ใช้ฟังก์ชั่นที่ชื่อ register_widget() เพื่อทำการลงทะเบียนวิดเจ็ตของเรา และจะต้องสร้างคลาส (Class) ขึ้นมาเพื่อขยายฟังก์ชั่นพื้นฐานของระบบเวิร์ดเพรสที่ชื่อ WP_Widget แล้วทำการเขียนโค๊ดของวิดเจ็ตที่เราต้องการในคลาส (Class) นี้
  
  สำหรับแถบด้านข้าง (Sidebar) ก็จะทำในลักษณะใกล้เคียงกัน โดยจะใช้ฟังก์ชั่น unregister_sidebar() ซึ่งมีพารามิเตอร์เป็นรหัสของแถบด้านข้าง (Sidebar ID) นั้นๆ
```
add_action( 'widgets_init', 'wp_tuts_parent_unregister_sidebars', 10 );
 
function wp_tuts_parent_unregister_sidebars() {
    // remove a sidebar registered by the Parent Theme
    unregister_sidebar( 'first-footer-widget-area' );
}
```

ทั้งนี้วิดเจ็ต (Widgets) และแถบด้านข้าง (Sidebar) นี้จะใช้การฮุก (Hook) ตั้งแต่เริ่มต้นวิดเจ็ต (widgets_init) ด้วยฟังก์ชั่น add_action()

1. การนำออก Shortcodes (Remove Shortcodes)
  การนำออก Shortcode นั้นสามารถทำได้ด้วยฟังก์ชั่น remove_shortcode() และหากจะเพิ่มเข้าไปให้ใช้ฟังก์ชั่นที่ชื่อ add_shortcode() ตามโค๊ดด้านล่าง
```
function remove_parent_theme_features() {
    // remove the parent [gmap] shortcode
    remove_shortcode( 'gmap' );
    // add our [gmap] shortcode
    add_shortcode( 'gmap', 'child_shortcode_gmap' );
}
 
function child_shortcode_gmap( $atts ) {
    // create our shortcode that overwrites the parent one
}
```

1. การนำขนาดรูปภาพที่ไม่ต้องการออก (Remove Image Sizes)
  ในกรณีที่เราไม่ต้องการใช้ขนาดรูปภาพที่ถูกกำหนดมาให้ธีมหลัก เราสามารถแก้ไขได้โดยหาฟังก์ชั่นที่ชื่อ add_image_size() ในธีมหลัก เพื่อดูว่าชื่อของขนาดรูปภาพที่เราไม่ต้องการนั้นมีชื่อว่าอะไร เช่นในที่นี้ให้ชื่อว่า custom_size_parent_1 และ custom_size_parent_2 ให้เราทำการ unset ในขนาดของรูปนั้นๆ ออกตามโค๊ดด้านล่าง
```
add_filter( 'intermediate_image_sizes_advanced', 'remove_parent_image_sizes' );
 
function remove_parent_image_sizes( $sizes ) {
    unset( $sizes['custom_size_parent_1'] );
    unset( $sizes['custom_size_parent_2'] );
    return $sizes;
}
```
  ในกรณ๊ที่เราต้องการเพิ่มขนาดรูปพิเศษเพื่อใช้งาน เราก็สามารถทำได้เช่นเดียวกัน ด้วยการใช้ฟังก์ชั่น add_image_size() และมีการระบุขนาดกว้าง สูง และการตัดภาพ (Crop) ตามลำดับ
```
if ( function_exists( 'add_image_size' ) ) {
    // 400 pixels wide and unlimited height
    add_image_size( 'custom_size_child_1', 400, 9999 );
    // 320 pixels wide and 240 px tall, cropped
    add_image_size( 'custom_size_child_2', 320, 240, true );
}
```

1. การนำออก Metaboxes
  เราสามารถนำออก (Remove) ในส่วนของ Metaboxes ที่เราไม่ต้องการได้ด้วยการใช้ฟังก์ชั่น remove_meta_box() ซึ่งจะประกอบไปด้วย 3 พารามิเตอร์หลัก ได้แก่ รหัสของ Metabox (Metabox ID) ส่วนที่ต้องการนำออก และตำแหน่งของ Metabox นั้นๆ ในที่นี้จะเห็นว่า เรานำ Metabox ที่ชื่อ traxckbacksdiv ออก โดยอยู่ในส่วนของบทความ (Post) และอยู่ในตำแหน่งปกติ (Normal) เป็นต้น
```
add_action( 'admin_menu' , 'wp_tuts_remove_metaboxes', 99 );
 
function wp_tuts_remove_metaboxes() {
    // remove default WP Trackback Metabox from Posts editing page
    remove_meta_box( 'trackbacksdiv', 'post', 'normal' );
    // remove a Parent Theme Metabox 'parent_post_foo_metabox'
    remove_meta_box( 'parent_post_foo_metabox', 'post', 'normal' );
}
```

1. การนำออกในส่วนของ Javascripts และ CSS Stylesheets
  สำหรับส่วนของ Javascripts และ CSS Stylesheets นั้น ในการนำออกนั้นให้เราจะใช้ฟังก์ชั่น wp_deregister_script() และ wp_deregister_style() แล้วให้เราทำการฮุก (Hook) ไปที่ ตำแหน่งที่ Scripts และ Style ที่ระบุไว้ตามลำดับ
```
// PARENT functions.php
 
add_action( 'wp_print_scripts', 'parent_scripts' );
add_action( 'wp_print_styles', 'parent_styles' );
 
function parent_scripts() {
    wp_enqueue_script( 'fancybox-parent-js', get_stylesheet_directory_uri() . '/fancybox/jquery.fancybox.pack.js' );
}
 
function parent_styles() {
    wp_enqueue_style( 'fancybox-parent-css', get_stylesheet_directory_uri() . '/fancybox/jquery.fancybox.css' );
}
```
  จากโค๊ดด้านล่างจะเห็นว่าเราทำการฮุกไปที่ wp_print_scripts และ wp_print_styles ตามที่เราสร้างไว้ตอนเริ่มต้น
```
// CHILD functions.php
 
add_action( 'wp_print_scripts', 'child_overwrite_scripts', 100 );
add_action( 'wp_print_styles', 'child_overwrite_styles', 100 );
 
function child_overwrite_scripts() {
    wp_deregister_script( 'fancybox-parent-js' );
}
 
function child_overwrite_styles() {
    wp_deregister_style( 'fancybox-parent-css' );
}
```

1. การนำออกในส่วนของ Actions และ Filters
  ในบางครั้ง ธีมหรือ Woocommerce ที่เราใช้มีการใช้งานประเภท Actions และ Filters เป็นจำนวนมาก เราก็สามารถทำการปรับเปลี่ยนในส่วนของ Actions และ Filters ได้เช่นเดียวกัน โดยให้ใช้ฟังก์ชั่น remove_action ในการนำออก
```
// Unhook default Thematic functions
function unhook_thematic_functions() {
    // we put the position number of the original function (5)
    // for priority reasons
    remove_action( 'thematic_header', 'thematic_blogdescription', 5 );
}
add_action( 'init', 'unhook_thematic_functions' );
```

นอกจากที่กล่าวมาแล้ว ในบทความนี้ ยังมีฟังก์ชั่นบางจำพวกที่จะใช้เฉพาะในส่วนของธีมลูก (Child Theme) เท่านั้น เช่น get_stylesheet_directory_uri() ในขณะที่ธีมหลักจะใช้ get_template_directory_uri() แทน ซึ่งฟังก์ชั่นนี้จะเป็นฟังก์ชั่นที่ใช้เรียกตำแหน่งของไฟล์ต่างๆ ครับ ตัวอย่างเช่น

<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/aternus.png" alt="" width="" height="" />

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

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

นายปิ๊ก

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

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

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

ความรู้ • WordPress