สร้างธีมลูกใน WordPress การสอนทีละขั้นตอน

ในบทความนี้ คุณจะได้เรียนรู้วิธีสร้างธีมลูกใน WordPress ทีละขั้นตอน พื้นฐานทั้งหมดของ WordPress Child Themes

คุณจะได้เรียนรู้วิธีนำเข้าสไตล์ CSS ของธีมสำหรับผู้ปกครอง วิธีแทนที่สไตล์ธีมของธีมหลัก และเหตุผลที่คุณควรสร้างธีมย่อยของ WordPress

หากต้องการเรียนรู้ว่าเหตุใดธีมลูกของ WordPress จึงมีความสำคัญ คุณควรอ่านคู่มือเริ่มต้นการพัฒนาธีมสำหรับผู้ปกครองและเด็กของ WordPress

คุณสามารถทำอะไรกับธีมลูกของ WordPress ได้บ้าง

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

ความเข้าใจพื้นฐานหรือความเข้าใจที่ดีเกี่ยวกับ HTML, CSS และ PHP อาจเป็นประโยชน์อย่างมาก

อ่านเพิ่มเติม: วิธีเลือกธีม WordPress ฟรีหรือพรีเมียมที่สมบูรณ์แบบ

คุณสามารถใช้ธีมลูกของ WordPress เพื่อแก้ไขไซต์ของคุณด้วย CSS เพิ่มพื้นที่วิดเจ็ตใหม่ เมนูการนำทางเพิ่มเติม แก้ไขไฟล์ที่กำหนดเองเพื่อสร้างหน้าใหม่พร้อมสไตล์ที่กำหนดเอง

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

ทำไมคุณควรสร้าง WordPress Child Theme

สาเหตุที่ธีมลูกมีอยู่คือคุณสามารถปรับแต่งธีม “พาเรนต์” (ที่มีอยู่/ใช้งานอยู่) โดยไม่สูญเสียการเปลี่ยนแปลงและการแก้ไขของคุณเมื่อคุณอัปเดตธีมพาเรนต์

ตัวอย่างเช่น หากคุณแก้ไขไฟล์ single.php โดยตรง การปรับแต่งของคุณจะทำงานได้ดีในตอนแรก

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

สิ่งที่คุณต้องการ

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

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

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

มีหลายวิธีในการติดตั้ง WordPress ในเครื่องบน Windows, MAC หรือ Linux อ่านบทช่วยสอนนี้ เพื่อเรียนรู้วิธีติดตั้ง WordPress บนพีซีในพื้นที่ด้วย Bitnami WordPress stack

เราได้เผยแพร่บทแนะนำทีละขั้นตอนสำหรับผู้เริ่มต้นแล้ว

วิธีการติดตั้ง WordPress บนเซิร์ฟเวอร์ WAMP ใน Windows 8

วิธีการติดตั้ง WordPress บน Windows 8 โดยใช้ Bitnami Stack

วิธีการสร้างธีมลูกใน WordPress คำแนะนำทีละขั้นตอน?

สำหรับธีมย่อยทุกธีมใน WordPress จำเป็นต้องมีไฟล์สองไฟล์

• ฟังก์ชั่น.php
• style.css

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

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

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

คุณสามารถใช้ธีม WordPress เป็นธีมหลักได้ สำหรับบทช่วยสอนนี้ ฉันจะสร้างธีมย่อยสำหรับธีม TwentySixteen

สร้างโฟลเดอร์ใหม่และบันทึกเป็นลูกอายุยี่สิบหกสิบหก หรือคุณจะตั้งชื่ออะไรก็ได้ตามต้องการ เช่น การออกแบบ

สร้างไฟล์ใหม่สองไฟล์และบันทึกเป็นไฟล์ functions.php และ style.css ในโฟลเดอร์ธีมลูกของเรา ชื่อโฟลเดอร์ธีมลูกของฉันคือ designbomb

ตอนนี้เพิ่มข้อมูลต่อไปนี้ในไฟล์ style.css ของธีมลูกของคุณและบันทึกไฟล์ของคุณ

 /* Theme Name: Design Child Description: A simple child theme for design blog. Author: Tahir Taous Version: 0.1 Template: twentysixteen */

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

คุณจะเห็นรายละเอียดต่อไปนี้สำหรับธีมลูกใหม่ของคุณ

ในภาพหน้าจอด้านบน คุณสามารถดูข้อมูลพื้นฐานทั้งหมดเกี่ยวกับธีมลูกของเรา ชื่อของธีมลูกของเรา ซึ่งเป็นผู้เขียนธีมนี้ คำอธิบายเกี่ยวกับธีมย่อย และคุณยังสามารถดู นี่คือธีมย่อยของ Twenty Sixteen ข้อความ.

เราได้เพิ่ม แม่แบบ: Twentysixteen ในไฟล์ style.css ของธีมลูกของเรา บรรทัดนี้บอก WordPress ว่ายี่สิบหกเป็นธีมหลัก

หากคุณกำลังใช้ธีมอื่น ให้แทนที่ TwentySixteen ด้วยชื่อธีมหลักของคุณ

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

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

 <?php function theme_enqueue_styles() { $parent_; wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ) ); } add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

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

การปรับเปลี่ยนรูปแบบที่มีอยู่

หมายความว่าธีมลูกของเราพร้อมแล้ว ถึงเวลาปรับแต่งธีมหลักของเราด้วยสไตล์ CSS ใหม่ ตอนนี้ภายใต้ ลักษณะที่ปรากฏ > ตัวแก้ไข เลือกไฟล์ style.css เราจะเพิ่มรูปแบบใหม่

เพิ่มสไตล์ต่อไปนี้ในไฟล์ style.css ของธีมลูกของคุณและบันทึกไฟล์ของคุณ

 .main-navigation .current-menu-item > a, .main-navigation .current-menu-ancestor > a { font-weight: 700; background: beige; border-radius: 5px; color: #D2691E; box-shadow: 2px 1px 8px #815317; }

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

สำหรับรายการเมนูปัจจุบัน ฉันได้เพิ่มสีพื้นหลังใหม่ รัศมีเส้นขอบ สี และเงาของกล่อง การเปลี่ยนสไตล์เป็นเรื่องง่ายด้วยเครื่องมือ Chrome Dev

แค่นั้นแหละ

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

ใช้ธีมลูกเพื่อเพิ่มฟังก์ชัน คุณลักษณะ หรือหน้าที่กำหนดเองที่จำเป็นเสมอ

ดาวน์โหลด Designs ธีมลูก