เชื่อว่าหลายท่านคงจะเคยเป็น เวลาทำเว็บแล้วอยากจะปรับธีมตรงนู้นตรงนี้ แต่ไม่รู้จะเริ่มยังไง บทความนี้จะพูดในเรื่องของการแก้ไข CSS ของธีมตั้งแแต่แบบก๊อปปี้โค้ดเอง ไปจนถึงแบบสำเร็จรูป คลิกลากๆ เลยค่ะ
CSS คืออะไร
CSS ย่อมาจาก Cascading Style Sheets คือภาษาโปรแกรมที่ใช้ในการกำหนดสไตล์ให้กับเว็บนั่นเองค่ะ เช่น สี (color), ขนาด (size, width, height), การจัดวาง (position, float, maring, padding, align), แอนิเมชั่น และอื่นๆ อีกมากมาย สามารถหาอ่านเพิ่มเติมได้ที่ w3school, Mozilla หรือจะ google เอาก็ได้เลยค่ะ โดยไฟล์จะมีเป็นนามสกุล .css ของธีม WordPress ก็จะเป็น style.css เป็นต้น ซึ่งปกติเราต้องไปแก้ไขกันที่ไฟล์นี้ โดยอาจจะเปิดไฟล์ขึ้นมาแก้ผ่านโปรแกรมพวก Text Editor แล้วอัพโหลดผ่าน Ftp หรือแก้ผ่านเมนู Editor ของ WordPress (Appearance > Edtior)
แต่เดี๋ยวเราจะไปดูวิธีการแก้ CSS ที่ง่ายกว่านั้น ผ่านปลั๊กอินต่างๆ กันค่ะ
Inspect Element
คือการวิวดู CSS ของสิ่งที่เราต้องการจะแก้ไข แล้วทำการแก้ไขมัน แล้วก๊อปปี้ส่วนที่ทำการแก้ไขเพื่อไปใส่ในปลั๊กอิน Custom CSS นั่นเอง ซึ่ง Custom CSS นี้ก็มีในแทบจะทุกบราวเซอร์ วิธีการใช้ก็คลิกขวาตรงสิ่งที่เราต้องการจะแก้ไขในหน้าเว็บนั้นๆ แล้วเลือก Inspect Element แล้วทำการแก้ไข CSS ที่ช่องด้านขวามือตรงที่เป็น Style (หากใครไม่เคยใช้จริงๆ อาจจะลองเสริชวิธีการใช้งานดูนะคะ ไม่งั้นบทความนี้จะยาวและนอกเรื่องเกินไป) ผู้เขียนเองก็ใช้วิธีนี้ในการเลียนแบบ css ของเว็บคนอื่นที่ชอบมาปรับใช้กับเว็บตัวเองเช่นกันค่ะ
Jetpack Custom CSS
หากใครติดตั้งปลั๊กอิน Jetpack อยู่แล้ว ก็เพียงแค่ไป Activate ตัว Custom CSS จาก Settins ของ Jetpack ได้เลยค่ะ จากนั้นก็ไปที่เมนู Appearance > Edit CSS เพื่อวางโค้ด CSS ที่เราได้แก้แล้วลงไป จากนั้นกด Save Stylesheet ก็เป็นอันเรียบร้อย อันนี้ดีตรงที่มีให้กด Preview ดูก่อนด้วย และสามารถใช้ Revision เพื่อย้อนกลับการแก้ไขได้ค่ะ
Simple Custom CSS
เป็นปลั๊กอินแบบเดียวกับตัวบนค่ะ เพียงแต่จะเรียบง่ายและเบากว่า มีฟังชั่นน้อยกว่า เพราะไม่มี Preview กับ Revision ใช้สำหรับแก้ css เพียวๆ
การใช้งานก็ไปที่เมนู Appearance > Custom CSS ทำการแก้ไขแล้วกด Update Custom CSS
นอกจากนี้ ธีมทั่วๆ ไปหลายธีมโดยเฉพาะรุ่นโปร ก็มักจะมีฟังชั่นนี้ไว้ให้ใช้งานอยู่แล้วโดยไม่ต้องลงปลั๊กอินเพิ่มค่ะ เช่น ธีมจาก Mythemeshop เป็นต้น มีทุกธีม
SiteOrigin CSS
ปลั๊กอินนี้มีความสามารถเยอะมากๆ เป็น Live CSS Editor ฟรีที่ดีที่สุดตัวนึง แทบจะเท่าตัวเสียเงินเลยทีเดียว โดยปลั๊กอินนี้จะทำงานอยู่ 2 โหมด คือ Visual Editor และ Text Editor โดยทั้ง 2 โหมด สามารถใช้ Inspector ร่วมได้หมด ทำให้สะดวกมาก แค่เลือกตัวที่ต้องการจะแก้ไข มันก็จะดึงขึ้นมาให้เราจัดการได้แล้วค่ะ
Visual Editor หากเราคลิกที่ตรงไหน ปลั๊กอินก็จะเลือกตรงนั้นมาให้เราแก้ไขได้เลย โดยสามารถที่จะกำหนดค่าต่างๆ ได้โดยไม่ต้องโค้ดเอง เพียงแค่กำหนด แก้ไข เพิ่มเติมในสิ่งที่ต้องการ แล้วปลั๊กอินก็จะแปลงเป็นโค้ดให้เอง
Editor Mode โหมดนี้สำหรับคนที่โค้ดคล่องแล้ว จะช่วยให้เร็วกว่าแบบก่อนหน้านี้มาก เพราะไม่ต้องไปนั่งเลื่อนหา เพียงแค่พิมพ์คลาสต่างๆ มันก็จะแทรคและ css ที่จะใช้ ก็จะมีแนะนำให้เหมือนเวลาที่เราใช้พวก Text Editor เวลาทำเว็บเลยทีเดียว แต่มันดีกว่าตรงมันแสดงผลแบบ Live ทำให้เห็นความต่างได้ทันทีเลยนี่ล่ะ และโหมดนี้ก็ยังคงสามารถให้เม้าส์เลือกคลิกได้เช่นกันค่ะ คือเป็น Inspector + Text Editor นั่นเอง
มีวิดีโอแนะนำด้วย ดูเพลินเลย ไม่รู้ดูคนหรือดูปลั๊กอิน
CSS Hero
ตัวนี้ผู้เขียนให้เป็นสุดยอดแล้วสำหรับการแก้ไข CSS ในขณะนี้ เพราะทั้งฟังชัน หน้าตา การใช้งาน ทุกอย่างสะดวกสะบายหมด ต่อให้คนที่ไม่รู้อะไรเกี่ยวกับ css เลยก็คิดว่าสามารถปรับแต่งเว็บได้สบายมาก เพราะการใช้งานแค่คลิกแล้วก็เลื่อนไปมาเพื่อปรับในสิ่งที่เราต้องการเท่านั้น จะเติมเงาเติมสีอะไร ตัวนี้มีหมดค่ะ สามารถเข้าไปที่เว็บเขา CSS Hero แล้วลองเล่นดูกับธีมต่างๆ ที่ Competible Themes ก่อนก็ได้ค่ะ
สิ่งหนึ่งที่น่าสนใจคือในส่วนของ Responsive เราสามารถเลือกที่จะแก้ไขในขนาดของ Mobile ได้ด้วยเช่นกัน หากไม่อยากใช้ปลั๊กอินต่อ ก็สามารถที่จะ Export CSS ไปใช้ต่อทีหลังได้ ทั้งแบบธรรมดา หรือ minify (ย่อขนาด)
ใครจะเลือกใช้เครื่องมือแบบไหนก็คงอยู่ที่ความถนัดและชำนาญของแต่ละคน ถ้าใครไม่เป็นเลย ก็อาจจะยอมเสียเงินใช้อันล่าง ช่วยให้เราปรับแต่งธีมที่ใช้งานอยู่ได้มากยิ่งขึ้น ทำไปทำมาเราก็จะเรียนรู้และซึมซับโค้ดต่างๆ ไปโดยไม่รู้ตัว หรือใครที่ชำนาญแล้ว ใช้ตัว simple simple แบบด้านบนก็ง่ายและเบาสบายดีเช่นกันค่ะ บางทีก็อยู่ที่งานด้วย ว่าเรานำไปใช้ในสถาณการณ์ไหน เครื่องมือจะมีประสิทธิภาพก็อยู่ที่ผู้ใช้งานนี้เองค่ะ
Related Posts
