วิธีปรับแต่งสีธีม WordPress ของคุณ

เผยแพร่แล้ว: 2023-04-19

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

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

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

ฉันจะเปลี่ยนสีของแบบฟอร์มการติดต่อใน WordPress ได้อย่างไร

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

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

วิธีปรับแต่งสีธีม WordPress ของคุณ

มาเริ่มปรับแต่งกันเลย!

WPForms เป็นปลั๊กอิน WordPress Form Builder ที่ดีที่สุด รับฟรี!

ในบทความนี้

  • ปรับแต่งสีธีม WordPress ของคุณด้วยโค้ด
    • ขั้นตอนที่ 1: ติดตั้งปลั๊กอินธีมลูก
    • ขั้นตอนที่ 2: กำหนดค่าธีมลูกของคุณ
    • ขั้นตอนที่ 3: ปรับแต่งธีมลูกของคุณ
  • ปรับแต่งสีธีม WordPress ของคุณโดยไม่ต้องใช้โค้ด
    • ขั้นตอนที่ 1: ติดตั้งปลั๊กอินและทำ Site Wizard ให้สมบูรณ์
    • ขั้นตอนที่ 2: ทำการปรับแต่งเพิ่มเติมจากแดชบอร์ด
  • การเปลี่ยนสีแบบฟอร์มการติดต่อใน WordPress
    • ขั้นตอนที่ 1: ติดตั้งและเปิดใช้งาน WPForms
    • ขั้นตอนที่ 2: สร้างแบบฟอร์มใน WPForms
    • ขั้นตอนที่ 3: แก้ไขรูปแบบฟอร์มใน WordPress Block Editor

ปรับแต่งสีธีม WordPress ของคุณด้วยโค้ด

Editing the code in the CSS editor

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

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

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

ขั้นตอนที่ 1: ติดตั้งปลั๊กอินธีมลูก

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

  • ตัวกำหนดค่าธีมลูก
  • ตัวช่วยสร้างธีมเด็ก
  • สร้างธีมลูก
  • เครื่องกำเนิดธีมลูก WP

สำหรับตัวอย่างของเรา เราจะใช้ Child Theme Configurator

ขั้นตอนที่ 2: กำหนดค่าธีมลูกของคุณ

หลังจากติดตั้งและเปิดใช้ปลั๊กอินธีมลูกที่คุณเลือกแล้ว คุณจะต้องเข้าถึงเพื่อกำหนดค่า

ตำแหน่งที่ปลั๊กอินธีมลูกของคุณปรากฏใน WordPress อาจแตกต่างกันไปขึ้นอยู่กับปลั๊กอินที่คุณใช้ เราเข้าถึง Child Theme Configurator โดยคลิกที่เมนู เครื่องมือ บนแถบด้านข้างซ้าย

Accessing the Child Theme Configurator plugin

เมื่อคุณค้นหาปลั๊กอินของคุณแล้ว คุณควรเห็นการตั้งค่าหรือตัวเลือกสำหรับสร้างธีมลูก

เราพบว่า Child Theme Configurator จะแนะนำคุณตลอดกระบวนการ ซึ่งมีประโยชน์และทำให้งานที่สับสนง่ายขึ้น

Beginning the process of setting up a child theme in Child Theme Configurator

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

Run the Child Theme Configurator to create your child theme

ขั้นตอนที่ 3: ปรับแต่งธีมลูกของคุณ

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

Accessing the theme file editor

เมื่อคุณอยู่ใน Theme File Editor แล้ว คุณจะเห็นเมนูแบบเลื่อนลงทางด้านขวาซึ่งคุณสามารถเลือกธีมที่จะแก้ไขได้ ธีมลูกของคุณควรอยู่ในรายการนั้น

Access and select your child theme file to customize it

เมื่อคุณเลือกธีมลูกแล้ว คุณสามารถแก้ไขไฟล์ได้ 2 วิธี

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

หากต้องการเข้าถึงตัวแก้ไข CSS ในตัว ให้ไปที่ ลักษณะที่ปรากฏ » ปรับแต่ง ในเมนูแถบด้านข้างซ้าย

Access the CSS editor to customize styles with a live preview

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

Editing your site style in the built-in editor with live preview

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

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

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

Customize the button shape

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

Customize the button color

คุณยังสามารถเปลี่ยนตระกูลฟอนต์ของหัวเรื่องและเนื้อความได้อีกด้วย

Customize the fonts for your site

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

ปรับแต่งสีธีม WordPress ของคุณโดยไม่ต้องใช้โค้ด

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

The Thrive Themes homepage

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

ขั้นตอนที่ 1: ติดตั้งปลั๊กอินและทำ Site Wizard ให้สมบูรณ์

หลังจากที่คุณลงทะเบียนสำหรับบัญชีและติดตั้งปลั๊กอิน ตัวช่วยสร้างไซต์จะเริ่มทำงาน

The Thrive Themes setup wizard

คุณยังสามารถเข้าถึงตัวช่วยสร้างไซต์อีกครั้งได้ทุกเมื่อจากแดชบอร์ด Thrive Themes

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

Adding your logo in Thrive Themes' setup wizard

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

How to customize WordPress theme colors

เมื่อคุณผ่านแต่ละขั้นตอนของตัวช่วยสร้าง คุณกำลังสร้างธีมของคุณเอง

All of the customization steps in the site wizard

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

ขั้นตอนที่ 2: ทำการปรับแต่งเพิ่มเติมจากแดชบอร์ด

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

Access other customizable features from the Thrive Themes dashboard

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

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

การเปลี่ยนสีแบบฟอร์มการติดต่อใน WordPress

Create rounded fields and buttons in WPForms

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

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

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

ขั้นตอนที่ 1: ติดตั้งและเปิดใช้งาน WPForms

The WPForms homepage

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

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

ขั้นตอนที่ 2: สร้างแบบฟอร์มใน WPForms

เมื่อคุณติดตั้งและเปิดใช้งาน WPForms แล้ว ก็ถึงเวลาสร้างแบบฟอร์มของคุณ!

ใช้ปุ่ม เพิ่มใหม่ เพื่อเริ่มต้น

Adding a new form in WPForms

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

Creating a form in the WPForms drag-and-drop form builder

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

Embed your form with the embed button

ขั้นตอนที่ 3: แก้ไขรูปแบบฟอร์มใน WordPress Block Editor

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

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

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

Field styling options

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

Label style options

สุดท้าย คุณสามารถปรับเปลี่ยนรูปแบบปุ่มได้

Button style options

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

Copy your custom CSS in the advanced options, then paste it to other forms to match styles

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

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

หลังจากนั้น คุณก็พร้อมที่จะเผยแพร่แบบฟอร์มที่มีรูปแบบสมบูรณ์ของคุณ

A form using the easy form styling options in WPForms

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

ต่อไป สร้างแบบฟอร์มการโต้ตอบที่สมบูรณ์แบบ

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

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

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

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

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