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

WordPress (& other CMSs)

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

Content Presentation

Theme

WordPress Theme

WordPress ออกแบบระบบธีม เพื่อให้ทุกคนสามารถร่วมกันใช้งานและดัดแปลงเองได้ ปัญหา: ระบบธีมนี้ยังยากต่อคนทั่วๆ ไปที่ไม่ได้มีพื้นฐานด้านการพัฒนาระบบจะทำความเข้าใจได้

http://marktimemedia.com/redesigning-the-template-hierarchy/

Too complicated for beginners

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

either to be used as a Parent Theme template

see more at http://codex.wordpress.org/Theme_Frameworks

Example: Genesis Framework

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

http://www.studiopress.com/features

Problems of Framework

ปัญหาของเฟรมเวิร์ค: ก็ยังซับซ้อนสำหรับผู้เริ่มต้นอยู่ดี การออกแบบ Option มักไม่ครอบคลุมการใช้งานทุกกลุ่ม บ้างขาด บ้างเกิน หากจะพัฒนาต่อได้ดี ก็ต้องรู้ทั้งแนวคิดและโค้ดของเฟรมเวิร์ค แล้วก็ต้องรู้แนวคิดและโค้ดของเวิร์ดเพรสอีกด้วย

Still too complicated for beginners

Lots of options / settings

Have to learn framework concept & code (and also WordPress concept & code)

Solution 2: Starter Theme

Start Theme หรือธีมเริ่มต้น คือธีมที่ออกแบบมาเป็นฐานเพื่อให้ผู้ใช้งานนำธีมนี้ไปปรับแต่งต่อไปในตัวธีมนี้เลย โดยไม่ใช้ผ่าน Theme Option หรือสร้าง Child Theme เน้นการออกแบบชื่อไฟล์ต่างๆ ให้อ่านเข้าใจง่าย ผู้ใช้เห็นแล้วทราบทันทีว่าต้องแก้อะไรที่ไฟล์ไหน และออกแบบโค้ดให้ผู้ใช้ทั่วไปอ่านได้รู้เรื่อง ไม่จำเป็นต้องเป็นผู้พัฒนา

Starter theme is meant to be worked with, tweaked, and styled. It is not a framework or a parent theme to be extended.

It is supposed to become a theme of its own, when finished.

Underscore

“คุณไม่จำเป็นต้องรู้ PHP หรือการเขียนโค้ดก็ได้ แค่ปรับแต่งผ่าน CSS และ HTML แค่นี้ก็ได้ธีมเวิร์ดเพรสเจ๋งๆ ได้ละ!”

"You really don’t need to know any PHP or be a programmer to 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

Create WP Theme

ไปที่เว็บ http://underscores.me/ แล้วใส่ข้อมูลธีมที่ต้องการ คลิก Generate เราจะได้ไฟล์ธีมมาใช้งาน

Go to http://underscores.me/ and click “GENERATE”

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/!*/

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.

Demo & Workshopแสดงตัวอย�างการใช�งาน