Slider 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 เข้ามาครับ
| ตัวแปร | คำอธิบาย | คู่มือ |
|---|---|---|
| author | ID ของผู้เขียน | Codex |
| author_name | Username ผู้เขียน | Codex |
| cat | ID ของหมวดหมู่ | Codex |
| category_name | Slug ของหมวดหมู่ | Codex |
| ignore_sticky_posts | ไม่นับ Sticky Post | Codex |
| meta_key | Key ของฟีลด์ที่สร้างเพิ่ม | Codex |
| meta_value | Value ของฟีลด์ที่สร้างเพิ่ม | 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, future | Codex |
| post_type | ชนิดของ Post เช่น page, product (ได้แค่อย่างเดียว) | Codex |
| post__in | ID ของโพสต์ที่แสดง ใส่ได้หลายค่า คั่นด้วยคอมม่า | Codex |
| post__not_in | ID ของโพสต์ที่ต้องไม่แสดง ใส่ได้หลายค่า คั่นด้วยคอมม่า | Codex |
| posts_per_page | จำนวนที่ต้องการแสดง เช่น 1 หรือ 9 | Codex |
| tag | slug ของป้ายกำกับที่ใช้ | Codex |
| tax_operator | การคำนวณ Taxonomy เช่น IN, EXISTS | Display Posts |
| tax_include_children | รวม Taxonomy ลูกด้วย | Display Posts |
| tax_term | ค่าของ Taxonomy นั้นๆ เช่น taxonomy=”color” tax_term=”blue, green” | Display Posts |
| taxonomy | ชนิดของข้อมูลที่เป็น Taxonomy เช่น color | Display Posts |
| exclude_current | ไม่รวม Post ปัจจุบัน (เช่น นำไปแสดง Related Post) | Display Posts |
| pagination | true สำหรับแสดงเลขหน้า คลิกแล้วไปหน้าต่อไปได้ | |
| 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="_space"></div>