วิธีสร้างธีมเด็ก WordPress (คู่มือเริ่มต้น)

คุณต้องการสร้างธีมลูกใน WordPress หรือไม่?

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

ในบทความนี้ เราจะแสดงวิธีสร้างธีมลูกใน WordPress

ทำไมคุณถึงต้องการธีมเด็ก?

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

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

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

เมื่อคุณพอใจกับธีมลูกของคุณแล้ว คุณสามารถใช้มันบนเว็บไซต์ WordPress อื่นได้

เคล็ดลับ: กำลังมองหาวิธีง่ายๆ ในการปรับแต่งธีมของคุณโดยไม่ต้องสร้างธีมลูกหรือแก้ไขไฟล์ function.php อยู่ใช่ไหม? ปลั๊กอิน WPCode ฟรีช่วยให้คุณสามารถแทรกข้อมูลโค้ดสำหรับ PHP, CSS, HTML และอื่นๆ ได้อย่างง่ายดาย

ก่อนที่คุณจะเริ่มสร้างธีมลูก

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

ความรู้บางอย่างเกี่ยวกับ PHP ก็มีประโยชน์เช่นกัน อย่างน้อยคุณควรจะคุ้นเคยกับการคัดลอกและวางข้อมูลโค้ดจากแหล่งอื่น

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

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

ในบทความนี้ เราจะใช้ธีม Twenty Twenty-One ซึ่งเป็นหนึ่งในธีมเริ่มต้นของ WordPress

การสร้างธีมลูกคนแรกของคุณ

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

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

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

• วิธีที่ 1: การสร้างธีมลูกโดยใช้โค้ด

• วิธีที่ 2: การสร้างธีมลูกโดยใช้ปลั๊กอิน

วิธีที่ 1: การสร้างธีมลูกโดยใช้โค้ด

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

คุณสามารถตั้งชื่อโฟลเดอร์นี้ได้ตามที่คุณต้องการ สำหรับบทช่วยสอนนี้ เราจะตั้งชื่อมันว่า wpbdemo

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

จากนั้นคุณจะต้องวางโค้ดต่อไปนี้ลงในเอกสารว่าง:

Theme Name:   WPB Child Theme
Theme URI:    https://word-press.club/
Description:  A Twenty Twenty-One child theme
Author:       WPBeginner
Author URI:   https://word-press.club
Template:     twentytwentyone
Version:      1.0.0
Text Domain:  twentytwentyonechild

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

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

/* enqueue scripts and style from parent theme */

function twentytwentyone_styles() {
wp_enqueue_style( 'child-style', get_stylesheet_uri(),
array( 'twenty-twenty-one-style' ), wp_get_theme()->;get('Version') );
}
add_action( 'wp_enqueue_scripts', 'twentytwentyone_styles');

รหัสนี้จะใช้งานได้เมื่อคุณใช้ Twenty Twenty-One เป็นธีมหลัก หากคุณใช้ธีมหลักอื่น คุณจะต้องใช้โค้ดอื่นตามที่อธิบายไว้ในคู่มือธีม WordPress

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

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

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

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

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

วิธีที่ 2: การสร้างธีมลูกโดยใช้ปลั๊กอิน

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

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

เมื่อเปิดใช้งาน คุณต้องไปที่ เครื่องมือ » ธีมลูก ในแดชบอร์ด WordPress ของคุณ

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

เมื่อคุณคลิกปุ่ม "วิเคราะห์" ปลั๊กอินจะทำให้แน่ใจว่าธีมนั้นเหมาะสำหรับใช้เป็นธีมหลัก

ยี่สิบเอ็ดก็โอเค

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

เราจะคงการตั้งค่าเริ่มต้นไว้

ในส่วนต่อไปนี้ คุณจะถูกขอให้เลือกวิธีเข้าถึงสไตล์ชีตของธีมหลัก

เราจะใช้การตั้งค่าเริ่มต้นอีกครั้ง

เมื่อคุณไปถึงส่วนที่ 7 คุณจะต้องคลิกปุ่มที่มีข้อความว่า 'คลิกเพื่อแก้ไขแอตทริบิวต์ธีมย่อย'

จากนั้นคุณสามารถกรอกรายละเอียดของธีมลูกของคุณได้

เมื่อคุณสร้างธีมลูกด้วยตนเอง คุณจะสูญเสียเมนูและวิดเจ็ตของธีมหลัก Child Theme Configuratator สามารถคัดลอกจากธีมหลักไปยังธีมลูกได้

ทำเครื่องหมายในช่องส่วนที่ 8 หากคุณต้องการทำเช่นนี้

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

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

หากทุกอย่างดูเหมือนจะทำงานได้ ให้คลิกปุ่ม "เปิดใช้งานและเผยแพร่"

ตอนนี้ ธีมลูกของคุณจะเริ่มเผยแพร่แล้ว

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

การปรับแต่งธีมลูกของคุณ

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

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

วิธีที่ 1: การคัดลอกโค้ดจาก Chrome หรือ Firefox Inspector

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

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

การดำเนินการนี้จะแบ่งหน้าจอเบราว์เซอร์ของคุณออกเป็นสองส่วน ที่ด้านล่างของหน้าจอ คุณจะเห็น HTML และ CSS สำหรับหน้านั้น

HTML และ CSS อาจปรากฏที่ด้านขวาของหน้าจอแทน ทั้งนี้ขึ้นอยู่กับการตั้งค่าเบราว์เซอร์ของคุณ

เมื่อคุณเลื่อนเมาส์ไปเหนือบรรทัด HTML ต่างๆ ตัวตรวจสอบ Chrome จะไฮไลต์บรรทัดเหล่านั้นในหน้าต่างด้านบน นอกจากนี้ยังจะแสดงกฎ CSS ที่เกี่ยวข้องกับองค์ประกอบที่ไฮไลต์ด้วย

คุณสามารถลองแก้ไข CSS ตรงนั้นเพื่อดูว่ามันจะดูเป็นอย่างไร ลองเปลี่ยนสีพื้นหลังของตัวกล้องเป็น #fdf8ef

คุณจะเห็นว่าสีพื้นหลังของหน้าจะเปลี่ยนไป แต่การเปลี่ยนแปลงจะเกิดขึ้นเพียงชั่วคราวเท่านั้น

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

body {
background-color: #fdf8ef;
}

บันทึกการเปลี่ยนแปลงที่คุณทำกับไฟล์ style.css จากนั้นดูตัวอย่างไซต์ของคุณ

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

Theme Name:   WPB Child Theme
Theme URI:    https://word-press.club/
Description:  A Twenty Twenty-One child theme
Author:       WPBeginner
Author URI:   https://word-press.club
Template:     twentytwentyone
Version:      1.0.0
Text Domain:  twentytwentyonechild
*/

.site-title {
color: #7d7b77;
}
.site-description {
color: #aba8a2;
}
body {
background-color: #fdf8ef;
color: #7d7b77;
}
.entry-footer {
color: #aba8a2;
}
.entry-title {
color: #aba8a2;
font-weight: bold;
}
.widget-area {
color: #7d7b77;
}

วิธีที่ 2: การคัดลอกโค้ดจากไฟล์ style.css ของธีมหลัก

คุณยังสามารถคัดลอกโค้ดบางส่วนได้โดยตรงจากไฟล์ style.css ของธีมหลัก จากนั้นคุณสามารถวางลงในไฟล์ style.css ของธีมย่อยและแก้ไขได้

ซึ่งจะเป็นประโยชน์อย่างยิ่งเมื่อใช้ Twenty Twenty-One เป็นธีมหลัก เนื่องจากมีการใช้ตัวแปร CSS อย่างกว้างขวาง

ตัวอย่างเช่น เมื่อเราแก้ไขสีพื้นหลังของหน้าด้านบน โค้ดต้นฉบับคือ:

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

ที่นี่ '-global-color-พื้นหลัง' เป็นตัวแปร ตัวแปรสามารถใช้ได้ในหลายตำแหน่งทั่วทั้งธีม หากต้องการเปลี่ยนสีในตำแหน่งทั้งหมดพร้อมกัน คุณเพียงแค่ต้องเปลี่ยนค่าของตัวแปร

คุณต้องไปที่ /wp-content/themes/twentytwentyone ในโฟลเดอร์การติดตั้ง WordPress ของคุณ จากนั้นเปิดไฟล์ style.css ในโปรแกรมแก้ไขข้อความของคุณ จากนั้นคุณจะพบว่ากำหนด -global-color-พื้นหลังไว้ที่ไหน

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

เราค้นพบว่าตัวแปรนั้นถูกกำหนดโดยตัวแปรอื่น!

ที่จริงแล้ว ในส่วน :root ของ style.css ของธีมหลัก เราพบว่ามีการกำหนดตัวแปรสีทั้งหมดไว้ นี่คือชุดสีที่ใช้โดยธีม Twenty Twenty-One

:root {
--global--color-black: #000;
--global--color-dark-gray: #28303d;
--global--color-gray: #39414d;
--global--color-light-gray: #f0f0f0;
--global--color-green: #d1e4dd;
--global--color-blue: #d1dfe4;
--global--color-purple: #d1d1e4;
--global--color-red: #e4d1d1;
--global--color-orange: #e4dad1;
--global--color-yellow: #eeeadd;
--global--color-white: #fff;
}

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

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

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

เป็นคนชอบผจญภัย ตัวแปรสีเขียวไม่จำเป็นต้องเป็นสีเขียว

คุณสามารถทำเช่นเดียวกันกับตัวแปรอื่นๆ ได้ style.css ของ Twenty Twenty-One แสดงรายการตัวแปรสำหรับตระกูลแบบอักษรและขนาด ส่วนหัว ระยะห่างระหว่างบรรทัด และอื่นๆ คุณสามารถคัดลอกสิ่งเหล่านี้ไปยังไฟล์ style.css ใหม่ของคุณ ซึ่งคุณสามารถปรับแต่งได้

การแก้ไขไฟล์เทมเพลต

ธีม WordPress แต่ละธีมมีรูปแบบที่แตกต่างกัน ตัวอย่างเช่น ธีม Twenty Twenty-One มีส่วนหัว ลูปเนื้อหา พื้นที่วิดเจ็ตส่วนท้าย และส่วนท้าย

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

โดยปกติเทมเพลตจะตั้งชื่อตามพื้นที่ที่ใช้ ตัวอย่างเช่น ส่วนท้ายกระดาษมักจะจัดการโดยไฟล์ footer.php และส่วนหัวและพื้นที่การนำทางจะถูกจัดการโดยไฟล์ header.php

บางพื้นที่ เช่น พื้นที่เนื้อหา อาจได้รับการจัดการโดยไฟล์หลายไฟล์ที่เรียกว่าเทมเพลตเนื้อหา

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

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

ตามตัวอย่าง เราจะลบลิงก์ "Proudly powered by WordPress" ออกจากส่วนท้ายและเพิ่มประกาศเกี่ยวกับลิขสิทธิ์ที่นั่น หากต้องการทำเช่นนั้น คุณควรลบทุกอย่างที่อยู่ระหว่างแท็ก

<div class="powered-by">
<?php
printf(
/* translators: %s: WordPress. */
esc_html__( 'Proudly powered by %s.', 'twentytwentyone' ),
'<a href="' . esc_url( __( 'https://wordpress.org/', 'twentytwentyone' ) ) . '">WordPress</a>'
);
?>
</div><!-- .powered-by -->

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

<?php
// Register Sidebars
function custom_sidebars() {

$args = array(
'id'            => 'custom_sidebar',
'name'          => __( 'Custom Widget Area', 'text_domain' ),
'description'   => __( 'A custom widget area', 'text_domain' ),
'before_title'  => '<h3 class="widget-title">',
'after_title'   => '</h3>',
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget'  => '</aside>',
);
register_sidebar( $args );

}
add_action( 'widgets_init', 'custom_sidebars' );
?>