Template tags ทั้งหมดและวิธีใช้

รายการ template tag ที่ระบบรองรับจริง พร้อมแอตทริบิวต์ ค่าเริ่มต้น ตัวอย่าง และตารางบอกว่าแท็กไหนใช้ได้ในส่วนใดของธีม

Last updated 2026-08-11

Template tag คือข้อความในวงเล็บปีกกาคู่ เช่น {{site_name}} ที่ระบบแทนที่ด้วยข้อมูลจริงตอนสร้างหน้าเว็บ ใช้ในธีม (Header, Footer, Elements, Templates) และในเนื้อหาของ Pages

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

ข้อยกเว้นเดียวคือ element ในแท็บ Nav ซึ่งมีชุดแท็กภายในของตัวเอง ({{items}}, {{columns}}, {{children}}, {{item.class}}, {{item.href}}, {{column.*}} และอื่น ๆ) ระบบเติมค่าให้เฉพาะตอนสร้างเมนู แท็กชุดนั้นไม่ทำงานที่อื่น และไม่ได้อยู่ในเอกสารนี้ วิธีที่ปลอดภัยคือแก้เฉพาะ class ในโค้ดที่ระบบติดตั้งมาให้ ไม่ต้องเพิ่มแท็กใหม่เอง

แก้ไขแท็กได้ที่ไหน

ไปที่ ตั้งค่า → ธีม (/admin/settings/themes) แล้วเลือกธีม จะพบแท็บ

แท็บ	ใช้ทำอะไร
General	Header HTML, Footer HTML, Global CSS, Global JS, Body class
Nav	element ของเมนู (`nav-item`, `nav-submenu`, `nav-mobile-item` ฯลฯ)
Elements	ชิ้นส่วนย่อยที่เรียกซ้ำได้ เช่น `post-card`
Templates	เทมเพลตหน้า เช่น `post-list`, `post-detail`, `search-results`
Emails	เทมเพลตอีเมล (แท็บนี้ปรากฏเฉพาะเว็บที่เปิดใช้ Newsletters)

การแก้ธีมจำกัดที่บทบาท super_admin และ admin (ดู ผู้ใช้และสิทธิ์) รายละเอียดโครงสร้างธีมและลำดับการค้นหาเทมเพลตอยู่ใน ธีมและเทมเพลต

ในหน้าแก้ไขธีม แถบด้านขวามีหัวข้อ ตัวเลือก (Options) → คู่มืออ้างอิงธีม ซึ่งเปิดหน้าต่างสรุปแท็กแบบย่อไว้ให้ดูระหว่างพิมพ์

กฎการเขียนแท็ก

รูปแบบคือ {{ชื่อแท็ก}} หรือ {{ชื่อแท็ก attr="ค่า"}} เขียนชื่อแท็กตัวพิมพ์เล็กตามที่ระบุในเอกสารนี้
ค่าแอตทริบิวต์ต้องอยู่ในเครื่องหมายคำพูดคู่ " เสมอ ยกเว้น limit และ offset ใน {{#each}} ที่ต้องเป็นตัวเลขล้วนไม่มีคำพูด (limit="12" ระบบจะไม่อ่านค่าและใช้ค่าเริ่มต้นแทน) ส่วน chars และ words ของ {{item.excerpt}} ใส่คำพูดหรือไม่ใส่ก็ได้
ใน {{#each}} ค่าแอตทริบิวต์ต้องไม่มีช่องว่าง ให้ใช้ slug เช่น category="how-to" ไม่ใช่ชื่อที่มีเว้นวรรค
แท็กที่ระบบไม่รู้จัก ถ้าอยู่ในเนื้อหา Page แบบชื่อเดียวโดด ๆ ({{foo}}) จะถูกลบทิ้ง แต่ถ้าอยู่ในธีมจะถูกพิมพ์ออกหน้าเว็บตามตัวอักษร
หลังบันทึกธีม หน้าเว็บสาธารณะมีแคช ปกติเห็นผลภายในประมาณหนึ่งนาที ถ้าอยากเร่ง กด ล้างแคช / รีบิลด์เว็บ ที่ ตั้งค่า → ทั่วไป (/admin/settings/general)

แท็กระดับเว็บไซต์

ใช้ใน Header และ Footer ของธีม

แท็ก	ผลลัพธ์
`{{site_name}}`	ชื่อเว็บจาก ตั้งค่า → ทั่วไป (แยกตามภาษา)
`{{tag_line}}`	คำโปรยของเว็บ
`{{year}}`	ปี ค.ศ. ปัจจุบัน เช่น `2026`
`{{locale}}`	รหัสภาษาของหน้านั้น เช่น `en`, `th`
`{{locale_home}}`	ลิงก์หน้าแรกของภาษานั้น (`/` หรือ `/th/`)
`{{site_logo}}`	แท็ก `<img>` ของโลโก้ ถ้าไม่ได้ตั้งโลโก้จะได้ค่าว่าง
`{{site_logo class="h-10" alt="ชื่อเว็บ"}}`	โลโก้พร้อมกำหนด class และ alt (ถ้าไม่ใส่ alt จะใช้ชื่อเว็บ)
`{{site_logo_url}}`	URL ของไฟล์โลโก้อย่างเดียว
`{{language_switcher}}`	ตัวสลับภาษาแบบ dropdown (ภาษาที่ใช้อยู่เป็นปุ่ม ภาษาอื่นเปิดลงมาเมื่อชี้เมาส์)
`{{language_switcher class="..." activeClass="..."}}`	ตัวสลับภาษาแบบลิงก์เรียงกันธรรมดา ค่าเริ่มต้นของ `activeClass` คือ `active`

{{language_switcher}} แสดงผลเฉพาะเมื่อเว็บเปิดใช้มากกว่าหนึ่งภาษา ถ้ามีภาษาเดียวจะได้ค่าว่าง

{{site_name}}, {{tag_line}} และ {{year}} ใช้ในเนื้อหา Page ได้ด้วย

เงื่อนไขระดับเว็บไซต์

ใน Header และ Footer เขียนเงื่อนไขได้จากค่าเหล่านี้: site_logo, site_name, tag_line, favicon และ locale_<รหัสภาษา>

{{#if site_logo}}
  {{site_logo class="h-10"}}
{{else}}
  <span class="font-bold">{{site_name}}</span>
{{/if}}

{{#if locale_th}}ภาษาไทย{{else}}English{{/if}}

เมนู `{{nav}}`

ดึงลิงก์จากเมนูที่ตั้งใน ตั้งค่า → เมนู (/admin/settings/menus) ถ้ายังไม่ได้สร้างเมนู ระบบจะใช้ Page ที่เผยแพร่ระดับบนสุดบวกลิงก์ของ content type ที่เปิดใช้แทน

แอตทริบิวต์	ผลลัพธ์
`class`	class ของ `<ul>` ที่ครอบ รวมกับค่าตั้งต้น `flex items-center gap-1`
`itemClass`	class ของลิงก์ `<a>` แต่ละอัน
`activeClass`	class ที่รวมทับ `itemClass` เมื่อลิงก์ตรงกับหน้าที่เปิดอยู่
`location="mobile"`	เปลี่ยนเป็นเมนูแฮมเบอร์เกอร์แบบ drawer พร้อมเมนูย่อยแบบพับได้

{{nav class="flex items-center gap-2" itemClass="px-3 py-2 text-sm text-gray-600 hover:text-gray-900" activeClass="font-semibold text-gray-900"}}

{{nav location="mobile" itemClass="block px-4 py-3 text-base border-b border-gray-100"}}

ระบบเก็บเมนูเดียวต่อเว็บ และผูกกับตำแหน่ง header ค่าที่ไม่ใช่ mobile (รวมถึง location="footer") จะแสดงลิงก์ชุดเดียวกับ header ในรูปแบบเดสก์ท็อป ถ้าต้องการลิงก์ท้ายเว็บที่ต่างออกไป ให้เขียน <a> ในโค้ด Footer เอง

การรวม class ใช้ tailwind-merge จึงระบุเฉพาะส่วนที่ต่างได้ utility ที่ชนกันจะถูกแทนที่ให้เอง

แท็กเนื้อหา `{{item.*}}`

ใช้ใน Elements และ Templates ของธีม ทั้งในการ์ดที่อยู่ใน {{#each}} และในเทมเพลตหน้ารายละเอียด

ทุกคอลัมน์ของแถวข้อมูลเรียกได้ตรง ๆ เช่น {{item.title}}, {{item.slug}}, {{item.body}}, {{item.id}}, {{item.locale}}, {{item.view_count}}, {{item.seo_description}}

{{item.body}} และชื่อฟิลด์ที่ลงท้าย _html ถูกใส่ลงหน้าเป็น HTML ส่วนฟิลด์อื่นถูก escape ให้ปลอดภัย

ฟิลด์ที่ระบบคำนวณเพิ่มให้

แท็ก	ผลลัพธ์
`{{item.url}}`	ลิงก์สาธารณะของรายการ ใช้ได้ใน `{{#each}}` ของ posts, events, products, tours, books, staffs
`{{item.excerpt}}`	ข้อความสรุปจาก body ตัดที่ราว 200 ตัวอักษร ถ้าเนื้อหามี `<!--more-->` จะตัดที่จุดนั้น
`{{item.excerpt chars=120}}`	กำหนดความยาวเป็นจำนวนตัวอักษร เหมาะกับภาษาไทย
`{{item.excerpt words=30}}`	กำหนดความยาวเป็นจำนวนคำ เหมาะกับภาษาอังกฤษ
`{{item.date}}`	วันที่สร้าง เดือนแบบเต็ม ตามภาษาของเนื้อหา เช่น `8 มิถุนายน 2569`
`{{item.date_short}}`	วันที่สร้าง เดือนแบบย่อ เช่น `8 มิ.ย. 2569`
`{{item.date locale="th" style="short" order="dmy"}}`	บังคับภาษา (`th`, `en`), รูปเดือน (`long` ค่าเริ่มต้น, `short`), ลำดับ (`dmy` ค่าเริ่มต้น, `mdy`)
`{{item.created_at_formatted}}`	เหมือน `{{item.date}}` เขียนชื่อเต็ม
`{{item.created_at_formatted_short}}`	เหมือน `{{item.date_short}}`
`{{item.updated_at_formatted}}`	ทุกคอลัมน์ที่ลงท้าย `_at` จะมีคู่ `_formatted` และ `_formatted_short`
`{{item.read_time}}`	เวลาอ่านโดยประมาณ เป็นตัวเลขนาที
`{{item.read_time_label}}`	ข้อความพร้อมใช้ เช่น `อ่าน 5 นาที` หรือ `5 min read`
`{{item.views_short}}`	ยอดวิวแบบย่อ เช่น `1.2K`
`{{item.views_formatted}}`	ยอดวิวแบบเต็มมีตัวคั่นหลักพัน เช่น `1,234`
`{{item.price_formatted}}`	ราคาในรูป `฿1,234` (มีคู่ `sale_price_formatted`, `amount_formatted`)
`{{item.display_name}}`	ชื่อที่แสดง สร้างจาก first_name และ last_name เมื่อยังไม่มีค่า
`{{item.initial}}`	อักษรตัวแรกของชื่อที่แสดง ใช้ทำ avatar ตัวอักษร

ทัวร์มีเพิ่ม {{item.adult_price_formatted}}, {{item.child_price_formatted}} (ใช้สกุลเงินของทัวร์นั้น) และ {{item.includes_html}}, {{item.excludes_html}} ที่แปลงรายการเป็น <ul> ให้แล้ว

รูปภาพและตัวแปรอัตโนมัติ

ฟิลด์ใดที่เก็บ URL รูป (.webp, .jpg, .jpeg, .png) จะได้แท็กเพิ่มสองตัวอัตโนมัติ

แท็ก	ผลลัพธ์
`{{item.featured_image}}`	URL รูปหลัก
`{{item.featured_image_mobile}}`	URL เดิมที่เติม `-sm` ก่อนนามสกุล
`{{item.featured_image_srcset}}`	`URL 1200w, URL-sm 768w` ใช้กับแอตทริบิวต์ `srcset`

<img src="{{item.featured_image}}" srcset="{{item.featured_image_srcset}}" alt="{{item.title}}" loading="lazy" />

ค่านี้สร้างจากการต่อชื่อไฟล์ ระบบไม่ได้ตรวจว่าไฟล์ -sm มีจริง ถ้ารูปนั้นไม่มีเวอร์ชันมือถือใน Media ลิงก์จะชี้ไปไฟล์ที่ไม่มีอยู่

Custom field

ฟิลด์ที่คุณสร้างเองเรียกด้วย {{item.field.<คีย์>}} และมีตัวแปรรูปเช่นเดียวกัน

{{#if item.field.brochure_image}}
  <img src="{{item.field.brochure_image}}" srcset="{{item.field.brochure_image_srcset}}" alt="" />
{{/if}}

{{item.field.xxx}} แยกช่องกับฟิลด์ปกติ ถ้าคุณมี custom field ชื่อ url ค่านั้นอยู่ที่ {{item.field.url}} ส่วน {{item.url}} ยังเป็นลิงก์ของรายการ

ผู้เขียน หมวดหมู่ แท็ก (โพสต์)

ในเทมเพลต post-detail และในการ์ดที่อยู่ใน {{#each posts}} มีข้อมูลเชื่อมโยงให้ใช้

{{#if item.author}}
  <a href="{{locale_prefix}}/authors/{{item.author.slug}}">
    <img src="{{item.author.avatar_url}}" alt="" />
    {{item.author.display_name}}
  </a>
{{/if}}

{{#each item.categories}}<span>{{item.name}}</span>{{/each}}
{{#each item.tags}}<span>#{{item.name}}</span>{{/each}}

{{#each item.coauthors}} ใช้ได้ในเทมเพลตหน้ารายละเอียดของโพสต์ ข้างในเรียก {{item.display_name}}, {{item.slug}}, {{item.avatar_url}} ได้เหมือนผู้เขียนหลัก

เงื่อนไข `{{#if}}` และ `{{#unless}}`

{{#if item.featured_image}}<img src="{{item.featured_image}}" alt="" />{{/if}}

{{#if item.excerpt}}<p>{{item.excerpt}}</p>{{else}}<p>ยังไม่มีคำอธิบาย</p>{{/if}}

{{#unless item.avatar_url}}<div class="placeholder">{{item.initial}}</div>{{/unless}}

ค่าที่ถือว่าเป็นเท็จคือ ว่าง, ไม่มีค่า, false และ 0 {{#unless}} ไม่รองรับ {{else}}

ห้ามซ้อน {{#if}} ไว้ในอีก {{#if}} เพราะตัวแปลอ่าน {{/if}} ตัวแรกเป็นจุดปิด ถ้าต้องการเงื่อนไขซ้อน ให้แยกเป็น element แล้วเรียกด้วย {{> ...}}

วนซ้ำเนื้อหา `{{#each}}`

{{#each posts limit=12}}
  {{> post-card}}
{{/each}}

ชนิดที่ดึงข้อมูลได้: posts, events, products, tours, books, staffs ชื่ออื่นจะได้ผลว่าง

ในหกชนิดนี้ มีเพียง posts ที่ทุกเว็บใช้ได้ทันที products ต้องใช้แพ็กเกจ Pro หรือ Business (ดู แพ็กเกจและการชำระเงิน) ส่วน events, books, staffs, tours ต้องให้ทีมงานเปิดแฟล็ก experimental ให้เว็บของคุณก่อน (ดู สิ่งที่ยังไม่มีให้ใช้) ถ้าเว็บยังไม่ได้เปิดชนิดนั้น หน้ารายการและหน้ารายละเอียดของชนิดนั้นจะตอบ 404 ดังนั้นลิงก์ {{item.url}} ในการ์ดก็จะพาไปหน้าไม่พบ

แอตทริบิวต์	ค่าเริ่มต้น	ใช้ได้กับ
`limit=12`	6	ทุกชนิด
`offset=3`	0	ทุกชนิด (ข้ามรายการแรก ๆ เช่นทำ featured แยก)
`order="views"`	ตามชนิด	ค่าที่รับ: `latest`, `oldest`, `title`, `views`
`category="news"`	ไม่กรอง	posts (รวมหมวดย่อย), products, tours, books
`tag="featured"`	ไม่กรอง	posts
`author="somchai"`	ไม่กรอง	posts
`since="3m"`	ไม่กรอง	posts, events, products, tours

since รับรูปแบบ ตัวเลข + หน่วย โดยหน่วยคือ d (วัน), m (เดือน), y (ปี) เช่น 7d, 1m, 3m, 6m, 1y หน่วยสัปดาห์ไม่รองรับ

ลำดับเริ่มต้นเมื่อไม่ใส่ order: posts, products, tours เรียงใหม่สุดก่อน events เรียงตามวันเริ่มงานล่าสุดก่อน books เรียงตาม sort_order แล้วต่อด้วยใหม่สุด staffs เรียงตาม sort_order

การวนซ้ำดึงเฉพาะรายการที่สถานะ published (staffs ใช้ active) และเฉพาะภาษาของหน้าที่กำลังแสดง

ตัวอย่างที่ใช้จริงบ่อย

<div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
  {{#each posts limit=6 category="how-to" order="views" since="3m"}}
    {{> post-card}}
  {{/each}}
</div>

{{#each posts limit=1}}<article class="hero">{{item.title}}</article>{{/each}}
{{#each posts limit=6 offset=1}}{{> post-card}}{{/each}}

วนซ้ำที่ใช้ได้เฉพาะบางหน้า

แท็ก	ใช้ในเทมเพลต	หมายเหตุ
`{{#each search}}`	`search-results`	ผลค้นหา ข้างในมี `{{item.url}}`, `{{item.type}}`, `{{item.title}}`, `{{item.excerpt}}`, `{{item.featured_image}}`
`{{#each authors}}`	`author-list`	รายชื่อผู้เขียน 50 รายต่อหน้า เรียงตามชื่อที่แสดง แอตทริบิวต์ต่าง ๆ ไม่มีผลกับลูปนี้

เรียกชิ้นส่วนอื่น `{{> slug}}`

{{> post-card}} แทรก element หรือ template ที่ slug ตรงกัน โดยส่งข้อมูล item ชุดเดียวกันเข้าไปด้วย ถ้า slug ไม่มีอยู่จะได้ค่าว่าง

ซ้อนได้ชั้นเดียว ถ้าใน element ที่ถูกเรียกมี {{> ...}} อีกชั้น แท็กชั้นในจะไม่ถูกแทนที่

แทรก Header กับ Footer `{{header}}` `{{footer}}`

ในเทมเพลตหน้า Page เรียก {{header}} และ {{footer}} เพื่อวาง Header และ Footer ของธีมลงตรงจุดที่ต้องการ เทมเพลต page ที่ระบบติดตั้งมาใช้สองแท็กนี้อยู่แล้ว เมื่อเทมเพลตมีแท็กนี้ ระบบจะไม่ครอบ Header/Footer ให้อีกชั้น จึงไม่แสดงซ้ำ ในเทมเพลต landing ทั้งสองแท็กให้ค่าว่างเสมอ เพราะหน้าประเภทนั้นตั้งใจไม่มี Header/Footer

หน้าถัดไป `{{pagination}}`

{{pagination}}
{{pagination class="px-3 py-2 text-sm text-gray-500" activeClass="px-3 py-2 text-sm font-semibold bg-primary text-white"}}

ใช้ในเทมเพลตหน้ารายการทุกชนิด (post-list, event-list, product-list, book-list, staff-list, tour-list, author-list), เทมเพลตหน้าหมวดหมู่และแท็ก (category, tag, product-category, product-brand, tour-category, book-category) และ search-results ถ้าผลลัพธ์มีหน้าเดียวจะได้ค่าว่าง

ต้องเขียน class ก่อน activeClass ถ้าสลับลำดับ ระบบจะไม่รู้จักแท็กและพิมพ์ออกหน้าเว็บตามตัวอักษร

วิดเจ็ตพร้อมใช้

แท็ก	แอตทริบิวต์	ค่าเริ่มต้นและหมายเหตุ
`{{search_form}}`	`class`, `placeholder`, `inputClass`, `buttonClass`	ฟอร์มค้นหาส่งไปหน้า `/search` ของภาษานั้น ปุ่มมีไอคอนแว่นขยายที่รับสีจากข้อความรอบข้าง placeholder เริ่มต้น `Search…`
`{{search_overlay}}`	`buttonClass`, `iconColor`, `placeholder`, `theme`, `hint`, `hotkey`	ปุ่มแว่นขยายที่เปิดช่องค้นหาเต็มจอ `theme` รับ `light` (เริ่มต้น) หรือ `dark` `hotkey="true"` เปิด ⌘K / Ctrl+K แทรกครั้งเดียวแม้ใส่หลายที่
`{{subscribe_form}}`	`class`, `interests`	ฟอร์มรับอีเมล ใส่ `interests="posts,events"` เพื่อผูกผู้สมัครกับความสนใจที่กำหนด
`{{social_share}}`	`networks`, `class`, `buttonClass`, `iconColor`	`networks` รับ `copy`, `facebook`, `x` คั่นด้วยคอมมา ค่าเริ่มต้นคือทั้งสามอัน `iconColor="primary"` ใช้สีหลักของเว็บ ปุ่มคัดลอกจะโชว์ข้อความยืนยัน 2 วินาที
`{{gallery}}`	`cols`, `gap`, `lightbox`, `class`, `group`	แกลเลอรีจากรูปที่แนบใน Page หรือ Post ค่าเริ่มต้นคือ 3 คอลัมน์ ระยะห่าง 3 และเปิด lightbox ปิดด้วย `lightbox="false"` แท็กนี้อ่านค่าที่อยู่ในคำพูดคู่เท่านั้น ให้เขียน `cols="4"` ไม่ใช่ `cols=4`
`{{slider slug="hero"}}`	`slug` (ต้องมี) และคีย์ตั้งค่าใด ๆ	สไลด์จาก สไลเดอร์ (`/admin/sliders`) เขียนทับค่าที่ตั้งไว้ได้ เช่น `autoplay="false"`, `loop`, `arrows`, `dots`, `effect`, `speed`, `perView`, `gap`, `autoplaySpeed`
`{{form slug="contact"}}`	`slug` หรือ `name`, `class`, `submit`	ฟอร์มติดต่อจาก Forms (`/admin/forms`) ปุ่มส่งเริ่มต้นคำว่า `Submit` ถ้า slug ไม่มีอยู่หรือสถานะเป็น inactive จะได้ค่าว่าง
`{{chat_widget}}`	`position`, `theme`, `welcome`	ปุ่มแชต AI แสดงเฉพาะเมื่อเปิด AI Features และใส่คีย์แล้วใน ตั้งค่า → ทั่วไป `position` รับ `bottom-right` (เริ่มต้น) หรือ `bottom-left`
`{{cookie_consent}}`	ไม่มี	แถบคุกกี้ แสดงเฉพาะเมื่อเปิดใช้ที่ ตั้งค่า → คุกกี้ (`/admin/settings/cookies`)

{{gallery}} มีพฤติกรรมพิเศษ: เมื่อเปิดสวิตช์แสดงแกลเลอรีในหน้าแก้ไข Page หรือ Post และในเนื้อหายังไม่มีแท็กนี้ ระบบจะต่อ {{gallery}} ท้ายเนื้อหาให้เอง ถ้าอยากคุมตำแหน่ง ให้พิมพ์แท็กเองกลางเนื้อหา

{{subscribe_form}} มีสองรูปแบบตามที่วาง ถ้าอยู่ใน Header หรือ Footer จะได้ฟอร์มที่ส่งแบบไม่รีเฟรชหน้า และเติม checkbox ความสนใจจากที่ตั้งไว้ให้เมื่อไม่ระบุ interests ถ้าอยู่ในเนื้อหา Page จะได้ฟอร์มส่งแบบปกติที่โหลดหน้าใหม่

ฟอร์มนี้รับสมัครได้ทุกเว็บ แต่หน้าจัดการ ผู้ติดตาม และ จดหมายข่าว เป็นฟีเจอร์ที่จำกัดตามแพ็กเกจและต้องเปิดแฟล็ก experimental ถ้าเว็บของคุณยังไม่ได้เปิด คุณจะเก็บอีเมลไว้แต่เปิดดูหรือส่งจดหมายข่าวไม่ได้ (ดู แพ็กเกจและการชำระเงิน)

{{chat_widget}} และ {{cookie_consent}} ถูกแทรกอัตโนมัติเมื่อเปิดใช้งานอยู่แล้วและธีมไม่มีแท็กนี้ จึงไม่จำเป็นต้องใส่ นอกจากต้องการกำหนดตำแหน่งหรือธีมสีเอง (ของแชตมีสวิตช์แยกสำหรับปิดการแทรกอัตโนมัติ ถ้าปิดไว้ต้องเขียนแท็กเอง)

ฟอร์มจองทัวร์

{{book_tour_form}} ใช้ได้เฉพาะในเทมเพลตหน้ารายละเอียดทัวร์ (tour-detail-page หรือ tour-detail) ต้องส่ง tour_id ถ้าไม่มีจะได้ค่าว่าง เทมเพลตที่ระบบติดตั้งมาเขียนไว้แล้วแบบนี้

{{book_tour_form tour_id="{{item.id}}" tour_slug="{{item.slug}}" tour_title="{{item.title}}" currency="{{item.currency}}" adult_price="{{item.adult_price}}" child_price="{{item.child_price}}"}}

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

แท็กเฉพาะหน้า

หน้า / เทมเพลต	แท็กที่ใช้ได้
`search-results`	`{{search_query}}`, `{{result_count}}`, `{{#if search_query}}...{{else}}...{{/if}}`, `{{#each search}}`, `{{search_form}}`, `{{pagination}}`
`category`	`{{category_name}}`, `{{category_slug}}`, `{{category_description}}`, `{{category_image}}`, `{{category_icon}}`, `{{current_q}}`, `{{current_subcat}}`, `{{subcategory_list}}`, `{{category_search_input}}` และ `{{#if category_...}}`
`tag`	`{{tag_name}}`, `{{tag_slug}}`
`product-category`, `tour-category`, `book-category`	`{{category_name}}`, `{{category_slug}}`
`product-brand`	`{{brand_name}}`, `{{brand_slug}}`
`not-found`	`{{site_name}}` เท่านั้น
`tour-thankyou`	`{{booking_number}}`, `{{locale_prefix}}`

{{category_description}}, {{category_image}} และ {{category_icon}} ถ้าหมวดย่อยไม่ได้กรอกค่าไว้ ระบบใช้ค่าของหมวดแม่แทนให้ {{category_icon}} ใส่ SVG ลงหน้าเป็นโค้ด ให้ใช้ fill="currentColor" ใน SVG เพื่อให้รับสีจากธีม

{{subcategory_list}} รับ outerClass, labelClass, wrapClass, selectClass และแสดงผลเฉพาะเมื่อหมวดนั้นมีหมวดย่อย {{category_search_input}} รับ placeholder และ class พิมพ์แล้วรอ 450 มิลลิวินาทีจึงกรองรายการ

ทั้งสองแท็กทำงานคู่กับการโหลดรายการแบบไม่รีเฟรชหน้า ซึ่งต้องมี id="sw-posts-grid" ครอบกริดการ์ด และ id="sw-pagination" ครอบหน้าถัดไปในเทมเพลต category

แท็กใช้ได้ที่ไหน

จุดที่สับสนบ่อยที่สุดคือแท็กเดียวกันไม่ได้ทำงานทุกที่ ตารางนี้สรุปตามโค้ดจริง

แท็ก	Header / Footer	Elements / Templates	เนื้อหา Page	เนื้อหา Post, Product, Event
`{{site_name}}`, `{{tag_line}}`, `{{year}}`	ได้	ไม่ได้	ได้	ไม่ได้
`{{nav}}`, `{{site_logo}}`, `{{language_switcher}}`, `{{locale_home}}`	ได้	ไม่ได้	ไม่ได้	ไม่ได้
`{{search_overlay}}`, `{{chat_widget}}`, `{{cookie_consent}}`	ได้	ไม่ได้	ไม่ได้	ไม่ได้
`{{search_form}}`	ได้	เฉพาะ `search-results`	ไม่ได้	ไม่ได้
`{{item.}}`, `{{#if item.}}`, `{{> partial}}`	ไม่ได้	ได้	ไม่ได้	ไม่ได้
`{{#each posts}}` และชนิดอื่น	ไม่ได้	ได้	ได้	ไม่ได้
`{{slider}}`	เฉพาะหน้า Page และหน้าแรก	ได้	ได้	ไม่ได้
`{{form}}`	ไม่ได้	ได้	ได้	ไม่ได้
`{{subscribe_form}}`	ได้	ไม่ได้	ได้	ไม่ได้
`{{social_share}}`	ได้	ได้	ได้	ได้
`{{gallery}}`	ไม่ได้	ได้	ได้	ได้
`{{pagination}}`	ไม่ได้	เฉพาะเทมเพลตหน้ารายการ	ไม่ได้	ไม่ได้

ในเนื้อหา Page ยังมี {{title}}, {{slug}}, {{featured_image}}, {{featured_image_mobile}}, {{seo_title}}, {{seo_description}} และ {{item.field.<คีย์>}} ให้ใช้ (ทำงานทั้งโหมด Article และ HTML Builder) แต่ {{#if}} ใช้ในเนื้อหา Page ไม่ได้

{{locale_prefix}} ใช้ได้ใน Elements, Templates และในเนื้อหา Post ส่วนในเนื้อหา Page จะได้ค่าว่างเสมอ

ข้อจำกัดที่ควรรู้ก่อนเริ่ม

เนื้อหาของ Post, Product, Event, Book, Doc, Tour รับเฉพาะ {{gallery}}, {{social_share}} และ {{locale_prefix}} แท็กอย่าง {{#each}}, {{slider}}, {{form}} ที่พิมพ์ในเนื้อหาเหล่านี้จะไม่ทำงาน ถ้าต้องการ ให้ย้ายไปไว้ในเทมเพลตของ content type นั้น หรือใช้หน้า Page แทน
{{item.url}} มีค่าเฉพาะในลูป {{#each}} ในเทมเพลตหน้ารายละเอียดให้ประกอบลิงก์เอง เช่น {{locale_prefix}}/posts/{{item.slug}}
ในเทมเพลตหน้ารายละเอียด ค่าใน {{item.*}} ยังไม่ถูกแทนที่ตอนที่ {{#each}} ทำงาน จึงเขียน {{#each posts category="{{item.slug}}"}} ไม่ได้ ข้อยกเว้นคือ {{book_tour_form}} ที่ระบบจัดการทีหลังจึงรับ {{item.id}} ได้
ในหน้า author-detail ลูป {{#each posts}} จะกรองเฉพาะบทความของผู้เขียนคนนั้นให้เองอยู่แล้ว
{{locale_prefix}} ให้ค่าว่างเมื่อเป็นภาษาหลัก และให้ /th เมื่ออยู่ในภาษาอื่น ใช้กับลิงก์ในธีมทุกที่เพื่อไม่ให้ผู้ใช้หลุดออกจากภาษาที่กำลังอ่าน
ถ้าธีมของคุณไม่มีเทมเพลตของหน้านั้น ระบบจะย้อนไปใช้เทมเพลตของธีมเริ่มต้น รายละเอียดใน ธีมและเทมเพลต

แท็กในเทมเพลตอีเมล

แท็บ Emails มีเทมเพลตหลายชิ้น แต่ระบบส่งจริงสองชิ้น และแต่ละชิ้นเติมค่าให้เฉพาะแท็กเหล่านี้

เทมเพลต	แท็กที่เติมค่าให้
`email-welcome` (ส่งเมื่อมีผู้สมัครรับข่าวใหม่)	`{{site_name}}`, `{{email}}`, `{{unsubscribe_url}}`
`email-newsletter` (ส่งจดหมายข่าว)	`{{subject}}`, `{{body}}`, `{{site_name}}`, `{{email}}`, `{{unsubscribe_url}}`

แท็กอื่นที่พบในเทมเพลตอีเมลที่ติดตั้งมาให้ เช่น {{confirm_url}} และ {{resubscribe_url}} ยังไม่มีระบบเติมค่า ถ้าใส่ไว้จะปรากฏเป็นข้อความตามตัวอักษรในอีเมล

จดหมายข่าวและรายชื่อผู้สมัครเป็นฟีเจอร์ที่จำกัดตามแพ็กเกจและต้องเปิดแฟล็ก experimental ให้ก่อน (ดู แพ็กเกจและการชำระเงิน)

เริ่มจากตัวอย่างที่มีอยู่

วิธีที่เร็วที่สุดคือเปิด element หรือ template ที่ระบบติดตั้งมาให้ แล้วดูว่าใช้แท็กอะไร เช่น post-card ที่รวมเกือบทุกเทคนิคในเอกสารนี้ไว้ในไฟล์เดียว

<a href="{{item.url}}" class="group block rounded-lg border">
  {{#if item.featured_image}}
    <img src="{{item.featured_image}}" srcset="{{item.featured_image_srcset}}" alt="{{item.title}}" loading="lazy" />
  {{/if}}
  <div class="p-4">
    {{#each item.categories}}<span class="text-xs uppercase">{{item.name}}</span>{{/each}}
    <h3 class="mt-2 font-semibold">{{item.title}}</h3>
    {{#if item.excerpt}}<p class="mt-1 text-sm text-gray-500">{{item.excerpt}}</p>{{/if}}
    <div class="mt-3 text-xs text-gray-400">
      {{#if item.created_at_formatted}}<time>{{item.created_at_formatted}}</time>{{/if}}
      {{#if item.read_time_label}}<span>· {{item.read_time_label}}</span>{{/if}}
    </div>
  </div>
</a>

ธีมชื่อ default ลบไม่ได้ และชิ้นส่วนที่ติดตั้งมากับธีมนั้นก็ลบไม่ได้ แต่กด Reset เพื่อคืนค่าโรงงานได้ จึงทดลองแก้ได้โดยไม่เสียของเดิม