Shortcode

ธีม Seed ตั้งแต่เวอร์ชั่น 2.0.7 จะมี Shortcode ที่ชื่อ s_loop ให้ใช้นะครับ หลักการคือ สามารถนำโพสต์ต่างๆ มาแสดงได้ โดยมีตัวอย่างการใช้งาน เช่น

แสดงสไลเดอร์ เต็มความกว้าง

[s_loop template="headline" posts_per_page="2" css="s-slider -full -dots-in"]

แสดงข่าวล่าสุด 3 ข่าวในหมวดหมู่ News แบบกริด

[s_loop template="card" category_name="news" posts_per_page="3" css="s-grid -d3"]

แสดงเรื่องล่าสุด 4 เรื่องแบบสไลเดอร์

[s_loop template="card" posts_per_page="4" css="s-slider -m1.2 -d3"]

Parameters – ตัวแปรที่ใช้ได้

ตัวแปรส่วนใหญ่จะใช้เหมือนกับ WP_Query นะครับ โค้ดต่างๆ จะอ้างอิงจากปลั๊กอิน Display Posts ส่วนของ Seed จะเพิ่มตัวแปร pagination, css และ template เข้ามาครับ

ตัวแปรคำอธิบายคู่มือ
authorID ของผู้เขียนCodex
author_nameUsername ผู้เขียนCodex
catID ของหมวดหมู่Codex
category_nameSlug ของหมวดหมู่Codex
ignore_sticky_postsไม่นับ Sticky PostCodex
meta_keyKey ของฟีลด์ที่สร้างเพิ่มCodex
meta_valueValue ของฟีลด์ที่สร้างเพิ่มCodex
offsetข้ามผลลัพท์ไป … เรื่องCodex
orderเรียงจากน้อยไปมาก หรือมากไปน้อยCodex
orderbyเรียงลำดับตาม … (เช่น ชื่อ วันที่)Codex
post_parentเป็นหน้าย่อยของ … Codex
post_parent__inกรณีมี post_parent หลายค่า ให้คั่นด้วยคอมม่าDisplay Posts
post_parent__not_inต้องไม่เป็นหน้าย่อยของ …Display Posts
post_statusสถานะของโพสต์ เช่น publish, futureCodex
post_typeชนิดของ Post เช่น page, product (ได้แค่อย่างเดียว)Codex
post__inID ของโพสต์ที่แสดง ใส่ได้หลายค่า คั่นด้วยคอมม่าCodex
post__not_inID ของโพสต์ที่ต้องไม่แสดง ใส่ได้หลายค่า คั่นด้วยคอมม่าCodex
posts_per_pageจำนวนที่ต้องการแสดง เช่น 1 หรือ 9Codex
tagslug ของป้ายกำกับที่ใช้Codex
tax_operatorการคำนวณ Taxonomy เช่น IN, EXISTSDisplay Posts
tax_include_childrenรวม Taxonomy ลูกด้วยDisplay Posts
tax_termค่าของ Taxonomy นั้นๆ เช่น taxonomy=”color” tax_term=”blue, green”Display Posts
taxonomyชนิดของข้อมูลที่เป็น Taxonomy เช่น colorDisplay Posts
exclude_currentไม่รวม Post ปัจจุบัน (เช่น นำไปแสดง Related Post)Display Posts
paginationtrue สำหรับแสดงเลขหน้า คลิกแล้วไปหน้าต่อไปได้
cssคลาสของ CSS ที่ต้องการใส่ รายละเอียดอยู่ด้านล่าง
templateเทมเพลตของเนื้อหาที่ต้องการแสดง รายละเอียดด้านล่าง

CSS

s-sliderแสดงแบบ Slider หรือ Carousel เลื่อนซ้ายขวาได้
-largeใช้กับ slider ทำให้กว้างเต็มจอบนมือถือ ส่วนจอคอมกว้างเท่า container
-fullใช้กับ slider ทำให้กว้างเต็มจอทั้งมือถือและจอคอม ชิดขอบซ้ายขวา
-dots-inใช้กับ slider ย้ายจุดด้านล่าง slider มาไว้ด้านใน แสดงเป็นสีขาว
-togridใช้กับ slider ทำให้แสดงผลบนจอคอมเป็น Grid
-m1.2ใช้กับ slider แสดงบนมือถือ ชิ้นแรกแสดงครบ ชิ้นที่สองโผล่มา 20%
-m1.4ใช้กับ slider แสดงบนมือถือ ชิ้นแรกแสดงครบ ชิ้นที่สองโผล่มา 40%
s-gridแสดงแบบ Grid คือแบ่งเป็นคอลัมน์ต่างๆ ค่าปกติคือ 1 คอลัมน์
-m2แสดงบนมือถือ 2 คอลัมน์ (ใช้ได้ทั้ง slider และ grid)
-m3แสดงบนมือถือ 3 คอลัมน์ (ใช้ได้ทั้ง slider และ grid)
-d2แสดงบนจอคอม 2 คอลัมน์ (ใช้ได้ทั้ง slider และ grid)
-d3แสดงบนจอคอม 3 คอลัมน์ (ใช้ได้ทั้ง slider และ grid)
-d4แสดงบนจอคอม 4 คอลัมน์ (ใช้ได้ทั้ง slider และ grid)
-d5แสดงบนจอคอม 5 คอลัมน์ (ใช้ได้ทั้ง slider และ grid)
-d6แสดงบนจอคอม 6 คอลัมน์ (ใช้ได้ทั้ง slider และ grid)
hide-summaryหากใช้กับเทมเพลตแบบ card, heroจะไม่แสดงข้อความเกริ่นนำ

Template

captionแสดงรูปพร้อมคำบรรยายด้านล่าง
cardแสดงรูปด้านบน ข้อความด้านล่าง
headlineแสดงชื่อเรื่องตรงกลาง รูปพื้นหลัง เหมาะกับสไลเดอร์ หากใช้ปลั๊กอิน ACF จะปรับเพิ่มได้
heroแสดงรูปขนาดใหญ่ด้านซ้าย ข้อความด้านขวา
listแสดงรูปด้านซ้าย ข้อความด้านขวา

เพิ่มเติม

หากต้องการเพิ่มระยะระหว่างชิ้น สามารถใช้โค้ด HTML นี้ได้ ระบบจะเพิ่มระยะให้เท่ากับ Gutter ของแต่ละอุปกรณ์ (ค่ามาตรฐานคือ 16px สำหรับมือถือ และ 30px สำหรับจอคอม)

<div class="s-space"></div>