การพัฒนา Theme โปรแกรม Wordpress Thai

รายงานฉบับนี้ผมกล่าวถึงการพัฒนา Theme ของโปรแกรม

Wordpress Thai Portable เป็นโปรแกรมท าเว็บไซด์อย่างง่ายซึ่ง

พัฒนามาจากโปรแกรม Wordpress ให้สามารถใช้งานได้โดยไม่

จ าเป็นต้องเชื่อมต่อ Internet โดย ผศ.ประชิด ทิณบุตร เป็นผู้จัดท ำเพื่อให้นักเรียน นักศึกษำ หรือประชำชนทั่วไปได้ใช้กัน

โจทย์ส ำหรับกำรท ำเว็บไซด์ Wordpress นี้คือสิ่งที่ตัวเองสนใจ ซึ่งตัว

ผู้จัดท ำเองนั้นสนใจเรื่อง Street Art และ Graffiti

โดยกำรพัฒนำ Theme ครั้ ง นี้ ผมได้ น ำ Theme ที่ มี ชื่ อ ว่ ำ

“Twenty Eleven”ซึ่งเป็น Theme พื้นฐำนของโปรแกรม

Wordpress

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

และขั้นตอนต่อมาคือเข้าไปที่ Theme options เลือกชุดสีของฟ้อนและพื้นหลังของพื้นที่ทั้งหมดซึ่งผมเลือก ตัวอักษรสีด า พื้นหลังเป็นสีขาวและ

ต่อมาก็เลือกรูปแบบของหน้าเว็บผมเลือก Content on right ให้แถบ

Sidebar อยู่ทางด้านซ้าย

การเปลี่ยนชื่อเว็บไซด์และค าอธิบายรวมถึงการต้ังค่าอ่ืนๆ ให้เข้าท่ีการตั้งค่า

ทั่วไป

การใส่รูปเฮดเดอร ์

การใส่รูปเฮดเดอร์ของหน้าเว็บไซด์ ให้เข้าไปปรับแต่งท่ี ปรับแต่งรูปส่วนหัว โดยต้องเตรียมรูปขนาดความกว้าง 1000 พิกเซล และความสูง 288 พิกเซลเอาไว้ 1 รูป หรือจะเอารูปที่มีมาให้ในโปรแกรมก็ได้

พอได้รูปส าหรับท าเฮดเดอร์ได้แล้วให้กดที่ปุ่ม เรียกดู เพื่อเลือกไฟล์รูปที่จะใช้ขึ้นมา แล้วกดปุ่ม ส่งไฟล์ขึ้นก็จะได้รูปเฮดเดอร์ตามท่ีเลือกเอาไว้

การใส่ภาพพืน้หลัง

ขั้นตอนต่อมาคือการท ารูปพื้นหลังโดยเข้าไปที่เมนู สีพื้นหลังผมได้เลือกรูปพื้น

หลังมาจาก Internet ขนาดความกว้าง 344 พิกเซล ความสูง 230 พิกเซล

ส่วนวิธีการใส่พื้นหลังนั้นเหมือนกับการใส่รูปของเฮดเดอร์คือกดที่ปุ่ม เรียกดู

เพื่อเลือกไฟล์รูปที่จะใช้ขึ้นมา แล้วกดปุ่ม ส่งไฟล์ขึ้นก็จะได้รูปพื้นหลัง

วิธีการสร้างแถบเมน ู

ขั้นตอนที่จะกล่าวต่อไปนี้คือการท าแถบเมนู ซึ่งหน้าที่ของแถบเมนูคือการน า

เราไปสู่ส่วนต่างๆของเว็บไซด์ ซึ่งขั้นตอนการท าคือเข้าไปที่เมนู สร้างหัวข้อ

เมนู-หมวดรายการหลัก

ตั้งชื่อหัวข้อมูลตรง ต้ังชื่อเรื่องท่ีนี่ ส่วนด้านล่างจะเป็นเนื้อหาของข้อมูลต่างๆที่

เราต้องการให้มีในเว็บไซด์

ใส่ Widgets ต่างๆ

ต่อไปจะเป็นการสร้างเนื้อหาต่างของ Side Bar ซึ่งจะว่าด้วยเรื่องของการ

ตกแต่ง Widgets ต่างๆ

ลากไอคอน สร้างเมนูข้าง :Widgets ขึ้น เอง มาวางไว้ ใน Main

Sidebar ตามต าแหน่งที่ต้องการ จากนั้นคลิกไอคอน สร้างเมนู

ข้าง:Widgets อีกครั้งใส่โค้ด Widgetsที่ต้องการลงไป(ในรูปจะเป็น

โค้ดนาฬิกาดิจิตอลสีด า) ตรงชื่อเรื่องจะใส่หรือไม่ใส่ก็ได้ แต่ถ้าใส่ด้านบนของ

ตัว Widgets เองจะมีชื่อก ากับอยู่ด้วย เสร็จแล้วกดบันทึก โค้ดที่ใส่ลงไป

จะไปแสดงผลในหน้าเว็บทันท ี

ใส่รูปก ากับ Link

การใส่รูปก ากับ Link นั้นก่อนอื่นเราต้องมี Link แล้วจึงหารูปที่เกี่ยวข้อง

กับ Link มาใส่ ในที่นี้ผู้จัดท าเองท ารูปก ากับด้วยโปรแกรม Adobe

Photoshop CS3 ซึ่งขนาดรูปที่ใช้คือขนาดความกว้าง 301 พิกเซล

ความสูง 73 พิกเซล หลังจากได้รูปแล้วให้เข้าไปน าไฟล์รูปจะฝากไว้ในเว็บ

ฝากไฟล์แล้ว(ตามภาพผู้จัดท าฝากรูปไว้ที่เว็บ Photobucket)

หลังจากฝากไฟล์แล้วให้ Copy Direct Link เอาไว้ตามภาพ

หลังจากนั้นให้เข้าไปที่เมนูการเชื่อมโยง และเพิ่มการเชื่อมโยงใหม่ ใส่ชื่อของ

Link ต่อด้วย URL ของเว็บไซด์ปลายทาง ตรงการแสดงการเชื่อมโยงเลือก

ดูว่าถ้ากด Link แล้วจะให้ลิ้งปรากฏที่หน้าเว็บไซด์เดิมหรือแท๊บใหม่ แล้ว

สุดท้ายน า Direct Link ที่ Copy มาจากเว็บฝากไฟล์มาใส่ในช่อง

URLของภาพเพื่อก ากับLink กดปุ่มบันทึกที่ด้านบนขวามือเป็นอัน

เรียบร้อย

หน้าเวบ็ไซดท์ี่เสร็จสมบูรณ์