Skip to content

Custome Post Type

คือ โพสอีกประเภทที่มีการสร้างเพื่อเก็บเนื้อหาและรูปแบบที่ต่างจากโพสปกติ (Blog) ที่แสดงเนื้อหาทั่วไป โดยผู้เขียนธีมที่จะสร้าง Custom Post type ก็มักจะสร้าง Post type ตามการใช้งานของธีมที่ตัวเองสร้าง เช่น เว็บที่เป็นแนวธุรกิจ ก็มักจะมี Portfolio post type สำหรับไว้แสดงผลงานของตัวเองโดยเฉพาะ เป็นต้น ซึ่ง post type นี้ ก็จะบรรจุข้อมูลที่ต่างจากโพสธรรมดา เช่น มีประเภทของงาน ผู้ว่าจ้าง วันส่งมอบงาน ลิงค์ไปที่ผลงาน เป็นต้น

โดยปกติเมื่อเราจะสร้าง Custom Post Type ของตัวเองนั้น นอกจากเราจะต้องรู้เรื่องการใช้งาน custom fields เพื่อที่จะบรรจุข้อมูลต่างๆ แล้ว ยังจะต้องรู้วิธีการที่จะดึงมันออกมาใช้งานประกอบเป็นหน้าเว็บอีกด้วย ซึ่งสิ่งเหล่านี้จำเป็นที่จะต้องใช้ความรู้ในเรื่องของการเขียนโค้ดพอสมควร

portfolio

Post Type Builder

คือ ปลั๊กอินที่ช่วยให้เราสร้าง Custom post type แบบสำเร็จรูปได้เอง จาก Themify.com ที่มีผลิตภัณฑ์มากมายทั้งธีมและปลั๊กอิน โดยปลั๊กอิน Post Type Builder นี้ เน้นให้เราใช้งานโดยที่ไม่จำเป็นต้องมีความรู้ในด้านการเขียนโค้ด โดยปลั๊กอินมีเครื่องมือทั้งในส่วนของ custom fields (ฟีลด์ที่เก็บข้อมูลแบบต่างๆ) และ Template builder ในการออกแบบเทมเพลตสำหรับหน้า post type archive (หน้ารวม) และ single post ของ post type นั้นๆ

Download – Demo

คุณสมบัติของปลั๊กอิน :

  • Taxonomies คล้ายๆ กับ categories กับ tags ในโพสแบบปกติ
  • Meta box ก็คือ custome fields สำหรับเพิ่มข้อมูลฟีลด์ข้อมูลต่างๆ ให้กับ post type นั้นๆ สามารถสร้างได้หลายแบบ
  • สร้างเทมเพลตได้ทั้งสำหรับหน้า archive และ single แบบ Drag and drop ไม่จำเป็นต้องเขียนโค้ดเอง
  • shortcode สามารถนำไปแสดงที่ไหนก็ได้โดยการใช้ shortcode
  • Import/Export ได้
  • ใช้กับเว็บประเภทหลายภาษาได้ โดยทำงานร่วมกับปลั๊กอิน wpml

ตัวอย่างภาพที่ทำสำเร็จแล้ว

หน้ารวม

หน้ารวม

 

หน้าเดี่ยว

 

หน้าสำหรับเขียนโพส (Movie Post Type)

new-movie-post-type-

Add New Post Type

ไปที่เมนู Post Type Builder > Post Types > Add New

ใส่รายละเอียดของ Post type ที่สร้างใหม่ ในที่นี้เราจะลองสร้าง Custom Post Type ที่ชื่อว่า Movie เพื่อใช้กับเว็บหนัง โดย Singular และ Plural Label ก็คือชื่อของ Post type ส่วน Post Type Slug ก็คือ url โดย slug นั้นจะต้องเป็น ตัวเล็ก เท่านั้น และห้ามใช้คำว่า Menu, Posts, Pages, Action, Author, Order, Theme เพราะเหล่านี้คือ slug ที่ถูกใช้โดย WordPress ไปแล้ว จึงไม่สามารถใช้ซ้ำกันได้

Supports สำหรับคลิกเลือกว่าจะให้ใช้งานฟีลด์ใดบ้าง (Taxonomies) โดยเหล่านี้เป็นฟีเจอร์พื้นฐานของ WordPress นั่นเอง หากใครต้องการให้มีตัว Visual Editor ของ WordPress ไว้ใช้ด้วยก็ให้ติ๊กไว้ด้วยนะคะ จะทำให้เราเพิ่มข้อมูลอื่นๆ ได้เองเหมือนเขียนโพสปกติ เช่น วิดีโอ แกลลอรี่ สไลเดอร์ แล้วแต่ที่เว็บเราได้ลงปลั๊กอินเสริมไว้ เพียงแต่ในบทความนี้เราไม่ได้เลือกไว้ เพราะเราจะใช้ Post Type Builder ทั้งหมด โดยด้านล่างสุดจะเป็นการเพิ่ม Extra Fields Addon ที่สามารถใส่ข้อมูลเหล่านี้ได้หมดค่ะ

โดยเราสามารถเพิ่มเติมได้ด้วยการคลิกที่ปุ่ม Add Taxonomies แต่ต้องสร้าง Post type ก่อน จึงจะสามารถใช้ Taxonomies ที่สร้างใหม่กับ Post type นั้นได้ ตอนนี้จึงขอข้ามไปก่อน

Meta Box Builder

metabox-builder

เพิ่มฟีลด์ที่ต้องการสำหรับ Post type นี้ สำหรับเว็บหนังเราก็จะให้มี ภาพโปสเตอร์ ชื่อเรื่อง ความยาว นักแสดงนำ วันที่เข้าฉาย เรื่องย่อ เป็นต้น

add-fields

ในส่วนของ Custom Labels และ Advanced Options เราสามารถที่จะปล่อยไว้ตามที่ระบบได้ตั้งไว้ให้ก็ได้ หลังจากนั้นคลิกที่ปุ่ม Save เพื่อบันทึก Post type ใหม่ของเรา หลังจากนั้นระบบจะนำเราไปสู่หน้าสร้างเทมเพลต

Add New Template

กรอกชื่อของเทมเพลตแล้วเลือก Post type ที่เราต้องการใช้เทมเพลตนี้ โดยปกติหากเรามาจากขั้นตอนก่อนหน้า ระบบก็จะเลือกให้เรียบร้อยแล้ว จากนั้นคลิกที่ปุ่ม Save

add-new-template-name

หลังจากนั้นระบบมีปุ่มเมนูขึ้นมา 2 ปุ่ม สำหรับให้เราสร้างหน้า archive และ single ตัวอย่าง หน้า archive ของ Movie ก็คือหน้ารวมของโพสหนังทั้งหมดของเรา กับ Sigle ก็คือ หน้าโพสของหนังแต่ละเรื่องเมื่อเราคลิกเข้าไปดูนั่นเอง

Archive Template

เลือกรูปแบบการแสดงโพสที่ Post Layout จำนวนที่ต้องการแสดงต่อหน้าตามจำนวน Post per page จัดเรียงตาม Order by และกำหนดให้มี Pagination คือปุ่มสำหรับคลิกไปหน้าอื่นๆ เมื่อมีโพสให้แสดงมากกว่า 1 หน้า เสร็จแล้วคลิกปุ่ม Save

หมายเหตุ : Archive Page Template นี้ใช้สำหรับตั้งค่าการแสดงผลเมื่อนำ Shortcode ของ Post type ไปแสดงในหน้าต่างๆ เท่านั้น แต่ในส่วนของ  Archive ที่เป็น Categories (Taxonomies archive) ยังแสดงตามเทมเพลต archive ของธีม (archive.php)

Single Page Template

เราสามารถออกแบบเทมเพลตโดยการแบ่งคอลัมน์ได้ด้วยการคลิกที่ปุ่ม Column แล้วเลือกแบบคอลัมน์ที่ต้องการ

add-column

หรือเพิ่มแถวได้ ด้วยการคลิกที่ปุ่ม Add Row

add-row

single-post-template

เราสามารถลาก Meta Box ต่างๆ ที่เราได้สร้างไว้แล้วก่อนหน้านี้มาจัดวางลงในคอลัมน์และแถวต่างๆ ที่เราได้สร้างขึ้น สามารถแก้ไข ลากเพื่อเปลี่ยนตำแหน่งได้

การกำหนดการแสดงผลของข้อมูลในโพสของแต่ละฟีลด์ เช่น ช่อง Movie Name เราตั้งค่า Text Before ข้อความก่อนที่จะแสดงชื่อเรื่องหนัง เป็น “ชื่อเรื่อง :” เป็นต้น

text-before

เราสามารถแทรกรูปภาพหรือข้อความที่ไม่ได้เป็น Meta Box ได้เช่นกัน ด้วยการเพิ่ม Static Text หรือ Static Imge ลงในเทมเพลต

static-text

ยกตัวอย่างเทมเพลตของหน้า Movie เราทำการแบ่งเป็น 3 แถว โดยแถวแรกแสดงเฉพาะ Title แถวที่ 2 แบ่งเป็น 2 คอลัมน์ โดยคอลัมน์ซ้ายเป็นโปสเตอร์หนัง คอลัมน์ขวาก็เป็นรายละเอียดอื่นๆ และแถวที่ 3 ไว้สำหรับแสดงเรื่องย่อและปุ่มลิงค์ไปยังเว็บ IMDB โดยเราได้เพิ่ม Static Text ไว้ก่อน Movie Info (เรื่องย่อ) เพื่อที่จะให้แสดงข้อความแยกต่างหากไว้ก่อนเรื่องย่อ

เมื่อสร้างและกด Save เรียบร้อยแล้วก็ปิดหน้าต่างเทมเพลตออก แล้วกดปุ่ม Update ที่หน้าเพิ่มเทมเพลต

Taxonomies

ขั้นตอนนี้เราจะกลับไปเพิ่ม Taxonomies ให้กับ Movie เนื่องจากตอนเราสร้างขั้นตอนแรกนั้น เราไม่ใช้ Categories ของ WordPress แต่เราจะสร้าง Taxonomies ใหม่ โดยจะสร้างเป็น Genre เพื่อแสดงประเภทของหนัง โดยเวลาเราเพิ่มหนังเราก็ค่อยเพิ่มประเภทเข้าไป เช่น Horror, Comedy, Romantic เป็นต้น

ไปที่เมนู Post Type Builder > Taxonomies > Add New

ใส่ชื่อ Taxonomies ใหม่ลงไป แล้วระบบจะสร้าง slug ให้เอง ส่วนด้านล่างตรงคำว่า Attach to ก็ให้ติ๊กเลือกว่าจะใช้กับ Post type ไหนบ้าง เสร็จแล้วก็คลิกปุ่ม Save

เราสามารถสร้างเยอะแค่ไหนก็ได้ เพื่อใช้สำหรับแต่ละ Post type หรือหลาย Post type

กลับไปเพิ่ม Taxomonies ใน Single Template หรือ Archive ในตำแหน่งที่ต้องการ

add-tax-to-template

สังเกตุได้ว่าตอนนี้เรามี Custom Post Type ใหม่ ชื่อว่า Movie ไว้ใช้งานแล้ว

new-post-type

ทดลองเพิ่มหนังใหม่โดยใช้ Movie Custom Post type

Preview ดูก็จะได้แบบนี้ รู้สึกว่าตัวเองเก่งขึ้นมาทันทีค่ะ ว่าไปนั่น

preview-movie-single

Shortcode

เราสามารถทำการสร้าง Page ขึ้นมาเพื่อแสดง Post type ของเราได้ ด้วยการแทรก shortcode ของ post type ที่เราต้องการลงในหน้านั้นๆ ทำให้เราสามารถที่จะแทรก Custom post type ร่วมกับเนื้อหาอื่นๆ

ตัวอย่างสร้างหน้าเปล่าแบบไม่มี sidebar เพื่ดแสดง Movie Post type ทั้งหมด

ไปที่เมนู New > Page แล้วเลือก Page Template เป็น Full Width

full-width-page

จากนั้นทำการคลิกที่ปุ่มสร้าง shortcode ของ Post type builder ด้านบนแถบเครื่องมือ แล้วเลือก Post type ที่ต้องการจะแทรก

add-shortcode-button

จะมีตัวเลือก Post type options สำหรับให้เราตั้งค่า

shortcode-options

Post Filter ให้เราคลิกเลือก Taxonomies ที่ต้องการให้แสดงเป็น Filter (ตัวคัดกรองด้านบน ไว้คลิกเลือกดูเฉพาะหมวดหมู่ที่ต้องการ) สามารถกด Ctrl เพื่อเลือกตัวเลือกหลายตัว หรือไม่เลือกตัวเลือกใดเลย หากมไม่ต้องการให้มี Filter

Orderby, Order เกี่ยวกับการจัดเรียง

Pagination ปุ่มเลือกหน้า, Post per page จำนวนที่ต้องการให้แสดงต่อหนึ่งหน้า, Style รูปแบบ

ลักษณะของ Shortcode ที่ได้หลังจากคลิก OK

after-gen-shortcode

ตัวอย่างเพจที่ได้ แสดง Movie Post Type ทั้งหมด โดยมี Filter และ Pagination ด้วย

Import/Export

เราสามารถทำการ Export เพื่อนำไปใช้ในเว็บอื่นได้ด้วยการเลือก Post type ที่ต้องการแล้วคลิกปุ่ม Export หากต้องการ Import ก็คลิกที่ปุ่ม Import ระบบก็จะให้เลือกไฟล์ที่เราได้ทำการ Export ไว้

import-export

Extra Fields – Add-on

เป็นปลั๊กอินที่เป็น Addon ของ Custom Post Type Builder โดยเมื่อเราติดตั้งปลั๊กอินตัวเพิ่มเข้าไป เราจะมี Meta Box เพิ่มเข้ามาสำหรับใช้ใน Post type ของเรา ดังนี้คือ Video, Rating, Map, Date, Slider, Gallery, Progress Bar, และ Icon

addon-field

 Download – Demo

ตัวอย่างหลังจากเพิ่ม Video และ Gallery field ใน Movie Post Type

video-gallery

Back To Top
Search