การสร้าง Blog Website
Theme และ Plugin ที่จำเป็นต้องติดตั้ง
- Blocksy Theme
การติดตั้ง Blocksy Theme
เปิด WordPress Website ลงชื่อเข้าสู่ระบบด้วย Admin user จากนั้นติดตั้ง Blocksy Theme โดยเริ่มจาก Appearance -> Themes -> Add New Theme ในช่องค้นหากรอกคำว่า “Blocksy”
เลือก Install และจากนั้นเลือก Activate
ปรับแต่ Blocksy Theme
เปิดหน้า Dashboard ทำการปรับแต่ค่าต่าง ๆ ของ Blocksy Theme โดยไปที่ Appearance -> Customize โดยปรับแต่ค่าในแต่ละส่วนดังต่อไปนี้
General Options
Post Types
Core
การสร้างหน้าแรกแบบกำหนดเอง
สร้างหน้าเว็บด้วยเริ่มต้นด้วย Elementor
ทำการสร้างหน้าเว็บชื่อ Home สำหรับตั้งเป็นหน้าแรกด้วย Elementor Plugin ดังแสดงต่อไปนี้
ปรกติเมื่อเราสร้างหน้า Page ใน Blocksy Theme จะมีพื้นที่ด้านบนและล่างระหวาง Header กับ Container ตัวอย่างการสร้างหน้า Test Page เช่น
จากรูปเป็นการสร้าง Page (ระวังอย่าสับสนดับการสร้าง Post) เมื่อทดสอบแสดงผลจะเห็นได้ว่ามีพื้นที่ว่างด้านบนและล่างดังรูป
เราสามารถแก้ไขค่านี้ได้ด้วย Blocksy Setting โดยเมื่อทำการ Edit หน้า Page ด้านมุมบนขวาจะมีไอคอน Blocksy ให้คลิกปุ่มนี้
ในช่อง “Content Area Vertical Spacing” ให้เลือกแถบ Custom จะปรากฎ option ให้เลือกตัวเลือกขวาสุด
ดังนั้นขั้นตอนจากนี้ให้นักศึกษาสร้าง Home page ดังแสดงในรูปข้านต้น
สร้าง Latest Posts
ให้นักศึกษาแทรก Container พร้อม Header text ดังแสดงในรูป
แทรก Shortcode สำหรับ Latest Posts
ให้นักศีกษาแทรก Shortcode Element โดยสามารถพิมพ์ “shortcode” เพื่อค้นหาดังแสดงในรูปด้านซ้าย
หลังจากแทรก Shortcode แล้วในส่วนของ Content ให้พิมพ์คำว่า
[blocksy_posts]ดังแสดงในรูปต่อไปนี้
สำหรับข้อมูลเพิ่มเติมในการใช้งาน Blocky หรือเอกสารอ้างอิงการใช้งาน Blocksy Theme สามารถค้าหาได้จาก Google โดยพิมพ์คำว่า
“blocksy shortcode for posts” จะเห็นผลการค้นหาดังรูป
หรือสามารถเข้าไปที่ลิงค์ https://creativethemes.com/blocksy/docs/developers-general-developers/blocksy-posts-shortcode/ ซึ่งจะมีรายละเอียดต่าง ๆ ที่จำเป็นในการปรับแต่ โดยสามารถเข้าไปในเมนู
Help -> Documents -> Developer
หลังจากแทรก Blocksy Shortcode แล้วทำการบันทึกหน้าเว็บทดสอบผลลัพธ์การแสดงผล
กำหนดค่า Attributes limit ให้กับ Shortcode
เราสามารถกำหนดจำนวนสูงสุดของ post ที่แสดงในหน้า Latest Posts ได้โดยการเพิ่มค่า Attribute “limit” ให้กับ Blocksy Shot code ได้ ซึ่งการใช้งานต่าง ๆ สามารถศึกษาได้จากหน้าเว็บคู่มือในลิงค์ https://creativethemes.com/blocksy/docs/developers-general-developers/blocksy-posts-shortcode/
ดังนั้นเราจึงสามารถแทรก Attribute “limit” ให้กับ Shortcode ได้โดยเพิ่มโค้ดให้เป็น
[blocksy_post limit="10"]ดังแสดงในรูป
กำหนดค่า Attributes has_paginationให้กับ Shortcode
ในหน้า Latest Posts ด้านล่างสุดจะมีแถบเครื่องมือที่เรียกว่า Pagination
เราสามารถซ่อน Pagination ได้จากหน้าเว็บคู่มือในลิงค์ https://creativethemes.com/blocksy/docs/developers-general-developers/blocksy-posts-shortcode/
เพิ่ม attrubute ใน shortcode ใหม่เป็น
[blocksy_posts limit="5" has_pagination="no"]
