สำหรับ WordPress ที่ใช้แผนฟรีหรือแผนส่วนตัว (Personal Plan) และต้องการดึงข้อมูลจาก Google Sheets โดยไม่ต้องใช้ปลั๊กอินที่ต้องการ Business Plan แนะนำวิธีดังนี้:
1. ใช้ปลั๊กอินฟรีที่รองรับ Google Sheets API
คุณสามารถใช้ปลั๊กอินฟรี เช่น:
- WP Table Builder (เหมาะสำหรับแสดงข้อมูลเป็นตาราง)
- Inline Google Spreadsheet Viewer (ดึงข้อมูลจาก Google Sheets มาแสดงในรูปแบบ HTML)
- TablePress + TablePress Extension: Automatic URL Import (สามารถอัปเดตข้อมูลจาก Google Sheets อัตโนมัติ)
ขั้นตอนการใช้ Inline Google Spreadsheet Viewer
- ติดตั้งปลั๊กอิน Inline Google Spreadsheet Viewer จาก WordPress Plugin Directory
- เปิด Google Sheets และแชร์ไฟล์แบบ "Anyone with the link"
- คัดลอก Sheet URL
- ใช้ Shortcode เช่น:
หรือใช้ Table Format:[gdoc key="URL_GOOGLE_SHEET"][gdoc key="URL_GOOGLE_SHEET" class="my-table"]
2. ใช้ Custom HTML + Google Sheets API
หากต้องการให้ข้อมูลอัปเดตเรียลไทม์ สามารถใช้ Google Sheets API + JavaScript ได้โดยไม่ต้องใช้ปลั๊กอิน เช่น:
ขั้นตอนการทำ
- เปิด Google Sheets และแชร์แบบ "Anyone with the link"
- คัดลอก Sheet ID จาก URL
ตัวอย่าง URL:
Sheet ID คือhttps://docs.google.com/spreadsheets/d/1A2B3C4D5E6F7G8H9I0/edit#gid=01A2B3C4D5E6F7G8H9I0 - เพิ่มโค้ด Custom HTML + JavaScript ใน WordPress
ไปที่ Custom HTML Block แล้ววางโค้ด:
<div id="listings"></div> <script> async function fetchGoogleSheetData() { const sheetId = "1A2B3C4D5E6F7G8H9I0"; const sheetName = "Sheet1"; // เปลี่ยนตามชื่อ Sheet ของคุณ const url = `https://docs.google.com/spreadsheets/d/${sheetId}/gviz/tq?tqx=out:json&sheet=${sheetName}`; const response = await fetch(url); const text = await response.text(); const json = JSON.parse(text.substring(47, text.length - 2)); let html = ""; json.table.rows.forEach(row => { const imageUrl = row.c[0].v; const title = row.c[1].v; const price = row.c[2].v; const location = row.c[3].v; html += ` <div style="display: flex; border: 1px solid #ddd; margin-bottom: 10px; padding: 10px;"> <img src="${imageUrl}" style="width: 100px; height: 100px; object-fit: cover; margin-right: 10px;"> <div> <h3>${title}</h3> <p>฿ ${price}</p> <p>📍 ${location}</p> </div> </div> `; }); document.getElementById("listings").innerHTML = html; } fetchGoogleSheetData(); </script>
สรุป
- หากต้องการปลั๊กอิน → ใช้ Inline Google Spreadsheet Viewer หรือ TablePress
- หากต้องการใช้โค้ดเอง → ใช้ Google Sheets API + JavaScript
- ไม่ต้องใช้ Business Plan → ใช้วิธีดึง JSON จาก Google Sheets ผ่าน Google Visualization API
