Tag: wordpress theme

แต่ละหน้าของ WordPress เรียกใช้งาน File ไหน
ในการสร้าง Theme WordPress นั้น ความรู้อีกอย่างที่เราควรมีก็คือ เราควรทราบว่าในแต่ละหน้าของเว็บ WordPress ของเรา เรียกใช้งาน File ไหนใน Theme ที่เราสร้างขึ้น โดยเราสามารถไปดูได้ที่ https://codex.wordpress.org/images/1/18/Template_Hierarchy.png ดูจากรูปแล้ว จะเห็นว่าสำหรับ Theme ที่เราสร้างขึ้นมา มีแค่ index.php ก็เพียงพอแล้ว (ไม่นับรวมพวก style.css)

แต่ผมจะมาแยกให้ โดยนำหน้าที่คิดว่าเป็นหน้าหลัก ๆ ที่ได้ใช้งานกันบ่อย ๆ มาอธิบายให้อ่านกันนะครับ

หน้า Home

หน้า Home นั้นก็คือ หน้าแรกที่เวลาคนเข้าเว็บเรามาแล้วก็เจอนั่นละครับ เราสามารถเลือกหน้า Home ของเราได้จาก Page ที่เราสร้างไว้ หรือไม่เลือกก็ได้ โดยตัว WordPress จะเลือก File ตามลำดับแบบนี้ครับ
- front-page.php
- home.php
- index.php
อธิบายง่าย ๆ คือ ในหน้า Home ของเรา WordPress จะหาว่า Theme ที่เราใช้งานอยู่ มันมี front-page.php มั้ย ถ้ามีก็จะเรียกใช้งาน front-page.php แต่ถ้าไม่เจอ ก็จะไปหา File ชื่อ home.php และ index.php ตามลำดับ

ปล. เลือก Page ที่จะเป็นหน้า Home ได้ที่ Settings => Reading ตามรูปนะครับ

เลือก A static page (select below) แล้วเลือก Page ที่ให้เป็นหน้า Home ที่หัวข้อ Front Page

หน้า Post

ใช้เว็บ WordPress แล้ว ไม่รู้จัก Post คงไม่ได้ หน้า Post อันนี้ก็คือ หน้าเดี่ยวของ Post นั้น ๆ คราวนี้หน้า Post เรามีลำดับการเรียก File ยังไงไปดูกันครับ
- single-posttype.php
- single.php
- index.php
ถ้าไปดูในรูป https://codex.wordpress.org/images/1/18/Template_Hierarchy.png มาจะเห็นว่า WordPress จะแบ่ง single post เป็นสามทาง แต่หลัก ๆ ที่เราใช้จะเป็น custom post กับ blog post โดยสาเหตุที่ผมเขียนลำดับแรกแค่ single-posttype.php เพราะว่า blog post นั้น post type ของตัว blog post ก็คือ post นั่นเอง ดังนั้นถ้าเป็น blog post จึงดู single-post.php เป็นลำดับแรก

ส่วน custom post นั้น ก็จะใช้ slug ของตัว custom post นั้นที่เราสร้างขึ้น วิธีสร้าง custom post ก็ดูตามอันนี้เลยครับ [WordPress] วิธีการสร้าง Custom Post Type อย่างง่าย

หน้า Page

หน้า Page นั้นจะมีให้เลือกพิเศษกว่าชาวบ้านเค้าหน่อย ตรงที่สามารถสร้าง Template ให้เลือกได้ มาดูลำดับการเรียกใช้ File ก่อนแล้วกันครับ
- customtemplate.php
- page-slug.php
- page-id.php
- page.php
- index.php
โดย Custom Template นั้น เราสามารถสร้างขึ้นได้ โดยสร้าง File ขึ้นมาแล้วใส่ตรงหัวของ File ว่า
[php]
<?php
/*
Template name: XXXXX
*/
?>
[/php]

ลองตามไปอ่านวิธีสร้าง Custom Template ได้ที่ [WordPress] สร้าง Custom Page Template

โดยที่สมมติเป็นหน้า Contact Us ซึ่ง slug ให้เป็น contact-us ตัว WordPress จะหา custom template ที่เราสร้างไว้ก่อน อาจจะชื่อ xyz.php ก็ได้ หรือ yuri.php ก็ได้ แล้วแต่เราจะสร้างขึ้น เพียงแต่หัวของ File นั้นต้องระบุชื่อ Template name ของตัวเองให้ตรงกับที่เราเลือกไว้ในตอนสร้าง Page Contact Us ขึ้นมา แล้วถ้าไม่มี custom template ละ WordPress ก็จะหา File ชื่อ page-contact-us.php และถ้า Page นั้นมี page id เท่ากับ 9 ดังนั้นถ้าไม่เจอ page-contact-us.php ก็จะใช้ page-9.php และ page.php, index.php ตามลำดับ

หน้า Category และ Tag

สองตัวนี้ จะมีลำดับการเรียกใช้ File ที่คล้าย ๆ กัน ต่างกันตรงที่ Category ก็จะใช้ File ที่นำหน้าด้วย category-xxx.php และ Tag ก็ใช้ File ที่นำหน้าด้วย tag-xxx.php มาดูลำดับกันครับ

Category
- category-slug.php
- category-id.php
- category.php
- archive.php
- index.php
Tag
- tag-slug.php
- tag-id.php
- tag.php
- archive.php
- index.php
หน้า Search

หน้า Search นั้นลำดับไม่ยากเลยครับ ง่าย ๆ แค่สองลำดับ
- search.php
- index.php
หน้า 404

ปิดท้ายด้วยหน้า 404 นะครับ ก็คล้าย ๆ กับหน้า Search คือมีสองลำดับง่าย ๆ แบบนี้ครับ
- 404.php
- index.php
ถ้าเรารู้ถึงลำดับการเรียก File ในแต่ละหน้าแล้ว ก็ทำให้เราสามารถสร้างให้หน้าที่เราต้องการ มีรูปแบบการแสดงผลที่แตกต่างจากหน้าอื่น ๆ ได้ตามที่เราต้องการนะครับ
September 2, 2012
อยากเป็น Top WordPress Developer ทำอย่างไร
เนื่องจากได้อ่านบทความของ Smashing Magazine ในหัวข้อ How To Become A Top WordPress Developer รู้สึกว่าเป็นประโยชน์กับคนที่อยากจะเป็น WordPress Developer เลยแปลมาให้ได้อ่านกัน (เอาไว้ให้ตัวเองมาคอยอ่านเหมือนกัน แหะๆ) แต่ออกตัวก่อนนะครับ ว่าไม่ได้เก่งภาษาอังกฤษอะไรมาก แล้วคงไม่ได้แปลตามตัวอักษรจากต้นฉบับแบบเป๊ะ ๆ คงมีอะไรที่เป็นคำพูดของผมเองเหมือนกันนะครับ ^^

ต้องทำความเข้าใจกันก่อนว่า การจะเป็น Top WordPress Developer นั้น เราต้องใช้ทั้งเวลา ใช้ทั้งพลังงาน ใช้ทั้งความพยายาม มันไม่มีทางลัด หรือวิธีง่าย ๆ หรอกครับ

ถ้าแค่คุณสามารถ ติดตั้ง WordPress, อ่านบทเรียน, ปรับแต่งธีมได้บ้าง นั่นไม่ได้เรียกว่าคุณเป็น Top Developer คุณเป็นแค่ “Expert” หรือคุณแค่มีความรู้มากกว่าคนทั่ว ๆ ไป แต่ Top Developer คือ เราควรรู้ให้ลึกมากกว่าพื้นฐาน เราต้องสามารถประยุกต์ รวมถึงให้ข้อมูลกับผู้อื่นได้

ทำไมต้องอยากเป็น Top WordPress Developer ละ

ถ้าอย่างนั้นถามกลับว่า ทำไมถึงไม่อยากเป็นละ ถ้าคุณทำงานกับ WordPress หรือวางแผนจะเริ่ม ทำไมถึงเลือกที่จะอยู่ในระดับที่คนทั่ว ๆ ไปเป็น มันคนเป็น WordPress Developer ทั่ว ๆ ไปอยู่มากมายแล้ว แต่ถ้าจะหาเหตุผล ก็ให้ลองมองว่าเมื่อเราเป็น Top WordPress Developer แล้วนั้น
- ทำเงินกับมันได้ : ตอนนี้มีลูกค้าต้องการคนมาพัฒนา WordPress อยู่เยอะ และลูกค้าก็พร้อมที่จะจ่ายเงินให้กับคนที่เจ๋ง ๆ ในสายงาน WordPress
- ได้ลูกค้าชั้นดี : เมื่อคุณมาอยู่ในระดับแนวหน้าแล้ว คุณก็สามารถเลือกลูกค้าได้ คุณสามารถบอกปฎิเสธกับโปรเจคงานที่คุณไม่ต้องการ และตอบตกลงกับโปรเจคที่คุณอยากทำ
- ทำให้เป็นผู้นำทางความคิด : เมื่อคุณอยู่ในระดับแนวหน้าแล้ว คุณจะกลายเป็นผู้นำทางความคิด และความสามารถของคุณจะมีอิทธิพล ที่จะช่วยกำหนดทิศทางของ WordPress ในอนาคตได้
ขอเวลา 1 ชั่วโมงต่อวันในการอ่าน

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

ถ้าจะให้ดี เพื่อที่เราจะได้มีสมาธิในการเรียนรู้ เลิกแชทก่อน ปิดเสียงมือถือ และตั้งใจอ่าน ทำให้เป็นนิสัยแล้วคุณจะรู้สึกว่า เวลามันผ่านไปเร็วกว่าที่คิด และทำให้คุณอ่านได้นานมากขึ้น หรือคุณจะเปลี่ยนมาใช้เป็นวิธีอ่าน 3 ชั่วโมง 2 หรือ 3 ครั้งต่อสัปดาห์

(ทาง Smashing Magazine ก็โฆษณาหนังสือของเค้า Smashing Book #3 โดยในหนังสือจะมีหัวข้อเกี่ยวกับเรื่องพวกนี้อยู่)

ลงทะเทียนเรียนในมหาวิทยาลัย WordPress

ตอนเห็นหัวข้อ ก็คงคิดใช่มั้ยครับ ว่ามหาวิทยาลัยไหนมีให้ลงทะเบียนเรียนด้วยเหรอ ตามความเป็นจริงก็คือ WordPress นั้นมีข้อมูลให้เราเรียนรู้อยู่มากมาย แค่คุณมีเวลาและตั้งใจที่จะศึกษามัน ก่อนที่คุณจะมีประสบการณ์ในการทำงาน คุณต้องมีการเรียนรู้ไว้ก่อน ดังนั้นเริ่มต้นได้แล้ว อย่ามัวแต่รอ การรอมันขัดขวางการเรียนรู้ของคุณไว้อยู่

พบปะกับกลุ่มคนชั้นนำ

คบคนพาลพาลพาไปหาผิด คบบัณฑิตบัณฑิตพาไปหาผล เหมือนกันครับ ถ้าเราอยากเป็น Top WordPress Developer เราก็ต้องมีการติดต่อสื่อสารกับกลุ่มคนเหล่านี้บ้าง ไม่ว่าจะเป็นการอ่าน blog ของเค้า หรือ follow เค้าใน twitter รวมถึงให้ข้อเสนอแนะเวลาที่พวกเค้าต้องการ ถ้ามีโอกาสไป WordCamps ซะ ไปเจอและฟังที่พวกเค้าคุยกัน

ด้านล่างเป็นรายชื่อส่วนหนึ่งของกลุ่มนักพัฒนา WordPress
- Andrew Nacin (@nacin)
- Alex King (@alexkingorg)
- Bill Erickson (@billerickson)
- Carl Hancock (@carlhancock)
- Cory Miller (@corymiller303)
- Mark Jaquith (@markjaquith)
- Matt Mullenweg (@photomatt)
- Mike Schinkel (@mikeschinkel)
- Nathan Rice (@nathanrice)
- Peter Westwood (@westi)
- Jeff Starr (@perishable)
- Joost de Valk (@yoast)
- Justin Tadlock (@justintadlock)
- Silviu-Cristian Burcă (@scribu)
อ่านเนื้อหาที่เกี่ยวข้อง

อยากจะบอกว่า เนื้อหาเกี่ยวกับ WordPress มีอยู่มากมายในเว็บ WordPress เองอยู่แล้ว มีคนอยู่มากมายที่คุยเกี่ยวกับ WordPress ดังนั้นคงเป็นการยากที่จะกรองเนื้อหาที่จะอ่าน ดังนั้นถ้าจะเริ่มต้น คุณควรเริ่มต้นกับเนื้อหาที่มีคุณภาพที่คุ้มค่ากับเวลาที่จะใช้ไป
ด้านล่างเป็นแหล่งของเนื้อหาที่จะเริ่มต้นกับ WordPress
- WordPress Codex : ที่นี่ คือกรุสมบัติที่รวมทุกอย่างเกี่ยวกับ WordPress ไว้ คุณอาจจะเริ่มต้นกับพื้นฐาน แล้วค่อย ๆ ลงลึกไป เรียนรู้ WordPress semantics รวมถึงศึกษาเกี่ยวกับการออกแบบธีม และพัฒนาปลั๊กอิน
- หนังสือที่เกี่ยวกับ WordPress : มีหนังสืออยู่เยอะพอสมควรที่เขียนเกี่ยวกับ WordPress อย่าคิดว่า “WordPress For Dummies” มันพื้นฐานเกินไป คุณอาจจะให้ลูกค้าของคุณอ่าน และรับรู้ถึงมุมมองของเค้า เมื่ออ่านจบ คุณอาจจะเขียน Review และขอบคุณคนเขียน
- Blog เกี่ยวกับ WordPress : หาและติดตาม blog เกี่ยวกับ WordPress เมื่ออ่านจบ ก็ให้ข้อเสนอแนะ คอมเม้นท์คนเขียนเกี่ยวกับบทความของเค้า มี blog มาแนะนำคือ WordPress on Smashing Magazine, WP Tuts+, WP Candy
ทำความเข้าใจเทคโนโลยี

ถ้าคุณอยากเป็นผู้เชี่ยวชาญเรื่อง WordPress คุณควรรู้เทคโนโลยี ควรทำให้ความรู้ของคุณทันสมัย ลองมาดูกันว่ามีเรื่องที่ควรรู้อะไรบ้าง
- เรียน PHP และ MySQL : เรื่องนี้เป็นเรื่องสำคัญมากที่คุณต้องมีความรู้ PHP และ MySQL ถ้าคุณจะเริ่มต้นเรียนรู้มี Lynda.com หรือ Learnable.com รวมถึง MySQL performance
- สำรวจ Codebase : สละเวลาที่จะสำรวจดู Codebase ของ WordPress (WordPress codebase on Trac, WordPress codebase on Xref) อ่านคู่มือต่าง ๆ เพื่อทำความเข้าใจว่ามันทำงานอย่างไร
- ใช้งาน Nightly : ติดตั้ง WordPress ในเครื่องของเรา และติดตั้ง nightly build เพื่อตามติดการเปลี่ยนแปลงสำหรับที่เราจะใช้ในการพัฒนาต่อไป
- อ่าน “Make WordPress” : ทำความเข้าใจเทคโนโลยีเพื่อนำไปใช้ในการพัฒนา โดยดูที่ make.wordpress.org คุณสามารถติดตามการพูดคุยเกี่ยวกับ Core Plugins และ Themes สำหรับผู้เริ่มต้นได้
หมั่นฝึกฝน

เมื่อคุณเรียนรู้อะไรมา อย่าลืมที่จะฝึกฝน ทดลองใช้งาน ง่าย ๆ เลยอย่างแรกที่คุณต้องทำคือ สร้างเว็บ WordPress ของคุณเองขึ้นมา และเมื่อไปเจอบทความการสอนอะไร ก็ให้มาทดลองทำกับเว็บคุณเอง
- WordPress APIs : แน่นอนว่าเริ่มต้นศึกษาที่เว็บของ WordPress เองเลย รายชื่อของ APIs สำหรับ WordPress ลองศึกษาการใช้งาน API แต่ละตัวดูเพื่อจะได้นำไปประยุกต์ใช้งาน
- Ajax in WordPress : คิดว่าคุณน่าจะเคยได้ยินเกี่ยวกับ Ajax มาบ้างแล้ว คราวนี้ถึงเวลาที่คุณต้องเรียนเกี่ยวกับ การใช้ Ajax กับ WordPress แล้วละ ซึ่งมันสามารถพัฒนาไปเป็นใช้ Ajax พัฒนา Plugin อย่าลืมที่จะศึกษาเพิ่มเติมไปเรื่อย ๆ เพื่อสะลมประสบการณ์ในการใช้งาน
- WordPress PHP Class : รายชื่อ PHP Class ที่ WordPress สร้างไว้ ทดลองใช้งานแต่ละตัว เพื่อที่คุณจะได้รู้วิธีการใช้งานมัน และอยากให้ศึกษาตัว WP_Query, WP_Theme และ wpdb เป็นพิเศษ
เก็บประสบการณ์การใช้ WordPress

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

ออกไปหาลูกค้า

ทำงานกับลูกค้า ไม่ว่าจะได้เงินหรือทำฟรี ก็เป็นอีกทางในการสะสมประสบการณ์ของคุณ ลูกค้าจะมีปัญหา มีข้อเสนอแนะที่คุณจะไม่ได้เจอในการทำโปรเจคของตัวเอง ถ้าคุณเพิ่งเริ่มแล้วยังไม่รู้จะหาลูกค้ายังไง ลองอ่าน learn how to get get your first client เก็บประสบการณ์ไปเรื่อย ๆ ไม่ว่าจะเป็นงานขนาดใหญ่ หรืองานขนาดเล็ก

ลองทำธีมแจก

ลองทำธีมที่คุณใช้งานบ่อย แล้วขายหรือแจก เพื่อรับฟังข้อเสนอแนะที่คุณจะได้รับจาก developer ด้วยกันหรือ ผู้ใช้งานทั่ว ๆ ไปที่ใช้ธีมของคุณ ขอความคิดเห็นจาก theme designer ที่คุณรู้จัก แล้วนำทุกข้อเสนอแนะมาพิจารณา เพื่อปรับปรุงธีมของต่อไป

ลองทำ Plugin

หลังที่ศึกษาและทำงานกับ WordPress มาซักพักแล้ว คุณจะเจอความต้องการที่แต่ก่อนไม่เคยเจอมาก่อน สิ่งที่เติมเต็มส่วนนั้นก็คือ plugin คุณก็ประยุกต์สิ่งที่คุณศึกษามาเกี่ยวกับการพัฒนา plugin สร้าง plugin ที่มีความปลอดภัยและตอบโจทย์ความต้องการได้ตรงจุด อย่าลืมที่จะแจกจ่าย หรือทำขาย เพื่อเก็บข้อเสนอแนะจากคนอื่นในการปรับปรุง plugin ของเราต่อไป

// หมดแรงแล้วครับ แหะ ๆ ถ้ามีแรงจะมาแปลต่อนะครับ ภาษาง่อยไปบ้าง ให้อภัยกันด้วยนะครับ >_<
August 27, 2012
[WordPress] Class ที่เราไม่ควรลืมในการเขียน CSS

เวลาเราสร้าง WordPress Theme ขึ้นมานั้น แน่นอนว่า CSS เป็นส่วนประกอบสำคัญอย่างหนึ่งเลย โดยตัว WordPress จะยึดตัว style.css เป็นหลัก และใน style.css นั้นเราควรมี Class เหล่านี้อยู่ด้วย

Class ที่ควรมีใน CSS ของเรา

ถ้ามีคำถามว่า ทำไมถึงต้องมี Class เหล่านี้อยู่ด้วย คำตอบคือ จะมี Class บางตัวที่ตัว WordPress จะสร้างขึ้นมา ซึ่งส่วนใหญ่จะเกี่ยวข้องกับการจัดการรูปภาพ เช่น จัดชิดซ้าย, จัดซิดขวา เป็นต้น เราจึงจำเป็นต้องสร้าง CSS มาเพื่อรองรับ Class เหล่านี้

CSS ตัวอย่างของ Class ที่ควรจะมีใน CSS ของเรา

[css]
/* =WordPress Core
————————————————————– */
.alignnone {
margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
display: block;
margin: 5px auto 5px auto;
}

.alignright {
float:right;
margin: 5px 0 20px 20px;
}

.alignleft {
float: left;
margin: 5px 20px 20px 0;
}

.aligncenter {
display: block;
margin: 5px auto 5px auto;
}

a img.alignright {
float: right;
margin: 5px 0 20px 20px;
}

a img.alignnone {
margin: 5px 20px 20px 0;
}

a img.alignleft {
float: left;
margin: 5px 20px 20px 0;
}

a img.aligncenter {
display: block;
margin-left: auto;
margin-right: auto
}

.wp-caption {
background: #fff;
border: 1px solid #f0f0f0;
max-width: 96%; /* Image does not overflow the content area */
padding: 5px 3px 10px;
text-align: center;
}

.wp-caption.alignnone {
margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
margin: 5px 0 20px 20px;
}

.wp-caption img {
border: 0 none;
height: auto;
margin: 0;
max-width: 98.5%;
padding: 0;
width: auto;
}

.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
margin: 0;
padding: 0 4px 5px;
}
[/css]

ซึ่งตัวอย่างนี้ ก็นำมาจากในเว็บของ wordpress.org เอง ซึ่งเราสามารถนำไปปรับเปลี่ยนได้ตามที่เราต้องการนะครับ

July 30, 2012
[WordPress] ใส่ class ให้ tag body เพื่อใช้ในการปรับแต่ง
ในการเขียนเว็บนั้น ตัว tag body ถือว่าเป็น tag ที่คลุมตัวเนื้อหาของเราไว้ ดังนั้นการที่เราใส่ class ให้กับตัว body ก็จะทำให้เราสามารถใช้ CSS ในการควบคุมการแสดงผลได้หลากหลายมากขึ้น โดย WordPress เองได้เตรียมคำสั่งที่ใช้สำหรับใส่ class ให้กับตัว tag body อยู่แล้ว นั่นก็คือ body_class เรามาดูวิธีการใช้งาน body_class กันนะครับ

body_class

วิธีใช้ง่าย ๆ ครับ ก็แค่ใส่ body_class ไปใน tag body เลยครับ

[php gutter=”false”]
<body <?php body_class(); ?>>
[/php]

แล้ว WordPress จะสร้าง class มาให้เราเอง โดยตัวอย่าง class ที่สร้างขึ้นให้ เช่น
- home : ถ้าเป็นหน้า home
- search : ถ้าเป็นหน้า search
- postid-XXX : ถ้าเป็นหน้า post จะใส่ postid- ตามด้วยเลข ID ของ post นั้น
- logged-in : ถ้าเราทำการ login ไว้อยู่
- page-id-XXX : ถ้าเป็นหน้า page จะใส่ page-id- ตามด้วยเลข ID ของ page นั้น
เป็นต้น

ตัวอย่าง class ที่ WordPress สร้างขึ้น

[php gutter=”false”]
<body class="page page-id-18 page-template page-template-page-tools-php logged-in admin-bar">
[/php]

จะเห็นว่า มันได้สร้าง class ต่าง ๆ ขึ้นมา โดย class ที่สร้างขึ้นมานั้นก็บอกได้ว่า นี่เป็นหน้า page โดยเป็น id เลขที่ 18 ใช้ template คือ page-tools.php และ login อยู่ รวมถึง admin-bar ปรากฎอยู่ แต่ class ที่ WordPress สร้างขึ้นนั้น จะไม่มีเกี่ยวกับ category เลย เราจะมีวิธียังไง ให้มันมี class เกี่ยวกับ category ละ

เพิ่ม class เกี่ยวกับ category ลงใน body_class

ให้นำ code นี้ไปแปะใน functions.php

[php]
// add category nicenames in body class
function category_id_class($classes) {
global $post;
foreach((get_the_category($post->ID)) as $category)
$classes[] = $category->category_nicename;
return $classes;
}

add_filter(‘body_class’, ‘category_id_class’);
[/php]

โดยเราสามารถนำไปประยุกต์ใช้งานได้ ว่าอยากจะให้เป็น class อย่างไรบ้าง อย่าง code ที่ยกตัวอย่างนั้น จะมี class เป็นชื่อของ category ผสมไปใน body_class ปรกติด้วย

วิธีใช้งาน body_class เพิ่มเติม

เราสามารถเพิ่ม class ที่เราต้องการได้ในคำสั่ง body_class ได้ง่าย ๆ โดย

[php gutter=”false”]
<body <?php body_class( ‘rabbitinblack’ ); ?>>
[/php]

คือ การใส่ class ชื่อ rabbitinblack เข้าไปเพิ่มเติมจาก body_class เดิม

นำ body_class ไปประยุกต์ใช้กับ CSS

การที่เราใส่ class ให้ tag body นั้น จะทำให้เราสามารถควบคุมการแสดงผลได้มากขึ้น โดยสมมติว่า ปรกติ div ที่มี id ชื่อ content กว้าง 900px แต่ในหน้า page ที่มี id เป็น 18 จะให้กว้างแค่ 500px เราก็สร้าง CSS แบบนี้ครับ

[css]
#content { width:900px; }
.page-id-18 #content { width:500px; }
[/css]

ซึ่ง class ที่สร้างมาก็มีอยู่หลากหลาย ดังนั้นเราก็ทำ CSS ของเราในการควบคุมได้มากขึ้นจากเดิม ลองไปประยุกต์ใช้งานดูนะครับ
January 9, 2012
วิธีใช้ WordPress ตอนที่ 11 – WordPress Theme

สิ่งหนึ่งที่ทำให้ WordPress เป็นที่นิยมก็คือ มี Theme ให้เลือกมากมาย ไม่ว่าจะเป็นแบบฟรี หรือแบบเสียเงิน เรามาดูวิธีการปรับแต่ง Theme กันนะครับ

วิธีใช้ WordPress : Themes

ที่เมนู Appearance จะมีหัวข้อ Themes อยู่

โดยในส่วน Current Theme นั้นคือ Theme ที่เราใช้งานอยู่ และมีรายละเอียดต่าง ๆ ของ Theme อยู่

ส่วน Available Themes คือ Theme ที่เราได้ติดตั้งไว้

เราสามารถติดตั้ง Theme เพิ่มได้ในหัวข้อ Install Themes ซึ่งเราสามารถ search หา Theme เพื่อใช้งานได้

แต่ถ้าไม่อยากค้นหา แนะนำให้เลือกหัวข้อ Featured ซึ่งจะมี Theme ที่แนะนำอยู่

สมมติว่าผมเจอ Theme ที่ผมต้องการแล้ว เราสามารถกดที่ preview เพื่อดูตัวอย่างก่อน

หรือกด Install เพื่อติดตั้ง

กรอกข้อมูลของ FTP ของเราเพื่อทำการอัพโหลด Theme เข้าเว็บเรา

หลังติดตั้งเสร็จแล้ว เราก็กด Activate เลยครับ

ในส่วนของ Current Theme จะเปลี่ยนไปเป็น Theme ที่เราเพิ่งติดตั้งไป

หน้าเว็บของเราก็จะเป็น Theme ที่เราติดตั้งแล้วครับ

แต่ถ้าเรามีไฟล์ Theme ที่เราต้องการอยู่แล้ว ให้ทำการ Upload ได้เลยครับ

ซึ่งขั้นตอนต่าง ๆ ก็คล้าย ๆ กับการ Search หาเพื่อติดตั้งเลยครับ ก็ใส่ข้อมูล FTP ของเรา และ Activate Theme ที่เราติดตั้ง

หลังจากนี้เวลาเจอ theme ที่ถูกใจ เราก็ดาวน์โหลดมาติดตั้งเว็บของเราได้แล้วนะครับ ^^

January 2, 2012
[WordPress] ดึง template แต่ละส่วนที่เขียนไว้ด้วย get_template_part
ในการทำ WordPress Theme นั้น Template หลัก ๆ ที่เรามีการใช้งาน จะมีส่วนของ header ซึ่งจะมี get_header(), footer ซึ่งจะมี get_footer() และ sidebar ที่จะมี get_sidebar() แล้วถ้าเราจะสร้าง Template ส่วนอื่น ๆ นอกเหนือจากนี้ละ จะมีวิธีการใช้งานอย่างไร

WordPress : get_template_part

ยกตัวอย่างเป็นส่วนของเมนู หรือส่วนของ nav เพราะคิดว่าเป็นส่วนที่ทุกเว็บน่าจะมีอยู่แล้ว เราก็สร้างไฟล์ชื่อ nav.php (จะตั้งชื่อว่า abc.php, navigation.php หรือ gee.php ก็แล้วแต่จะตั้งชื่อกันนะครับ แต่ตั้งให้ชื่อสื่อความหมายจะดีกว่านะครับ) โดยในไฟล์ nav.php นั้น เราก็เขียน code สำหรับเมนูเราตามปรกติ เช่น

[php]
<div id="nav">
<?php wp_nav_menu( array(‘menu’ => ‘Main Menu’, ‘container’ => ”, ‘menu_id’ => ‘mainnav’, ‘menu_class’ => ‘clearfix’,’depth’=>’1′) ); ?>
</div>
[/php]

คราวนี้ตำแหน่งที่เราต้องการจะใส่เมนูลงไป ก็ใส่ code ไปว่า

[php]
<?php get_template_part(‘nav’); ?>
[/php]

ทีนี้เวลาเราจะแก้ไขเมนู เราก็แก้ไขที่ไฟล์ nav.php ที่เดียว แล้วทุกที่ที่ใช้งานเมนูจาก nav.php ก็จะเปลี่ยนตาม

แต่สมมติในหน้า single.php เราอยากจะใช้เมนูอีกแบบ เราสามารถสร้างไฟล์ชื่อ nav-single.php มาเพื่อใช้งานเฉพาะหน้า single.php ก็ได้ โดยจะเรียกใช้งานแบบนี้ครับ

[php]
<?php get_template_part(‘nav’,’single’); ?>
[/php]

WordPress : get_template_part กับ child theme

แต่สิ่งสำคัญของ get_template_part นั้นคือการใช้ร่วมกับบรรดา child theme ทั้งหลาย เพราะ get_template_part จะมีหลักการค้นหาไฟล์แบบนี้ครับ สมมติเราเขียน code ว่า

[php]
<?php get_template_part(‘loop’,’index’); ?>
[/php]

มันก็จะไปหา loop-index.php ใน child theme ก่อนว่ามีมั้ย ถ้าไม่มีมันจะหา loop.php ใน child theme ถ้าไม่มีอีกจึงจะไปหา loop-index.php และ loop.php ใน theme หลักตามลำดับ เขียนเรียงลำดับได้ดังนี้
1. loop-index.php ใน child theme
2. loop.php ใน child theme
3. loop-index.php ใน theme หลัก
4. loop.php ใน theme หลัก
ลองนำไปประยุกต์ใช้งานกันดูนะครับ ^^
December 28, 2011