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

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

3. 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' );
      }

3. 3. การนำวิดเจ็ต (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()

3. 3. การนำออก 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
      }

3. 3. การนำขนาดรูปภาพที่ไม่ต้องการออก (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 );
      }

3. 3. การนำออก 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' );
      }

3. 3. การนำออกในส่วนของ 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' );
      }

3. 3. การนำออกในส่วนของ 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