เริ่มต้นใช้งาน WordPress ธีมลูก?

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

ธีม WordPress คือชุดของไฟล์ PHP, JavaScript และ CSS พูดง่ายๆ ด้วยธีม WordPress คุณสามารถเปลี่ยนรูปลักษณ์ของบล็อกของคุณได้ ธีม WordPress มีประสิทธิภาพมาก

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

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

ทำไม WordPress ธีมลูก?

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

ธีมลูกช่วยประหยัดงานและเวลาได้มาก การสร้างธีม WordPress ตั้งแต่เริ่มต้นนั้นใช้เวลานาน และบางครั้งจำเป็นต้องมีความรู้เกี่ยวกับ HTML, CSS, PHP และจำเป็นต้องมี ด้วยธีมย่อย คุณสามารถทำการปรับเปลี่ยนได้มากมาย

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

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

คุณสามารถทำอะไรกับ WordPress ธีมลูก

ด้วยธีมลูกของ WordPress คุณสามารถเพิ่มคุณสมบัติได้มากเท่าที่คุณต้องการ มันขึ้นอยู่กับคุณ. หากคุณต้องการเปลี่ยนขนาดฟอนต์หรือสีของหัวเรื่องหรือลิงก์ คุณสามารถทำได้ง่ายๆ ด้วย CSS

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

สิ่งที่คุณต้องการ:

ตอนนี้คุณรู้แล้วว่าธีมลูกของ WordPress คืออะไรและทำไมคุณควรสร้างธีมลูก ได้เวลาเรียนรู้วิธีสร้างธีมลูกของ WordPress แล้ว

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

มีหลายวิธีในการติดตั้ง WordPress ในเครื่อง หากคุณเป็นผู้ใช้ MAC คุณสามารถใช้ MAMP ผู้ใช้ Windows สามารถใช้โปรแกรมติดตั้ง XAMPP, WAMP หรือ Bitnami WordPress

• วิธีการติดตั้ง WordPress ด้วย WAMP Server
• วิธีการติดตั้ง WordPress ด้วย MAMP
• วิธีการติดตั้ง WordPress ด้วย Bitnami Stack

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

โดยส่วนตัวแล้วฉันชอบเซิร์ฟเวอร์ WAMP สำหรับการพัฒนาในพื้นที่ การติดตั้ง WordPress บน WAMP ไม่ใช่เรื่องยาก คุณสามารถอ่านบทแนะนำหรือดูวิดีโอเพื่อเรียนรู้วิธีติดตั้ง WordPress โดยใช้ WAMP, XAMPP หรือ MAMP

คุณจะต้องใช้โปรแกรมแก้ไขโค้ดเพื่อแก้ไขไฟล์ธีม Sublimetext, Brackets, Atom เป็นโปรแกรมแก้ไขโค้ดยอดนิยมไม่กี่ตัว

จะสร้างธีมลูกของ WordPress ได้อย่างไร?

เมื่อไซต์ WordPress ในพื้นที่ของคุณพร้อม เราสามารถเริ่มสร้างธีมลูกของเราได้ หากคุณใช้เซิร์ฟเวอร์ WAMP ให้ไปที่ไดเร็กทอรีการติดตั้ง WAMP > WWW > WordPress > wp-content > โฟลเดอร์ธีม

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

สำหรับทุกธีมลูก เราต้องการสองไฟล์

• functions.php
• style.css

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

[css]
/*
ชื่อธีม: InstantShift
คำอธิบาย: ธีมลูกยี่สิบหกสำหรับ InstantShift
ผู้เขียน: Tahir Taous
URI ผู้แต่ง: http://www.instantshift.com
แม่แบบ: Twentysixteen
เวอร์ชัน: 0.1
*/
[/css]

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

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

หากคุณกำลังใช้ธีมอื่นเป็นธีมหลัก ให้เปลี่ยน Template: Twensixteen ด้วย Template: parent-theme-name

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

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

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

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

[css]
ตัว{
สีพื้นหลัง: #E7F5FB;
}
[/css]

บันทึกไฟล์ style.css ของคุณ โหลดหน้าแรกของไซต์ WordPress ในพื้นที่ของคุณใหม่และคุณควรเห็นสีพื้นหลังสีฟ้าอ่อน

การลงทะเบียนสไตล์ชีตของธีมสำหรับผู้ปกครอง

เราไม่ต้องการสร้างสไตล์ทั้งหมดตั้งแต่เริ่มต้น เราจะเพิ่มสไตล์ใหม่ไม่กี่แบบด้วยไฟล์ style.css ของธีมลูก ตอนนี้ มาเพิ่มไฟล์ stye.css ของธีมพาเรนต์ในธีมย่อยของเรา

เปิดไฟล์ functions.php และเพิ่มโค้ดต่อไปนี้ในไฟล์ functions.php ของธีมลูก

[php]
<?php

// รูปแบบธีมหลัก //
// https://codex.wordpress.org/Child_Themes //

ฟังก์ชัน theme_enqueue_styles () {
$parent_style = 'รูปแบบหลัก';
ks29so_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
ks29so_enqueue_style( 'สไตล์เด็ก',
get_stylesheet_directory_uri() . '/style.css',
อาร์เรย์( $parent_style )
);
}
add_action( 'ks29so_enqueue_scripts', 'theme_enqueue_styles' );
[/php]

ตอนนี้ หากคุณจะโหลดไซต์ WordPress ในพื้นที่ของคุณใหม่ คุณจะเห็นธีมปกติพร้อมสไตล์ TwentySixteen ทั้งหมด

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

แต่เราไม่ได้สร้างธีมลูกเพื่อเปลี่ยนพื้นหลังของร่างกาย มาเริ่มปรับแต่งธีมของเรากัน

เอาชนะสไตล์ธีมหลัก

การปรับแต่งส่วนหัว:

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

[css]
.site ส่วนหัว {
ช่องว่างภายใน: 0 4.5455%;
พื้นหลัง: #CDDC39;
ระยะขอบล่าง: 2em;
}
[/css]

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

การปรับแต่งการนำทางหลัก

ตอนนี้ มาเปลี่ยนสีพื้นหลังสำหรับรายการเมนูการนำทางหลัก ฉันชอบใช้เครื่องมือสำหรับนักพัฒนา Chrome เพื่อแก้ไขสไตล์ CSS ของฉัน

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

เปิดไฟล์ style.css ของธีมลูกและเพิ่มโค้ดต่อไปนี้ลงไป

[css]
#เมนูส่วนหัว &gt; ลี่ {
พื้นหลัง: rgba(185, 202, 22, 0.97);
ระยะขอบขวา: 4px !สำคัญ;
รัศมีเส้นขอบ: 5px;
}
[/css]

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

คำพูดสุดท้าย

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

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

หากคุณต้องการเรียนรู้การพัฒนาธีม WordPress คุณควรเริ่มด้วยธีมย่อยของ WordPress เรียนรู้พื้นฐานของการปรับแต่งธีม