วิธีสร้างและปรับแต่งธีมลูก

เผยแพร่แล้ว: 2020-06-29

หากคุณต้องการเปลี่ยนแปลงธีมของไซต์ WordPress คุณอาจเคยเห็นคนบอกให้คุณใช้ธีมย่อยของ WordPress

แต่ธีมย่อยคืออะไร และเหตุใดธีมย่อยจึงมีความสำคัญมาก

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

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

มาขุดกันเถอะ

ธีมลูกของ WordPress คืออะไร?

ธีมลูกของ WordPress ไม่ใช่ธีมแบบสแตนด์อโลน เป็น "ลูก" ของชุดรูปแบบหลักที่มีอยู่ จึงเป็นชื่อ

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

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

ข้อดีของธีมเด็ก

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

สาเหตุหลักที่ไม่ควรเป็นความคิดที่ดีคือ การอัปเดตธีม

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

หากคุณปรับแต่งไซต์ของคุณโดยแก้ไขธีมของคุณโดยตรง (ไม่มีธีมย่อย) นั่นหมายความว่าคุณจะเขียนทับการเปลี่ยนแปลงทั้งหมดทุกครั้งที่คุณอัปเดตธีม

นั่นหมายความว่าคุณอย่างใดอย่างหนึ่ง:

  • อัปเดตธีมของคุณและสูญเสียงานของคุณ ไม่ใช่ประสบการณ์ที่สนุกมากใช่ไหม?
  • อย่าอัปเดตธีมของคุณเพื่อไม่ให้งานของคุณสูญหาย... ซึ่งไม่เป็นผลดีต่อความปลอดภัยและการทำงานของไซต์ของคุณ

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

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

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

ธีม WordPress นอกชั้นวางบางธีมยังใช้วิธีหลัก/รองนี้เป็นค่าเริ่มต้น ตัวอย่างเช่น หากคุณต้องการใช้ Genesis Framework คุณจะต้องใช้ทั้งธีมหลัก (เฟรมเวิร์กพื้นฐาน) และธีมย่อยเพื่อควบคุมการออกแบบ

เมื่อใดควรใช้ธีมเด็ก

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

เมื่อคุณไม่จำเป็นต้องใช้ธีมลูก

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

อย่างไรก็ตาม มีข้อยกเว้นบางประการสำหรับกฎที่อาจมีตัวเลือกที่ดีกว่าการใช้ธีมย่อย

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

คุณสามารถเพิ่ม CSS ที่กำหนดเองได้โดยใช้คุณลักษณะ CSS เพิ่มเติม ในตัวในเครื่องมือปรับแต่ง WordPress แทน หรือคุณสามารถใช้ปลั๊กอินฟรี เช่น ปลั๊กอิน Simple CSS ของ Tom Usborne

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

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

เรียนรู้ทุกสิ่งที่คุณจำเป็นต้องรู้เกี่ยวกับฟิลด์ที่กำหนดเอง

วิธีสร้าง WordPress Child Theme

เมื่อคุณรู้แล้วว่าเหตุใดธีมย่อยจึงมีความสำคัญ มาดูวิธีสร้างธีมย่อยสำหรับไซต์ WordPress ของคุณกันดีกว่า ก่อนอื่น หากคุณใช้ธีม Hello Elementor เราได้สร้างธีมย่อยไว้สำหรับคุณแล้ว – คุณไม่จำเป็นต้องทำเอง คุณสามารถคว้าธีมลูก Hello Elementor จาก GitHub คุณสามารถติดตั้งได้เช่นเดียวกับธีม WordPress อื่น ๆ (เราจะแสดงวิธีติดตั้งธีมลูกในโพสต์นี้ด้วย) หากคุณใช้ธีมอื่น คุณควรลอง Google เพื่อดูว่าผู้พัฒนาธีมของคุณมีธีมย่อยที่สร้างไว้ล่วงหน้าหรือไม่ ตัวอย่างเช่น Astra, GeneratePress และ OceanWP ล้วนมีเครื่องมือ/ไฟล์ที่จะช่วยคุณดาวน์โหลดธีมลูก หากธีมของคุณไม่มีธีมย่อย คุณสามารถสร้างธีมย่อยสำหรับธีม WordPress ได้สองวิธี:
  1. ใช้ปลั๊กอินตัวสร้างธีมลูกของ WordPress ฟรี
  2. สร้างธีมลูกของคุณเอง
เราจะแสดงวิธีการดำเนินการทั้งสองวิธี

วิธีใช้ปลั๊กอิน WordPress Child Theme

ปลั๊กอินสร้างธีมลูกช่วยให้คุณสร้างธีมลูกโดยไม่ต้องออกจากแดชบอร์ด WordPress

ตัวเลือกที่ได้รับความนิยมมากที่สุดที่นี่คือปลั๊กอิน Child Theme Configurator ฟรี ซึ่งมีการใช้งานบนไซต์มากกว่า 300,000 แห่ง

Child Theme Configurator ไม่เพียงแต่ช่วยให้คุณสร้างไฟล์ธีมย่อยพื้นฐานเท่านั้น แต่ยังจะสแกนธีมที่คุณใช้อยู่ และจัดคิวธีมและสไตล์ชีตของฟอนต์ตามต้องการ

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

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

เมื่อคุณมีข้อมูลสำรองพร้อมแล้ว ให้เริ่มต้นด้วยการติดตั้งและเปิดใช้งานปลั๊กอิน Child Theme Configurator ฟรีจาก WordPress.org จากนั้นไปที่ เครื่องมือ → ธีมลูก เพื่อสร้างธีมลูกของคุณ

ใน รายการ ดรอปดาวน์ Select a Parent Theme ให้เลือกธีมที่คุณต้องการสร้างธีมย่อย จากนั้นคลิก วิเคราะห์ :

ปลั๊กอินจะวิเคราะห์ธีมหลักของคุณสำหรับการขึ้นต่อกัน

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

เมื่อคุณเสร็จสิ้นการเลือกของคุณคลิกที่ปุ่มที่ด้านล่างเพื่อสร้างเด็กใหม่ธีม

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

วิธีเปิดใช้งาน:

  • ไปที่ ลักษณะที่ปรากฏ → ธีม
  • ดูตัวอย่างว่าไซต์ของคุณมีลักษณะอย่างไรเมื่อใช้ธีมย่อย (เพื่อให้แน่ใจว่าใช้งานได้ - หากไซต์ของคุณดูแปลก อาจเป็นเพราะปัญหา CSS)
  • เปิดใช้งานธีมลูกของคุณเหมือนกับที่คุณทำกับธีม WordPress อื่น ๆ ตรวจสอบให้แน่ใจว่าได้ติดตั้งธีมหลักไว้

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

จากนั้น คุณสามารถคัดลอกไฟล์จากธีมหลักไปยังธีมย่อยได้

ตัวอย่างเช่น หากคุณต้องการแก้ไข single.php คุณสามารถคัดลอกไฟล์นั้นไปยังธีมลูกของคุณ เพื่อให้คุณสามารถแก้ไขได้อย่างปลอดภัย:

คุณยังจะพบเครื่องมืออื่นๆ มากมายที่จะช่วยให้คุณทำงานกับ CSS

เราจะอธิบายว่าทำไมเครื่องมือเหล่านี้จึงมีประโยชน์ในภายหลัง

วิธีสร้างธีมลูกด้วยตนเอง

สำหรับส่วนนี้ เราจะถือว่าคุณรู้เล็กน้อยเกี่ยวกับ PHP และ CSS หากคุณรู้สึกหนักใจกับคำแนะนำที่นี่ เราขอแนะนำให้ใช้ปลั๊กอินฟรีจากส่วนก่อนหน้า

ในการสร้างธีมย่อยด้วยตนเอง คุณต้องสร้างไฟล์สองไฟล์ (นี่เป็นไฟล์ขั้นต่ำสำหรับธีมย่อย):

  • style.css – ในตอนเริ่มต้น สิ่งที่คุณต้องทำคือเพิ่มโค้ดสำเร็จรูป
  • functions.php – ช่วยให้คุณสามารถจัดคิวสไตล์ชีตจากธีมหลักได้ หากไม่มีสิ่งนี้ ธีมลูกของคุณจะไม่สามารถใช้ CSS ของธีมหลักได้ ซึ่งจะทำให้ไซต์ของคุณดูน่าเกลียดมาก!

style.css

ขั้นแรก สร้างไฟล์ชื่อ style.css และเพิ่มโค้ดต่อไปนี้:

/*

ชื่อธีม: สวัสดี Elementor เด็ก

URI ธีม: https://github.com/elementor/hello-theme/

คำอธิบาย: Hello Elementor Child เป็นธีมลูกของ Hello Elementor ที่สร้างโดย Elementor team

ผู้เขียน: Elementor Team

URI ผู้เขียน: https://elementor.com/

แม่แบบ: hello-elementor

เวอร์ชัน: 1.0.1

โดเมนข้อความ: hello-elementor-child

ใบอนุญาต: GNU General Public License v3 หรือใหม่กว่า

URI ใบอนุญาต: https://www.gnu.org/licenses/gpl-3.0.html

*/

อย่าลืมแทนที่ทุกอย่างที่อยู่หลังเครื่องหมายทวิภาคด้วยข้อมูลจริงของคุณ:

  • ชื่อธีม – ชื่อธีมลูกของคุณ
  • URI ของธีม – เว็บไซต์สำหรับธีมและเอกสารประกอบของคุณ
  • Description – คำอธิบายสั้น ๆ ของธีม
  • ผู้แต่งชื่อผู้แต่ง ธีม
  • URI ผู้เขียน: – เว็บไซต์ของผู้แต่งธีม
  • เทมเพลต – ชื่อของโฟลเดอร์ของธีมหลักของคุณ (ตามที่มีชื่ออยู่ในโฟลเดอร์ wp-content/themes ของคุณ) นี่เป็นบรรทัดที่สำคัญที่สุดเนื่องจากธีมลูกของคุณจะใช้งานไม่ได้หากไม่มีสิ่งนี้
  • เวอร์ชัน – หมายเลขเวอร์ชันของธีมลูกของคุณ
  • โดเมนข้อความ – ใช้สำหรับการทำให้เป็นสากล คุณสามารถเพิ่ม “-child” ต่อท้ายชื่อเทมเพลตได้
  • ใบอนุญาต – ปล่อยให้เป็นค่าเริ่มต้น
  • URI ใบอนุญาต – ปล่อยให้เป็นค่าเริ่มต้น

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

หากคุณต้องการเพิ่มสไตล์แบบกำหนดเองของคุณในอนาคต คุณสามารถเพิ่มสไตล์ชีตนี้ใต้โค้ดต้นแบบได้

ฟังก์ชั่น.php

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

ในไฟล์ functions.php ให้เพิ่มโค้ดต่อไปนี้:

<?php

/* ฟังก์ชันเพื่อจัดคิวสไตล์ชีตจากธีมหลัก */

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

wp_enqueue_style( 'พาเรนต์', get_template_directory_uri().'/style.css' );

}

add_action( 'wp_enqueue_scripts', 'child_enqueue__parent_scripts');

อัปโหลดไฟล์ไปยังไซต์ WordPress

เมื่อคุณมี ไฟล์ style.css และไฟล์ functions.php แล้ว คุณจำเป็นต้องอัปโหลดไปยังไซต์ WordPress เป็นธีมใหม่

โดยเชื่อมต่อกับไซต์ WordPress ของคุณโดยใช้ FTP

จากนั้นเรียกดูไดเร็กทอรีธีมของไซต์ของคุณ ( wp-content/themes ) และสร้างโฟลเดอร์ใหม่สำหรับธีมลูกของคุณ

ตัวอย่างเช่น หากโฟลเดอร์ของธีมหลักของคุณคือ hello-elementor คุณสามารถตั้งชื่อโฟลเดอร์ธีมลูกว่า hello-elementor-child เพื่อช่วยให้คุณจำได้

จากนั้นอัปโหลด ไฟล์ style.css และ functions.php ของคุณภายในโฟลเดอร์นั้น:

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