วิธีปรับแต่ง CSS ของเว็บไซต์ WordPress ของคุณ? ค้นหาข้อมูลในบทความนี้
ไม่ว่าคุณจะเลือกธีมของ WordPress อะไรสำหรับเว็บไซต์ของคุณ ก็จะมีเว็บไซต์อื่นๆ ที่จะใช้มัน และถึงแม้จะมีตัวเลือกการปรับแต่งมากมายจากหลาย ๆ คน ธีม WordPress ทุกวันนี้คุณสามารถทำให้เว็บไซต์ของคุณมีเอกลักษณ์เฉพาะตัวมากขึ้น
เท vraiment หากต้องการสัมผัสรูปลักษณ์ของธีม WordPress คุณต้องทำมากกว่าการปรับแต่งมาตรฐานที่เสนอโดยตัวเลือกหรือการตั้งค่าของธีม WordPress การปรับแต่ง CSS ของบล็อก WordPress ของคุณจะช่วยให้คุณสามารถแก้ไขลักษณะที่ปรากฏของเว็บไซต์ของคุณ เพื่อให้เป็นเอกลักษณ์อย่างแท้จริง
บทช่วยสอนนี้จะกล่าวถึงวิธีการต่างๆ ที่คุณสามารถใช้ได้ในการปรับแต่งเว็บไซต์ของคุณด้วย CSS การสร้างและปรับแต่งธีมย่อย โดยใช้ปลั๊กอิน WordPress Customizer และ ปลั๊กอิน WordPress ของซีเอสเอส
แต่ก่อนที่คุณจะเริ่มใช้เวลาดู วิธีการติดตั้งธีม WordPress, วิธีการหลายปลั๊กอินที่ฉันควรจะติดตั้งบน WordPress.
จากนั้นค้นหารายการของเราด้วยกัน
CSS: พื้นฐานและวิธีที่ WordPress ใช้งาน
ประการแรก CSS ย่อมาจาก สไตล์ชีทซึ่งไม่ชัดเจนไปกว่าตัวย่อ ดังนั้นเรามาทำลายมันลง
สไตล์ชีตเป็นเอกสารอธิบายสไตล์ (เช่นตัวอักษรสี ฯลฯ.) เพื่อใช้ในการนำเสนอเอกสารอื่น ในกรณีของเราเรากำลังจัดการกับรูปแบบของหน้าเว็บ
ส่วนที่ซ้อนชื่อเป็นส่วนหนึ่งของสิ่งที่ทำให้มีพลังอย่างแท้จริง หน้าเว็บสามารถออกแบบให้มีสไตล์ชีตหลายแบบเช่นน้ำตกแบบเรียงซ้อนโดยแผ่นงานด้านล่างจะเพิ่มหรือเปลี่ยนสไตล์จากระดับที่สูงขึ้น นี่เป็นสิ่งสำคัญเนื่องจากวิธีที่คุณเพิ่มสไตล์ของคุณจะเขียนทับการเปลี่ยนแปลงเดิม
ง่ายอย่างที่คิด CSS สามารถใช้เพื่อเปลี่ยนแปลงอะไรก็ได้บนหน้าเว็บ (รวมถึงเค้าโครงสีแบบอักษรและแม้แต่ภาพเคลื่อนไหว).
เรียนรู้วิธีจัดการการแจ้งเตือนของคุณด้วยการค้นพบ วิธีการจัดการการแจ้งเตือนอีเมลบน WordPress
มากที่สุด ธีม WordPress ใช้โค้ด CSS ที่มีอยู่ในไฟล์ชื่อ style.css. หากคุณเปิดไฟล์นี้คุณจะเห็นรายการกฎสไตล์ทั้งหมดสำหรับธีม WordPress ของคุณ ไม่ว่าคุณจะทำอะไร อย่าแก้ไขไฟล์นี้! การอัปเดตจะเขียนทับการเปลี่ยนแปลงของคุณ
มีหลายวิธีในการเพิ่มไฟล์ รหัส CSS ที่กำหนดเอง ในธีม WordPress ของคุณเพื่อให้การเปลี่ยนแปลงของคุณอยู่รอดอัปเดตของธีม WordPress
วิธีปรับแต่งเว็บไซต์ WordPress ของคุณด้วย CSS
ตอนนี้คุณรู้แล้วว่า CSS คืออะไรและทำอย่างไร ธีม WordPress ใช้ตัวเลือกเหล่านี้ เราจะดูตัวเลือกที่คุณสามารถใช้เพื่อปรับแต่งบล็อก WordPress ของคุณ และเราจะหารือเกี่ยวกับข้อดีข้อเสียของแต่ละวิธี
ในตอนท้ายของการทำงานของเราคุณจะสามารถระบุได้ว่าวิธีใดที่สอดคล้องกับธีม WordPress ของคุณ
ตัวเลือก # 1: ปรับแต่ง CSS โดยใช้ธีมลูก
ถ้าคุณใช้ un ธีมเด็ก ในการปรับแต่งโค้ด CSS ของคุณการอัปเดตธีมที่เราพูดถึงก่อนหน้านี้จะไม่เป็นปัญหาอีกต่อไป การอัปเดตธีม WordPress จะส่งผลต่อธีม "ผู้ปกครอง», ปล่อยให้การเปลี่ยนแปลงธีมลูกของคุณเหมือนเดิม ผู้พัฒนาธีม WordPress หลายคนเข้าใจยูทิลิตี้ของธีมลูก
ค้นพบ เมื่อไหร่และวิธีการติดตั้ง WordPress ในไดเรกทอรีย่อย
การสร้างธีมลูกนั้นค่อนข้างตรงไปตรงมา ประกอบด้วยการสร้างโฟลเดอร์บนเว็บโฮสติ้งของคุณซึ่งรวมถึงไฟล์ style.css ซึ่งแสดงรายการธีมหลักเป็นเทมเพลตและนำเข้าไฟล์ style.css ของธีมหลัก (คุณจำความหมายของสไตล์ชีตแบบ 'เรียงซ้อน' ได้หรือไม่?).
เวิร์ดเพรส Codex มีข้อมูลเพิ่มเติมเกี่ยวกับการสร้างธีมย่อย
เมื่อคุณสร้างธีมลูกของคุณและเปิดใช้งานอย่างถูกต้องคุณสามารถเริ่มปรับแต่งธีม WordPress ของคุณได้ วิธีที่เร็วที่สุดคือแก้ไขไฟล์ของคุณ style.cssซึ่งสามารถเข้าถึงได้สองวิธี
ตรวจสอบบทความนี้เพื่อค้นหา วิธีบีบอัดไฟล์ CSS, HTML และ Javascript ของคุณ
อย่างแรกคือการใช้ตัวแก้ไขที่รวมอยู่ในแดชบอร์ดของ WordPress โดยคลิกที่ ลักษณะ> บรรณาธิการ. L 'บรรณาธิการ แสดงรายการไฟล์ทางด้านขวาที่มีอยู่ในชุดรูปแบบ (จะแสดงเฉพาะไฟล์ยอดนิยม) ไฟล์ของคุณ style.css จะอยู่ด้านล่างสุดของรายการแล้วคลิกที่ตัวเลือก สไตล์ชีต ไฟล์ของคุณ style.css จะเรียกเก็บเงิน
คุณสามารถเพิ่มการเปลี่ยนแปลงของคุณในตำแหน่งนี้และบันทึกการเปลี่ยนแปลง
อีกวิธีหนึ่งในการเข้าถึงไฟล์ของคุณ style.css (หนึ่งที่เราขอแนะนำให้) คือการเรียกดูไฟล์ในเว็บโฮสติ้งของคุณผ่านทาง FTP ไคลเอนต์ หรือตัวจัดการไฟล์ โฟลเดอร์ธีมลูกที่คุณสร้างขึ้นจะอยู่ในส่วน " wp-content> ธีม« . คุณจะสามารถใช้โปรแกรมแก้ไขข้อความเพื่อแก้ไขไฟล์ style.css.
ตัวเลือก n ° 2: ปรับแต่ง CSS จาก Customizer
ใน WordPress 4.7 ผู้ใช้สามารถเพิ่ม CSS ที่กำหนดเองได้โดยตรงจากพื้นที่ผู้ดูแลระบบ WordPress ง่ายมากและคุณจะสามารถเห็นการเปลี่ยนแปลงของคุณด้วยการดูตัวอย่างแบบเรียลไทม์
ขั้นแรกคุณต้องไปที่หน้า ธีม»ปรับแต่ง
เพื่อเปิดอินเทอร์เฟซการปรับแต่งธีม WordPress
คุณจะเห็นตัวอย่างเว็บไซต์ของคุณแบบเรียลไทม์ทางด้านขวาพร้อมตัวเลือกมากมายในบานหน้าต่างด้านซ้าย คลิกที่แท็บ CSS เพิ่มเติม ในบานหน้าต่างด้านซ้าย
แท็บจะเลื่อนเพื่อแสดงพื้นที่ง่ายๆที่คุณสามารถเพิ่ม CSS ที่กำหนดเองได้ ทันทีที่คุณเพิ่มกฎ CSS ที่ถูกต้องคุณจะสามารถเห็นกฎนั้นถูกนำไปใช้ในบานหน้าต่างแสดงตัวอย่างแบบเรียลไทม์ของเว็บไซต์ของคุณ
คุณสามารถเพิ่มโค้ด CSS ที่กำหนดเองได้ต่อไปจนกว่าคุณจะพอใจกับลักษณะที่ปรากฏบนเว็บไซต์ของคุณ อย่าลืมคลิกที่ " บันทึกและเผยแพร่ ที่ด้านบนเมื่อคุณทำเสร็จแล้ว
หมายเหตุ: CSS แบบกำหนดเองใด ๆ ที่คุณเพิ่มโดยใช้ Customizer จะใช้ได้เฉพาะกับธีม WordPress นั้น ๆ เท่านั้น หากคุณต้องการใช้กับธีมอื่นคุณจะต้องคัดลอกและวางในธีมใหม่ของคุณโดยใช้วิธีการเดียวกัน
ตัวเลือก # 3: กำหนด CSS เองโดยใช้ปลั๊กอิน
ข้อดีของการใช้ปลั๊กอินสำหรับการปรับแต่ง CSS คือคุณจะเก็บปลั๊กอินไว้แม้ว่าคุณจะเปลี่ยนธีม WordPress ก็ตาม สิ่งนี้มีการแลกเปลี่ยนเนื่องจากสไตล์ไม่สามารถแสดงได้ดีในธีม WordPress ทั้งหมด
นี่ปลั๊กอินบางส่วน:
1. Custom CSS ใน Jetpack (ฟรี)
ปลั๊กอิน WordPress Jetpack ถูกติดตั้งบนเว็บไซต์ WordPress กว่าล้านเว็บไซต์และอาจเป็นของคุณด้วย มันนำคุณสมบัติที่มีอยู่บน WordPress.com สำหรับเว็บไซต์ที่โฮสต์โดยตนเองและยังมี โมดูลสำหรับการปรับแต่ง CSS.
เมื่อเปิดใช้งานโมดูลในแดชบอร์ด Jetpack แล้วจะมีตัวแก้ไข CSS ที่กำหนดเองซึ่งช่วยให้คุณปรับแต่งธีม WordPress ได้โดยไม่ต้องสร้างธีมลูก คุณเข้าถึงตัวแก้ไขโดยทำตามเส้นทางนี้ " ลักษณะที่ปรากฏ> แก้ไข CSS« .
2. CSS ที่กำหนดเองอย่างง่าย (ฟรี)
แต่หากคุณต้องการเป็นตัวเลือกแบบสแตนด์อโลน CSS ที่กำหนดเองง่าย เป็นทางเลือกที่ดี ปลั๊กอินฟรีนี้ใช้บนเว็บไซต์มากกว่า 200.000 ที่มีการจัดอันดับดาว 4,9 จะช่วยให้คุณปรับแต่งบล็อก CSS WordPress ของคุณได้อย่างแน่นอน
ปลั๊กอินนี้ไม่ต้องการการกำหนดค่าใด ๆ คุณเพียงแค่ต้องติดตั้งและเปิดใช้งานปลั๊กอิน ในการแก้ไขโค้ด CSS ของคุณไปที่ " ลักษณะที่ปรากฏ> CSS ที่กำหนดเอง« ในแดชบอร์ด WordPress ใช้การเปลี่ยนแปลง CSS ของคุณในกล่องข้อความและเมื่อเสร็จแล้วให้บันทึกการตั้งค่าของคุณ
3. CSS Hero (จาก $ 14 ต่อปี)
ตัวเลือกสุดท้ายของปลั๊กอิน WordPress ที่เรากำลังดูอยู่ในวันนี้คือปลั๊กอิน WordPress ระดับพรีเมียมที่เรียกว่า CSS ฮีโร่. จาก 14 $ ต่อปี สำหรับเว็บไซต์เดียวปลั๊กอินนี้ให้คุณปรับแต่งธีม WordPress ของคุณโดยใช้อินเทอร์เฟซที่ใช้งานง่าย
ออกแบบมาให้ทำงานได้ดีที่สุดด้วย ธีม WordPress ที่เข้ากันได้หลายสิบแบบ CSS Hero ให้คุณควบคุมองค์ประกอบทั้งหมดของชุดรูปแบบ WordPress ของคุณได้อย่างสมบูรณ์ สำหรับธีมที่ไม่ได้อยู่ในรายการคุณสามารถใช้ โหมดจรวด เพื่อเปิดใช้งานการปรับแต่ง CSS Hero
CSS Hero ช่วยขจัดความจำเป็นในการทำความเข้าใจไวยากรณ์ CSS โดยลดความซับซ้อนของการโต้ตอบกับโค้ดผ่านอินเทอร์เฟซและสิ่งนี้จะใช้สำหรับภาพเคลื่อนไหวและการเปลี่ยนภาพ คุณยังสามารถดูตัวอย่างการเปลี่ยนแปลงของคุณแบบเรียลไทม์และเปลี่ยนกลับเป็นเวอร์ชันก่อนหน้าได้
หา วิธีการย้ายความคิดเห็นจากบทความหนึ่งไปอีกบทความหนึ่งบน WordPress
หากคุณต้องการเปลี่ยน CSS ของบล็อก WordPress อย่างสมบูรณ์ แต่ไม่ต้องการเรียนรู้ CSS นั้น CSS Hero เป็นตัวเลือกที่ยอดเยี่ยมสำหรับการปรับแต่งเว็บไซต์ของคุณ โดยเฉพาะอย่างยิ่งหากคุณใช้หนึ่งในธีม WordPress ของพวกเขา
แม้ว่าคุณจะรู้ว่าเนื้อหามีความสำคัญ แต่คุณก็ต้องการให้เว็บไซต์ของคุณโดดเด่นกว่าใครแม้ว่าคุณจะใช้ธีม WordPress ยอดนิยมก็ตาม ด้วย CSS คุณสามารถปรับแต่งการออกแบบเว็บไซต์ของคุณเพื่อให้มีเอกลักษณ์เฉพาะตัว
ดำเนินการต่อไปโดยการค้นหา วิธีการช่วยให้ผู้ใช้สามารถแก้ไขหน้าเว็บบางหน้า
ดังนั้นมีหลายวิธีในการปรับแต่ง CSS ของธีม WordPress ของคุณ:
- ธีมลูก
- Customizer
- ปลั๊กอิน CSS
ค้นพบปลั๊กอิน WordPress พรีเมียมบางอย่าง
คุณสามารถใช้อื่นๆ ปลั๊กอิน WordPress เพื่อให้ดูทันสมัยและเพิ่มประสิทธิภาพการจัดการบล็อกหรือเว็บไซต์ของคุณ
เราเสนอปลั๊กอิน WordPress พรีเมี่ยมให้คุณที่นี่ซึ่งจะช่วยคุณได้
1 การโฆษณา
WP PRO Advertising System เป็นปลั๊กอินการจัดการการโฆษณา WordPress ซึ่งนำเสนอตำแหน่งเชิงกลยุทธ์ 18 เพื่อช่วยคุณแสดงโฆษณาบนเว็บไซต์ของคุณ นอกจากนี้ยังมีส่วนสถิติโดยละเอียดที่คุณจะเห็นประสิทธิภาพของโฆษณาแต่ละรายการ
คุณลักษณะนี้มีความสำคัญอย่างยิ่งเพราะจะช่วยปรับปรุงแคมเปญและเพิ่มผลกำไรสูงสุด ปลั๊กอิน WordPress Adsense นี้ยังมาพร้อมกับคุณสมบัติพิเศษที่เรียกว่าโฆษณาพื้นหลัง ช่วยให้คุณสามารถแสดงโฆษณาเป็นพื้นหลังของเนื้อหาของคุณ
นอกจากนี้เนื่องจากมันเข้ากันได้กับปลั๊กอินเช่น WPBakery et เลื่อนการปฏิวัติคุณสามารถแสดงโฆษณาของคุณในรูปแบบของแถบเลื่อนหรือวางไว้ที่ใดก็ได้บนเว็บไซต์ของคุณ
ดาวน์โหลด | สาธิต | เว็บโฮสติ้ง
2 WP Media File Manager
WP Media File Manager เป็นปลั๊กอิน WordPress ที่ทำให้ง่ายต่อการจัดระเบียบไลบรารีสื่อในรูปแบบของลำดับชั้นโดยใช้ฟังก์ชันลากและวาง มันเป็นหนึ่งใน ปลั๊กอิน WordPress ตัวจัดการไฟล์ที่ทรงพลังที่สุดใน CodeCanyon คุณไม่จำเป็นต้องสร้างโฟลเดอร์ด้วยตนเองด้วยซ้ำ
ปลั๊กอิน WordPress นี้ช่วยให้คุณสามารถอัปโหลดไฟล์หลายพันไฟล์จากตัวจัดการไฟล์ของพีซีของคุณไปยังเว็บไซต์โดยการคัดลอกลำดับชั้นของโฟลเดอร์ต้นทางโดยอัตโนมัติ หากคุณต้องการมีไฟล์เดียวกันในโฟลเดอร์อื่นโปรดทราบว่าขณะนี้คุณมีไลบรารีสื่อจริงที่มีฟังก์ชันนี้
บอกลาปัญหาในการดาวน์โหลดไฟล์บางประเภทตอนนี้คุณต้องติดตั้งปลั๊กอิน WordPress นี้แล้วปล่อยให้มันช่วยจัดการไฟล์ของคุณ
ดาวน์โหลด | สาธิต | เว็บโฮสติ้ง
3 เมนูฮีโร่
Hero Menu เป็นปลั๊กอิน WordPress ขนาดใหญ่ และแม้ว่ามันจะไม่ได้เป็นฮีโร่มากนัก แต่ก็มีคุณสมบัติที่จำเป็นทั้งหมดในราคาเพียง $ 19 คล้ายกับ Mega Main Menu เป็นปลั๊กอินที่มีผลิตภัณฑ์ที่นำเสนอใน CodeCanyon และมียอดขายเกือบ 4500 เครดิตในขณะนี้
ในส่วนคุณสมบัติคุณจะรู้ได้อย่างรวดเร็วว่าการสร้างไฟล์ megamenu. กระบวนการนี้ใช้เวลาเพียงไม่กี่ขั้นตอน แต่นอกจากนี้คุณจะสังเกตเห็นว่าปลั๊กอินเข้ากันได้กับ WooCommerceนำเสนอการออกแบบที่ตอบสนองและอินเทอร์เฟซ "ลากและวาง" เพื่อสร้างเมนู
ตัวสร้างเมนูปรับปรุงการใช้ปลั๊กอินและช่วยลดความยุ่งยากในงานของผู้ซื้อ การรวม UI เป็นงานที่ยอดเยี่ยมและ UI ทำงานได้อย่างสมบูรณ์แบบกับปลั๊กอินอื่น ๆ
ดาวน์โหลด | สาธิต | เว็บโฮสติ้ง
ทรัพยากรที่แนะนำ
ค้นหาข้อมูลเกี่ยวกับแหล่งข้อมูลที่แนะนำอื่น ๆ เพื่อช่วยคุณสร้างและจัดการเว็บไซต์ของคุณ
- วิธีรหัสผ่านป้องกันแบบฟอร์มใน WordPress
- วิธีการสร้างการเปลี่ยนที่สวยงามของหน้าเว็บใน WordPress
- วิธีใช้ WordPress REST API
- วิธีเชื่อมโยงเว็บไซต์ WordPress ของคุณกับ Telegram
- วิธีทำความสะอาด WordPress ในไม่กี่ขั้นตอน
สรุป
ที่นี่! สำหรับบทช่วยสอนนี้ เราหวังว่าบทช่วยสอนนี้จะแสดงวิธีปรับแต่ง CSS ของเว็บไซต์ WordPress ของคุณ อย่าลังเลที่จะ แบ่งปันกับเพื่อนของคุณบนเครือข่ายโซเชียลที่คุณชื่นชอบ.
อย่างไรก็ตามคุณยังจะสามารถปรึกษาเราได้ บริการสารสนเทศหากคุณต้องการองค์ประกอบเพิ่มเติมเพื่อดำเนินโครงการสร้างเว็บไซต์อินเทอร์เน็ตของคุณโดยปรึกษากับเราใน การสร้างบล็อก WordPress
หากคุณมีข้อเสนอแนะหรือข้อสังเกตไว้ในส่วนของเรา ความเห็น.
...
สวัสดี,
ฉันอยากจะแนะนำคุณให้รู้จักกับปลั๊กอิน Anym Live Editor ซึ่งช่วยให้สามารถแก้ไข CSS หรือ SCSS และ Javascript ได้อย่างสมบูรณ์จากหน้า WordPress ใด ๆ และมีการแสดงผลการเปลี่ยนแปลงที่เกิดขึ้นจริง! นอกจากนี้ปลั๊กอินยังมีเครื่องมือมากมายที่ช่วยให้คุณสามารถโต้ตอบกับหน้าที่คุณต้องการแก้ไขและทำงานได้เหมือนกับ IDE ทั่วไป (รูปแบบข้อความ Sublime) แต่คราวนี้ทุ่มเทให้กับไซต์ของคุณ WordPress.