Theme Design & Customisation

Wordpressthai Theme Design

Theme Design & Customisation

By Supakit Srisawat

คำ�นำ� ร�ยง�นเล่มนี้จัดทำ�ขึ้นเพื่ออธิบ�ยหลักและขั้นตอนวิธีก�รพัฒน�WebThemeของWordpressโดย

ร�ยง�นเล่มนี้เลือกใช้โปรแกรมของWordpressในก�รออกแบบและพัฒน�Themeเพร�ะในWordpressมี

ก�รบริห�รก�รจัดก�รเว็บบล็อกอย่�งมีประสิทธิ์ภ�พซึ่งเร�ส�ม�รถเข้�ไปบริห�รจัดก�รได้ทั้งเว็บบล็อกผู้จัดทำ�มี

คว�มหวังอย่�งยิ่งว่�ผู้อ่�นจะได้ประโยชน์จ�กร�ยง�นเล่มนี้ไม่ม�กก็น้อยและห�กผิดพล�ดประก�รใดผู้จัดทำ�

ขออภัยไว้ณที่นี้ด้วย

ผู้จัดทำ�

น�ยศุภกิจศรีสวัสดิ์

ส�รบัญ

ประวัติผู้จัดทำ� 1

แนวคิดและก�รออกแบบ 2

ขั้นตอนของก�รออกแบบ 3

สรุปผลของก�รออกแบบและปัญห�ของก�รออกแบบ 11

ประวัติของผู้จัดทำ�

เพศช�ย

ตำ�แหน่งที่ตั้งกรุงเทพฯ,กล�ง,ไทย

แนะนำ�ตัวเกิดวันที่2กันย�ยน2531จบประถมศึกษ�ชั้นปีที่6โรงเรียนศรีวิกรม์

จบชั้นมัธยมต้นที่โรงเรียนสหะพ�ณิชน์จบชั้นปวช.ที่โรงเรียนสหะพ�ณิชน์ก�ร

กำ�ลังศึกษ�ระดับปริญญ�ตรีที่

มห�วิทลัยร�ฏจันทรเกษมส�ข�ศิลปกรรมเอกนิเทศศิลป์

คว�มสนใจแฟน.ครอบครัว.ฟุตบอล.หนัง..(เกือบทุกประเภท)

ภ�พยนตร์เรื่องโปรด-

ดนตรีโปรดclodpaly.oasis.franzferdinanthekillers.redhot.และเพลงแนวbitเกือบทุกเพลง

หนังสือโปรดเพชรพระอุม�.อ�ด�จิ.slamdunk.bukuman.onepiece.vagabord

แนวคิดและก�รออกแบบชื่อThemeที่ใช้TwentyTen

เหตุผลที่ใช้Themeนี้คือ

1.เป็นThemeที่มีคว�มเรียบง่�ยสีสันไม่เยอะจนเกินไป

2.เป็นThemeที่ส�ม�รถปรับแก้ไขได้ง่�ย

3.เป็นThemeที่มีส่วนประกอบหล�กหล�ยส�ม�รถสร้�งสันผลง�นได้

หล�ยรูปแบบ

ขั้นตอนของก�รออกแบบ

1.เริ่มต้นก�รด�วน์โหลดด�วน์โหลดโปรแกรมติด

ตั้งเวิร์ดเพรสภ�ษ�ไทยโดยก�รด�วน์โหลดนั้นให้

ไปด�วน์โหลดที่www.wordpressthai.comซึ่ง

เป็นWordpressของผศ.ประชิดทิณบุตร

2.หลังจ�กที่ได้ทำ�ก�รด�วน์โหลดโปรแกรมม�แล้วนั้นให้ทำ�

ก�รแตกไฟล์เมื่อแตกไฟล์ให้เข้�ไปที่ตัวโปรแกรมแล้วคลิก

ที่USBWebserverและเมื่อคลิกที่โปรแกรมแล้วให้คลิกที่

Localhostเพื่อที่จะไปจัดก�รกับWordpressต่อไป

3.เมื่อคลิกเข้�ที่Localhostแล้วก็จะเจอหน้�เว็บอย่�งนี้ขึ้น

ม�ก็ให้คลิกไปที่ตัวหนังสือสีแดงเพื่อที่จะทำ�ก�รจัดก�รบริห�ร

หน้�เว็บต่อไป

4.เมื่อคลิกเข้�ม�แล้วก็จะเจอกับที่ให้ใส่ชื่อIDและรหัสในก�รเข้�

ระบบให้พิมพ์ข้อคว�มว่�ADMINทั้ง2ช่อง

5.เมื่อเร�ทำ�ก�รล็อกอินเข้�ม�แล้วเร�จะ

เจอกับหน้�ของก�รจัดก�รระบบทั้งหมด

ซึ่งส�ม�รถบริห�รก�รจัดก�รได้เปลีบย

เหมือนทุกอย่�งของWordpress

6.เร�ทำ�ก�รเลือกชุดThemeที่ต้องก�รจะทำ�ม�พัฒน�ต่อ

ไปในที่นี้ได้เลือกThemeที่มีชื่อว่�TwentyTenโดยก�ร

เลือกThemeนั้นจะมีชุดคำ�สั่งอยู่ที่แถบข้�งของเมนู

7.เริ่มทำ�ก�รปรับแก้ไขชุดThemeของWordpress

โดยก�รเข้�ไปปรับแก้ที่ไฟล์ที่ชื่อว่�Rootซึ่งอยู่ในไฟล์ที่

เร�ทำ�ก�รแตกไว้ในตอนแรก

8.หลังจ�กที่เร�ได้เข้�ไปไฟล์ที่ชื่อว่�Rootแล้ว

นั้นมันจะมีไฟล์ที่อยู่ในRootอีกหล�ยร�ยให้

เร�คลิกที่ไฟล์ที่มีชื่อว่�Wp-content

9.หลังจ�กที่เข้�ไปในไฟล์นั้นแล้วก็ให้เร�เข้�ไปในไฟล์ที่

มีชื่อว่�ThemesTwentyTen

10.ในไฟล์นั้นมันจะมีไฟล์ส่วนหัวของThemeนั้นอยู่ให้เร�เลือกม�หนึ่งแบบ

เพื่อทำ�ก�รเปลี่ยนไฟล์รูปภ�พใหม่เพื่อให้ตรงกับเนื้อห�ของWordpress

11.เมื่อเร�ได้แบบที่ต้องก�รแล้วให้นำ�แบบนั้นม�

เพื่อทำ�ก�รใส่แบบในรูปแบบของเร�เองโดยก�ร

saveนั้นให้เร�saveเป็นชื่อเดิมหรือชื่อต้นแบบ

10.หลังจ�กที่เร�ได้ทำ�ก�รเปลียนแปลงในส่วนหัวของ

Wordpressนั้นแล้วมันจะแสดงอยู่ที่ก�รจัดก�รระบบใน

Wordpress

12.ภ�พนี้คือส่วนที่ทำ�ก�รปรับปรุงแล้ว

ภ�พส่วนหน้�Wordpressทั้งหน้�

สรุปผลของก�รออกแบบและปัญห�ของก�รออกแบบ

สรุปผลของก�รออกแบบโดยก�รออกแบบThemeนั้นผู้จัดทำ�ต้องก�รให้รูปแบบของง�นนั้นออกม�ในรูป

แบบของก�รท่องเที่ยวจึงอย�กจะทำ�ให้ดูมีชีวิตชีว�

ปัญห�ของก�รออกแบบ

เนื่องจ�กผู้ที่จัดทำ�ยังไม่มีคว�มรู้คว�มส�ม�รถม�กพอในเรท่องของโค้ดต่�งๆรวมไปถึงภ�ษ�HTMLนั้นด้วยจึง

ทำ�ให้ก�รออกแบบมันยังไม่สมบูรณ์ม�กนักหรืออย่�งที่มันควรจะเป็นต้องทำ�ก�รศึกษ�เพิ่มเติม