Introducing _s (Underscores) and Reab Reab WordPress Theme. Design by MennStudio.com, Article by VaivaiSoft.com

1. _S (UNDERSCORES)
แนะนำ อันเดอรสกอร: โครงธีมเวิรดเพรส

2. WordPress (& otherCMSs)
WordPress และ CMS โดยทั่วไป มีระบบที่แบ่งเนื้อหา (Content) กับการส่วนแสดงผล (Presentation) ออกจากกัน
ธีม (Theme) คือส่วนที่นำเนื้อหามาแสดงผลในรูปแบบที่ต่างกัน ระบบที่ดี คือระบบที่เมื่อเราเปลี่ยนธีม หน้าตาเว็บจะเปลี่ยนไปทันทีโดยไม่กระทบต่อตัวเนื้อหาเลย
Content Presentation
Theme

3. WordPress Theme
WordPress ออกแบบระบบธีม เพื่อให้ทุกคนสามารถร่วมกันใช้งานและดัดแปลงเองได้
ปัญหา: ระบบธีมนี้ยังยากต่อคนทั่วๆ ไปที่ไม่ได้มีพื้นฐานด้านการพัฒนาระบบจะทำความเข้าใจได้
http://marktimemedia.com/redesigning-the-template-hierarchy/
Too complicated forbeginners

4. Solution 1: Theme Framework
ทางแก้: มีคนสร้าง “ธีม เฟรมเวิร์ค” ขึ้นมา ซึ่งปัจจุบันมี 2 ลักษณะใหญ่คือ 1) เป็นชุดโค้ด/ฟังก์ชัน/ไลบรารีสำเร็จรูป ให้เอาไปเขียนโค้ดต่อ
2) เป็นธีมฐานให้เอาไปเป็น “ธีมแม่ (Parent Theme)” แล้วพัฒนา “ธีมลูก (Child Theme)” เพื่อเรียกใช้อีกที (ไม่แก้โค้ดที่ธีมแม่)
Theme Framework (in my term) is
1. A "drop-in" code library that is used to
facilitate development of a Theme
2. A stand-alone base theme that is intended
eitherto be used as a Parent Theme template
see more at http://codex.wordpress.org/Theme_Frameworks

5. Example: Genesis Framework
ตัวอย่าง: Genesis เตรียมสิ่งที่จำเป็นในการใช้งานเว็บไซต์ปัจจุบัน และต้องพึ่งความสามารถด้านเทคนิคพัฒนาเช่น: SEO, Security เป็นพื้นฐานใน Framework
แล้วอนุญาตให้ผู้ใช้งานปรับแต่งที่ Theme Option / สร้าง Child Theme เพื่อใช้งานต่อตามความต้องการของตน Framework แบบนี้เรียกว่า Option-based Framework
http://www.studiopress.com/features

6. Problems of Framework
ปัญหาของเฟรมเวิร์ค: ก็ยังซับซ้อนสำหรับผู้เริ่มต้นอยู่ดี การออกแบบ Option มักไม่ครอบคลุมการใช้งานทุกกลุ่ม บ้างขาด บ้างเกิน
หากจะพัฒนาต่อได้ดี ก็ต้องรู้ทั้งแนวคิดและโค้ดของเฟรมเวิร์ค แล้วก็ต้องรู้แนวคิดและโค้ดของเวิร์ดเพรสอีกด้วย
Still too complicated forbeginners
Lots of options / settings
Have to learn framework concept & code
(and also WordPress concept & code)

7. Solution 2: StarterTheme
Start Theme หรือธีมเริ่มต้น คือธีมที่ออกแบบมาเป็นฐานเพื่อให้ผู้ใช้งานนำธีมนี้ไปปรับแต่งต่อไปในตัวธีมนี้เลย โดยไม่ใช้ผ่าน Theme Option หรือสร้าง Child Theme
เน้นการออกแบบชื่อไฟล์ต่างๆ ให้อ่านเข้าใจง่าย ผู้ใช้เห็นแล้วทราบทันทีว่าต้องแก้อะไรที่ไฟล์ไหน และออกแบบโค้ดให้ผู้ใช้ทั่วไปอ่านได้รู้เรื่อง ไม่จำเป็นต้องเป็นผู้พัฒนา
Startertheme is meant to be worked with, tweaked, and styled.
It is not a framework ora parent theme to be extended.
It is supposed to become a theme of its own, when finished.

8. Underscore
“คุณไม่จำเป็นต้องรู้ PHP หรือการเขียนโค้ดก็ได้ แค่ปรับแต่งผ่าน CSS และ HTML แค่นี้ก็ได้ธีมเวิร์ดเพรสเจ๋งๆ ได้ละ!”
"You really don’t need to know any PHP orbe a programmerto be able to use
Underscores. As long as you’re somewhat comfortable with CSS and some
HTML, Underscores can help you build the next great WordPress theme!"
http://wptavern.com/introduction-to-underscores-a-wordpress-starter-theme-with-konstantin-obenland

9. Create WP Theme
ไปที่เว็บ http://underscores.me/ แล้วใส่ข้อมูลธีมที่ต้องการ คลิก Generate เราจะได้ไฟล์ธีมมาใช้งาน
Go to http://underscores.me/ and click “GENERATE”

10. Edit style.css
แก้ไขไฟล์ style.css เพื่อใส่ข้อมูลที่จำเป็นของธีม และเพื่อแก้ไขการแสดงผล
/*!
Theme Name: Reab Reab!
Theme URI: https://github.com/MennStudio/ReabReab!
Author: MennStudio!
Author URI: http://www.MennStudio.com/!
Description: For simple web pages (with Thai font)!
Version: 0.1!
License: GNU General Public License v2 or later!
License URI: http://www.gnu.org/licenses/gpl-2.0.html!
Text Domain: reabreab!
Domain Path: /languages/!
Tags: light, one-column, featured-images!
!
This theme, like WordPress, is licensed under the GPL.!
Use it to make something cool, have fun, and share what you've learned with others.!
!
Reab Reab is based on Underscores http://underscores.me/, (C) 2012-2014 Automattic, Inc.!
!
Resetting and rebuilding styles have been helped along thanks to the fine work of!
Eric Meyer http://meyerweb.com/eric/tools/css/reset/index.html!
along with Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/!
and Blueprint http://www.blueprintcss.org/!
*/

11. Reab Reab Theme
ธีม “เรียบ เรียบ” ออกแบบมาเพื่อแสดงแนวทางการใช้งาน Underscores ว่า เพียงปรับแต่งไม่มากนัก ก็สามารถได้ดีไซน์อย่างที่ต้องการได้
ทดลองดาวน์โหลดธีมที่ https://github.com/MennStudio/ReabReab แล้วเริ่มจากเปลี่่ยนแค่ไฟล์ style.css ก่อน
https://github.com/MennStudio/ReabReab
Try copy & paste
just style.css
and see what happens.

12. Demo & Workshop
แสดงตัวอย‹างการใชŒงาน