วิธีสร้างธีมลูก WordPress (วิดีโอ)

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


ธีมลูก WordPress ง่ายๆโดยใช้ Twenty Thirteen

วิดีโอการสอน:

สมัครสมาชิก WPBeginner

สำหรับผู้ที่ไม่ต้องการดูวิดีโอคุณสามารถอ่านบทความด้านล่างนี้.

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

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

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

ความต้องการ

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

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

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

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

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

ก่อนอื่นคุณต้องเปิด / wp-content / themes / ในโฟลเดอร์การติดตั้ง WordPress ของคุณและสร้างโฟลเดอร์ใหม่สำหรับลูกของคุณ คุณสามารถตั้งชื่อโฟลเดอร์นี้ตามที่คุณต้องการ สำหรับบทช่วยสอนนี้เราจะตั้งชื่อมันเป็น wpbdemo.

สร้างธีมลูก WordPress ใหม่

เปิดตัวแก้ไขข้อความเช่น Notepad และวางรหัสนี้:

/ *
ชื่อธีม: WPB Child Theme
URI ของธีม: https://www.wpbeginner.com/
คำอธิบาย: ชุดรูปแบบของเด็ก Twenty Thirteen
ผู้แต่ง: WPBeginner
ผู้เขียน URI: https://www.wpbeginner.com
แม่แบบ: สิบสาม
เวอร์ชัน: 1.0.0
* /

@import url ("../twentythirteen/style.css");

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

เนื้อหาส่วนใหญ่ในไฟล์นี้เป็นแบบอธิบายตนเอง สิ่งที่คุณต้องการให้ความสนใจจริงๆคือเทมเพลต: สิบสาม.

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

บรรทัดสุดท้ายในรหัสนี้นำเข้าสไตล์ชีทของธีมหลักไปยังธีมย่อย.

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

เปิดใช้งานธีมลูกของคุณ WordPress

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

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

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

ในส่วนนี้คุณจะต้องมีความรู้ CSS เล็กน้อย.

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

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

การใช้เครื่องมือตรวจสอบองค์ประกอบใน Google Chrome

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

ผู้ตรวจสอบ Chrome แสดงกฎสไตล์ HTML และ CSS ที่แสดงผล

ในขณะที่คุณเลื่อนเมาส์ไปบนบรรทัด HTML อื่น ๆ ผู้ตรวจสอบ Chrome จะเน้นสีเหล่านั้นในหน้าต่างด้านบน อย่างที่คุณเห็นว่าเรามีเมนูนำทางที่เลือกในภาพหน้าจอด้านบน.

นอกจากนี้ยังจะแสดงกฎ CSS ที่เกี่ยวข้องกับองค์ประกอบที่เน้นสีในหน้าต่างด้านขวา.

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

เล่นกับ CSS ในตัวตรวจสอบ Chrome

คุณจะเห็นว่าสีพื้นหลังของแถบนำทางจะเปลี่ยนไป หากคุณชอบสิ่งนี้คุณสามารถคัดลอกกฎ CSS นี้และวางในไฟล์ style.css ของ Child Theme.

.navbar {
สีพื้นหลัง: # e8e5ce;
}

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

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

/ *
ชื่อธีม: WPB Child Theme
URI ของธีม: https://www.wpbeginner.com
คำอธิบาย: ชุดรูปแบบของเด็ก Twenty Thirteen
ผู้แต่ง: WPBeginner
ผู้เขียน URI: https://www.wpbeginner.com
แม่แบบ: สิบสาม
เวอร์ชัน: 1.0.0
* /

@import url ("../twentythirteen/style.css");

.ชื่อไซต์ {
การขยาย: 30px 0 30px;
}

.site-header .home-link {
ความสูงขั้นต่ำ: 0px;
}

.navbar {
สีพื้นหลัง: # e8e5ce;
}

.วิดเจ็ต {
สีพื้นหลัง: # e8e5ce;
}
.ส่วนท้ายของไซต์ {
สีพื้นหลัง: # d8cdc1;
}
.ส่วนท้ายของไซต์. sidebar-container {
สีพื้นหลัง: # 533F2A
}

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

เค้าโครงยี่สิบสาม

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

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

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

ก่อนอื่นคุณต้องทำคือเลือกไฟล์ธีมที่คุณต้องการแก้ไขแล้วคัดลอกลงในธีมลูกของคุณ.

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

<?PHP
/ **
* เทมเพลตสำหรับแสดงส่วนท้าย
* * * *
* มีเนื้อหาส่วนท้ายและการปิดองค์ประกอบ #main และ #page div.
* * * *
* @package WordPress
* @subpackage ยี่สิบยี่สิบสาม
* @since Twenty Thirteen 1.0
* /
?>

<?php get_sidebar (‘main’); ?>

©ลิขสิทธิ์ <?php echo date (Y); ?> <?php bloginfo (‘name’); ?> สงวนลิขสิทธิ์.



<?php wp_footer (); ?>

ในรหัสนี้เราได้แทนที่เครดิตยี่สิบสามด้วยประกาศลิขสิทธิ์.

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

การเพิ่มฟังก์ชั่นใหม่ให้กับธีมลูก

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

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

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

เราได้สร้างรูปภาพส่วนหัวและรูปขนาดย่อโดยการแก้ไขภาพส่วนหัวเริ่มต้นของ Twenty Thirteen ต่อไปเราอัปโหลดไปยังธีมลูกของเราภายใน / images / headers / folder.

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

<?PHP
ฟังก์ชัน wpbdemo_custom_header_setup () {

add_theme_support (‘custom-header’, array (‘default-image’ =)> ‘% s / images / headers / circle-wpb.png’));

register_default_headers (อาร์เรย์ (
‘คาราเมล’ => array (
‘url’ => ‘% 2 $ s / images / หัว / วงกลม wpb.png’,
‘thumbnail_url’ => ‘% 2 $ s / images / หัว / วงกลม WPB-thumbnail.png’,
‘description’ => __ (‘Caramel’, ‘Caramel header’, ‘ยี่สิบสาม’)
),
));

}
add_action (‘after_setup_theme’, ‘wpbdemo_custom_header_setup’);
?>

ตอนนี้ถ้าคุณเยี่ยมชม หน้าตา»ส่วนหัว, คุณจะสามารถเห็นภาพที่เราเพิ่มเป็นภาพเริ่มต้น.

การเปลี่ยนหัวข้อของธีมใน WordPress Child Theme ของคุณ

คุณสามารถเพิ่มข้อมูลโค้ดที่กำหนดเองที่คุณต้องการในไฟล์ function.php ของธีมลูก ลองดูเทคนิคที่มีประโยชน์อย่างยิ่ง 25+ สำหรับไฟล์ฟังก์ชั่น WordPress.

การแก้ไขปัญหา

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

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

ผลสุดท้าย

ธีมลูก WordPress ง่ายๆโดยใช้ Twenty Thirteen

ดาวน์โหลด Theme Demo

คุณสามารถดาวน์โหลดผลลัพธ์สุดท้ายของบทช่วยสอนเกี่ยวกับธีมลูก WordPress ของเราได้โดยคลิกที่นี่ โปรดจำไว้ว่านี่เป็นธีมลูกที่พื้นฐานมากจาก Twenty Thirteen.

ธีมเด็กอื่น ๆ จาก Twenty Thirteen

นี่คือธีมลูกของ WordPress อื่น ๆ ที่ใช้ Twenty Thirteen ลองดูที่พวกเขาและดูว่านักพัฒนาธีมเหล่านี้ปรับแต่ง Twenty Thirteen ได้อย่างไร.

โขยง

Holi - ธีมลูกของ WordPress ใช้ Twenty Thirteen

ดอกซากุระ

Cherry Blossom - ธีมเด็กยี่สิบสาม

2013 Blue

2013 Blue

ผลงานแบน

ผลงานแบน

เราหวังว่าบทความนี้จะช่วยให้คุณเรียนรู้วิธีสร้างธีมลูก WordPress จำไว้ว่ามีการสนับสนุนมากมายสำหรับผู้ที่ต้องการ.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map