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

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

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

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

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

พื้นฐานธีมลูก

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

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

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

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

การสร้างธีมลูก

มันไม่ซับซ้อนเท่าที่มันอาจฟังดูเพื่อสร้างมันขึ้นมา ในทางเทคนิคแล้ว สิ่งที่คุณต้องการมีเพียงสองไฟล์เท่านั้น:a style.css และไฟล์ functions.php ธีมย่อยส่วนใหญ่มีมากกว่านั้น แต่ในทางเทคนิคแล้ว ธีมเหล่านี้เป็นเพียงสองส่วนที่จำเป็นเท่านั้น

ในการสร้างธีมลูก คุณต้องติดตั้ง WordPress พร้อมกับธีมหลักที่คุณต้องการใช้

สร้างไดเร็กทอรีธีม

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

สร้างสไตล์ชีตธีมลูก

ขั้นต่อไปที่สำคัญมากคือการสร้างสไตล์ชีตของธีมลูก สร้าง style.css โปรดทราบว่าจะต้องตั้งชื่อ style.css เพื่อให้ทำงานได้อย่างถูกต้อง

ถัดไป คุณจะต้องใส่ข้อมูลบางอย่างเกี่ยวกับธีมของคุณ

คัดลอกและวางสิ่งนี้ลงใน style.css file :

/*
 Theme Name:   Child Example
 Theme URI:    http://example.com/child-exxample/
 Description:  Child Example Twenty Fifteen Child Theme
 Author:       Your Name
 Author URI:   http://example.com
 Template:     twentyfifteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         Tags: black, blue, gray, pink, purple, white, yellow, dark, light, two-columns, left-sidebar, fixed-layout, responsive-layout, accessibility-ready, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready
 Text Domain:  twenty-fifteen-child
*/

อาจดูเหมือนเยอะ แต่จริงๆ แล้วมีเพียง 2 อย่างที่จำเป็นเท่านั้น คือ Theme Name และ Template Theme Name บอก WordPress เกี่ยวกับชื่อธีมลูก Template จะบอก WordPress ว่าควรใช้ธีมใดเป็นธีมหลัก ซึ่งสำคัญมาก

คนอื่นๆ ส่วนใหญ่อธิบายตนเองได้ค่อนข้างดี แต่มีบางคู่ที่อาจต้องการคำชี้แจงเพิ่มเติมเล็กน้อย Text Domain และ Tags อาจสร้างความสับสนเล็กน้อย Text Domain ใช้สำหรับการแปลสตริงเพื่อวัตถุประสงค์ในการทำให้เป็นสากล นี่เป็นรูปแบบเฉพาะสำหรับธีมของคุณ และควรใช้ทุกครั้งที่คุณใช้ฟังก์ชันการแปล มีข้อมูลเพิ่มเติมมากมายใน Codex และสามารถพบได้ในหัวข้อ I18n สำหรับ WordPress Developers ส่วน Tags คือรายการแท็กที่เป็นธีมเฉพาะของ WordPress สำหรับตัวอย่างนี้ ฉันดูที่ Twenty Fifteen parent style.css คว้าแท็กจากที่นั่น และใส่ไว้ในธีมย่อย

ใช้รูปแบบผู้ปกครอง

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

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

เพื่อให้แน่ใจว่าคุณโหลดสไตล์ชีตของไฟล์พาเรนต์ เราจะต้องจัดคิวในธีมย่อย คุณจะต้องมีไฟล์ functions.php ในธีมย่อยเพื่อใส่ตัวอย่างต่อไปนี้

<?php

add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}

การปรับแต่ง CSS

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

หากคุณเป็นผู้ใช้ Chrome เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์จะมีประโยชน์มากในการดูสไตล์และการทดลองในเบราว์เซอร์ ไปที่ View > Developer > View Source และเลือกองค์ประกอบของหน้า รูปแบบจะแสดงทางด้านขวา ฉันตรวจสอบบทความที่มีคลาส .hentry ที่มีพื้นหลังสีขาว ฉันวางค่าฐานสิบหกเพื่อทดสอบก่อนในเบราว์เซอร์

หากต้องการทำการเปลี่ยนแปลงนี้ ให้เปิดไฟล์ CSS ในธีมลูกและเพิ่มข้อมูล CSS

อย่างที่คุณเห็น การเปลี่ยนแปลงสไตล์สามารถทำได้ง่ายในธีมย่อย

การปรับเปลี่ยนฟังก์ชันการทำงานของธีมลูกของคุณ

การปรับสไตล์ทำได้ง่ายมาก แต่ส่วนอื่นๆ เช่น ส่วนหัว ส่วนท้าย แถบด้านข้าง ฯลฯ ล่ะ? สมมติว่ามีการปรับเปลี่ยนบางอย่างในส่วนท้าย คัดลอกและวางส่วนท้ายจากธีมหลักลงในรายการย่อย ไฟล์ footer.php สามารถเปิดได้ในโปรแกรมแก้ไขข้อความที่คุณเลือกและแก้ไข ฉันตัดสินใจลบบรรทัด "Proudly powered by WordPress" ดังนั้นฉันจึงลบออกจากไฟล์ในธีมลูกของฉัน นี่คือไฟล์ที่ WordPress จะโหลดก่อน ดังนั้นบรรทัดข้อความนั้นจะไม่แสดง

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