เล่าเรื่องการทำ WordPress Theme ตั้งแต่เริ่มออกแบบ Case Study: PaperTheme Redux

ผม @arnondora ก็เป็นเจ้าของเว็บ arnondora.in.th ที่เป็นเว็บที่เล่าเรื่อง Programming, Technology และเรื่องราวนานาจิตตังในชีวิตของผมเอง วันนี้เป็นนักเขียนรับเชิญละกันมาเล่าประสบการณ์การเขียน PaperTheme Redux

เมื่อเกือบ ๆ ปลายเดือนที่ผ่านมาเว็บของผม ก็ได้เปลี่ยนหน้าเว็บใหม่ ที่ปกติผม (เจ้าของเว็บ) ก็จะเปลี่ยนทุกปี เพื่อเป็นการฝึกให้ตัวเองนั้นได้เรียนรู้อะไรใหม่ ๆ ทุก ๆ ปี และเป็นเหมือนการได้ดูด้วยว่า 1 ปีที่ผ่านมาเราได้เรียนรู้อะไรใหม่ ๆ บ้างทั้งในด้าน Programming, Design และด้านอื่น ๆ

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

• เล่าเรื่อง PaperTheme Redux : Design Process
• เล่าเรื่อง PaperTheme Redux : Programming

Understanding Users ทำความเข้าใจผู้ใช้งาน

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

พบว่าส่วนใหญ่มักจะเข้ามาผ่าน Search Engine (เว็บเราอยู่บนอันดับต้น ๆ ของ Google เมื่อไหร่ก็ไม่รู้ฮ่า ๆ) ซะเป็นส่วนใหญ่ แล้วจะเข้ามาอ่านสิ่งที่ตัวเองหา แล้วก็ออกไป หรือเปิดเข้าไปใน Tag ที่ตัวเองสนใจต่อ ฉะนั้นเรื่องของการเลือก และแสดงผล Tag และ Category ถือเป็นเรื่องที่สำคัญมาก

แล้วทำให้สงสัยต่อว่า จริง ๆ แล้ว Tag หรือ Category ที่คนน่าจะสนใจมากกว่ากัน

คำตอบนั้นอยู่ที่ การเข้ามาของผู้อ่าน นั่นคือส่วนใหญ่จะเข้าผ่าน Search Engine เนื่องจากคนมักจะค้นหาสิ่งที่ตัวเองอยากรู้ เช่นบอกว่า อยากรู้เกี่ยวกับ Restful ว่าจริง ๆ แล้วมันคืออะไร คนอาจจะค้นหาว่า “Rest API คือ” ผลการค้นหาก็จะเป็นดั่งภาพด้านบน ที่เว็บของเราอยู่อันดับแรก ซึ่งสอดคล้องกับสถิติการเข้าอ่านบทความ “[Dev Tip] เรียก REST API ง่าย ๆ บน PHP ด้วย Httpful” ที่ถูกเรียกเป็นอันดับหนึ่ง

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

คนอ่าน 59% มาจาก Windows

นอกจากเราจะออกแบบ Theme ได้เข้าพฤติกรรมของผู้อ่านแล้ว เรายังต้องเข้าใจว่าผู้อ่านส่วนใหญ่ของเราเข้าเว็บไซต์ด้วยอะไร ซึ่งข้อมูลที่ได้นั่นบอกว่า ผู้อ่านของเรากว่า 59% เข้าเว็บผ่าน Windows โดยใช้ Google Chrome เป็น Web Browser และอันดับถัดไปเป็น Android เข้าผ่าน Google Chrome ที่มีหน้าจอที่ค่อนข้างเล็ก

ฉะนั้นจากข้อมูลทั้งหมด สามารถทำให้เราเข้าใช้ผู้อ่านของเว็บเราได้แล้วว่า ผู้อ่านมักจะเป็นคนที่ Search หา และเข้ามาผ่าน Search Engine ที่มีเรื่องที่ตนเองต้องการอยู่แล้ว ไม่ใช่เข้ามาหาอะไรอ่านไปเรื่อย และที่มักจะเข้าผ่านเครื่อง PC ที่รัน Windows และใช้ Google Chrome ซะเป็นส่วนใหญ่ และทางฝั่ง Mobile ก็จะเป็น Android ที่มีขนาดหน้าจอที่ค่อนข้างเล็กซะเป็นส่วนใหญ่

Applying Design Principle ใช้หลักการออกแบบเข้าช่วย

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

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

ในเรื่องของเส้น และองค์ประกอบ ผมให้โจทย์กับตัวเองว่า ต้องใช้เส้นให้น้อยที่สุด แต่ยังทำให้คนแยกออกว่า นี่คือประเภทเดียวกัน หรือมันคือของคนละอย่าง ซึ่งทำให้ผมนึกถึงเรื่อง Grouping Laws ของ Gestalt Principles ขึ้นมาซึ่งกฏนี้กล่าวไว้ 5 ข้อคือ

1. The Law of Similarity
2. The Law of Proximity
3. The Law of Familiarity
4. The Law of Common Fate
5. The Principle of Closure

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

ถ้าสังเกตจากภาพด้านบนจะเห็นว่า ส่วนของ “ชื่อหัวเรื่อง” และ “วันที่ลง” จะอยู่ใกล้ ๆ กัน แต่ “วันที่ลง” จะเป็นสีเทาและตัวเล็กกว่า ในขณะที่ ส่วนของบทความถูกเว้นลงมาเยอะกว่า เป็นการทำให้ผู้อ่านสามารถเข้าใจได้ในทันทีว่า หัวเรื่อง กับ บทความมันเป็นของคนละอย่างกัน ซึ่งจะเข้ากฏข้อที่ 2

แต่เหตุผลที่เอาวันที่ตัวสีที่อ่อนกว่า เป็นการบอกความแตกต่างโดยใช้กฏข้อที่ 1 จะเห็นได้ว่า เราสามารถทำให้ผู้อ่าน เข้าใจได้ในแว่บแรกเลยว่า หัวข้อ นั้นไม่ใช่ Heading ของบทความเราได้อย่างง่ายดาย และทำให้หน้าเว็บของเราดู อ่านสบาย เป็นสัดส่วนด้วย เพราะมนุษย์เป็นสิ่งที่ชอบความเป็นระเบียบอยู่แล้ว

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

Developing Design ออกแบบใน Sketch

ในขั้นตอนของการออกแบบทั้งหมด ผมเลือกใช้โปรแกรมที่ชื่อว่า Sketch ในการทำ Wireframe ทั้งหมด สำหรับใครที่ไม่รู้จัก Sketch มันคือโปรแกรมสำหรับใช้ในการออกแบบ Graphic Designต่าง ๆ ที่ส่วนใหญ่นั้นจะเอามาออกแบบในเรื่องของ UI/UX เป็นหลัก ซึ่งตัวโปรแกรมนั่นเสียตังค์ และรันบน macOS เท่านั้นนะ ถ้าใครใช้ Windows อยู่ก็ย้ายมา macOS สิ ฮ่า ๆๆๆ

แนะนำบทความ: แนะนำ Sketch 3 โปรแกรมออกแบบ UI Design สุดฮอตที่ใช้กันทั่วโลก !!

ขั้นตอนแรกของการออกแบบ ผมเริ่มจากการสร้างรูปแบบของสิ่งของต่าง ๆ ที่ต้องใช้ก่อน เช่น สี และขนาดของข้อความต่าง ๆ จากที่เห็นในภาพด้านบน ผมเริ่มจากการสร้างรูปแบบอักษรในขนาดต่าง ๆ ตั้งแต่ H1-H4 และ P Tag รวมถึงสีที่จะใช้อีกด้วย เพื่อให้เวลาเราเริ่มลงแบบของหน้าจอจริง เราจะได้ไม่ต้องกังวลว่าขนาดจะตรงมั้ยหรือยังไง เพราะเราเซฟมันไว้แล้ว ก็แค่เรียกใช้เท่านั้น

ถัดไปก็ต้องมาออกแบบของที่ต้องใช้ต่อ แต่จะเป็นสิ่งที่ซับซ้อนมาขึ้น จากภาพด้านบน จะเป็นพวก Nagivation Bar หรือ Footer เป็นต้น ข้อดีของ Sketch คือมันสามารถเซฟวัตถุเหล่านี้เป็น Symbol แล้วเรียกใช้ที่ไหนก็ได้ในไฟล์เดียวกัน

และแล้วก็ถึงขั้นตอนของการ เอาวัตถุที่เราสร้างไว้มาแปะลงในหน้าเว็บ มันก็จะง่ายแล้ว เพราะเราสร้างวัตถุที่เราใช้บ่อย ๆ ไว้แล้ว เราก็แค่หยิบมันลงมาแปะในหน้าเว็บ สิ่งที่ Sketch มีให้เราอีกนั่นคือ ขนาดของหน้าจอแบบต่าง ๆ มาให้เลย เราไม่ต้องป้อนเอง เช่น Desktop, Iphone อะไรทำนองนั้น

ในการแปะของลงไปในหน้าเว็บ เราก็ต้องมานั่งคำนึงถึงว่า เราจะมี Margin ระหว่างวัตถุเท่าไหร่ ซึ่งตรงนี้ผมหยิบเรื่องของ Fitts’s Law มาจับเพื่อใช้ในการคำนวณ Margin ระหว่างวัตถุแต่ละอันในหน้าเว็บ เพื่อให้เว็บออกมา ดูแล้วรู้สึกโล่ง สบายตา และ เข้าใจความหมายของแต่ละอย่างได้ง่ายขึ้น

แต่ในการออกแบบหน้าแต่ละหน้า ผมจะใช้ Mobile First เป็นหลักในการออกแบบ โดยเริ่มออกแบบจากหน้าจอที่มีขนาดเล็กก่อน แล้วค่อยเอามาขยายให้ใหญ่ทีหลัง เพื่อทำให้เราสามารถ Focus กับสิ่งที่เราจะสื่อมากขึ้น เพราะการที่หน้าจอนั้นมีขนาดเล็ก แค่เราใส่สิ่งที่เราต้องการจะสื่อก็เต็มแล้ว มันก็เป็นวิธีการจำกัด Content ที่ไม่จำเป็นได้ดีเหมือนกัน

เริ่ม Coding ธีมเวิร์ดเพรสของเรา

หลังจากที่เราได้ Design มาแล้ว ก็ถึงเวลาที่สาย Code อย่างเรารอคอย นั่นคือการ Code แต่ด้วยเว็บที่เราเขียนมัน On-Top บน WordPress ฉะนั้นเราก็ต้องเรียนรู้อะไรเพิ่มนิดหน่อยก่อนที่เราจะเขียนกัน

ส่วนประกอบของ WordPress Theme

เหนือสิ่งอื่นใด การเขียน WordPress Theme มันต่างจากการเขียนเว็บแบบปกติตรงที่ WordPress นั้นมีกฏในการสร้าง Theme มันไม่ใช่ว่าเราต้องมานั่งเขียนหน้า index แล้วไปหน้าโน้นหน้านี้เอง มันมีข้อกำหนดอยู่ ซึ่งมันเรียกว่า WordPress Theme Hierarchy ลองดูตามรูปภาพด้านล่างนี้ เราจะเห็นว่า วิธีที่ WordPress อ่านไฟล์มันไม่ได้อ่านมั่ว ๆ มันมีรูปแบบอยู่ โดยมันจะเริ่มอ่านจากไฟล์ index.php ก่อน แล้วค่อยวิ่งไปหาหน้าอื่น ๆ (ถ้ามี) ฉะนั้น Theme ของเราสามารถมีแค่ Stylesheet ที่บอกรายละเอียดของ Theme และ index.php ก็ได้ แต่ถ้าอยาก Custom ให้มากกว่านั้นเราก็ต้องเขียนหน้าอื่น ๆ ลงไปด้วย

สำหรับใครสนใจเรื่อง Theme Hierachy เพิ่มเติม สามารถไปอ่านใน Codex ของ WordPress ได้เลย

ซึ่ง PaperTheme นี้ก็ไม่ได้เขียนอะไรมากมายขนาดนั้นหรอกอยู่กันแค่ในระดับสีน้ำเงินเท่านั้นเอง ส่วนที่เหลือมันน่าจะอยู่ในลักษณะของ Child Theme ที่แต่ละเว็บไซต์เมื่อเอาไปใช้แล้วอยากจะ Custom หน้าก็สามารถเพิ่มไฟล์เหล่านั้นลงไปใน Child Theme ได้

เริ่มวางระบบ

เนื่องจาก เราจะเขียน WordPress Theme กัน เราก็ต้องเตรียมสภาพแวดล้อมของเครื่องเราให้พร้อมก่อน บางคนอาจจะใช้พวก Xampp แล้วลง WordPress อะไรก็ว่ากันไป หรือบางคนอาจจะหักดิบ ลงมันลงไปในเครื่องตรง ๆ เลยก็แล้วแต่

แต่ Xampp และการลงไปตรง ๆ เลยมันก็จะยุ่งเวลาผมต้องเปลี่ยนสภาพแวดล้อมไปทำงานอื่น Docker เลยเป็น Hero ที่เข้ามาจัดการในเรื่องนี้ ก็จริง ๆ มันไม่ยากเลยนะ เพราะ Docker มี WordPress Image สำเร็จรูปให้เราใช้แล้ว เราแค่ต่อ WordPress Container เข้ากับ Database Container ก็เรียบร้อยแล้ว ซึ่งผมเลือกใช้ MySQL เพราะว่า มันเบสิกดี เลยเอามาใช้

แต่ถ้าจะให้สั่ง Start ทีละอันก็ไม่ใช่เรื่องเหมือนกัน ไม่ได้ว่างขนาดนั้น docker-compose เลยเข้ามาช่วยเหลือเราในรอบนี้ เราก็แค่เขียนสิ่งที่เราต้องการลงไปใน docker-compose.yml แล้วเรียก docker-compose up ทุกอย่างก็เรียบร้อยแล้ว

version: '2'

services:

  wordpress-wordpress:
    image: wordpress
    ports:
      - 8080:80
    volumes:
      - ".:/var/www/html"
    environment:
      WORDPRESS_DB_PASSWORD: root
      WORDPRESS_DB_HOST: wordpress-mysql:3306.

  wordpress-mysql:
    image: mysql
    ports:
      - 3306:3306
    environment:
      MYSQL_ROOT_PASSWORD: root
      MYSQL_PASSWORD: root
      MYSQL_USER: root

ด้านบนนี้เป็น docker-compose สำหรับการเตรียม Environment ของบนเครื่องผมเอง เพื่อน ๆ สามารถเอาไปใช้ได้ตามสะดวก

และสำหรับใครที่อยากดูโค้ดที่ผมใช้ทั้งโปรเจค สามารถดูได้ที่ Github ของผม ได้เลย

ถ้าใครได้เข้าไปดูใน Source Code จะเห็นว่า Stylesheet เราไม่ได้ใช้ CSS ตรง ๆ เลย ผมมาใช้ SCSS ที่เป็น Pre-Compiled Stylesheet แทนเพราะด้วย ความซับซ้อนของ Style ที่เขียนด้วย ทำให้ใช้ SCSS เวลาอ่านหรือแก้ไขน่าจะสะดวกกว่า

เพื่อให้อ่านได้ง่ายยิ่งขึ้น ผมได้แบ่งมันออกมาเป็นส่วน ๆ ด้วยกัน เช่น Font ก็จะจัดการเรื่องของ Global Font ของ Theme เลยว่าใช้ Font-Family อะไรขนาดยังไงบ้าง และอีกหลาย ๆ ส่วนก็คล้าย ๆ กัน และทั้งหมดจะถูก Link โดยไฟล์ที่ชื่อว่า style.scss อีกทีนึง

และสุดท้ายเพื่อให้ SCSS แปลงร่างเป็น CSS ที่ Web Browser อ่านรู้เรื่องผมก็เลือกใช้ Gulp ที่เป็น Task Runner กับ Plugin ที่ช่วย Compile SCSS และจัดการให้ออกมาเป็น Stylesheet ที่พร้อมใช้

ถ้าสงสัยว่ามันทำอะไรบ้างให้เข้าไปดูที่ไฟล์ gulpfile.js ในนั้นจะเป็น Script ที่บอกว่ามันทำอะไรไปบ้าง หลัก ๆ มันก็จะมีประมาณนี้ในการเตรียมความพร้อมของเครื่องมือที่ใช้ในการพัฒนา อ่อลืมไป ผมใช้ Atom เป็น Text Editor ในการทำงานนะ กับ Plugin นิด ๆ หน่อยเพื่อให้เราเขียนได้ง่ายขึ้น เผื่อใครสงสัย

มาเริ่มเขียนกัน

ขั้นตอนนี้เป็นขั้นตอนที่เรียกได้ว่า กินเวลาน้อยที่สุดแล้ว เพราะทุกอย่างมันถูกวางแผนออกมาล่วงหน้าแล้วว่าจะเขียนหน้าไหนยังไงบ้าง

สิ่งที่ทำหลัก ๆ คือ ถ้าสมมุติว่าใครที่ไม่เคยเขียน WordPress Theme มาก่อน เวลาเขียนเราจะต้องเริ่มเขียนจากด้านขวาของ Theme Hierarchy เวลาเขียนผมก็จะสั่ง gulp watch ทิ้งเอาไว้ เวลาเราแก้ไขพวกไฟล์ที่เรากำหนดไว้ (ในที่นี้จะเป็นไฟล์ .scss ทั้งหมด) ตัว gulp มันจะไปสั่งรัน Task ที่เรากำหนดไว้ทันที ซึ่งก็คือ Compile Stylesheet นั่นเอง ก็จะช่วยลดเวลาในการทำงานของเราได้เยอะมาก ๆ

กับอีกอย่างที่ยังเซ็งกับความฉลาดน้อยของตัวเองไม่หาย นั่นคือเรื่องของ Cache เวลาเราเทสหน้าเว็บ แล้วเราแก้ Stylesheet ไปแล้วมันก็จะออกมาเป็นชื่อไฟล์เดิม เวลา Web Browser ไปเรียก มันก็จะนึกว่ามันคือไฟล์เดิม แล้วเอาหน้าของเก่ามาแสดงผล ก็ว่าละแก้เท่าไหร่มันก็ไม่ไปสักที วิธีแก้คือเรา Force Reload มันซะเลยโดยการกด CMD+Shift+R ใน Google Chrome ซะก็จบ

AMP is supported out of the box

AMP หรือ Accelerated Mobile Page ที่จะเข้ามาช่วยทำให้หน้าเว็บของเราโหลดเร็วขึ้นเยอะมาก ๆ ซึ่งจริง ๆ แล้วเว็บ arnondora.in.th ก็ได้ใช้ AMP มานานเกือบ ๆ ปีได้แล้ว แต่ไม่ได้พูดถึงบ่อยนัก มาในรอบนี้ผมทำหน้าให้มันเป็น AMP แต่แรกเลย ก็จะช่วยได้ในเรื่อของ Performance ที่โหลดได้เร็วขึ้นไปอีก และช่วยเรื่อง SEO (Search Engine Optimisation) แต่ตอนนี้ (ในเวอร์ชั่น 1.0) PaperTheme ยังไม่ได้ Support AMP แบบสมบูรณ์ เต็ม 100% แต่จะปรับปรุงในเวอร์ชั่นต่อ ๆ ไปนะ

Optimisation การปรับปรุงให้เว็บเร็วขึ้น

หลังจากที่ผมเขียนเสร็จ และอัพขึ้นไปบน Production ผมก็นั่งรอดู Traffic และ Performance Indicator ต่าง ๆ ดูปรากฏว่ามันแย่กว่า Theme อันเก่าเยอะมากเลย โดยเฉพาะเรื่องของ Bandwidth และ Performance ที่กินเยอะมากขึ้น จะจำทำยังไงดี

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

แผนในระยะยาวคือ จะทำการ Optimise ตัว Code ให้มีความซับซ้อนที่น้อยลงไปอีก เพื่อลดเวลาในการวาดหน้าของ Web Browser ซึ่งจะเห็นผลมากตอนที่เราเปิดหน้าเว็บไซต์ผ่านอุปกรณ์ที่มีพลังในการประมวลผลต่ำ เรื่องนี้เขียนไปเดี๋ยวจะยาวเกิน ไว้แยกออกมาเป็นอีกตอน ตอนที่เขียนเสร็จแล้วละกัน เอาเป็นว่า มันจะไปเกี่ยวกับ การวาง Tag ต่าง ๆ เพราะเวลา Web Browser ได้ไฟล์หน้า html มาแล้วมันจะต้องทำการ Parse ให้เป็นภาษาที่มันเข้าใจก่อน เอาไปลง DOM ที่เป็น Tree แล้วค่อยเอาไปวาดออกมา

ฉะนั้น ถ้าเราสามารถลดตรงนี้ได้ หน้าของเราก็จะโหลดได้เร็วขึ้นอีก ประกอบกับ การแยก Content ออกจากตัวหน้า ทำให้ Cache ทำงานได้ดีขึ้น และ ทำให้ User เห็น Content  ได้ไวขึ้น (ทั้งที่ ส่วนที่เหลือของหน้าจะยังโหลดไม่เสร็จก็ตาม)

แต่เวลาจะแก้หน้าเว็บนี่เข้าไป Purge Cache แทบไม่ทัน ฮ่า ๆ ตอนแรกเปิดมาก็ งง ว่าทำไมหน้ามันไม่เปลี่ยนหว่า อ่อ Cache Cloudflare มันดุมาก

That’s PaperTheme Redux!

และนี้ก็คือทั้งหมดของ เบื้องหลัง ในการเขียน PaperTheme Redux จริง ๆ แล้วมันไม่มีอะไรเลย แค่เขียนตามที่ WordPress บอกไว้ แล้วเอา Design ที่เราทำมาเติมลงไป และถ้าอยากใส่อะไรเพิ่ม ก็แค่เติมลงไป เท่านั้นเอง ฉะนั้นการสร้าง WordPress Theme เราสามารถใส่จินตนาการของเราได้แบบไม่สิ้นสุด และมันก็ไม่ได้ยากเลย ถ้าใครอยากจะลองแนะนำให้ลองเลย

งานขาย ! ตอนนี้ PaperTheme Redux ก็ถูก Public ขึ้น Github แล้วลองเข้ามาดูกันได้ ถ้าพบปัญหาก็แจ้ง Issue ได้เลยนะครับ