ตอนที่ 3 ในเรื่องการปรับแต่งเทมเพลตฟรีให้ได้ดั่งใจ จาก 2 ตอนที่แล้วที่เราได้ทำการเปลี่ยนสีหลักของเทมเพลต เปลี่ยนสีพื้นหลัง และใส่โลโก้ของเว็บ การจัดการโมดูลภาพสไลด์กันมาบ้างแล้ว มาถึงคราวนี้เป็นการปรับแต่งการแสดงฟอนต์ในหน้าเว็บทั้งส่วนเนื้อหา และหัวข้อต่างๆ ให้ถูกใจเรา รวมทั้งให้อ่านง่ายแก่ผู้ชมด้วย ปกติถ้าไม่แก้ไขการแสดงภาษาไทยเลยมักจะใช้ฟอนต์ Tahoma ในทุกส่วน ซึ่งไม่สวยเอาเสียเลย จึงต้องมีการแก้ไขให้แสดงผลเสียใหม่
ปกติการแสดงผลในส่วนนี้จะถูกควบคุมด้วยไฟล์ชื่อ Template.css กัน (โชคดีที่เทมเพลต Protostar นี้มีไฟล์ *.css เพียง 2 ไฟล์) แต่ก็ไม่ง่ายเลยนะขอบอกไว้ก่อน การแก้ไขจริงๆ ทำได้โดยตรงที่ไฟล์ในการจัดการเทมเพลตที่เมนู Extension > Templates > Templates > Mytemplate Detail and Files ดังภาพนี้ แต่ก็ไม่สะดวกเพราะมีหลายบรรทัด และค้นหาไม่สะดวกนัก
ในการแก้ไขนี้ผมจึงใช้ Dreamweaver มาทำการแก้ไขไฟล์บันทึกทับไฟล์เดิมแล้วแสดงผลสะดวกกว่าเยอะ
การใช้ฟอนต์ภาษาไทยก็ใช้ฟอนต์จาก Google ที่มีฟอนต์สวยๆ ให้เรานำมาใช้ฟรีๆ มากมาย ด้วยการ Embed ฟอนต์ด้วยคำสั่งข้างล่างนี้ในหัวไฟล์ Template.css ได้เลย ตัวอย่างผมเลือกเอาฟอนต์ Sarabun, Kanit, Mitr, Fahkwang มาใช้งานในส่วนต่างๆ (ในเทมเพลตนี้ใช้แค่สองตัวแรกเท่านั้นครับ ที่เหลื่อเผื่อไว้เฉยๆ)
@import url('https://fonts.googleapis.com/css?family=Sarabun|Kanit|Mitr|Fahkwang&display=swap');
จากนั้นค้นหาคำสั่ง font-family: ในส่วน Body และส่วนอื่นๆ ให้พบด้วยการกดปุ่ม Ctrl + F บนคีย์บอร์ด
แล้วเพิ่มฟอนต์ Sarabun ลงไปเพื่อให้เนื้อหาทั้งหมดแสดงภาษาไทยด้วยฟอนต์นี้ เนื่องจากฟอนต์ Sarabun มีขนาดค่อนข้างเล็กมากจึงเพิ่มขนาดจากเดิม font-size: 13px มาเป็น 16px พอเพิ่มขนาดแล้วก็เพิ่มระยะห่างระหว่างบรรทัดด้วย (ภาษาไทยมีทั้งสระบน-ล่างและวรรณยุกต์จึงต้องห่างนิด) line-height: 24px ดังภาพล่างนี้
เมื่อบันทึกไฟล์นี้ทับไฟล์เดิม แล้วไปดูผลในหน้าเว็บไซต์ด้วยการรีเฟรชบราวเซอร์ได้เลย
เป็นอันว่าการแสดงผลในส่วนเนื้อหาของเราสำเร็จแล้ว ต่อไปเป็นการแก้ที่ส่วนหัวข้อหลัก ตามปกติเราสามารถค้นหาได้ด้วยการคลิกเมาส์ขวาบริเวณหัวข้อนั้น เพื่อเลือก Inspect Element ดังภาพด้านล่าง
จะพบกับกรอบแสดงผลของโค๊ดในตำแหน่งนั้นว่า มีคำสั่งที่เกี่ยวข้องในส่วนนี้อะไรบ้าง ดังภาพ เราก็เอาโค้ดในส่วนนั้นไปค้นหาในไฟล์ template.css เพื่อแก้ไขการแสดงฟอนต์ดังกล่าว
โค๊ดในส่วนนี้คือ ที่วงรอบกรอบสี่เหลี่ยมสีเขียว ที่มีฟอนต์ Open Sans, sans-serif ซึ่งเมื่อแสดงเป็นฟอนต์ภาษาไทย คือ Tahoma ที่ผมก็อบปี้ไปค้นหาในไฟล์ template.css อยู่ตั้งนานก็ไม่เจอในส่วน body เลย เจอคำสั่ง h1, h2, h3, h4, h5, h6 ก็จัดการแก้ให้เป็นฟอนต์ Kanit แล้วก็ไม่แสดงผล งงสิครับ ไม่เคยเจอในเทมเพลตอื่นๆ เท่าที่เคยดัดแปลงแก้ไขมา
แล้วก็ถึงบางอ้อ! หลังผ่านไป 2 ชั่วโมงเมื่อสงสัยคำว่า Inherited from h1 เอ... มันสืบทอดมาจากคำสั่งนี้ที่ไหนหนอ... เพราะตัวเราได้แก้บรรทัดที่มีหัวเรื่องในไฟล์ template.css มาทั้งหมดแล้วนี่นา ก็เลยนึกได้ว่า มันน่าจะมาจากไฟล์ index.php ของเทมเพลตนี้แน่ๆ และแล้วก็หาเจอจริงๆ ครับ
แก้มันเสียเลย ด้วยการก็อบปี้คำสั่งมาไว้แล้วมาร์คไม่ให้แสดงผลในกรอบสี่เหลี่ยมสีเขียว แล้วไปแก้ในส่วน font-family: '" . $fontStyle . "'. ออกเป็น Kanit ที่ขีดเส้นใต้สีฟ้านั่นแหละครับ บันทึกไฟล์แล้วดูหน้าเว็บหลักด้วยการรีเฟรชทีหนึ่ง
เว็บไซต์ส่วนใหญ่เขาทำเมนูกันทางฝั่งซ้ายกัน เราอยากแปลกและแตกต่างเลยย้ายมาทางขวาเหมือนตอนเริ่มต้นดูดีกว่า (มั๊ง) ก็จัดไปเลยสิครับ รอช้าอยู่ใย (คงจำได้นะ ทำมาในตอนก่อนไง ย้อนกลับไปอ่านอีกรอบนะ)
เพื่อให้แตกต่างไปอีกก็อยากเปลี่ยนพื้นหลังที่อักษร A-B เป็นรูปภาพแบบลายไม้สวยๆ ส่วนในกรอบ C ก็อยากใส่สีไล่ระดับเฉดสี (Gradiant) คงจะสวยงามขึ้นมาลองดูกันหน่อยสิ เผื่อใครคิดเหมือนผู้เขียน ขั้นแรกก็ไปหาภาพพื้นหลังลายไม้สวยๆ จากเพื่อนกู (Google) มาเสียก่อน แล้วบันทึกเก็บไว้ในโฟลเดอร์เก็บภาพในเทมเพลตของเรา ในที่นี้คือ mytemplate/images/plywood.jpg (ตัวอย่างผู้เขียนบันทึกไว้ในชื่อ plywood.jpg)
จากนั้นไปที่ไฟล์ template.css ที่เราเคยแก้ฟอนต์ให้แสดงผลด้วยฟอนต์ Sarabun นั่นแหละครับ เพิ่มคำสั่งเรียกภาพพื้นหลังขึ้นมาแสดงแทนสีด้วยคำสั่ง background-image: url(/new/../images/plywood.jpg); ดังภาพ
บันทึกไฟล์ แล้วแสดงผลได้ตามภาพล่างนี้ เย้!!! สำเร็จแล้ว ชอบภาพอะไรก็ไปหามาให้เหมาะกับเรื่องราวของเว็บเรานะ
ต่อไปก็จัดการในส่วนบล็อกเมนู Main Menu ด้วยการคลิกเมาส์ขวาที่บล็อก เลือก Inspect Element เพื่อดูว่าจะสามารถใส่พื้นสีที่ตำแหน่งไหนได้บ้าง
จะพบว่าในบล็อกนี้มีชื่อคลาสว่า well มีสีพื้นหลัง background-color: #f5f5f5 เราก็ไปค้นหาและแก้ตรงนี้แหละ เพื่อทำการแก้ไขให้ได้ตามใจเรา แล้วสีแบบไล่เฉด (Gradiant) จะเขียนอย่างไร ไม่ยากไปที่เว็บเขามีให้บริการสิครับชื่อว่า Ultimate CSS Gradient Generator ดังรูปล่างนี่แหละ
เลือกเฉดสีที่ต้องการในกรอบแดงบน เอาสีใด แบบไหน ปรับค่าที่ต้องการตามความเหมาะสม ทิศทางการเกลี่ยสี พอใจแล้วก็อบปี้โค๊ดในกรอบแดงขวามือไปวางในไฟล์ template.css ได้ดังภาพล่างนี้
กรอบสีแดงคือสีเดิม เราต้องทำการมาร์คอัพไม่ให้แสดงผล แล้ววางโค๊ดที่ได้มาใหม่ในกรอบเขียวทดแทน บันทึกไฟล์แล้วก็ไปดูผลงานกันเลย
ดูเว็บไซต์ Demo for Joomla! คลิกเลยครับ
เรียบร้อยแล้วนะครับ ขอย้ำว่า "ถ้าคุณอยากมีความสามารถในการแก้ไขเทมเพลต การตกแต่งเว็บไซต์ จัดการความสวยงามต่างๆ ผู้ทำควรศึกษาพื้นฐานคำสั่งภาษา HTML, CSS, PHP ให้มีพื้นฐานพอสมควรบ้างนะครับ รวมทั้งความสามารถในการตกแต่งภาพกราฟิกต่างๆ พวกหัวเรื่อง ภาพประกอบต่างๆ จึงจะประสบผลสำเร็จครับ" เอากันพอหอมปากหอมคอกันเพียงเท่านี้นะครับ ค้นหาความรู้จากเว็บไซต์ อ่านหนังสือคู่มือต่างๆ ให้มาก ขอให้สนุกกับการทำงานนะครับ
|
|
สนับสนุนให้ Easyhome อยู่รับใช้ท่านตลอดไป ด้วยการคลิกแบนเนอร์ไปเยี่ยมผู้สนับสนุนของเราด้วยครับ
|
ยินดีต้อนรับทุกท่านสู่เว็บไซต์ Easyhome in Thailand เว็บไซต์ของเรา ใช้คุกกี้ (Cookies) เพื่อให้ท่านได้รับประสบการณ์การใช้งานที่ดียิ่งขึ้น อ่านนโยบายคุ้มครองข้อมูลส่วนบุคคล (Privacy Policy) และนโยบายคุกกี้ (Cookie Policy)