วิธีสร้างธีม WordPress แบบกำหนดเองตั้งแต่เริ่มต้น (2022)

คุณต้องการสร้างธีม WordPress แบบกำหนดเองเพื่อให้ไซต์ของคุณมีรูปลักษณ์ที่ไม่เหมือนใครหรือไม่?

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

ในบทความนี้ เราจะแสดงวิธีสร้างธีม WordPress ของคุณเองโดยไม่ต้องเขียนโค้ด

หากต้องการข้ามไปยังส่วนใดส่วนหนึ่งของบทช่วยสอน คุณสามารถใช้ลิงก์ด่วนก่อน:

1. ติดตั้งปลั๊กอิน SeedProd
2. เลือกเทมเพลตธีม
3. ปรับแต่งส่วนธีม WordPress ของคุณ
4. เชื่อมต่อกับบริการไปรษณีย์
5. เผยแพร่ธีม WordPress ที่กำหนดเองของคุณ

คุณจะสร้างธีม WordPress ตั้งแต่เริ่มต้นได้อย่างไร?

ธีม WordPress สร้างขึ้นโดยใช้การผสมผสานระหว่าง PHP, CSS, JavaScript และ HTML ภาษาเหล่านี้เป็นภาษาเขียนโค้ดที่ต้องใช้การฝึกอบรมอย่างมากในการเรียนรู้ ดังนั้น หากตัวคุณเองไม่ใช่นักพัฒนา ทางเลือกเดียวของคุณที่เคยจ้างเอเจนซี่ด้านการพัฒนาเพื่อสร้างธีมให้กับคุณ ซึ่งอาจมีค่าใช้จ่ายสูง

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

ทำไมต้อง SeedProd?

SeedProd เป็นปลั๊กอินสำหรับสร้างหน้า Landing Page ที่ใช้งานง่ายที่สุดสำหรับ WordPress

ให้การปรับแต่งระดับสูงและมาพร้อมกับคุณสมบัติพิเศษที่หลากหลาย ได้แก่ :

• ตัวสร้างธีม
• เทมเพลตหน้า Landing Page มากกว่า 150 แบบ
• ตัวสร้างลากและวาง
• การรวมการตลาดผ่านอีเมล
• ภาพสต็อก 2 ล้านภาพ
• และอื่น ๆ.

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

มาดูกันว่าคุณสามารถสร้างธีม WordPress โดยใช้ SeedProd ได้อย่างไร

วิธีสร้างธีม WordPress แบบกำหนดเองโดยใช้ SeedProd

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

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

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

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

ขั้นตอนที่ 1. ติดตั้งปลั๊กอิน SeedProd

ก่อนอื่น ติดตั้งปลั๊กอิน SeedProd บนไซต์ WordPress ของคุณ คุณสามารถดูคำแนะนำในการติดตั้งปลั๊กอิน WordPress หากคุณไม่เคยติดตั้งปลั๊กอินมาก่อน

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

จากนั้นเปิดพื้นที่ผู้ดูแลระบบ WordPress และไปที่ SeedProd »การตั้งค่า จากนั้นป้อนรหัสที่คุณคัดลอกลงในช่องรหัส ใบอนุญาต แล้วกด ยืนยัน

ตอนนี้ ตรงไปที่ SeedProd » Theme Builder นี่คือแดชบอร์ดที่องค์ประกอบธีมที่แตกต่างกันทั้งหมดของคุณจะใช้งานได้

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

ทุกธีมของ WordPress ประกอบด้วยส่วนต่างๆ ได้แก่:

• หัวข้อ
• ส่วนท้าย
• หน้าแรก
• โพสต์เดียว
• หน้าเดียว
• ที่เก็บถาวรหรือหน้าบล็อก
• แถบด้านข้าง

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

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

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

ขั้นตอนที่ 2 เลือกเทมเพลตธีม

ฟีเจอร์ตัวสร้างธีมมีธีมที่สร้างไว้ล่วงหน้าหลายธีมซึ่งจำลองตามเว็บไซต์ธุรกิจประเภทต่างๆ หากต้องการดูธีมที่มีให้คลิกปุ่ม ธีม

SeedProd มาพร้อมกับเทมเพลตสำหรับธุรกิจและอุตสาหกรรมต่างๆ รวมถึงเอเจนซี่การตลาด ร้านอาหาร บริษัทดูแลสัตว์เลี้ยง และอื่นๆ

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

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

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

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

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

ขั้นตอนที่ 3 ปรับแต่งส่วนธีม WordPress ของคุณ

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

หากต้องการเริ่มแก้ไข ให้เลื่อนเคอร์เซอร์ไปที่ส่วนของธีมแล้วคลิก แก้ไขการออกแบบ

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

ส่วนหัวและส่วนท้าย

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

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

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

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

ตอนนี้ คลิกที่แท็บ ขั้นสูง เพื่อเข้าถึงการตั้งค่าเพิ่มเติม เช่น เงา ระยะห่าง เส้นขอบ ตำแหน่ง และอื่นๆ

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

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

ต่อไปเราจะแก้ไขหน้าแรก

หน้าแรก

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

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

• พื้นที่ฮีโร่
• ส่วนคุณสมบัติ
• ข้อความรับรอง
• ส่วนคำถามที่พบบ่อย

คุณสามารถเปลี่ยนทุกบล็อกของหน้านี้ได้ รวมถึงรูปภาพ ข้อความ ปุ่ม สี และเลย์เอาต์

ใน gif ด้านล่าง เราจะแสดงให้คุณเห็นว่าการแก้ไขส่วนต่างๆ ของหน้าทำได้ง่ายเพียงใดโดยใช้การลากและวางแบบง่ายๆ

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

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

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

หน้าบล็อก

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

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

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

หลังจากที่คุณได้ปรับแต่งหน้าบล็อกแล้ว ให้คลิกที่ บันทึก และกลับไปที่แดชบอร์ดของคุณอีกครั้ง

CSS ทั่วโลก

ส่วน Global CSS กำหนดการตั้งค่าส่วนกลางสำหรับสีของธีม การพิมพ์ เลย์เอาต์ และสไตล์ของคุณ

จากแดชบอร์ดตัวสร้างธีมของคุณ ให้คลิกที่ แก้ไขการออกแบบ ภายใต้ส่วน Global CSS ของธีมของคุณ

ตัวอย่างเช่น คุณสามารถเลือกสี ปุ่ม และแบบอักษรที่คุณต้องการให้ปรากฏทั่วทั้งไซต์ของคุณ

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

เมื่อคุณปรับการตั้งค่าตามที่คุณต้องการเสร็จแล้ว ให้คลิกที่ปุ่ม บันทึก

ขั้นตอนที่ 4. เชื่อมต่อกับบริการไปรษณีย์

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

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

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

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

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

ขั้นตอนที่ 5 เผยแพร่ธีม WordPress ที่กำหนดเองของคุณ

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

ตอนนี้ มาดูธีม WordPress แบบกำหนดเองที่สร้างขึ้นใหม่ของเรากัน!

นี่คือหน้าแรกของธีมที่มีส่วนหัว:

และนี่คือหน้าบล็อก

และนั่นแหล่ะ! คุณเพิ่งสร้างธีม WordPress แบบกำหนดเองชุดแรกโดยไม่มีโค้ด!

ถัดไป สร้างแบบฟอร์มการติดต่อสำหรับไซต์ WordPress ของคุณ

เมื่อคุณมีไซต์ WordPress ใหม่แล้ว คุณควรพิจารณาเพิ่มแบบฟอร์มการติดต่อเพื่อให้ผู้เยี่ยมชมสามารถติดต่อคุณได้อย่างง่ายดาย WPForms เป็นโปรแกรมสร้างแบบฟอร์ม WordPress ที่ใช้งานง่ายที่สุดโดยมีการติดตั้งมากกว่า 5 ล้านครั้ง

ไม่เพียงแต่คุณสามารถเพิ่มรายชื่อผู้รับจดหมายด้วย WPForms เท่านั้น แต่ยังทำกิจกรรมอื่นๆ เช่น การรวบรวมเงินบริจาคเพื่อการกุศลของคุณ

สร้างแบบฟอร์ม WordPress ของคุณตอนนี้

พร้อมที่จะสร้างแบบฟอร์มของคุณแล้วหรือยัง? เริ่มต้นวันนี้ด้วยปลั๊กอินสร้างแบบฟอร์ม WordPress ที่ง่ายที่สุด WPForms Pro มีเทมเพลตฟรีมากมายและรับประกันคืนเงินภายใน 14 วัน

หากบทความนี้ช่วยคุณได้ โปรดติดตามเราบน Facebook และ Twitter เพื่อดูบทแนะนำและคำแนะนำเกี่ยวกับ WordPress ฟรีเพิ่มเติม