Tumtook All-in-One Modules

ปลั๊กอินนี้รวมปลั๊กอิน Tumtook ทั้งหมดที่แนบมาไว้ในปลั๊กอินเดียว โดยเก็บโค้ดเดิมไว้ใน modules/ เพื่อให้ asset path, vendor, shortcode, Gutenberg block และ logic เดิมทำงานเหมือนเดิมมากที่สุด

Modules Included

1. Tumtook Brand Showcase
2. Tumtook Download PDF Catalog
3. Tumtook Gallery
4. Tumtook Dynamic Comparison Table
5. Tumtook Page Article Recommendations
6. Tumtook Page Card Products ทั้งหมด
7. Tumtook Page Product Recommendations
8. Tumtook Job Working Cards
9. Tumtook Video How To Slider
10. Tumtook Gallery Auto
11. Tumtook Home Product Recommendations

Shortcodes Included

• [tumtook_brand_showcase]
• [tumtook_brand_showCase]
• [tumtook_catalog code="PDF"]
• [gallery_pdf code="PDF" text="ดาวน์โหลด PDF"]
• [tumtook_gallery]
• [tumtook_gallery_auto]
• [tumtook_comparison]
• [tumtook_recommended_articles]
• [tumtook_product_cards]
• [tumtook_recommended_products]
• [tumtook_home_recommended_products]
• [tumtook_job_working_cards]
• [video_how_to_slider]
• [tumtook_video_how_to_slider]
• [tumtook_video_how_to_youtube]
• [tumtook_video_how_to_recommended_products]

Installation

1. Deactivate the old standalone Tumtook plugins first.
2. Upload tumtook-all-in-one.zip in WordPress Admin > Plugins > Add New > Upload Plugin.
3. Activate Tumtook All-in-One Modules.
4. Keep existing shortcodes and page meta as-is. The plugin preserves the original meta keys and shortcode names.

Tumtook Brand Showcase — ดีไซน์การ์ด

เพิ่มดีไซน์รูปแนวตั้ง 4:5 มุมโค้ง พร้อมชื่อแบรนด์และคำอธิบายสีขาวซ้อนบนภาพบริเวณด้านล่างที่ไล่เฉดดำ โดยเลือกได้ผ่าน layout="cards" ส่วน shortcode เดิมยังใช้ดีไซน์รูปภาพเดิม

1. ในหน้าแก้ไข Page เปิดกล่อง Tumtook Brand Showcase แล้วเลือกรูปสำหรับแต่ละ Slide (สูงสุด 6 รูป)
2. กรอก ชื่อแบรนด์ (ดีไซน์การ์ด), คำอธิบายใต้ชื่อแบรนด์ (ดีไซน์การ์ด) และ Card link URL แล้วบันทึกหน้า
3. คัดลอก shortcode ในกล่องตั้งค่าไปวางในเนื้อหาหรือ widget Shortcode ของ Elementor

[tumtook_brand_showcase layout="cards"]
[tumtook_brand_showcase page_id="123" layout="cards"]
[tumtook_brand_showcase page_id="123"]

ใช้ page_id เป็น ID หน้าต้นทางเมื่อต้องการแสดงในหน้าอื่น ทั้งสองดีไซน์ใช้รูปและลิงก์ชุดเดียวกัน โดยชื่อแบรนด์และคำอธิบายจะแสดงเฉพาะดีไซน์การ์ด หากไม่มีชื่อแบรนด์จะใช้ Alt text เดิมแทน และหากไม่มีคำอธิบายจะซ่อนข้อความส่วนนั้น

การ์ดที่มีลิงก์กดได้ทั้งรูป ชื่อ คำอธิบาย และพื้นที่ว่างของการ์ด เมื่อ hover เฉดดำกับข้อความจะเลื่อนขึ้นพร้อมกัน 10% ของความสูงการ์ด โดยข้อความยังเป็นสีขาว รองรับการกดด้วยคีย์บอร์ดและลดการเคลื่อนไหวตามการตั้งค่าเครื่อง การ์ดที่ไม่มีลิงก์แสดงเป็นข้อมูลธรรมดา

ดีไซน์การ์ดขยายแถบสไลด์เต็มความกว้างหน้าจอเหมือนดีไซน์ปกติ แม้วาง shortcode ใน container แบบ boxed ของ Elementor โดยหัวข้อและการ์ดแรกเริ่มตรงแนว container และปรับจำนวนการ์ดที่เห็นตามขนาดหน้าจอ เลื่อนดูรายการถัดไปได้ด้วยการลาก ปัด หรือกดลูกศร และสามารถวางสองดีไซน์ร่วมกันบนหน้าเดียวกันได้

ตรวจฝั่ง PHP ด้วย php modules/tumtook-brand-showcase/tests/smoke.php จากโฟลเดอร์ปลั๊กอิน โดยใช้ข้อมูลจำลองและไม่เชื่อมต่อฐานข้อมูล

Tumtook Page Article Recommendations

วาง [tumtook_recommended_articles] ในเนื้อหา, บล็อก Shortcode หรือ widget Shortcode ของ Elementor บนหน้าอื่นได้ทันที โมดูลจะใช้การตั้งค่าในกล่อง Card บทความ ทั้งหมด ของหน้าที่แสดงอยู่ หากยังไม่เคยบันทึกจะใช้ค่าเริ่มต้น (หัวข้อ “บทความน่าสนใจ” และบทความสูงสุด 10 รายการ) ในหน้า archive หรือ template ที่ไม่มีหน้าปัจจุบันจะใช้ค่าเริ่มต้นเช่นกัน

[tumtook_recommended_articles]
[tumtook_recommended_articles limit="6"]
[tumtook_recommended_articles page_id="123"]
[tumtook_recommended_articles post_id="123" limit="6"]

• page_id: ID ของหน้าต้นทางที่ต้องการใช้การตั้งค่า เช่น หัวข้อ ข้อความปุ่ม ลิงก์ดูทั้งหมด และจำนวนบทความ กล่องตั้งค่าจะแสดง shortcode พร้อม ID ของหน้านั้นให้คัดลอก
• post_id: ใช้แทน page_id ได้ และรองรับ shortcode เดิม หากระบุทั้งสองค่าจะใช้ post_id ที่มากกว่า 0 ก่อน
• limit: จำนวนบทความ 1–10 รายการสำหรับ shortcode นั้น ไม่แก้ค่าที่บันทึกไว้ หากไม่ระบุหรือใช้ 0 จะใช้จำนวนจากการตั้งค่า

หากปิด “เปิดใช้งาน section นี้” ในหน้าต้นทาง shortcode ที่อ้างอิงหน้านั้นจะไม่แสดงบนเว็บ วาง shortcode ซ้ำหลายตำแหน่งได้ โดยแต่ละ slider ทำงานแยกกัน ระบบยังสุ่มบทความที่เผยแพร่แล้วตามเดิม ทั้งตอนแสดงครั้งแรกและตอนโหลดรายการใหม่ผ่าน AJAX การอ้างอิงหน้าต้นทางเป็นการใช้การตั้งค่าร่วมกัน ไม่ได้ล็อกรายการบทความที่สุ่มได้

ตรวจการทำงานฝั่ง PHP ด้วย php modules/tumtook-page-article-recommendations/tests/smoke.php จากโฟลเดอร์ปลั๊กอิน ชุดทดสอบใช้ข้อมูลจำลองและไม่เชื่อมต่อฐานข้อมูล

Tumtook Home Product Recommendations

โมดูล modules/tumtook-home-product-recommendations/ ใช้รูปแบบการ์ดและ slider จาก Product Recommendations โดยเลือกหน้าที่ต้องการแสดงบน Home ได้เอง

1. เปิดหน้าแก้ไข Page ที่ใช้เป็น Home แล้วหากล่อง Tumtook Home — เลือกหน้าที่แสดง
2. เลือกหน้าจาก Select แล้วกด + เพิ่มหน้า เพื่อเพิ่มรายการ ใช้ปุ่ม ↑ / ↓ จัดลำดับ และ ลบ เพื่อนำรายการออก
3. ตั้งหัวข้อ ข้อความปุ่ม ลิงก์ดูทั้งหมด และจำนวนการ์ดสูงสุด (0 = ทุกหน้าที่เลือก)
4. วาง [tumtook_home_recommended_products] ในเนื้อหาหรือ widget Shortcode ของ Elementor แล้วบันทึกหน้า

เลือกได้เฉพาะ Page ที่เผยแพร่ ไม่มีรหัสผ่าน และไม่ใช่หน้าที่กำลังตั้งค่า การ์ดแสดงตามลำดับที่เลือก ไม่มีการสุ่มหรือเติมหน้าที่ไม่ได้เลือก หากไม่เลือกหน้า หรือปิดใช้งานส่วนนี้ จะไม่แสดงบนหน้าเว็บ

ข้อมูลการ์ดอ่านจาก Card Category ทั้งหมด ของหน้าต้นทาง (_ttpr_page_*) และรองรับข้อมูลเก่า (_ttpc_page_* สำหรับชื่อ รูป และราคา) หากไม่มีชื่อหรือรูปที่กำหนดไว้จะใช้ชื่อหน้าและ Featured Image แทน ถ้าไม่มีรูปเลยจะแสดงกรอบภาพสำรอง และถ้าไม่มีราคาจะซ่อนราคา

หากวาง shortcode ผ่าน template และต้องการระบุหน้าที่เก็บการตั้งค่า ใช้ [tumtook_home_recommended_products page_id="123"] โดยเปลี่ยน 123 เป็น ID ของหน้า Home โมดูลใช้ meta _tt_home_product_recommendations และ CSS/JS tthpr-* แยกจากโมดูลเดิม

ตรวจการทำงานฝั่ง PHP ด้วย php modules/tumtook-home-product-recommendations/tests/smoke.php จากโฟลเดอร์ปลั๊กอิน ชุดทดสอบใช้ข้อมูลจำลองและไม่เชื่อมต่อฐานข้อมูล

Tumtook Gallery Auto

โมดูล modules/tumtook-gallery-auto/ แยกจาก Tumtook Gallery สำหรับแสดงภาพแบบ Pinterest: คอลัมน์กว้างเท่ากัน สลับกรอบภาพ 16:9, 1:1 และ 5:4 อัตโนมัติ และเติมภาพถัดไปในคอลัมน์ที่สั้นที่สุด โดยครอปภาพกึ่งกลางให้เต็มกรอบ ระบบคำนวณใหม่เมื่อพื้นที่แสดงผลเปลี่ยน รวมถึง container ใน page builder และคงสัดส่วนของการ์ดแต่ละใบไว้ระหว่างโหลดรูปและปรับหน้าจอ

1. ในหน้าแก้ไข Page เปิดกล่อง Tumtook Gallery Auto แล้วตั้ง API URL, ตำแหน่งรายการรูป, Item Code Filter, ตำแหน่ง URL รูป และ Alt เช่นเดียวกับ Gallery เดิม
2. หากยังไม่เคยบันทึกโมดูลใหม่ จะใช้ค่าจาก Tumtook Gallery เดิมของหน้านั้นเป็นค่าเริ่มต้น หลังบันทึกแล้วจะใช้ meta _tumtook_gallery_auto_settings แยกจากเดิม
3. วาง [tumtook_gallery_auto] ในเนื้อหา หรือ widget Shortcode ของ page builder

[tumtook_gallery_auto]
[tumtook_gallery_auto min_width="220" gap="16" radius="16"]
[tumtook_gallery_auto columns="6" gap="12" limit="30"]

• columns: ค่าเริ่มต้น auto คำนวณตามความกว้างของ container หรือระบุ 1–12 เป็นจำนวนคอลัมน์สูงสุดที่ต้องการ โดยลดลงเมื่อพื้นที่แคบ
• min_width: ความกว้างขั้นต่ำต่อคอลัมน์ในโหมดอัตโนมัติ ค่าเริ่มต้น 220px รองรับ 140–640px พื้นที่กว้างไม่เกิน 600px ใช้ 2 คอลัมน์เมื่อมีพื้นที่พอ หรือ 1 คอลัมน์เมื่อแคบมาก
• gap: ระยะห่างแนวนอนและแนวตั้ง ค่าเริ่มต้น 16px รองรับ 0–64px
• radius: ความโค้งมุมภาพ ค่าเริ่มต้น 16px รองรับ 0–100px
• limit: จำนวนรูปสูงสุด ค่าเริ่มต้นและเพดาน 50 รูป ใช้การแบ่ง Item Code สูงสุด 3 โค้ดแบบเดียวกับ Gallery เดิม
• endpoint: ใช้แทน API URL ของหน้านี้เฉพาะ shortcode นั้น โดยปกติให้กำหนด API URL ในกล่องตั้งค่าเพื่อเก็บ URL ไว้ฝั่งเซิร์ฟเวอร์

รองรับ lazy loading โดยโหลดภาพล่วงหน้าอย่างน้อย 1,000px ก่อนเลื่อนถึง พร้อมดึงข้อมูลครั้งละ 24 รูป ภาพสองแถวแรกใน Gallery ที่อยู่บนหน้าจอเริ่มโหลดทันที และให้ความสำคัญกับแถวแรก ส่วนรูปที่อยู่ไกลยังรอโหลดเพื่อไม่แย่งแบนด์วิดท์ กรอบภาพกำหนดสัดส่วนไว้ล่วงหน้าจึงไม่ขยับระหว่างโหลด มีปุ่มลองใหม่เมื่อ API ผิดพลาด และเปิดรูปขยายเต็มภาพพร้อมปุ่มก่อนหน้า/ถัดไปและคีย์บอร์ด

ตัดรูปซ้ำทั้งก่อนแบ่งหน้าฝั่ง API และก่อนแสดงการ์ด โดยเทียบแหล่งรูปเดียวกัน รวม URL ที่ต่างเฉพาะขนาด thumbnail ของ WordPress, พารามิเตอร์ปรับขนาด, แคช หรือ signature และยังแยกรูปที่มี id/file/path ต่างกัน การตรวจนี้อาศัย URL ของไฟล์ ไม่ใช่การเปรียบเทียบภาพที่อัปโหลดเป็นคนละไฟล์

โมดูลใช้ class, CSS/JS, REST route, AJAX action และ shortcode แยกกัน สามารถวางร่วมกับ [tumtook_gallery] ได้

เมื่อโหลดรูปครบแล้ว จะแสดง fade ปิดท้ายแบบ Gallery เดิมผ่าน ttga-end-panel และใช้ fade สีขาวบนมือถือ ตั้งสีพื้นหลังท้าย Gallery ได้ในกล่อง Tumtook Gallery Auto (ค่าเริ่มต้น #f9f9f9)

ตรวจการทำงานฝั่ง PHP ด้วย php modules/tumtook-gallery-auto/tests/smoke.php จากโฟลเดอร์ปลั๊กอิน ชุดทดสอบใช้ข้อมูลจำลองและไม่เชื่อมต่อฐานข้อมูลหรือ API จริง

Tumtook Job Working Cards

ใช้ shortcode [tumtook_job_working_cards] สำหรับดึง post type งานจาก JetEngine มาแสดงเป็น card slider โดย frontend class และ slider namespace จะใช้ ttwc-* ทั้งหมด

ส่วน ttwc-price ดึงค่าจากฟิลด์ JetEngine ที่มี Name/ID เป็น salary ของแต่ละโพสต์โดยอัตโนมัติ เช่น 18,000–25,000 บาท หรือ ตามตกลง ทั้งการแสดงครั้งแรกและการโหลดใหม่ผ่าน AJAX ถ้าไม่มีค่าจะเว้นว่าง โดยไม่ดึงสถานที่ บริษัท หรือข้อความย่อมาแทน

ชื่อใน ttwc-product-title และเงินเดือนใน ttwc-price แสดงเต็มและขึ้นบรรทัดใหม่ได้โดยไม่จำกัด 2 บรรทัด การ์ดทุกใบในสไลด์ชุดเดียวกันยืดสูงเท่ากับใบที่มีเนื้อหาสูงที่สุด และวางเงินเดือนชิดด้านล่างในระดับเดียวกัน ทั้งเดสก์ท็อปและมือถือ

วิธีใช้ Shortcode

• แสดง Job Working posts ทั้งหมด: [tumtook_job_working_cards]
• ระบุ post type เอง: [tumtook_job_working_cards post_type="job-working"]
• เลือก category ด้วย slug หรือชื่อ category: [tumtook_job_working_cards taxonomy="job-category" category="design"]
• เลือกหลาย category: [tumtook_job_working_cards taxonomy="job-category" category="design,marketing"]
• เลือก category ด้วย term id: [tumtook_job_working_cards taxonomy="job-category" category_id="12"]
• จำกัดจำนวนเองเฉพาะกรณีที่ต้องการ: [tumtook_job_working_cards limit="8"]

คำอธิบาย Attribute

• post_type: slug ของ post type งาน ถ้าไม่ใส่ ระบบจะลองหา job-working, job_working, jobworking, jobs, job ให้อัตโนมัติ
• taxonomy: slug ของ taxonomy ที่ใช้กรอง category เช่น job-category
• category: slug, ชื่อ category, หรือ id ของ term ใช้คั่นหลายค่าด้วย comma หรือขึ้นบรรทัดใหม่ได้
• category_id: id ของ term โดยตรง ใช้คั่นหลายค่าด้วย comma ได้
• limit: จำนวน card ที่ต้องการแสดง ถ้าไม่ใส่หรือปล่อยว่าง จะแสดงรายการที่ match ทั้งหมด
• title: หัวข้อ section ค่าเริ่มต้นคือ งานที่น่าสนใจ
• view_all_label: ข้อความลิงก์ดูทั้งหมด ค่าเริ่มต้นคือ ดูงานทั้งหมด
• view_all_url: URL ของลิงก์ดูทั้งหมด
• button_label: ข้อความปุ่มในการ์ด ค่าเริ่มต้นคือ ดูรายละเอียด
• info_meta: meta key ที่ใช้แสดงใน ttwc-price ค่าเริ่มต้นคือ salary หากต้องการใช้ฟิลด์อื่นให้ระบุเอง เช่น info_meta="salary_range" โดยฟิลด์ที่ไม่มีค่าจะแสดงว่าง
• badge_meta: meta key สำหรับ badge ถ้าไม่ใส่จะใช้ term แรกจาก taxonomy
• image_meta: meta key รูปภาพ ถ้าไม่ใส่จะใช้ featured image ก่อน
• orderby: วิธีเรียงข้อมูล รองรับ rand, date, title, menu_order
• include: post id ที่ต้องการแสดงเท่านั้น คั่นด้วย comma ได้
• exclude: post id ที่ไม่ต้องการแสดง คั่นด้วย comma ได้

ถ้าไม่ใส่ category และ category_id ระบบจะแสดงทุก category และถ้าไม่ใส่ limit จะไม่มีการจำกัดจำนวน card.

Important

Do not activate this combined plugin together with the old standalone versions. If both are active, PHP class/function conflicts may occur. The loader includes basic guard checks and admin notices, but the cleanest setup is to use only this combined plugin.

Version 1.0.1

• Fixed Tumtook catalog image rendering by adding a same-origin WordPress image proxy fallback.
• Catalog images now use server-side cached image URLs first and fall back to the original remote image URL if needed.
• Added support for multiple possible API image URL fields such as fileUrl, imageUrl, url, and path.