การใช้งานธีมลูก (Child Theme) ตอนที่ 3
124 | | . | WordPress, ความรู้, ปรับแต่ง WordPress, ออกแบบเว็บไซต์, แก้โค้ด WordPress ธีมลูก, ระดับกลาง, แก้โค้ด WordPress, แก้ไขโค้ด WordPress
กลับมาสู่เนื้อหาการใช้ธีมลูกกันต่อนะครับ หลังพักหยุดยาวไปสามวัน ฮ่าๆ เรามาเริ่มต้นกันข้อที่ 3 เลยครับ
- การนำเมนูออกจากธีมหลัก เราสามารถนำออก (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' ); }
- การนำเมนูออกจากธีมหลัก เราสามารถนำออก (Remove) ออกได้ ด้วยฟังก์ชั่นที่ชื่อว่า unregister_nav_menu() โดยให้ทำการใส่รหัสของเมนู (Menu ID) ที่ธีมเราสร้างขึ้นมาเป็นพารามิเตอร์ของฟังก์ชั่นนี้ ยกตัวอย่างเช่น ตามโค๊ดธีมหลักของเรามีเมนูที่ลงทะเบียนไว้ชื่อ Header Menu
- การนำวิดเจ็ต (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)ในกรณีที่เป็นวิดเจ็ต เราสามารถนำออก (Remove) ด้วยฟังก์ชั่น unregister_widget() โดยหากเป็นวิดเจ็ตพื้นฐาน (Default Widgets) ที่มาจากระบบเวิร์ดเพรส เราก็สามารถนำออกได้เลยโดยใช้ชื่อของวิดเจ็ตนั้นๆ เป็นพารามิเตอร์ เช่น unregister_widget( ‘WP_Widget_Pages’ ); แต่ถ้าเป็นวิดเจ็ตที่มาจากธีมที่เราใช้งาน ซึ่งจะเป็นการขยายมาจากฟังก์ชั่น WP_Widget ของระบบเวิร์ดเพรสในลักษณะ Class เราห้ามทำการนำออกทั้งก้อนที่เป็น WP_widget แต่ให้เรานำออกในส่วนที่ขยายเท่านั้น
ทั้งนี้วิดเจ็ต (Widgets) และแถบด้านข้าง (Sidebar) นี้จะใช้การฮุก (Hook) ตั้งแต่เริ่มต้นวิดเจ็ต (widgets_init) ด้วยฟังก์ชั่น add_action()
- การนำออก 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 }
- การนำออก Shortcodes (Remove Shortcodes)
- การนำขนาดรูปภาพที่ไม่ต้องการออก (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 ); }
- การนำขนาดรูปภาพที่ไม่ต้องการออก (Remove Image Sizes)
- การนำออก 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' ); }
- การนำออก Metaboxes
- การนำออกในส่วนของ 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' ); }
- การนำออกในส่วนของ Javascripts และ CSS Stylesheets
- การนำออกในส่วนของ 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' );
- การนำออกในส่วนของ Actions และ Filters
นอกจากที่กล่าวมาแล้ว ในบทความนี้ ยังมีฟังก์ชั่นบางจำพวกที่จะใช้เฉพาะในส่วนของธีมลูก (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