วิธีสร้างธีม WordPress ที่กำหนดเองได้อย่างง่ายดาย (โดยไม่ต้องใช้รหัสใด ๆ )

เผยแพร่แล้ว: 2022-01-22


คุณต้องการสร้างธีม WordPress แบบกำหนดเองตั้งแต่เริ่มต้นหรือไม่?

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

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

การสร้างธีม WordPress แบบกำหนดเองโดยไม่ต้องมีทักษะการเขียนโปรแกรมใดๆ

นี่คือรายการหัวข้อที่เราจะกล่าวถึงในบทความนี้

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

พร้อม? มาเริ่มกันเลย.

วิดีโอสอน

หากคุณต้องการคำแนะนำที่เป็นลายลักษณ์อักษร ให้อ่านต่อไป

การสร้างธีม WordPress แบบกำหนดเองสำหรับผู้เริ่มต้น

เว็บไซต์ WordPress ใช้ธีมสำหรับเลย์เอาต์และการออกแบบเว็บไซต์ ธีมเหล่านี้ประกอบด้วยไฟล์เทมเพลตที่เขียนด้วย PHP, HTML, CSS และ JavaScript

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

หากคุณจ้างนักพัฒนาหรือเอเจนซี่ ต้นทุนของธีม WordPress ที่กำหนดเองอาจสูงถึงหลายพันดอลลาร์

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

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

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

นี่คือที่มาของ SeedProd

เป็นปลั๊กอินตัวสร้างธีม WordPress ที่ดีที่สุดที่ช่วยให้คุณสามารถสร้างธีม WordPress ที่กำหนดเองได้อย่างง่ายดายโดยไม่ต้องเขียนโค้ดใดๆ

ตัวสร้างหน้า Landing Page ของ SeedProd

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

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

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

อย่างที่กล่าวไปแล้ว มาดูวิธีสร้างธีม WordPress แบบกำหนดเองโดยไม่ต้องเขียนโค้ดใดๆ

การสร้างธีมที่กำหนดเองด้วย SeedProd Theme Builder

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

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

หมายเหตุ: คุณต้องมีอย่างน้อยแผน Pro หรือ Elite เพื่อปลดล็อกเครื่องมือสร้างธีม

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

ป้อนรหัสใบอนุญาต SeedProd ของคุณ

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

การสร้างธีม WordPress ของคุณเองด้วย SeedProd นั้นค่อนข้างง่าย

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

สร้างธีมที่กำหนดเองของคุณ

ในการเริ่มต้น คุณมีสองตัวเลือก

  • ใช้หนึ่งในธีม SeedProd สำเร็จรูปเป็นจุดเริ่มต้น
  • สร้างเทมเพลตธีมด้วยตนเองตั้งแต่เริ่มต้น

มาดูกันว่าตัวเลือกเหล่านี้ทำงานอย่างไร

1. เริ่มต้นด้วยธีมสำเร็จรูป (แนะนำ)

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

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

เลือกธีมเพื่อเริ่มต้น

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

เมื่อคุณเลือกธีมแล้ว SeedProd จะสร้างเทมเพลตธีมทั้งหมด

เทมเพลตธีม

นี่คือเวอร์ชันร่างของธีม WordPress ที่คุณกำหนดเอง

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

2. สร้างเทมเพลตธีมด้วยตนเองตั้งแต่เริ่มต้น

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

สร้างเทมเพลตธีม

ขณะนี้ คุณมีตัวเลือกให้เลือกจากประเภทเทมเพลตต่อไปนี้:

  • หัวข้อ
  • ส่วนท้าย
  • โพสต์เดียว
  • หน้าเดียว
  • คลังเก็บเอกสารสำคัญ
  • ผลการค้นหา
  • Global Part
  • หน้ากำหนดเอง

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

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

การแก้ไขธีมด้วย SeedProd Theme Builder

เมื่อคุณสร้างเทมเพลตธีมแล้ว คุณสามารถแก้ไขได้โดยใช้ SeedProd Theme Builder

เพียงคลิกที่ลิงก์ แก้ไขการออกแบบ ด้านล่างไฟล์เทมเพลตเพื่อแก้ไข

การแก้ไขแม่แบบ

การดำเนินการนี้จะเปิดไฟล์เทมเพลตในตัวสร้างธีมของ SeedProd

คุณจะเห็นตัวอย่างสดของเทมเพลตในคอลัมน์ด้านขวาพร้อมแผงแก้ไขในคอลัมน์ด้านซ้าย

อินเทอร์เฟซตัวสร้างธีม

หากต้องการเปลี่ยนรายการในไฟล์เทมเพลต คุณเพียงแค่ชี้และคลิกเพื่อแก้ไข

การแก้ไขรายการในตัวสร้างธีม

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

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

เพิ่มบล็อกให้กับเค้าโครงธีมของคุณ

1. บล็อกแท็กเทมเพลต

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

บล็อกแท็กเทมเพลต

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

2. บล็อกมาตรฐาน

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

บล็อคมาตรฐาน

คุณสามารถใช้เพื่อเพิ่มข้อความ สื่อ ปุ่ม คอลัมน์ ตัวแบ่ง และอื่นๆ

3. บล็อกอื่นๆ

บล็อกขั้นสูงอื่นๆ ช่วยให้คุณเพิ่มแบบฟอร์มติดต่อ โปรไฟล์โซเชียล ปุ่มแชร์ รหัสย่อของ WordPress, Google Maps และอื่นๆ

บล็อกขั้นสูง

SeedProd ยังมาพร้อมกับการรวม WooCommerce แบบเต็มรูปแบบ

หากคุณเปิดร้านค้าออนไลน์ คุณสามารถใช้บล็อก WooCommerce ในธีมของคุณได้

WooCommerce บล็อก

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

การใช้ส่วนต่างๆ สำหรับเค้าโครงธีมด่วน

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

เพียงสลับไปที่แท็บส่วนใต้แผงการออกแบบ

การเพิ่มส่วนต่างๆ ให้กับเลย์เอาต์ของคุณ

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

เพียงคลิกที่ส่วนเพื่อเพิ่มลงในเทมเพลตธีมของคุณ แล้วแก้ไขตามความต้องการของคุณเอง

ส่วนคำถามที่พบบ่อย

การบันทึกและเผยแพร่แม่แบบของคุณ

เมื่อคุณพอใจกับการออกแบบแล้ว คุณสามารถคลิกปุ่มบันทึกและเลือกเผยแพร่เพื่อบันทึกเทมเพลตของคุณ

บันทึกและเผยแพร่เทมเพลตของคุณ

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

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

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

ตัวอย่างเช่น คุณอาจต้องการใช้รูปแบบตัวอักษร ขนาดตัวอักษร สี และรูปแบบภาพเดียวกันในทุกหน้า

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

SeedProd ทำให้สิ่งนี้ง่ายมากเช่นกัน

แทนที่จะเขียนโค้ด CSS คุณสามารถแก้ไขเทมเพลต Global CSS ได้

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

CSS ทั่วโลก

การสมัครและเผยแพร่ธีม WordPress ที่กำหนดเองของคุณ

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

SeedProd ช่วยให้คุณสามารถใช้ธีม WordPress ที่กำหนดเองได้ด้วยสวิตช์ง่ายๆ

เพียงไปที่หน้า SeedProd » Theme Builder และสลับสวิตช์ข้างตัวเลือก 'เปิดใช้งานธีม SeedProd' เป็น 'ใช่'

เปิดใช้งานธีม SeedProd

SeedProd จะแทนที่ธีม WordPress ที่มีอยู่ด้วยธีม WordPress แบบกำหนดเองที่คุณสร้างขึ้น

ตอนนี้คุณสามารถเยี่ยมชมเว็บไซต์ของคุณเพื่อดูธีม WordPress ที่กำหนดเองได้

ตัวอย่างเว็บไซต์

การสร้างเลย์เอาต์อื่น ๆ สำหรับธีม WordPress ที่กำหนดเองของคุณ

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

SeedProd ทำให้ง่ายมาก

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

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

เทมเพลตเพิ่มเติม

ในทำนองเดียวกัน คุณอาจต้องการสร้างเทมเพลตสำหรับหน้าหรือโพสต์เฉพาะ

คุณสามารถเพิ่มสิ่งนั้นลงในธีมของคุณได้ด้วย

เพิ่มเทมเพลตหน้าแบบกำหนดเอง

แล้วการสร้างหน้า Landing Page แบบกำหนดเองล่ะ

SeedProd ได้ครอบคลุมคุณที่นั่นเช่นกัน

คุณสามารถไปที่ SeedProd » Landing Pages และคลิกที่ปุ่ม Add New Landing Page เพื่อสร้าง

หน้า Landing Page ที่กำหนดเอง

สำหรับรายละเอียดเพิ่มเติม โปรดดูบทแนะนำเกี่ยวกับวิธีสร้างหน้า Landing Page ด้วย WordPress

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

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

หากคุณชอบบทความนี้ โปรดสมัครรับข้อมูลจากบทแนะนำวิดีโอ YouTube Channel สำหรับ WordPress คุณสามารถหาเราได้ที่ Twitter และ Facebook

โพสต์ วิธีสร้างธีม WordPress ที่กำหนดเองได้อย่างง่ายดาย (โดยไม่ต้องใช้รหัสใด ๆ ) ปรากฏตัวครั้งแรกบน WPBeginner