วิธีสร้างธีมเด็ก Divi

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

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

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

ในบทความนี้ ฉันจะกล่าวถึง:

• Divi คืออะไรและมีคุณสมบัติอะไรบ้าง?
• วิธีสร้างธีมลูก Divi (+ ดาวน์โหลดลูกฟรี!)
• วิธีทดสอบว่าธีมลูก Divi ของคุณใช้งานได้หรือไม่

มาดำดิ่งกัน

Divi คืออะไรและมีคุณสมบัติอะไรบ้าง?

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

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

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

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

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

แถว: แถวคือเค้าโครงคอลัมน์ต่างๆ ที่สามารถวางภายในส่วนต่างๆ ได้ มีการตั้งค่าต่างๆ ที่สามารถเข้าถึงได้โดยการคลิกไอคอนการตั้งค่าที่ด้านซ้ายบนของแถว และสามารถใช้เพื่อเพิ่มความหลากหลายของเลย์เอาต์ที่สร้างด้วย Divi Builder ได้อย่างมาก เนื่องจากจะสร้างโครงสร้างที่โมดูลของคุณตั้งอยู่

โมดูล: โมดูลประกอบด้วยองค์ประกอบเนื้อหาที่แตกต่างกัน เช่น รูปภาพ เนื้อหา แถบเลื่อน แกลเลอรี แบบฟอร์มติดต่อ CTA บล็อก แบบฟอร์ม ข้อความรับรอง ฯลฯ มีโมดูลมากกว่า 40 โมดูลที่คุณสามารถเลือกได้ จากนั้นปรับแต่งตามที่คุณต้องการ

ตอนนี้คุณเข้าใจ Divi ดีขึ้นแล้ว มาดูวิธีสร้างธีมลูกกันดีกว่า

วิธีสร้างธีมเด็ก Divi

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

ตัวเลือกที่ 1: ใช้มู่เล่ + Divi เพื่อการติดตั้งที่ง่ายและรวดเร็ว

ตัวเลือก 2: วิธีการด้วยตนเอง (ทำตามสองขั้นตอนนี้)

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

ขั้นตอนที่ 2: ถึงเวลาลงชื่อเข้าใช้เว็บไซต์ WordPress ของคุณ ไปที่ ลักษณะ > ธีม คลิกเพิ่มใหม่หรือเพิ่มธีมใหม่ทางด้านขวา คลิกปุ่ม "อัปโหลดธีม" ที่ด้านซ้ายบน เลือกไฟล์และค้นหาไฟล์ zip Divi นั้น หมายเหตุ: เก็บไว้ในไฟล์ zip (อย่าแตกไฟล์) คลิกติดตั้ง หลังจากติดตั้งเสร็จแล้ว คลิก “เปิดใช้งาน” และจะมีการติดตั้งและเปิดใช้งานบนเว็บไซต์ของคุณ! -

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

ตัวเลือกที่ 1: ดาวน์โหลดไฟล์ธีม Divi Child ฟรี

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

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

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

มีปลั๊กอินจำนวนมากที่จะช่วยคุณสร้างธีมลูก Divi นี่คือรายการโปรดส่วนตัวบางส่วนของฉัน:

• เด็กดีวี่
• ตัวกำหนดค่าธีมลูก
• ผู้สร้างธีมเด็กโดย Orbisius

เด็กดีวี่

Divi Children เป็นปลั๊กอินฟรีที่พัฒนาขึ้นสำหรับผู้ใช้ Divi โดยเฉพาะ มันจะทำงานหนักให้คุณโดยอัตโนมัติ ดังนั้นคุณจึงสามารถมุ่งความสนใจไปที่ด้านที่สร้างสรรค์ได้! ธีมลูกทุกอันที่สร้างโดย Divi Children มาพร้อมกับคุณสมบัติการปรับแต่งมากมายผ่าน WP Customizeder เรียนรู้วิธีการติดตั้งปลั๊กอินนี้ได้ที่นี่

ตัวกำหนดค่าธีมลูก

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

ผู้สร้างธีมเด็กโดย Orbisius

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

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

ตัวเลือกที่ 3: สร้างธีม Divi Child ด้วยตนเอง

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

ขั้นตอนที่ 1: สร้างไฟล์ style.CSS

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

หมายเหตุ: ตรวจสอบให้แน่ใจว่าคุณมีเครื่องมือแก้ไขข้อความหรือโค้ด ไม่เช่นนั้นการตั้งชื่อไฟล์นั้นจะเป็นเรื่องยาก!

ขั้นตอนที่ 2: เพิ่มสิ่งนี้ลงในไฟล์ style.css:

 -
 ชื่อธีม: ธีมเด็ก Divi
 URI ธีม: https://www.elegantthemes.com/gallery/divi/
 คำอธิบาย: ธีมลูกสำหรับ Divi
 ผู้เขียน: ชื่อของคุณ
 URI ผู้เขียน: https://getflywheel.com/
 แม่แบบ: ดิวิ
 เวอร์ชัน: 1.0.0
-

ชื่อธีม, URI ของธีม, คำอธิบาย, ผู้แต่ง, URI ของผู้เขียน และเวอร์ชันทั้งหมดสามารถแก้ไขได้ คงชื่อเทมเพลตไว้เหมือนเดิม! หากต้องการปรับแต่งเพิ่มเติม (และเพื่อให้แน่ใจว่าธีมลูก Divi ของคุณใช้งานได้) ให้เพิ่ม CSS ที่กำหนดเองที่นี่

ขั้นตอนที่ 3: สร้างไฟล์ function.php

สร้างไฟล์อื่นในโฟลเดอร์ที่คุณสร้างไว้แล้วและตั้งชื่อเป็น function.php

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

 <?php
ฟังก์ชั่น divi__child_theme_enqueue_styles() {
    wp_enqueue_style( 'สไตล์ผู้ปกครอง', get_template_directory_uri() . '/style.css' );
-
add_action( 'wp_enqueue_scripts', 'divi__child_theme_enqueue_styles' );

ขั้นตอนที่ 4: สร้างภาพหน้าจอ

นี่เป็นขั้นตอนสำคัญเพื่อให้ไซต์ของคุณไม่มีพื้นที่ว่างสำหรับรูปภาพที่ควรอยู่ในหน้าธีม WordPress ดังนั้นการจับภาพหน้าจออย่างรวดเร็วจึงเป็นขั้นตอนสำคัญที่นี่! เมื่อคุณถ่ายภาพหน้าจอแล้ว ให้ดำเนินการต่อและตรวจสอบให้แน่ใจว่ามีขนาด 880x660px ซึ่งเป็นไฟล์ .png หรือ .jpeg (ใช้งานได้ทั้งคู่!) และชื่อเป็น [screenshot.png] หรือ [screenshot.jpeg] จากนั้น คุณจะเพิ่มภาพหน้าจอของคุณลงในโฟลเดอร์หลัก

ขั้นตอนที่ 5: บีบอัดโฟลเดอร์และอัปโหลด

สุดท้าย บีบอัดโฟลเดอร์ให้เป็นไฟล์ประเภท zip และอัปโหลดไปยัง WordPress! คุณจะไปที่ รูปลักษณ์ > ธีม > อัปโหลด จากนั้นคลิกเปิดใช้งาน

เอาล่ะ! คุณสร้างธีมลูก Divi สำเร็จแล้ว และคุณพร้อมที่จะปรับแต่งตามความต้องการของหัวใจแล้ว

วิธีทดสอบว่าธีม Divi Child ของคุณใช้งานได้หรือไม่

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

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

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

บทสรุป

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

ดาวน์โหลดธีมลูก Divi ฟรี

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