html Archives - JIRAYU.IN.TH

กำหนด Element ให้แสดงข้อความไม่เกินจำนวนบรรทัดที่กำหนด

jirayu on September 9, 2013

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

สำหรับข้อความภาษาอังกฤษอาจจะไม่มีปัญหาเท่าไหร่นัก เพราะเราสามารถใช้ substr() ในการตัดให้เหลือจำนวนตัวอักษรพอดีกับจำนวนบรรทัดที่เราต้องการได้ แต่ภาษาไทยมันไม่เป็นเช่นนั้น เพราะ substr() มันก็นับสระและวรรณยุกต์เป็นตัวอักษรตัวหนึ่งเหมือนกัน

ทางแก้ของเราคือเราจะใช้การกำหนด line-height, height และ overflow เข้าช่วยครับ

เมื่ออินเตอร์เน็ตย้อนกลับไปสู่ยุค “แอพเฉพาะ”

jirayu on July 5, 2013

ผมเกิดไม่ทันยุคที่เราจะใช้บริการอะไร ก็ต้องลงโปรแกรมของบริการนั้นๆ เอาไว้ในเครื่องนะ เช่นจะใช้ AOL ก็ต้องลงโปรแกรม AOL จะใช้ MSN ก็ต้องลง MSN จะอ่านข่าว จะแชท ต้องลงโปรแกรมนู่นนี่ ผมใช้อินเตอร์เน็ต เกือบทุกอย่างก็อยู่บนเว็บเรียบร้อยแล้ว

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

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

เริ่มต้นเขียน Theme ของ WordPress ใช้เอง ตอนที่ 2

jirayu on August 30, 2012

จากตอนที่แล้ว ผมพาไปดูโครงสร้างไฟล์และคอนฟิกธีมเบื้องต้นใน?เริ่มต้นเขียน Theme ของ WordPress ใช้เอง ตอนที่ 1 กันไปแล้ว ตอนนี้จะพาไปดูกับส่วนที่สำคัญที่สุดในธีม นั่นคือ The Loop ครับ

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

โครงสร้างพื้นฐาน The Loop

จริงๆแล้ว The Loop นั้นก็คือ while ปกติของ php นั่นเองครับ วิธีใช้ก็ประมาณนั้น

while (have_posts()) :
	the_post();

	.. ใส่โค๊ดอื่นๆตรงนี้ ..
endwhile;

เริ่มต้นเขียน Theme ของ WordPress ใช้เอง ตอนที่ 1

jirayu on July 14, 2012

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

อ้อ ก่อนอื่น ผมจะสมมุติว่าทุกท่านมีพื้นฐาน PHP, HTML, และ CSS มาอยู่แล้วนะครับ (ถึงไม่มีก็อ่านได้ครับ แต่ถ้ามี จะเข้าใจง่ายกว่า)

ไฟล์ธีมที่สำคัญของ WordPress

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

index.php
style.css

ที่พูดมานี่เรื่องจริงนะเออ ถ้าไม่เชื่อ ลองโหลดไปดูครับ: example01.rar

จัดหน้าเนื้อหา HTML ตอนที่ 2

jirayu on August 10, 2011

เมื่อวานเขียนเรื่องการจัดหน้าเนื้อหา HTML ตอนแรกไป และมีการตอบรับอย่างล้นหลามมากๆ เรียกได้ว่าคอมเมนต์ถล่มทลาย (ที่ถล่มจริงๆแล้วคือสแปมครับ Akismet จัดการ discard ทิ้งไปเรียบร้อย จากคนนีั่ไม่มีเลย Orz)

แต่เอาเถอะ ไหนๆก็เขียนแล้ว ก็จะสานต่อให้เสร็จในช่วงที่ยังมีไฟอยู่

ในตอนที่สองนี้จะว่าด้วยเรื่องของการตกแต่งข้อความด้วยแท็กต่างๆในเบื้องต้นนะครับ และถ้ามีเวลา ผมจะต่อเรื่องการใช้ CSS มาตกแต่งเพิ่มเติมให้ด้วย (หรือไม่ก็ยกไปในตอนหน้าเลย เพราะพวกนี้น่าจะยาวครับ)

ก่อนอื่น ให้เปิดดูเนื้อหาที่มีการใส่แท็กต่างๆเพื่อจัดเนื้อหาเอาไว้แล้ว ได้ที่ example02.html ครับ