css Archives - JIRAYU.IN.TH

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

jirayu on September 9, 2013

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

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

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

เริ่มต้นเขียน 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 ครับ

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

jirayu on August 9, 2011

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

เอาเถอะ วันนี้ผมจะเริ่มซีรี่ย์ของบทความบนบล็อก (ซึ่งได้ข่าวว่าซีรี่ย์เก่าที่เริ่มไว้ก็ยังไม่ได้ทำต่อ) ว่าด้วยการจัดหน้าและตกแต่งเนื้อหาบนหน้าเว็บด้วย HTML

หลายคนอาจจะคิดว่าการทำเรื่องพวกนี้อาจจะไม่จำเป็น เพราะปัจจุบันเราใช้ CMS สำเร็จรูป (เช่น WordPress) กันแทบทั้งนั้น การจัดหน้าและตกแต่งเนื้อหาก็ใช้ RTE ที่มากับ CMS เอา (หรืออย่าง Drupal ก็อาจจะใช้ markdown ได้) แล้วการจัดหน้าเองนั้นจำเป็นอย่างไร?

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

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