พื้นฐาน Joomla

รู้จักกันก่อนเขียนบทความ
หัวใจหลักของการทำเว็บไซต์ ก็คือการมีบทความใช่ไหมล่ะครับ การสร้างบทความก็คือการที่เราเพิ่มข้อมูล...

เทคนิค Joomla

Operation not permitted
Joomla นั้น จะมีการใช้งานบางอย่าง ที่ต้องเก็บค่าบันทึกต่าง ๆ ลงในไฟล์โดยตรง เช่น param.ini , c...

แนะนำ Extension

ป้องกันสแปมด้วย Security Images
เป็นคอมโพเน้นท์สำหรับเพิ่มเติมการกลั่นกรองสิ่งต่าง ๆ ที่มาจากหน้าเว็บ เช่น การลงทะเบียน , การ...
( 26 Votes )
article layoutการเขียนบทความในจูมล่า ไม่ใช่ว่าจะพิมพ์ ๆ ๆ ไปแล้วก็ Save แล้วจะออกมาดูแจ่มนะครับ ของแบบนี้ เทคนิคไม่ต้อง ไม่ได้นะ ! ฮา... เพียงแต่ว่าเรา ๆ ที่เพิ่งจะเริ่มใช้ มันจะยังไม่คุ้นกับ Editor เท่าไหร่ครับ เลยจัดวางบทความไม่ค่อยจะสวยงาม หรือบางทีไม่รู้ว่า จะวางรูปยังไง จะพิมพ์ยังไง ให้ได้แบบนี้ เป็นต้น

ผมจะไม่พาไปไหนไกลครับ เอาเว็บผมนี่แหล่ะ ไม่ได้จะบอกว่าเว็บผมจัดรูปแบบสวยหรูนะครับ แต่ผมก็ว่าไม่ขี้เหร่เท่าไหร่ละกัน (ฮา...) เริ่มจากรูปแบบการแสดงผลของบทความครับ

การแสดงผลของบทความนั้น จะถูกจัดอยู่ 2 ลักษณะ คือ แบบตารางลิส (List Layout) และแบบบล็อค (Blog Layout) ซึ่งเรื่องนี้ก็จะถูกเชื่อมโยงไปเรื่องการสร้างเมนูลิ้งค์อีก แต่ผมจะขอแยกเรื่องเมนูลิ้งค์ไว้บทความต่อไปละกันนะครับ ลองสังเกตดูนะครับว่า ทุกบทความมันจะมีความเกี่ยวเนื่องกันทั้งหมดเลย ตั้งแต่ Section , Category , การสร้างบทความ , การนำบทความแสดงผล , การสร้างลิ้งค์ให้แสดงบทความ ดังนั้น ผมจะพยายามแยกสิ่งเหล่านี้ออกจากกันเป็นเรื่อง ๆ เพื่อให้เข้าถึงสิ่งที่ผมจะพูดมากที่สุดละกันนะครับ

เริ่มจากว่า ตามเว็บไซต์ต่าง ๆ ที่คุณเห็นนั้น จะพบว่า ส่วนมากมีรูปแบบคล้าย ๆ กัน เช่น มีรูปเล็ก ๆ แล้วก็มีข้อความหน่อยนึง อาจจะมีปุ่มข้าง ๆ บอกว่า “อ่านต่อ” ประมาณนี้

article layout

ภาพจาก sanook.com

article layout

ภาพจาก teenee.com

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

ขั้นแรกถ้าหากต้องการจัดรูปแบบบทความเหมือนผม ให้แทรกรูปก่อนครับ

article layout

ผมใส่ URL ของรูปเข้าไป พร้อมจัด Alignment ให้อยู่ด้านซ้าย เพราะการจัดรูปแบบนี้ จะทำให้ข้อความที่อยู่ทางด้านขวาของรูป มีความพอดีกัน และไม่เยื้องจนเบี้ยวเกินไปครับ ,  และกำหนด Horizontal space ไว้ 5 ซึ่งเป็นการกำหนดระยะห่างในแนวนอน แต่ Editor นี้กำหนดแบบเฉพาะไม่ได้ครับ หมายความว่า ถ้ากำหนดในแนวนอน มันก็จะหมายถึงการกำหนดระยะห่างทั้ง ซ้าย และขวาไปพร้อมกัน ไม่สามารถกำหนดระยะห่างด้านซ้ายอย่างเดียว หรือ ด้านขวาอย่างเดียวได้ครับ (แต่ไม่ต้องห่วง Editor อื่น ๆ สามารถกำหนดได้ครับ) , จากนั้นลองแทรกรูปไปครับ แล้วก็พิมพ์บทความไปตามปกติ จะเห็นว่า บทความก็จะเรียงกันไปทางด้านขวาอย่างเป็นระเบียบ แต่จะเห็นว่า รูปภาพนั้น ระยะห่างจากด้านซ้ายมากเกินไป ดังนั้น เราอาจต้องทำการแก้ไข HTML กันนิดนึง

article layout

ลบ margin-left ออกไปครับ เพื่อให้รูปภาพเล็ก ๆ ของเรา ชิดติดขอบซ้าย จะได้ไม่เขยิบออกมาเกินจนดูไม่งาม คงต้องแก้แบบแมนนวลกันก่อนล่ะครับตอนนี้

ต่อไป เราก็ใช้ปุ่มด้านล่างของ Editor เข้าช่วยครับ ชื่อว่าปุ่ม Read more.. เมื่อกดไปแล้วจะพบว่า มีเส้นขึ้นมาคั่น และเราก็จะสามารถพิมพ์ข้อความใต้เส้นนั้นต่อไปได้ , คำถามคือ เส้นคั่นนั้นมีไว้ทำอะไร ?

article layout

เส้นคั่นที่เห็นเกิดจากการกดปุ่ม Read more ที่ได้ทราบไปแล้ว แต่มันจะมีผลเมื่อถูกนำไปแสดงบนเว็บไซต์ ในรูปแบบของบล็อค (Blog Layout) ครับ ข้อความที่อยู่เหนือเส้น Read more ขึ้นไป จะถูกนำไปแสดงผลบนเว็บไซต์ปกติ แต่ข้อความที่อยู่ใต้เส้น Read more จะยังไม่ถูกแสดงผลตามไปด้วยครับ ซึ่งเส้น Read more ที่เราเห็นในตอนนี้ เมื่อไปดูจากหน้าเว็บไซต์ เราจะเห็นเป็นคำว่า “อ่านต่อ” แทนครับ ซึ่งผู้เยี่ยมชมสามารถคลิกเพื่ออ่านต่อ และเมื่อคลิกเข้าไปอ่านต่อแล้ว จึงจะเห็นบทความทั้งหมด ที่อยู่ใต้เส้น Read more อีกทีครับ เหมือนบทความที่หน้าเว็บของผมไง

มีข้อความอยู่พอให้อ่านยั่วน้ำลาย

article layout

พอกดเข้ามาแล้ว ก็พบกับบทความที่เหลือ

article layout

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

article layout

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

หรือหากเราไม่มี Read more เราก็สามารถทำไตเติ้ลให้ผู้อ่านคลิกแทนก็ได้ โดยเลือกพารามิเตอร์ Title Linkable ซึ่งก็จะทำให้ชื่อบทความกลายเป็นลิ้งค์ เพื่อคลิกอ่านบทความแทนได้เช่นกัน ลองไปดูภาพเปรียบเทียบเลยก็ได้ครับ

article layout

 

article layout

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

แต่ถ้าคุณอยากจะทำให้เหมือนภับภาพของเว็บไซต์ทั้ง 2 เว็บที่ผมนำมาให้ดูข้างต้นนั้น คุณก็อาจจะดัดแปลงโดยการไม่ให้แสดงปุ่ม Read more แต่ใช้การ Insert Link ไปที่ตัว Intro Text แทนก็ได้ คุณก็จะได้ข้อความสั้นที่เป็นลิ้งค์แทน ซึ่งรูปแบบที่คล้ายกับเว็บไซต์ดัง 2 เว็บข้างต้น เหมือนกันครับ

นี่ก็เป็นเพียงแค่พื้นฐานการจัดรูปแบบข้อความ และรูปภาพเพื่อให้บทความออกมาดูเป็นระเบียบขึ้น เพียงแค่คุณรู้ว่า เราไม่ได้ทำเพียงแค่ Insert Image เฉย ๆ แต่คุณต้องสนใจ Attribute อื่น ๆ หรือองค์ประกอบอื่น ๆ ด้วย เช่น ระยะห่าง , เส้นขอบ , ชิดซ้าย ขวา , ให้ภาพ ห่างจากข้อความประมาณไหน , บรรทัดใหม่ ควรย่อหน้าเท่าใด ไม่ใช่พิมพ์ตรงเด่ทุกบรรทัด, รูปภาพประกอบบทความ , ความกว้าง , ความสูง , เพียงแค่นี้ผมว่า คุณก็เอาพื้นฐานจากการที่พิมพ์ Microsoft Word มาใช้ได้แล้วแหล่ะครับ แต่ไม่ใช่ทั้งหมด เพราะปัญหาที่ขัดแย้งกันระหว่างคนที่ไม่เคยใช้ Editor บน Web Application นั้น จะคุ้นชินกับการใช้งาน Microsoft Word มากกว่า เลยติดนิสัยวา่ แทรก ๆ Insert ไปงั้น ๆ ไม่ต้องสนใจระยะห่างอะไรหรอก ถ้าคุณใช้วิธีนั้นมาทำกับการเขียนบทความบนเว็บ มันก็จะดูไม่งามเอาครับ ดังนั้นต้องใส่ใจสิ่งเหล่านี้ด้วย

โดยรวมแล้ว คุณจะเห็นเลยว่า ไม่มีอะไรยากเลยใช่ไหมครับ ที่เหลือ Full Text ก็เพียงแค่พิมพ์ข้อความ กับ แทรกรูปภาพเท่านั้นเอง เพียงแต่บทความนี้ ผมกระตุ้นความคิดให้ใส่ใจกับองค์ประกอบของบทความอย่างที่กล่าวไป ซึ่งจากที่ผมเห็นมา มือใหม่มักจะไม่ได้ใส่ใจเรื่องนี้ เอาแต่ว่าพิมพ์ ๆๆ แทรก ๆๆ แล้วก็ Save , พอมาดูก็บ่นว่า่ เอ๊ะ ทำไมไม่สวยเหมือนที่เค้าทำกันเลย อะนะ ฉะนั้นก็พิจารณาสิ่งที่ผมแนะนำ ลองไปปรับปรุงดูครับ

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

จัดบทความอย่างไร ให้ดูดี