วิธีสร้างธีมลูกของ WordPress (2021)

รู้วิธีทำ ธีมลูกของ WordPress ?

แน่นอน ธีมของคุณจะดูเหมาะกับเว็บไซต์ของคุณ แต่ในบางจุด คุณจะต้องแก้ไข การเปลี่ยนแปลงธีมลูกเป็นทางเลือกที่ดีกว่าในการแก้ไขไซต์ของคุณ นอกจากนี้ การเรียนรู้เกี่ยวกับธีมลูกเป็นหนึ่งในสิ่งที่คุณควรรู้เกี่ยวกับ WordPress ขั้นพื้นฐาน คุณสามารถเริ่มเรียนรู้เกี่ยวกับ WordPress ได้ที่นี่

มาผ่านกระบวนการสร้างธีมลูกของ WordPress กัน

ทำไมคุณควรใช้ธีมลูกสำหรับ WordPress?

ใน WordPress ธีมลูกจะได้รับคุณลักษณะ ฟังก์ชันการทำงาน และอื่นๆ ของธีมหลักทั้งหมด ในอีกด้านหนึ่ง การแก้ไขธีมลูกโดยไม่เปลี่ยนธีมหลักสามารถทำได้ จะช่วยลดเวลาและความพยายามในการแก้ไขไซต์ให้กับคุณ นอกจากนี้ การอัปเดตธีม WordPress ของคุณยังปลอดภัยและเสถียรยิ่งขึ้น เมื่อคุณปรับแต่งรายการย่อย การเปลี่ยนแปลงและการปรับแต่งทั้งหมดในพาเรนต์จะยังคงเหมือนเดิม ผู้ใช้สามารถใช้ธีมลูกนี้ในเว็บไซต์ WordPress อื่น ๆ ได้เช่นกัน

ประกาศก่อนสร้างธีมลูก

ในการสร้าง ธีมลูก WordPress จำเป็นต้องมีทักษะการเขียนโค้ดเนื่องจากคุณจะทำงานกับ HTML และ CSS การรู้ว่าต้องเปลี่ยนแปลงอะไรเป็นสิ่งสำคัญมาก นอกจากนี้ คุณจะต้องมีความรู้พื้นฐานเกี่ยวกับ PHP อย่างน้อยก็คัดลอก/วางข้อมูลโค้ดจากแหล่งอื่น

เราขอแนะนำอย่างจริงใจว่าคุณควรฝึกฝนในสภาพแวดล้อมการพัฒนา นี่คือสถานที่ที่คุณสามารถทำได้โดยไม่ต้องกลัวว่าจะเลอะเว็บไซต์หลักของคุณ มันเหมือนกับว่าคุณฆ่านก 2 ตัวด้วยหินก้อนเดียว ตัวหนึ่งกำลังเคลื่อนย้ายมันไปยังสนามทดสอบ และอีกตัวหนึ่งถูกใช้ในการพัฒนาธีม

อีกประการหนึ่ง ธีมหลักควรเหมาะสมกับรูปลักษณ์และฟังก์ชันการทำงานตามวัตถุประสงค์ของคุณ ยิ่งคุณทำการเปลี่ยนแปลงน้อยลงเท่าไร เว็บไซต์ของคุณก็จะยิ่งดีขึ้นเท่านั้น

ในส่วนด้านล่าง เราจะใช้ชุดรูปแบบ LearnPress เป็นตัวอย่างสำหรับภาพประกอบที่ดีกว่าของ WordPress สร้างธีมลูก

การสร้างธีมลูกคนแรก

คุณมี 2 ตัวเลือกในการสร้างธีมลูก WordPress คุณสามารถใช้วิธีการทำความคุ้นเคยกับไฟล์ทั้งหมดด้วยตนเอง มิฉะนั้น การใช้ปลั๊กอินจะทำงานกับไฟล์และโฟลเดอร์ที่ซับซ้อนได้

ตอนนี้ เราจะเริ่มการปรับแต่ง

การใช้รหัส

ในการเริ่มต้น คุณจะต้องเปิด /wp-content/themes/ ในการติดตั้ง WordPress และสร้างโฟลเดอร์ใหม่สำหรับธีมลูกของคุณ ตั้งชื่อตามที่คุณต้องการ

จากนั้น คุณต้องสร้าง 2 ไฟล์แรกสำหรับธีมลูกของคุณ เปิดตัวแก้ไขข้อความและวางโค้ดด้านล่างลงในเอกสารเปล่า:

 1 Theme Name: LP Child Theme 2 Theme URI: https://www.wpbeginner.com/ 3 Description: A LearnPress child theme 4 Author: ThimPress 5 Author URI: https://thimpress.com 6 Template: learnpress 7 Version: 1.0.0 8 Text Domain: learnpresschild

คุณสามารถเปลี่ยนข้อมูลได้ตามที่คุณวางแผนและบันทึกไฟล์นี้ไปยังไฟล์ style.css ของคุณในโฟลเดอร์ของธีมลูกล่าสุด คุณเพิ่งสร้างสไตล์ชีตหลักของธีมลูก

ถัดไป คุณจะต้องสร้างไฟล์ที่ ² เพื่อนำเข้าสไตล์ชีตจากธีมหลัก สร้างเอกสารใหม่ในเท็กซ์เอดิเตอร์ของคุณและคัดลอกโค้ดนี้:

 1 /* enqueue scripts and style from parent theme */ 2 3 function learnpress_styles() { 4 wp_enqueue_style( 'child-style', get_stylesheet_uri(), 5 array( 'learn-press-style' ), wp_get_theme()->get('Version') ); 6 ( 7 add_action( 'wp_enqueue_scripts', 'learnpress_styles');

เมื่อคุณใช้ LearnPress เป็นธีมหลัก โค้ดนี้จะเริ่มทำงาน ดังนั้น ธีมส่วนใหญ่จะทำงานในลักษณะนี้ บันทึกไฟล์นี้และจะกลายเป็นโฟลเดอร์ functions.php ของธีมลูกของคุณ

หลังจากขั้นตอนเหล่านั้น คุณจะมีธีมย่อยพื้นฐาน ใน "ลักษณะที่ปรากฏ" เลือก "ธีม" และ "เปิดใช้งาน" ดังนั้น เว็บไซต์ของคุณจะเริ่มใช้ธีมลูก หากคุณต้องการปรับแต่ง ให้ย้ายไปยังส่วนถัดไป

การใช้ปลั๊กอิน

เราขอแนะนำให้คุณใช้ปลั๊กอิน Child Theme Configurator เนื่องจากไม่ต้องใช้การเข้ารหัส คุณจึงสามารถเปลี่ยนแปลงและปรับแต่งได้อย่างง่ายดาย

ขั้นแรก ติดตั้งปลั๊กอินบนเว็บไซต์ของคุณ สำหรับคำแนะนำเพิ่มเติมเกี่ยวกับการติดตั้งปลั๊กอิน คลิกที่นี่

เมื่อเปิดใช้งาน คุณไปที่ "เครื่องมือ" -> "ธีมสำหรับเด็ก" และเลือก LearnPress ในป๊อปอัปที่ถามเกี่ยวกับธีมหลัก เลือก "วิเคราะห์" เพื่อตรวจสอบความเข้ากันได้ของธีมหลัก ถัดไป คุณจะต้องตั้งชื่อโฟลเดอร์ของธีมลูกสำหรับบันทึกไฟล์และตำแหน่งที่จะบันทึก ในการตั้งค่าเริ่มต้น ให้เลือก "คลิกเพื่อแก้ไขแอตทริบิวต์ของธีมย่อย" จากนั้นคุณจะกรอกข้อมูลของธีมลูก

เมื่อสร้างธีมย่อยด้วยตนเอง ธีมย่อยของคุณจะไม่ได้รับเมนูและเครื่องมือจากธีมหลัก ในการแก้ปัญหานี้ ให้ใช้ Child Theme Configurator ในที่สุด เลือก "สร้างลูกของธีมใหม่" เพื่อเสร็จสิ้น ในขั้นตอนนี้ ธีมลูกของคุณจะมี functions.php และ style.css สำหรับการพัฒนาเพิ่มเติม เห็นได้ชัดว่าอย่าลืมดูตัวอย่างปลั๊กอินลูกของคุณ หลังจากนั้น คุณเลือก “เปิดใช้งานและเผยแพร่” เพื่อเผยแพร่ธีมลูกของคุณ

ตอนนี้ เราจะเริ่มปรับแต่งธีมลูกของคุณ

การปรับแต่ง WordPress Child Theme

เราจะ สร้าง WordPress ธีมลูก ซึ่งแตกต่างจากธีมหลักเล็กน้อยโดยเพิ่มโค้ดลงในไฟล์ “style.css”

คัดลอกโค้ดจากตัวตรวจสอบ Firefox/Chrome

คุณสามารถใช้วิดเจ็ต Inspector ของ Chrome และ Firefox เพื่อค้นหาโค้ด CSS ที่จำเป็น นอกจากนี้ คุณสามารถใช้เครื่องมือเหล่านี้เพื่อเข้าถึงองค์ประกอบ CSS และ HTML ของไซต์ทั้งหมด

หากต้องการดูไฟล์ CSS ของโพสต์หรือไซต์ ให้คลิกขวาและเลือก "ตรวจสอบ" หน้าจอของคุณจะแบ่งออกเป็น 2 ส่วน และคุณจะเห็น CSS และ HTML ของหน้า เมื่อคุณเลื่อนเมาส์ไปเหนือบรรทัด HTML เครื่องมือตรวจสอบจะแสดงให้คุณเห็นในหน้าต่างด้านบน กฎ CSS ก็เช่นกัน

ด้านหลังจะมีการเปลี่ยนสีชั่วคราว หากต้องการทำให้เป็นแบบถาวร ให้คัดลอกบรรทัดกฎ CSS นี้แล้ววางในไฟล์ style.css ของธีมลูก:

 1 body { 2 background-color: #fdf8ef; 3 )

บันทึกการเปลี่ยนแปลงและดูตัวอย่างไซต์ นอกจากนี้ คุณสามารถเปิดใช้งานสิ่งนี้อีกครั้งสำหรับองค์ประกอบใดๆ ในสไตล์ชีตของธีม เรามีสไตล์ชีตแบบเต็มสำหรับธีมย่อยให้คุณที่นี่:

 1 Theme Name: WPB Child Theme 2 Theme URI: https://www.thimpress.com 3 Description: A LearnPress child theme 4 Author: ThimPress 5 Author URI: https://www.thimpress.com 6 Template: learnpress 7 Version: 1.0.0 8 Text Domain: learnpresschild 9 */ 10 11 .site-title { 12 color: #7d7b77; 13 ) 14 .site-description { 15 color: #aba8a2; 16 ) 17 body { 18 background-color: #fdf8ef; 19 color: #7d7b77; 20 ) 21 .entry-footer { 22 color: #aba8a2; 23 ) 24 .entry-title { 25 color: #aba8a2; 26 font-weight: bold; 27 ) 28 .widget-area { 29 color: #7d7b77; 30 )

คัดลอกโค้ดจากไฟล์ style.css ของธีมหลัก

อย่างที่คุณเห็น เป็นไปได้ที่จะคัดลอกจากไฟล์ parent theme'style.css แล้ววางลงในธีมย่อยและปรับแต่ง

ตัวอย่างเช่น รหัสสำหรับสีพื้นหลังของหน้าคือ:

 1 background-color: var(--global--color-background);

'–global–color-background' เป็นตัวแปรที่ใช้ในสถานที่ต่างๆ ของธีม คุณจะต้องเปลี่ยนค่าของตัวแปรหากต้องการเปลี่ยนสีในตำแหน่งเหล่านั้นพร้อมกัน ย้ายไปที่ /wp-content/themes/learnpress ในโฟลเดอร์การติดตั้ง WordPress และเปิดไฟล์ style.css ในโปรแกรมแก้ไขข้อความเพื่อค้นหาตำแหน่ง –global–color-background ตัวแปรนั้นสามารถเปลี่ยนแปลงได้ด้วยตัวแปรอื่น คุณสามารถหาตัวแปรสีจำนวนมากได้ในไฟล์ style.css ของธีมหลัก หลังจากเลือกตัวเลือกสีที่เหมาะสมแล้ว คุณคัดลอกและวางโค้ดบรรทัดนั้นลงในไฟล์ style.css ของธีมลูก และแทนที่อันเก่าด้วยอันใหม่ที่เลือกไว้สำหรับแนวโน้มสีของคุณ จากนั้นสีจะถูกแบ่งตามแบบแผนสีที่วางแผนไว้ กระบวนการนี้จะทำให้ชุดสีของคุณสอดคล้องกันและแก้ไขได้อย่างรวดเร็ว

การปรับแต่งไฟล์เทมเพลต

ในธีม พื้นที่จัดการไฟล์ในเว็บไซต์เรียกว่าเทมเพลต templated มักจะตั้งชื่อตามส่วนที่พวกเขาจัดการ ดังนั้น ส่วนสำคัญบางส่วนจึงได้รับการจัดการโดยไฟล์ต่างๆ หรือเทมเพลตเนื้อหา

หากต้องการปรับแต่งเทมเพลต ให้ค้นหาไฟล์นั้นในธีมหลักและคัดลอกไปยังธีมย่อย จากนั้นเปิดในโปรแกรมแก้ไขข้อความและเริ่มแก้ไข

เราจะแสดงบทช่วยสอนสำหรับกระบวนการนี้พร้อมไฟล์ footer.php คัดลอกไปยังโฟลเดอร์ของธีมลูกและเปิดในโปรแกรมแก้ไขข้อความธรรมดา ตัวอย่างเช่น ให้ลบลิงก์ "Proudly powered by WordPress" ที่ส่วนท้ายและเพิ่มประกาศเกี่ยวกับลิขสิทธิ์ ในการเริ่มต้น ให้ลบทั้งหมดระหว่างแท็ก <div class=”powered-by”>

 1 <div class="powered-by"> 2 <?php 3 printf( 4 /* translators: %s: WordPress. */ 5 esc_html__( 'Proudly powered by %s.', 'learnpress' ), 6 '<a href="' . esc_url( __( 'https://wordpress.org/', 7 'learnpress' ) ) . '">WordPress</a>' 8 ); 9 ?> </div><!-- .powered-by -->

จากนั้นคุณจะวางโค้ดที่คุณพบด้านล่างแท็กเหล่านั้นในตัวอย่างด้านล่าง

 1 <div class="powered-by"> 2 <p>&copy; Copyright <?php echo date("Y"); ?>. All rights reserved.</p> 3 </div><!-- .powered-by -->

เลือก "บันทึกการเปลี่ยนแปลง" และเมื่อคุณกลับมาที่ไซต์ คุณจะเห็นประกาศเกี่ยวกับลิขสิทธิ์ฉบับใหม่

การเพิ่มฟังก์ชันการทำงานให้กับธีมลูก WordPress ของคุณ

หากต้องการเปลี่ยนหรือเพิ่มฟังก์ชันในเว็บไซต์ของคุณ คุณจะต้องค้นหาไฟล์ functions.php ไฟล์นี้ใช้โค้ด PHP เพื่อทำให้กระบวนการนี้ทำงาน

โดยปกติ คุณจะได้รับคำแนะนำให้คัดลอกและวางข้อมูลโค้ดลงในไฟล์ function.php แต่จะถูกลบออกเมื่อคุณอัปเดต PHP หรือธีมของคุณ ดังนั้น เราขอแนะนำให้คุณใช้ธีมลูกเพื่อเพิ่มข้อมูลโค้ด ไปที่กระบวนการเพิ่มวิดเจ็ตกัน เพิ่มข้อมูลโค้ดลงในไฟล์ functions.php ของธีมลูก

 1 <?php 2 // Register Sidebars 3 function custom_sidebars() { 4 5 $args = array( 6 'id' => 'custom_sidebar', 7 'name' => __( 'Custom Widget Area', 'text_domain' ), 8 'description' => __( 'A custom widget area', 'text_domain' ), 9 'before_title' => '<h3 class="widget-title">', 10 'after_title' => '</h3>', 11 'before_widget' => '<aside class="widget %2$s">', 12 'after_widget' => '</aside>', 13 ); 14 register_sidebar( $args ); 15 16 ) 17 add_action( 'widgets_init', 'custom_sidebars' ); 18 ?>

บันทึกและไปที่ "ลักษณะที่ปรากฏ" -> "วิดเจ็ต" เพื่อดูเครื่องมือใหม่ นอกจากนี้ คุณสามารถค้นหาข้อมูลเพิ่มเติมเกี่ยวกับการเพิ่มพื้นที่ฟังก์ชันได้ คุณสามารถเพิ่มคุณสมบัติได้มากมายโดยเพิ่มข้อมูลโค้ดลงในไฟล์ functions.php ของไซต์ของคุณ

นั่นคือทั้งหมดเกี่ยวกับ วิธีการสร้างธีมลูกใน WordPress ไปที่ส่วนของการแก้ไขข้อผิดพลาด

แก้ไขข้อผิดพลาด

คุณสามารถประสบปัญหาในการสร้างธีมเด็กได้ทุกเมื่อ ดังนั้นคุณไม่ควรยอมแพ้ง่ายๆ

ปัญหาไวยากรณ์อาจเกิดจากบางส่วนหายไปในกระบวนการเข้ารหัส นอกจากนี้ยังเป็นข้อผิดพลาดยอดนิยมที่ผู้ใช้ทุกคนสามารถพบเจอได้ นอกจากนี้ หากทุกอย่างไม่ราบรื่น คุณสามารถลบและเริ่มต้นใหม่ได้เสมอ

วิธีสร้างธีมลูกของ WordPress: บทสรุป

เราหวังว่าคุณจะได้รับความรู้เกี่ยวกับการสร้างธีมเด็กผ่านบทความของเรา ขอบคุณสำหรับการอ่านของคุณ!

อ่านเพิ่มเติม: วิธีแก้ไขข้อผิดพลาด HTTP 500 WordPress (2021)