child-theme-3

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

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

avatar

นายปิ๊ก


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

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