Grass still Green

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

วัตถุประสงค์

1. สามารถแสดงตัวอย่าง Code ลงใน Post หรือ Page ได้
2. สามารถกลับมาอัพเดต Post หรือ Page ได้ โดย Code ที่เคยเขียนไว้ยังอยู่ครบ 32
3. สามารถฝัง CSS หรือ Java Scripts ลงใน Post หรือ Page ได้ ( บางทีเราอาจต้องการแสดงผลลัพธ์ของ Code ในหน้าเดียวกับบทความ ชมตัวอย่าง )

สิ่งที่ต้องมี

1. Google Syntax Highlighter for WordPress เป็น Plugin สำหรับเปลี่ยน Code ให้มีสีตาม Syntax มีหลายตัว แต่ที่ผมเลือกใช้ตัวนี้ครับ
2. Custom fields shortcode เป็น Plugin สำหรับแทรก Custom Field เข้าไปใน Post หรือ Page
3. โหลด Plugin แล้วอย่าลืม activate ให้เรียบร้อยนะครับ

จะขอสมมติเหตุการณ์ดังนี้นะครับ ผมกำลังจะเขียนบทความสอนการใช้ CSS โดยต้องการแสดง Code ตัวอย่าง และผลลัพธ์ ในบทความนั้นด้วย ดังนั้นสิ่งที่ผมต้องการคือ แสดง Code ตัวอย่างลงในบทความ และ แทรก Code CSS จริงๆ ลงในบทความ

การแสดง Code ตัวอย่างในบทความ

1. ทำการ Add New Post
2. เลือก Editor เป็นแบบ Visual Editor
3. เขียนบทความตามปกติ ตรงส่วนที่เป็นตัวอย่าง Code ก็พิมพ์ลงไปตามปกติ ดังรูปครับ

   
   

4. เมื่อเขียนเรียบร้อยแล้ว ให้เปลี่ยนจาก Visual Editor ไปเป็น HTML Editor ครับ
5. แล้วนำ <pre name=”code” class=”html”>…</pre>  ครอบไว้ เพื่อบอกให้รู้ว่าตรงนี้แหละ ที่เราต้องการแสดง Code เป็นสีๆ ตาม Syntax ถ้าเราจะแสดง Syntax ของภาษาอื่นๆ ก็เปลี่ยนได้นะครับ เช่น class=”css”, class=”php” เป็นต้น

   
   

   

6. เสร็จแล้วให้เปลี่ยนจาก HTML Editor ไปเป็น Visual Editor แล้วทำการ Publish ได้เลย

ทุกครั้งที่เราต้องการ Restore Revision เก่าขึ้นมา ให้ทำการเลือก Editor เป็น Visual Editor ก่อนทำการ Restore นะครับ

การแทรก Code CSS, HTML หรือ Java Scripts ลงในบทความ

1. สร้าง Custom Field ขึ้นมา แล้วตั้งชื่อว่าอะไรก็ได้ ในตัวอย่างนี้ผมจะตั้งชื่อว่า embedded_code นะครับ จากนั้นให้ใส่ Code ที่เราต้องการลงไปในช่อง Value ดังรูป

   
   

2. แทรก Short Code ลงใน Post ดังนี้ ซึ่งตามตัวอย่างนี้เราก็แทรกข้อความว่า ลงไป จากนั้นทำการ Save เป็นอันเรียบร้อย

   
   

ผลลัพธ์ตามตัวอย่าง

<style type="text/css">
div.obb{
background-image: url(http://wegrass.com/wp-content/uploads/obb.gif);
width: 40px;
height: 30px;
float: left;
margin-right: 10px;
cursor: pointer;
}
</style>

Tags: blogging, highlight, syntax, wordpress, ความรู้

This entry was posted on Monday, February 22nd, 2010 at 12:55 am and is filed under Misc. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.