ใช้งาน WordPress กับ Menu Appearance  เป็นเมนูหลักของ Theme, Customize, Widget, Menu, Header, Editor *ยึดตามธีมหลัก Twenty Seventeen นะครับ โดยเราจะมาดูหน้าที่การทำงานของแต่หล่ะเมนู กันเลย เริ่มจาก

1. Theme

Apprance
Apprance

เข้ามาที่เมนูแรก เราจะเห็นธีมทั้งหมดที่เว็บไซต์ของเรานั้นมี ซึ่งถ้าเราใช้ ธีมใหนอยู่ ธีมนั้นจะขึ้น Active แถบดำๆ อยู่ และมีปุ่มสีฟ้า ที่เขียนว่า Customize อยู่เดี๋ยวเราจะมาพูดกันต่อ ส่วนถ้าเราต้องการจะเพิ่มธีมเข้าไปอีก จะเห็นปุ่ม ด้านบน ที่อยู่ข้างๆ Themes เขียนว่า Add New ซึ่งปุ่มนี้จะเป็นปุ่มไว้เพิ่มธีมนะครับ อะเรามาลองกดกันดู

 

Apprance
Apprance

หลังจากกด Add New แล้วเราจะพบกับ หน้าตาประมาณนี้ ที่เราเห็นธีมทั้งหมดนี้ สามารถใช้ได้ฟรีนะครับ เป็นธีมของทาง wordpress.org ซึ่งระบบจะเรียกธีมทั้งหมดที่มีในเว็บมาแสดงผลให้ในเว็บของเราแล้ว เราสามารถเลือกใช้ได้เลยเพียงแค่กด Install(ติดตั้ง) หลังจาก Install เสร็จก็กด Active(ใช้งาน) เพื่อเป็นการใช้ธีมนะครับ

โดยเราสามารถดูได้ตามเมนูด้านบนเลยว่าอยากได้แบบไหน มีทั้งแบบแนะนำ, ยอดนิยม, ล่าสุด และที่ท่านชื่นชอบ และเรายังสามารถฟิลเตอร์หาธีมได้ ตามที่เราอยากได้เลยอีกด้วย ทางผมแนะนำว่าให้เรากดเข้าไปดู Demo Preview ก่อนนะครับว่าอยากได้แบบไหน ถ้าเราอยากทำ Content เยอะๆ ข่าวๆ ผมแนะนำให้หาแบบ Magazine ถ้าอยากได้แบบเขียนเนื้อหาบล็อกก็หาแบบบล็อก ถ้าอยากได้แบบ บริษัท ก็หาแบบ Coporate

ธีมแต่หล่ะธีม มีประเภทในตัวมันเองอยู่ครับ อาจจะมีบางธีมที่เป็นแบบ Multipurpose หรือเอนกประสงค์ เอาไปใช้ได้หลากหลายรูปแบบ แต่ก็ให้ลองดูตามชอบครับ และอีกเรื่องพยายามหาธีมที่มี Document หรือวิธีใช้งานให้ดูนะครับ เพราะแต่หล่ะธีมการใช้งาน การติดตั้ง แตกต่างกัน บางธีมอาจจะใช้เพียงวิดเจ๊ตง่ายๆ หรือบางธีมจัด Virtual Composer มาให้เลยก็ต้องลองดูนะครับ

อ้าวแล้วถ้าผมซื้อธีมมาหล่ะ 

ก็สามารถติดตั้งได้ที่นี่เหมือนกันครับ ให้คลิ๊กที่ปุ่ม Upload Theme เลยครับ จะมี Dialog กล่องขึ้นมาเพื่อหาไฟล์ ธีมที่ท่านซื้อมา นามสกุลเป็น .zip นะครับ เพราะถ้าท่านซื้อธีมมา ผมคิดว่าธีมพรีเมี่ยมต่างๆ ก็น่าจะมีวิธีติดตั้งให้อยู่แล้ว เราก็อัพโหลดเข้าไปเลย แล้วธีมที่เราซื้อมาจะมีให้ท่านเลือกที่ Dashboard ของธีมเลยครับ ง่ายๆ เท่านี้ท่านก็จะได้ใช้ธีมที่ต้องการแล้ว

แต่ยังไม่จบนะครับเพราะนี่แค่การเลือกใช้ ธีม ยังไม่ได้พูดถึงการ Setup หรือตั้งค่าธีมเลย ให้สวยงามและแสดงผลให้ตามที่เราต้องการ

 

2.Customize

customize
customize

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

2.1 Site Identity
จะเป็นส่วนของการตั้งค่า ชื่อของเว็บไซต์ของเรา เมื่อคลิ๊กแล้วจะมีช่องกรอกข้อความ อัพโหลดภาพมาให้ ชึ่งจะมี logo เอาไว้อัพภาพ Logo ของเว็บเรา Site Title จะเป็นตัวกำหนดว่าเว็บเราชื่อว่าเว็บอะไร Tagline จะเป็นตัวบอก Description คือ รายละเอียดเว็บเราว่าทำอะไร Site Icon ในธีมนี้คือการอัพโหลด ภาพใหญ่ของเว็บ นะครับ

2.2 Color
จะเป็นตัวกำหนดสีของธีมเราทั้งหมด โดยธีมนี้จะมี ตัวเลือกว่าให้เป็น ธีมขาว Light ธีมมึด Dark หรือว่าจะเป็น Custom ปรับแต่งเอง

2.3 Header Media
จะเป็น ตัวเลือกพิเศษ ที่เอาไว้ให้เราอัพเป็น วีดีโอใช้แทน ภาพครับ หรือจะใช้เป็น URL จาก Youtube ก็ได้ เราจะได้ไม่ต้องอัพวีดีโอใหญ่ๆ

2.4 Menu
อันนี้จะเป็นตัวเรียกใช้ครับว่าจะเอาเมนูที่ชื่ออะไร มาใส่ในตำแหน่งไหน สำหรับธีมนี้จะมีเมนูให้ใส่อยู่ทั้งสิ้น 2 ตำแหน่งคือ Top Menu และ Social Links Menu ครับ

2.5 Widget
จะเป็นการให้เราตั้งค่าเลือกครับว่าต้องการให้เอา Widget อะไร มาใส่ที่ตำแหน่งไหน อ่านดีๆ นะครับให้เราเลือกได้ว่าจะใช้ Widget อะไรมาใส่ที่ตำแหน่ง จากธีมนี้จะมี Widget ทั้งสิน 3 ตำแหน่งนั่นคือ ตำแหน่งแรก Blog Sidebar หรือ ตำแหน่งด้านขวาของหน้าที่เอาไว้ใช้อ่านเนื้อหาครับ ,   ตำแหน่งที่ 2 Footer 1 คือ Widget ที่จะไปแสดงผลด้านล่างหรือที่เรียกกันว่า Footer, ตำแหน่งที่ 3 คือ Footer 2 ก็จะอยู่ที่ด้านล่างแต่เป็นตำแหน่งที่ 2 นะครับ ซึ่ง เดี๋ยวเราจะต้องมาดูกันต่อครับ ว่า Widget ที่มีมาให้ มีอะไรบ้าง เราสามารถเลือกมาใช้งานได้ทั้งหมด และหาส่วนเสริมหรือปลั๊กอินมาติดตั้งเพิ่มได้ครับ โดย Widget ในแต่หล่ะตำแหน่งก็สามารถที่จะวางได้หลายกี่ Widget ก็ได้ครับ *แต่หลังจากวาง เว็บจะมี พรีวิวให้ เราจะดูได้ด้วยครับว่าเข้ากันกับเว็บไซต์ของเราไหม

2.6 Homepage Setting
คือส่วนของการกำหนดว่าอยากให้หน้าแรกเป็นแบบไหนซึ่งโดยปกติก็จะมี 2 รูปแบบอยู่แล้วนั่นคือ Latest Posts หรือก็คือให้เรียงลำดับตามโพสต์ล่าสุดมาเลย หรือก็คือที่เราเห็นแสดงผลแบบบล็อกครับ กับอีก รูปแบบคือ A Static Page หรือก็คือตามที่เรากำหนดหน้าแรก Option แหละครับ ต้องอยู่ที่เราใช้ธีมไหนเพราะเมื่อเลือกแล้ว WordPress จะไปหาไฟล์หน้าแรก และแสดงผลตาม Code ที่ทางคนเขียนได้เขียนเอาไว้ครับ

2.7 Theme Options
สำหรับธีมนี้การจัดรูปแบบของธีมจะอยู่ที่เมนูนี้นะ ส่วนธีมอื่นๆ อาจจะแตกต่างออกไป บางธีมอาจจะใช้ตัวนี้ในการจัดการเหมือนกัน แต่โดยส่วนมากที่ผมเห็น จะมี Dashboard โดยเฉพาะของธีมนั้นๆ เลยครับ ซึ่งบางธีม Option เยอะมากๆ ทำให้ผู้ให้บริการขายธีมทำ Document เพื่อแนะนำการใช้งานออกมาครับ สำหรับธีมนี้จะมี Option คือ 1.Page Layout เอาไว้กำหนดว่าหน้าเว็บต้องการให้มี 1 Column หรือ 2 Column 2.Front Page Section 1 Content คือการกำหนด ว่าแต่หล่ะหน้าต้องการให้ใช้ Page ใหนมาโชว์ครับ

2.8 Additional CSS
คือการตกแต่งของเราเองซึ่งเราสามารถที่จะเขียน CSS เพื่อกำหนดสีสันหน้าตา ได้เองสำหรับผู้ที่เขียน CSS ได้นะครับ สามารถแปะโค้ดได้ที่ส่วนนี้เลยครับ

 

3.Widget

widget
widget

สำหรับ widget ผมไม่แน่ใจว่าภาษาไทย ใช้ว่าอะไร ผมขอเรียกทำศัพท์ว่า “วิดเจ็ต” นะครับ สำหรับหน้าที่ของ วิดเจ็ตแต่หล่ะตัวเช่น วิดเจ็ต Archive, วิดเจ็ต Audio ฯลฯ หน้าที่ของแต่หล่ะตัวนั้นต่างกันทั้งหมดนะครับ แต่ก็อาจจะมีบางตัวทำงานคล้ายๆ กัน อย่างตัวอย่างที่ผมยกมา

Archive
จะเป็นการแสดงผลตามเดือนที่เรามีโพสต์ ซึ่งเมื่อคลิ๊กตามเดือนนั้นๆ จะโพสต์ภายใต้เดือนนั้น ทั้งหมด

Audio
จะเป็นตัวที่เอาไว้โชว์ไฟล์ Audio นะครับหลังจากใช้จะมี ฟอร์ม ให้อัพโหลดไฟล์เพื่อให้แสดงผล

Calendar
จะโชว์ปฏิธิน และเมื่อเราคลิ๊กวันที่ในปฏิธินจะแสดงโพสต์ที่เรามีในวันนั้นๆ ครับ

Categories
จะเป็น Widget ที่เอาไว้แสดงหมวดหมู่ เฉพาะหมวดหมู่ในเว็บของเราที่มีทั้งหมดนะครับ สามารถเลือกว่าจะเอาแบบ Dropdown ได้ด้วย และเลือกได้ว่าอยากให้นับโพสต์ที่มีใน หมวดหมู่นั่นๆ ด้วยหรือไม่

ผมขอยกตัวอย่างไว้ประมาณนี้นะครับ เพราะว่า Widget มีเยอะมากๆ ต้องลองใช้ดูและปรับให้เข้ากับเว็บของเรา ส่วนอนาคตผมจะมาแนะนำ Widget ที่น่าใช้ให้อีกทีครับ ส่วนการใช้งานไม่ยากเลยเพียงแค่คลิ๊กและเลือกตำแหน่งที่ต้องการให้แสดงผล ก็จะเสร็จการใช้งาน อ่อผมเกือบลืม หลังจากที่เราเพิ่ม Widget ไปในตำแหน่งที่เราต้องการแล้ว จะมีช่อง Title ขึ้นมานะครับเพื่อที่จะให้เราสามารถกำหนดข้อความเหนือกล่อง Widget ได้เอง และจะแสดง Option ต่างๆ ที่ Widget นั้นมีให้ด้วยครับ

4. Menu

menu
menu

เมนูหรือ Navigator หรือ Navbar อะไรก็ตามที่เป็นตัวจัดการแสดงผลเมนู จะถูกจัดการที่ส่วนนี้เลย ทุกธีมที่ใช้ เมนู ต้องมาจัดการที่ส่วนนี้นะครับ หลักการทำงานของเมนูคือ เราต้องสร้างเมนูขึ้นมา เราสามารถมีได้หลายเมนูก็ได้ เมื่อเราตั้งชื่อให้กับเมนูและสร้างเสร็จแล้ว เราถึงจะมาเลือกอีกทีว่าต้องการให้เมนูนั้นๆ แสดงที่ตำแหน่งไหน ซึ่งส่วนของการแสดงผลนี้ต้องแล้วแต่ธีมครับว่ามีมาให้กี่ตำแหน่งและอะไรบ้าง

เอาหล่ะมาเริ่มวิธีการใช้งาน ให้สังเกตุที่ช่อง Menu Name ให้เรากรอกชื่อของเมนูที่เราต้องการเลยครับยกตัวอย่างเช่น Menu Top เพราะว่าเราต้องการให้แสดงเป็นเมนูหลัก หลังจากตั้งชื่อแล้วให้คลิ๊กปุ่มสีน้ำเงิน ที่เขียนว่า Create Menu เราก็จะทำการสร้างแล้ว

menu
menu

หลังจากนั้นเราก็มาเลือกครับว่าต้องการให้มีเมนูอะไรบ้าง โดยให้สังเกตุฝั่งซ้าย เมนูจะสีเข้มขึ้นเราก็เลือกได้เลยครับว่าอยากให้ Page, Posts, Categories ไหนมาโชว์บ้าง การเลือกก็ให้ติ๊กถูกที่กล่องหน้าชื่อเมนู แล้วกด Add To Menu หลังจากนั้นจะมีแถบเทาๆ มาโชว์ที่ฝั่งขวา ซึ่งด้านขวานี้เราสามารถ คลิ๊ก ค้างเพื่อ เลื่อนตำแหน่งได้ครับ จากตัวอย่างของผม ให้ Home, Categories Uncategoriezed เป็นเมนูหลัก และมีหมวด Uncategoriezed เป็นหมวดย่อยหรือซับเมนู อีกที ผมทดสอบให้ดูหน่ะครับ แล้วก็ติ๊กตำแหน่ง Top Menu เพื่อให้แสดงผลในตำแหน่งบนของเว็บไซต์ครับ

menu
menu

ตัวอย่างการแสดงผลนะครับ ทีนี้ผมคิดว่าน่าจะเข้าใจแล้ว Menu Top คือชื่อของเมนูที่เราสร้าง ให้เอาไปแสดงในส่วนของ Top Menu หรือก็คือตำแหน่งหลักครับ อยากให้เห็นข้อแตกต่างนะครับ

 

5. Header

header
header

จริงๆ เมนูนี้เป็น Options เฉพาะของธีมนี้มากกว่าครับ คือการเลือกภาพเพื่อแสดงเป็น ภาพโชว์ภาพหลักเฉยๆ เมื่อเราเข้าไป เราจะช่องให้กรอก URL หรือ อัพโหลดภาพนะครับ และจะมีภาพใหญ่ๆ โชว์เป็นภาพหลักของเว็บเรา

 

6. Editor

Editor
Editor

ผมขอบอกก่อนเลยว่าจริงๆ เมนูนี้ไม่ควรเข้าไปยุ่งกับมันนะครับ เพราะเป็นเมนูที่ทำให้เราสามารถแก้ Code อะไรก็ได้ภายในเว็บ สามารถที่จะวาง Code CSS, Javscript, PHP ได้ทั้งหมดแล้วเรียกใช้งานรันบนเซิฟเวอร์ด้วย หมายความว่า ถ้าเรามีเมนูนี้แล้วมีคนที่เราไม่อนุญาติให้เข้า มาเข้าระบบหลังบ้านของเรา เค้าสามารถแก้ได้ทุกอย่างเลย ตั้งแต่หน้าเว็บจนถึงกระทั่งฝั่งสคริปท์บทเว็บของเรา ผมแนะนำให้ปิดมันเลยครับ ควรจะให้ผู้เชี่ยวชาญ หรือผู้ที่ถนัดเขียน Code แก้ได้เท่านั้น

หลักคือถ้าเราต้องการ Code อะไรให้เลือกไฟล์นั้นๆ แล้วเขียนสคริปท์ลงไป กด Update File เป็นอันจบพิธีครับ เขียน นู่นนี่นั่นผิด เว็บก็พังเลยนะครับ Syntax ถ้าเขียนอะไรผิด

 

เอาหล่ะครับ สำหรับ เมนู Appearance หลักๆ สำหรับที่ผมนำมาเสนอ ของธีม Twenty Seventeen ก็มีเพียงเท่านี้ หากท่านเจอเมนูอื่นๆ เพิ่มเติม ก็อาจจะมาจากธีมที่ท่านใช้มีการเขียนเพิ่ม หรือปลั๊กอินที่ท่านเลือกใช้สร่างมันขึ้นมาใหม่ หากต้องการคำปรึกษาการ ใช้งาน WordPress ก็มาคุยกันได้นะครับ ทั้งทางเพจ I-MakeWeb หรือกลุ่ม สอนเขียน Theme Plugin WordPress ถาม – ตอบ เรื่อง WordPress นะครับกลุ่มผมเองยินดีให้คำปรึกษา หรือถ้าท่านถนัดอยู่แล้วอยากแบ่งปันความรู้ ก็เชิญนะครับ

หากชอบฝากแชร์บทความด้วยนะครับ ผมจะมีบทความอัพเดทมาให้อ่านเรื่อยๆ ทั้ง การใช้ WordPress พัฒนาธีม WordPress, Plugin WordPress การเขียน PHP, การสอน ทำเว็บ ผมจะมีบทความมาให้เรื่อยๆ แน่นอน ถ้าอยากได้เรื่องไหนก็ แสดงความคิดเห็นไว้นะครับ ถ้าเห็นว่าน่าสนใจจะทำให้ก่อนเลย ขอบคุณครับ