การใช้งานธีมลูก (Child Theme) ตอนที่ 2
99 | | . | 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() ตามด้านล่าง
1234567function 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)12345678910111213// PARENT functions.phpadd_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 );}
หากเราไม่ต้องการใช้งานประเภทของบทความพิเศษนั้น ตามตัวอย่างด้านล่าง
1234567891011121314151617181920212223// CHILD functions.phpfunction remove_parent_theme_features() {// remove Movie Custom Post Typeremove_action( 'init', 'parent_movie_add_post_type' );/*alternatively, we can add our custom post type tooverwrite 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() ตามลำดับ
12345678910function remove_parent_theme_features() {add_action( 'init', 'wp_tuts_remove_post_feature' );}function wp_tuts_remove_post_feature() {// remove excerptremove_post_type_support( 'movie', 'excerpt' );// add post thumbsadd_post_type_support( 'movie', 'thumbnail' );}ในส่วนของ Taxonomy ก็เช่นเดียวกัน เราสามารถนำออก (Remove) ได้ด้วยฟังก์ชั่น remove_action() ไปที่ฟังก์ชั่น parent_taxonomy()
123function wp_tuts_after_setup_theme() {remove_action( 'init', 'parent_taxonomy' );}
- ฟีเจอร์ของธีม (Theme features) เช่น กลุ่มฟังก์ชั่น add_theme_support() เช่น
สำหรับเนื้อหาในส่วนของการใช้งานธีมลูก เราจะเขียนต่อในบทต่อไปนะครับ
หมายเหตุ หากต้องการเรียนผ่านคอร์สออนไลน์ สามารถดูได้ที่คอร์ส โมดิฟาย WordPress Theme อย่างไรให้ตรงใจลูกค้า
อ้างอิงเอกสาร How to modify the parent theme behavior within the child theme