คู่มือฉบับย่อในการสร้างและปรับแต่ง WordPress Child Theme

แม้ว่าการพัฒนาธีมอาจดูล้นหลาม แต่ธีมย่อยนั้นง่ายต่อการตั้งค่า และเป็นทางเลือกที่รวดเร็วกว่ามากในการพัฒนาธีมตั้งแต่เริ่มต้น

ในโพสต์นี้ ฉันจะแบ่งปันรายละเอียดเพิ่มเติมเกี่ยวกับธีมลูกของ WordPress รวมถึงวิธีสร้างและปรับแต่งธีมอย่างมีประสิทธิภาพ

WordPress Child Theme คืออะไร?

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

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

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

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

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

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

เด็กในชีวิตจริง – ไม่ใช่โลกออนไลน์ – ต้องพึ่งพาผู้ปกครองอย่างน้อยหนึ่งคนในการดำรงชีวิต ในทำนองเดียวกัน ธีมลูกจะขึ้นอยู่กับธีมดั้งเดิมในการทำงาน

นั่นเป็นเหตุผลที่เมื่อคุณใช้ธีมลูก ธีมดั้งเดิมจะเรียกว่าธีมหลัก

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

ธีมเด็กที่สมบูรณ์แบบและควรใช้เมื่อใด

ธีมใดก็ได้สามารถเป็นธีมหลักได้ แต่บางธีมก็เหมาะกว่า

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

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

การปรับแต่งประเภทนี้ไม่สามารถทำได้ในตัวเลือกของ Perfect Magazine แต่ไม่มีขนาดใหญ่พอที่จะรับประกันการสร้างธีมใหม่ตั้งแต่ต้น

ทำไมต้องสร้างธีมลูก?

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

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

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

หรือคุณสามารถสร้างธีมย่อยเพื่อหลีกเลี่ยงข้อผิดพลาดเหล่านี้

ดังที่ได้กล่าวไว้ก่อนหน้านี้ การใช้ธีมลูกของ WordPress ยังช่วยให้การพัฒนาเร็วขึ้นอีกด้วย

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

เริ่มต้นใช้งาน WordPress Child Theme

มีองค์ประกอบสำคัญสองสามอย่างที่คุณต้องสร้างธีมลูก:

1. โฟลเดอร์ไดเร็กทอรีธีม
2. ไฟล์ style.css
3. ไฟล์ functions.php

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

ดังนั้น ขอ แนะนำอย่างยิ่งให้คุณสร้างไฟล์ functions.php ในธีมย่อยของคุณเพื่อหลีกเลี่ยงข้อผิดพลาด

การสร้าง WordPress Child Theme

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

การสร้างโฟลเดอร์ไดเร็กทอรี

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

ไปที่ไดเร็กทอรีนั้นและสร้างโฟลเดอร์ใหม่ที่จะทำหน้าที่เป็นโฟลเดอร์ธีมลูก

โดยทั่วไป ธีมจะตั้งชื่อธีมใหม่โดยใช้ชื่อธีมหลัก แต่เพิ่ม -child ต่อท้าย

ตัวอย่างเช่น สองพาธไฟล์จะเป็น /wp-content/themes/yourtheme/ และ /wp-content/themes/yourtheme-child/

ไม่ควรมีการเว้นวรรคในชื่อธีมลูก

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

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

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

ไฟล์จะมีกฎ CSS และการประกาศทั้งหมดที่ส่งผลต่อรูปลักษณ์ของธีมของคุณ

สร้าง ไฟล์ style.css ในรูทของโฟลเดอร์ธีมลูกใหม่ จากนั้นป้อนส่วนหัวนี้ที่ด้านบนของหน้า:

 /*
 ชื่อกระทู้ : เด็กยี่สิบเจ็ด
 URI ธีม: http://example.com/twenty-seventeen-child/
 คำอธิบาย: Twenty Seventeen Child Theme
 ผู้เขียน: เจน โด
 URI ผู้เขียน: http://example.com
 แม่แบบ: Twentyseventeen
 เวอร์ชัน: 1.0.0
 ใบอนุญาต: GNU General Public License v2 หรือใหม่กว่า
 URI ใบอนุญาต: http://www.gnu.org/licenses/gpl-2.0.html
 แท็ก: สว่าง, มืด, สองคอลัมน์, แถบด้านข้างขวา, เลย์เอาต์ที่ตอบสนอง, การเข้าถึงพร้อมใช้งาน
 โดเมนข้อความ: ยี่สิบเจ็ดลูก
*/

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

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

อย่าลืมเปลี่ยนรายละเอียดที่จำเป็นทั้งหมดด้วยเพื่อให้ถูกต้อง ตัวอย่างเช่น URI ผู้แต่ง และ ผู้แต่ง ตลอดจนการอ้างอิงถึง Twenty Seventeen หากธีมหลักที่คุณใช้เป็นธีมอื่น

ส่วน แท็ก เกี่ยวข้องกับไดเร็กทอรีธีมของ WordPress หากคุณต้องการอัปโหลดธีมของคุณที่นั่น อย่าลืมเลือกแท็กที่เกี่ยวข้องกับธีมของคุณ

การจัดคิวสไตล์ชีตธีมสำหรับผู้ปกครองและเด็ก

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

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

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

อาจเป็นสิ่งสำคัญที่จะต้องทราบด้วยว่าสามารถจัดคิว parent style.css โดยใช้เมธอด @import แต่ไม่แนะนำอีกต่อไปเนื่องจากปัญหาด้านประสิทธิภาพ

หากต้องการจัดคิวสไตล์ชีต คุณต้องสร้างไฟล์ functions.php หากคุณยังไม่ได้สร้าง

ซึ่งสามารถทำได้โดยการสร้างไฟล์ใหม่และตั้งชื่อเป็น functions.php แล้ว. วางรหัสนี้ที่ด้านบนสุด:

 <?php

อย่าลืมเว้นวรรคก่อนบรรทัดด้านบน มิฉะนั้นจะทำให้เกิดข้อผิดพลาด

ในไฟล์ functions.php ให้เพิ่มโค้ดด้านล่างเพื่อให้แน่ใจว่าไซต์ของคุณโหลดทั้ง parent style.css และ style.css ของธีมลูกในลำดับที่ถูกต้อง:

 add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

ฟังก์ชั่น my_theme_enqueue_styles () {

    $parent_; // นี่คือ 'สไตล์ยี่สิบเจ็ด' สำหรับธีม Twenty Seventeen

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'สไตล์เด็ก',
        get_stylesheet_directory_uri() . '/style.css',
        อาร์เรย์( $parent_style ),
        wp_get_theme()->get('เวอร์ชัน')
    );
}
?>

ตรวจสอบให้แน่ใจว่าคุณเปลี่ยน รูปแบบหลัก ที่เก็บไว้ในตัวแปร $parent-style เพื่อรวมชื่อธีมของคุณ

ตามคำแนะนำของ WordPress Codex โค้ดนี้จะทำให้แน่ใจว่ามีการโหลด parent style.css เป็นการพึ่งพา ซึ่งหมายความว่าจำเป็นสำหรับการโหลด style.css ของธีมลูก

การเปิดใช้งานธีมลูก

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

คุณไม่จำเป็นต้องเปิดใช้งานธีมหลักด้วย แม้ว่าควรจะติดตั้งและอยู่ในโฟลเดอร์ /wp-content/themes/

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

เมื่อคุณเปิดใช้งานธีมลูกของคุณแล้ว คุณอาจต้องบันทึกเมนูของคุณใน ลักษณะที่ปรากฏ > เมนู รวมถึงเนื้อหาอื่นๆ ใน ตัวเลือกธีม ของเครื่องมือปรับแต่ง หากคุณประสบปัญหากับการออกแบบของคุณ

เคล็ดลับการปรับแต่งอย่างรวดเร็ว

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

รูปภาพธีม

ในหน้า ลักษณะที่ ปรากฏ > ธีม คุณต้องใส่รูปภาพของคุณเองสำหรับธีมนั้น

หากคุณต้องการแทรกบางอย่างแทนเพื่อแทนที่ช่องทำเครื่องหมาย คุณสามารถอัปโหลดไฟล์ภาพ PNG ขนาด 880 x 660 ชื่อ screenshot.png

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

การเอาชนะไฟล์ธีมหลัก

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

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

ไม่ใช้หมู่บ้าน

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

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