วิธีปรับแต่งสีธีม WordPress ของคุณ
เผยแพร่แล้ว: 2023-04-19คุณต้องการเรียนรู้วิธีปรับแต่งสีของธีม WordPress หรือไม่? บางทีคุณอาจพบธีมที่คุณชื่นชอบ แต่จานสีนั้นผิดสำหรับแบรนด์ของคุณ มีสองสามวิธีที่คุณสามารถปรับสีของธีมให้ตรงกับความต้องการของคุณได้
ในโพสต์นี้ เราจะมาดูกันว่าคุณสามารถปรับแต่งสีธีม WordPress ของคุณทั้งแบบมีและไม่มีโค้ดได้อย่างไร
สร้างแบบฟอร์ม WordPress ของคุณตอนนี้
ฉันจะเปลี่ยนสีของแบบฟอร์มการติดต่อใน WordPress ได้อย่างไร
เมื่อคุณปรับแต่งสีของธีมแล้ว คุณจะต้องการให้แบบฟอร์มในไซต์ของคุณตรงกับสไตล์และสี วิธีที่ง่ายที่สุดคือใช้ WPForms
นอกจากการตรวจสอบวิธีที่คุณสามารถปรับแต่งสีของธีมของคุณทั้งแบบมีและไม่มีโค้ดแล้ว เรายังจะดูอย่างใกล้ชิดยิ่งขึ้นเกี่ยวกับวิธีใช้ WPForms เพื่อให้ได้รูปแบบสไตล์ กล่าวโดยย่อ คุณลักษณะสไตล์ฟอร์มใหม่ทำให้การจับคู่แบบฟอร์มกับไซต์ของคุณเป็นเรื่องง่ายมาก เราจะแสดงให้คุณเห็นว่า
วิธีปรับแต่งสีธีม WordPress ของคุณ
มาเริ่มปรับแต่งกันเลย!
ในบทความนี้
- ปรับแต่งสีธีม WordPress ของคุณด้วยโค้ด
- ขั้นตอนที่ 1: ติดตั้งปลั๊กอินธีมลูก
- ขั้นตอนที่ 2: กำหนดค่าธีมลูกของคุณ
- ขั้นตอนที่ 3: ปรับแต่งธีมลูกของคุณ
- ปรับแต่งสีธีม WordPress ของคุณโดยไม่ต้องใช้โค้ด
- ขั้นตอนที่ 1: ติดตั้งปลั๊กอินและทำ Site Wizard ให้สมบูรณ์
- ขั้นตอนที่ 2: ทำการปรับแต่งเพิ่มเติมจากแดชบอร์ด
- การเปลี่ยนสีแบบฟอร์มการติดต่อใน WordPress
- ขั้นตอนที่ 1: ติดตั้งและเปิดใช้งาน WPForms
- ขั้นตอนที่ 2: สร้างแบบฟอร์มใน WPForms
- ขั้นตอนที่ 3: แก้ไขรูปแบบฟอร์มใน WordPress Block Editor
ปรับแต่งสีธีม WordPress ของคุณด้วยโค้ด
หากคุณมีความเชี่ยวชาญใน CSS และคุ้นเคยกับการแก้ไขไฟล์และสไตล์ชีตของเว็บไซต์ของคุณ การใช้โค้ดเพื่อปรับแต่งธีม WordPress ของคุณก็เป็นทางเลือกหนึ่ง
อย่างไรก็ตาม เราไม่แนะนำให้คุณแก้ไขไฟล์ที่มีอยู่ เราขอแนะนำให้ใช้ปลั๊กอินอื่นเพื่อสร้างและปรับแต่งธีมย่อยแทน โดยพื้นฐานแล้ว ธีมย่อยคือสำเนาของธีมของคุณที่มีแอตทริบิวต์เดียวกันทั้งหมด
การแก้ไขธีมลูกคือการแก้ไขสำเนา หากคุณทำข้อผิดพลาด คุณสามารถเปลี่ยนกลับเป็นธีมหลักแทนได้ นอกจากนี้ยังช่วยให้คุณหลีกเลี่ยงปัญหาหากมีการอัปเดตธีมหลัก
ขั้นตอนที่ 1: ติดตั้งปลั๊กอินธีมลูก
ต่อไปนี้เป็นคำแนะนำเกี่ยวกับปลั๊กอินบางส่วนที่คุณสามารถใช้เพื่อสร้างธีมย่อยได้:
- ตัวกำหนดค่าธีมลูก
- ตัวช่วยสร้างธีมเด็ก
- สร้างธีมลูก
- เครื่องกำเนิดธีมลูก WP
สำหรับตัวอย่างของเรา เราจะใช้ Child Theme Configurator
ขั้นตอนที่ 2: กำหนดค่าธีมลูกของคุณ
หลังจากติดตั้งและเปิดใช้ปลั๊กอินธีมลูกที่คุณเลือกแล้ว คุณจะต้องเข้าถึงเพื่อกำหนดค่า
ตำแหน่งที่ปลั๊กอินธีมลูกของคุณปรากฏใน WordPress อาจแตกต่างกันไปขึ้นอยู่กับปลั๊กอินที่คุณใช้ เราเข้าถึง Child Theme Configurator โดยคลิกที่เมนู เครื่องมือ บนแถบด้านข้างซ้าย
เมื่อคุณค้นหาปลั๊กอินของคุณแล้ว คุณควรเห็นการตั้งค่าหรือตัวเลือกสำหรับสร้างธีมลูก
เราพบว่า Child Theme Configurator จะแนะนำคุณตลอดกระบวนการ ซึ่งมีประโยชน์และทำให้งานที่สับสนง่ายขึ้น
หลังจากคลิกปุ่ม วิเคราะห์ ขั้นตอนเพิ่มเติมปรากฏขึ้น ดำเนินการตามแต่ละขั้นตอนเหล่านี้ และในตอนท้าย คุณจะพร้อมสร้างธีมลูกของคุณ
ขั้นตอนที่ 3: ปรับแต่งธีมลูกของคุณ
หลังจากที่คุณสร้างธีมลูกใหม่แล้ว ให้คลิกที่ ลักษณะที่ปรากฏ » ตัวแก้ไขไฟล์ธีม ในเมนูแถบด้านข้างด้านซ้าย
เมื่อคุณอยู่ใน Theme File Editor แล้ว คุณจะเห็นเมนูแบบเลื่อนลงทางด้านขวาซึ่งคุณสามารถเลือกธีมที่จะแก้ไขได้ ธีมลูกของคุณควรอยู่ในรายการนั้น
เมื่อคุณเลือกธีมลูกแล้ว คุณสามารถแก้ไขไฟล์ได้ 2 วิธี
วิธีแรกคือแก้ไข CSS โดยตรงในโปรแกรมแก้ไขไฟล์ดังที่เราแสดงไว้ด้านบน วิธีที่สองคือการใช้ตัวแก้ไข CSS ในตัวเพื่อดูตัวอย่างการเปลี่ยนแปลงในขณะที่คุณทำ
หากต้องการเข้าถึงตัวแก้ไข CSS ในตัว ให้ไปที่ ลักษณะที่ปรากฏ » ปรับแต่ง ในเมนูแถบด้านข้างซ้าย
ในหน้านั้น คุณจะเห็นตัวอย่างสดของเว็บไซต์ WordPress พร้อมด้วยตัวเลือกในการเปลี่ยนแปลง
ดังที่คุณเห็นในเมนูตัวเลือก มีการเปลี่ยนแปลงสไตล์หลายอย่างที่คุณสามารถทำได้โดยไม่ต้องใช้โค้ดใดๆ ขึ้นอยู่กับธีมของคุณและสิ่งที่กำหนดค่าไว้แล้ว
ภายในตัวเลือกเหล่านี้ คุณจะพบการตั้งค่าเพื่ออัปเดตสีธีมของคุณ
ตัวอย่างเช่น คุณสามารถเลือกรูปแบบปุ่มที่คุณต้องการให้ไซต์ของคุณใช้
และหลังจากที่คุณเลือกสไตล์แล้ว คุณสามารถเลือกตัวเลือกสีแบบกำหนดเองสำหรับข้อความของปุ่ม พื้นหลัง และเส้นขอบได้
คุณยังสามารถเปลี่ยนตระกูลฟอนต์ของหัวเรื่องและเนื้อความได้อีกด้วย
อย่างไรก็ตาม โปรดทราบว่ามีตัวเลือกเมนูสำหรับ CSS เพิ่มเติม ที่ด้านล่าง คุณอาจพบว่าโค้ด CSS ยังจำเป็นสำหรับการเปลี่ยนแปลงบางอย่างที่คุณต้องการทำกับสีของธีมไซต์ของคุณ ในกรณีนี้ คุณจะต้องป้อนรหัส CSS ที่จำเป็นในเมนูแบบเลื่อนลงและดูตัวอย่างการเปลี่ยนแปลงทันทีที่คุณดำเนินการ
ปรับแต่งสีธีม WordPress ของคุณโดยไม่ต้องใช้โค้ด
หากคุณกังวลว่าจะทำบางอย่างเสียหายในขณะที่เปลี่ยน CSS ในธีมของคุณ มีวิธีง่ายๆ ในการปรับแต่งสีธีม WordPress ของคุณ คุณสามารถใช้ปลั๊กอินแบบไม่มีโค้ด เช่น Thrive Themes
Thrive Theme Builder เป็นเครื่องมือปรับแต่งธีมที่ให้คุณสร้างธีมของคุณเองโดยไม่ต้องใช้หรือรู้รหัสใดๆ มีอินเทอร์เฟซแบบลากและวางสำหรับการปรับแต่งส่วนหน้า และคุณสามารถควบคุมการออกแบบทั้งหมดได้
ขั้นตอนที่ 1: ติดตั้งปลั๊กอินและทำ Site Wizard ให้สมบูรณ์
หลังจากที่คุณลงทะเบียนสำหรับบัญชีและติดตั้งปลั๊กอิน ตัวช่วยสร้างไซต์จะเริ่มทำงาน
คุณยังสามารถเข้าถึงตัวช่วยสร้างไซต์อีกครั้งได้ทุกเมื่อจากแดชบอร์ด Thrive Themes
เมื่อคุณเริ่มตัวช่วยไซต์ ระบบจะขอให้คุณอัปโหลดโลโก้และแสดงให้คุณเห็นว่าโลโก้จะมีลักษณะอย่างไรบนพื้นหลังสีอ่อนและสีเข้ม แม้ว่าคุณจะใช้พื้นหลังสีอ่อน พื้นหลังสีเข้มก็มีความสำคัญ เนื่องจากผู้คนใช้โหมดมืดบนอุปกรณ์ของตน
หลังจากนั้นคุณสามารถเลือกสีแบรนด์ของคุณได้ เมื่อคุณคลิกที่ช่องสี คุณจะมีตัวเลือกให้เลือกสีด้วยตัวเลือกสีหรือใช้รหัสสีฐานสิบหก
เมื่อคุณผ่านแต่ละขั้นตอนของตัวช่วยสร้าง คุณกำลังสร้างธีมของคุณเอง
เมื่อคุณทำส่วนที่เหลือของตัวช่วยสร้างไซต์เสร็จแล้ว คุณจะปรับแต่งรูปลักษณ์ของเว็บไซต์ของคุณโดยไม่ต้องเขียนโค้ดสักบรรทัด Thrive Theme Builder ทำให้การสร้างธีมไซต์ที่เป็นของคุณเป็นเรื่องง่ายมาก
ขั้นตอนที่ 2: ทำการปรับแต่งเพิ่มเติมจากแดชบอร์ด
ดังที่เราได้กล่าวไว้ก่อนหน้านี้ คุณสามารถกลับไปที่วิซาร์ดได้ทุกเมื่อหากต้องการเปลี่ยนแปลง คุณยังสามารถเข้าถึงคุณสมบัติเหล่านั้นผ่านแดชบอร์ด หลังจากที่คุณทำวิซาร์ดเสร็จแล้ว ให้คลิกผ่านตัวเลือกอื่นๆ เพื่อทำการปรับแต่งเพิ่มเติม
หากคุณต้องการเปลี่ยนสีและโลโก้ของไซต์ของคุณอย่างรวดเร็ว หรือหากคุณต้องการอัปโหลด favicon สำหรับไซต์ของคุณ คุณสามารถเข้าถึงได้จากวิซาร์ด หรือ จากส่วนการสร้างตราสินค้าบนแดชบอร์ด ในทำนองเดียวกัน คุณสามารถอัปเดตการพิมพ์ได้ที่นี่เช่นกัน
เมื่อคุณปรับแต่งทุกส่วนของเพจแล้ว คุณสามารถบันทึกธีมและเริ่มใช้งานได้ทันที
การเปลี่ยนสีแบบฟอร์มการติดต่อใน WordPress
ดังที่เราได้กล่าวไว้ก่อนหน้านี้ เมื่อคุณปรับปรุงสีของธีมแล้ว คุณต้องแน่ใจว่าทุกอย่างตรงกัน
ยกตัวอย่างแบบฟอร์มของคุณ หากคุณมีหน้ากระดาษที่มีขอบมนและสีอ่อน รูปแบบกล่องที่มีปุ่มสี่เหลี่ยมและคอนทราสต์ที่คมชัดน่าจะดูไม่เข้าที่สักเล็กน้อย
ป้อน WPForms ตัวเลือกการจัดรูปแบบแบบฟอร์มทำให้การปรับแต่งแบบฟอร์มของคุณเพื่อให้ตรงกับธีมของคุณเป็นเรื่องง่าย
ขั้นตอนที่ 1: ติดตั้งและเปิดใช้งาน WPForms
บางทีเราอาจจะลำเอียง แต่เราคิดว่า WPForms เป็นตัวสร้างฟอร์มที่ดีที่สุด อินเทอร์เฟซแบบลากและวางที่เป็นมิตรต่อผู้ใช้ช่วยให้คุณสร้างและเผยแพร่แบบฟอร์มมืออาชีพที่สวยงามได้ในไม่กี่นาที นอกจากนี้ ตัวเลือกการจัดรูปแบบแบบฟอร์มยังช่วยให้คุณสามารถจับคู่รูปแบบแบบฟอร์มกับธีมเว็บไซต์ WordPress ของคุณได้อย่างง่ายดาย
ในการเริ่มต้นสร้างรูปแบบให้เข้ากับสีธีม WordPress ของคุณ ให้ติดตั้งและเปิดใช้งาน WPForms หากคุณต้องการคำแนะนำ โปรดดูคู่มือนี้สำหรับผู้เริ่มต้นเกี่ยวกับวิธีติดตั้งปลั๊กอิน WordPress
ขั้นตอนที่ 2: สร้างแบบฟอร์มใน WPForms
เมื่อคุณติดตั้งและเปิดใช้งาน WPForms แล้ว ก็ถึงเวลาสร้างแบบฟอร์มของคุณ!
ใช้ปุ่ม เพิ่มใหม่ เพื่อเริ่มต้น
ตัวสร้างฟอร์มจะเปิดขึ้นเพื่อให้คุณสามารถสร้างฟอร์มที่สมบูรณ์แบบตามความต้องการของคุณ สร้างใหม่ตั้งแต่ต้น หรือเลือกจากเทมเพลตที่ปรับแต่งได้กว่าร้อยแบบ
เมื่อแบบฟอร์มของคุณเสร็จสมบูรณ์ คุณสามารถใช้ปุ่ม ฝัง เพื่อฝังในโพสต์หรือเพจบนไซต์ของคุณ คุณสามารถเลือกที่จะฝังฟอร์มในหน้าที่มีอยู่หรือสร้างหน้าใหม่สำหรับหน้านั้น
ขั้นตอนที่ 3: แก้ไขรูปแบบฟอร์มใน WordPress Block Editor
จากนั้น เปิดแบบร่างเพจในตัวสร้างเพจ สำหรับขั้นตอนนี้ คุณต้องใช้ตัวแก้ไขบล็อค WordPress เพื่อเข้าถึงตัวเลือกการปรับแต่ง
คลิกที่แบบฟอร์มที่ฝังไว้ ตัวเลือกการจัดรูปแบบแบบฟอร์มจะเปิดขึ้นในแถบด้านข้างทางด้านขวาของโปรแกรมแก้ไขหน้า คุณจะเห็นว่าคุณสามารถเปลี่ยนรูปแบบฟิลด์ ป้ายชื่อ และปุ่มได้
เมื่อคุณแก้ไขลักษณะฟิลด์ คุณสามารถปรับขนาดและรัศมีเส้นขอบสำหรับพื้นที่ข้อความได้ ยิ่งรัศมีเส้นขอบของคุณสูงเท่าไร พื้นที่ข้อความก็จะยิ่งโค้งมนมากขึ้นเท่านั้น คุณยังสามารถเลือกสีสำหรับพื้นหลัง เส้นขอบ และข้อความได้อีกด้วย
ถัดไป คุณสามารถเปลี่ยนรูปแบบป้ายกำกับได้ ตัดสินใจเลือกสีที่คุณต้องการให้ป้ายกำกับ จากนั้นเลือกสีสำหรับป้ายกำกับย่อยและคำใบ้ รวมถึงข้อความแสดงข้อผิดพลาด
สุดท้าย คุณสามารถปรับเปลี่ยนรูปแบบปุ่มได้
เพื่อให้ง่ายยิ่งขึ้น เมื่อคุณเลือกรูปแบบแบบฟอร์มแล้ว ให้คลิก ตัวเลือกขั้นสูง คุณจะเห็นฟิลด์ที่มีโค้ด CSS
นี่คือรหัสที่กำหนดเองสำหรับแบบฟอร์มของคุณ WPForms สร้างให้คุณโดยอัตโนมัติ คุณสามารถคัดลอกและวางลงในช่องขั้นสูงในแบบฟอร์มทั้งหมดของคุณ เพื่อให้สไตล์ทั้งหมดตรงกัน
และถ้าคุณต้องการเริ่มต้นใหม่ เพียงคลิก รีเซ็ตการตั้งค่าสไตล์ เพื่อล้างการจัดรูปแบบทั้งหมด
หลังจากนั้น คุณก็พร้อมที่จะเผยแพร่แบบฟอร์มที่มีรูปแบบสมบูรณ์ของคุณ
ตอนนี้แบบฟอร์มของคุณเข้ากับสีธีม WordPress ของคุณแล้ว และคุณไม่จำเป็นต้องเขียนโค้ดแม้แต่บรรทัดเดียวเพื่อให้มันเกิดขึ้น
ต่อไป สร้างแบบฟอร์มการโต้ตอบที่สมบูรณ์แบบ
พร้อมที่จะยกระดับฟอร์มเกมของคุณหรือยัง? ตอนนี้คุณรู้วิธีปรับแต่งสีของธีม WordPress และจัดรูปแบบให้เหมาะกับแบบฟอร์มของคุณแล้ว ก็ถึงเวลายกระดับไปอีกขั้น เรามีเคล็ดลับในการสร้างฟอร์มโต้ตอบที่สมบูรณ์แบบเพื่อให้ผู้ใช้มีส่วนร่วมและเพิ่มการแปลง
ต้องการส่งแบบสำรวจลูกค้าที่ไม่อาจต้านทานได้หรือไม่? ลองดูตัวอย่างแบบสำรวจความคิดเห็นของลูกค้าเหล่านี้เพื่อสร้างแรงบันดาลใจให้กับคุณ!
สร้างแบบฟอร์ม WordPress ของคุณตอนนี้
พร้อมที่จะสร้างแบบฟอร์มของคุณแล้วหรือยัง? เริ่มต้นวันนี้ด้วยปลั๊กอินตัวสร้างฟอร์ม WordPress ที่ง่ายที่สุด WPForms Pro มีเทมเพลตฟรีมากมายและรับประกันคืนเงินภายใน 14 วัน
หากบทความนี้ช่วยคุณได้ โปรดติดตามเราบน Facebook และ Twitter สำหรับบทช่วยสอนและคำแนะนำ WordPress ฟรีเพิ่มเติม