🇹🇭 Polylang Flag Switcher 🇺🇸

ตัวสลับภาษาสวยๆ สำหรับ WordPress | A Beautiful Language Switcher for WordPress

---

🌟 ภาษาไทย

📋 เกี่ยวกับปลั๊กอินนี้

Polylang Flag Switcher เป็นปลั๊กอินที่จะช่วยให้การสลับภาษาบนเว็บไซต์ของคุณดูดีและใช้งานง่ายมากขึ้น หมดปัญหาตัวสลับภาษาน่าเบื่อ! เรานำดีไซน์ Material Design มาใช้ พร้อมตัวเลือกปรับแต่งเยอะแยะให้คุณเลือกตามใจชอบ

✨ มีอะไรเจ๋งๆ บ้าง?

🎨 เลือกได้ว่าจะโชว์ยังไง

• ธงอย่างเดียว - ดูคลีนๆ เรียบง่าย
• ธง + ตัวย่อ - เช่น 🇹🇭 TH 🇺🇸 EN
• ธง + ชื่อเต็ม - เช่น 🇹🇭 ไทย 🇺🇸 English
• ตัวย่ออย่างเดียว - เช่น TH EN
• ชื่อเต็มอย่างเดียว - เช่น ไทย English

🎯 รูปแบบการแสดง

• ธงเรียงกัน - วางแนวนอนหรือแนวตั้งก็ได้
• ดรอปดาวน์ - กดแล้วเลือกจากเมนูที่เลื่อนลงมา
• ธงเดี่ยว - แสดงแค่ภาษาใดภาษาหนึ่ง

🎨 สไตล์ให้เลือกเพียบ

• มน - มุมมนนิดๆ ดูนุ่มนวล (ค่าเริ่มต้น)
• เหลี่ยม - มุมเหลี่ยมแบบชัดๆ
• วงกลม - ธงเป็นวงกลม ดูทันสมัย
• มีเงา - เพิ่มเงาให้ดูมีมิติ
• มีกรอบ - มีเส้นกรอบรอบธง
• มินิมอล - ดูเรียบๆ สะอาดตา

📏 ขนาดธง

• เล็ก (16x12px)
• กลาง (24x16px) - ค่าเริ่มต้น
• ใหญ่ (32x24px)
• ใหญ่มาก (40x30px)

✨ ฟีเจอร์เด็ดๆ

• โหมดโปร่งใส - เหมาะใช้กับ header โปร่งใสสุดๆ
• Material Design - ดีไซน์สมัยใหม่ มืออาชีพ
• รองรับ Dark Mode - ตรวจจับการตั้งค่าของระบบได้เลย
• ดูดีบนมือถือ - ใช้งานได้ลื่นทุกอุปกรณ์
• ช่วยเรื่อง Accessibility - รองรับ ARIA และใช้คีย์บอร์ดนำทางได้
• ใช้ Pure ES6 - ไม่ต้องพึ่ง jQuery
• กำหนดความกว้างเองได้ - ตั้งค่าได้ทั้ง px, %, vw
• เลือกแสดงภาษาปัจจุบันในดรอปดาวน์ได้ - จะโชว์หรือซ่อนก็ได้ตามใจ

---

🌟 English

📋 About This Plugin

Polylang Flag Switcher makes language switching on your WordPress site look great and feel intuitive. Say goodbye to boring language switchers! We've built this with Material Design principles and tons of customization options, so you can make it truly yours.

✨ What's Cool About It?

🎨 Display Formats

• Flag Only - Clean and minimalist
• Flag + Short Code - e.g., 🇹🇭 TH 🇺🇸 EN
• Flag + Full Name - e.g., 🇹🇭 ไทย 🇺🇸 English
• Short Code Only - e.g., TH EN
• Full Name Only - e.g., ไทย English

🎯 Display Types

• Flag Switcher - Line them up horizontally or vertically
• Language Dropdown - A compact dropdown menu
• Single Flag - Show just one specific language

🎨 Styles to Choose From

• Rounded - Soft corners for a friendly look (default)
• Square - Sharp, clean edges
• Circle - Circular flags for a modern touch
• Shadow - Adds depth with a subtle shadow
• Border - Outlined with a nice border
• Minimal - Super clean and simple

📏 Flag Sizes

• Small (16x12px)
• Medium (24x16px) - default
• Large (32x24px)
• Extra Large (40x30px)

✨ Special Features

• Transparent Mode - Perfect for transparent headers
• Material Design - Modern, polished aesthetics
• Dark Mode Support - Automatically detects system preference
• Fully Responsive - Looks great on any device
• Accessibility Ready - ARIA attributes, keyboard navigation
• Pure ES6 - No jQuery needed
• Custom Width - Set it in px, %, or vw
• Show Current in Dropdown - Choose to include the current language or not

---

🚀 วิธีติดตั้ง | Installation

ภาษาไทย

1. อัพโหลดโฟลเดอร์ polylang-flag-switcher ไปที่ /wp-content/plugins/
2. ไปที่เมนู 'ปลั๊กอิน' ใน WordPress แล้วเปิดใช้งาน
3. ต้องมี Polylang ติดตั้งและเปิดใช้งานอยู่ก่อนนะ
4. เพิ่มภาษาอย่างน้อย 2 ภาษาใน Polylang

English

1. Upload the polylang-flag-switcher folder to /wp-content/plugins/
2. Go to the 'Plugins' menu and activate it
3. Make sure you have Polylang installed and active
4. Add at least 2 languages in Polylang settings

---

📖 วิธีใช้งาน | How to Use

🏗️ Elementor Widget

ภาษาไทย

1. เปิด Elementor Editor ขึ้นมา
2. ค้นหาวิดเจ็ต "Polylang Flag Switcher"
3. ลากไปวางตรงที่ต้องการ
4. ปรับแต่งได้ตามใจ:
   • ประเภทการแสดง: ธง, ดรอปดาวน์, หรือธงเดี่ยว
   • รูปแบบ: เลือกว่าจะโชว์อะไรบ้าง
   • สไตล์: เลือกหน้าตาที่ชอบ
   • ขนาด: เลือกขนาดธง
   • โหมดโปร่งใส: เปิดใช้ถ้า header โปร่งใส
   • ความกว้างดรอปดาวน์: อัตโนมัติ, กำหนดเอง, หรือเต็มความกว้าง

English

1. Open up Elementor Editor
2. Search for "Polylang Flag Switcher" widget
3. Drag it to where you want it
4. Customize away:
   • Display Type: Flags, Dropdown, or Single Flag
   • Display Format: Pick what to show
   • Style: Choose your visual style
   • Size: Select flag size
   • Transparent Mode: Turn on for transparent headers
   • Dropdown Width: Auto, Custom, or Full Width

📝 Shortcodes

1. Flag Switcher | ธงสลับภาษา

ตัวอย่างการใช้งาน:

[pfs_flags display_format="flag_short" layout="horizontal" size="medium"]

พารามิเตอร์ที่ใช้ได้:

• display_format: flag_only, flag_short, flag_full, short_only, full_only
• layout: horizontal, vertical
• size: small, medium, large, extra-large
• style: rounded, square, circle, shadow, border, minimal
• show_current: true, false
• hide_current: true, false
• native_name: true, false
• force_home: true, false
• class: ใส่ CSS class เพิ่มเติมได้
• id: ใส่ ID เพิ่มเติมได้

ตัวอย่างเพิ่มเติม:

// ธงแนวนอนพร้อมตัวย่อ
[pfs_flags display_format="flag_short" layout="horizontal"]

// รายการแนวตั้งพร้อมชื่อเต็ม
[pfs_flags display_format="flag_full" layout="vertical" size="large"]

// แสดงแค่ธง ซ่อนภาษาปัจจุบัน
[pfs_flags display_format="flag_only" hide_current="true"]

---

2. Language Dropdown | ดรอปดาวน์ภาษา

ตัวอย่างการใช้งาน:

[pfs_dropdown display_format="flag_short" transparent="true" width="200px"]

พารามิเตอร์ที่ใช้ได้:

• display_format: flag_only, flag_short, flag_full, short_only, full_only
• size: small, medium, large, extra-large
• style: rounded, square, circle, shadow, border, minimal
• transparent: true, false - เปิดโหมดโปร่งใส
• show_current_in_dropdown: true, false - แสดงภาษาปัจจุบันในตัวเลือก
• width: 200px, 100%, auto - กำหนดความกว้าง
• native_name: true, false
• class: ใส่ CSS class เพิ่มเติมได้
• id: ใส่ ID เพิ่มเติมได้

ตัวอย่างเพิ่มเติม:

// ดรอปดาวน์โปร่งใสสำหรับ header
[pfs_dropdown display_format="flag_only" transparent="true" width="80px"]

// ดรอปดาวน์เต็มความกว้างสำหรับมือถือ
[pfs_dropdown display_format="flag_full" width="100%" show_current_in_dropdown="true"]

// ดรอปดาวน์กะทัดรัด
[pfs_dropdown display_format="short_only" width="120px"]

---

3. Single Flag | ธงเดี่ยว

ตัวอย่างการใช้งาน:

[pfs_flag language="en" display_format="flag_short"]

พารามิเตอร์ที่ใช้ได้:

• language: รหัสภาษา เช่น en, th, fr - ต้องระบุ
• display_format: flag_only, flag_short, flag_full, short_only, full_only
• size: small, medium, large, extra-large
• style: rounded, square, circle, shadow, border, minimal
• link: true, false - ให้คลิกได้หรือไม่
• native_name: true, false
• class: ใส่ CSS class เพิ่มเติมได้
• id: ใส่ ID เพิ่มเติมได้

ตัวอย่างเพิ่มเติม:

// ธงอังกฤษพร้อมตัวย่อ
[pfs_flag language="en" display_format="flag_short"]

// ธงไทยอย่างเดียว คลิกไม่ได้
[pfs_flag language="th" display_format="flag_only" link="false"]

// ธงฝรั่งเศสขนาดใหญ่พร้อมชื่อเต็ม
[pfs_flag language="fr" display_format="flag_full" size="large"]

---

🎨 ตัวอย่างรูปแบบการแสดงผล | Display Format Examples

รูปแบบ	โค้ด	ผลลัพธ์
ธงอย่างเดียว	display_format="flag_only"	🇹🇭 🇺🇸
ธง + ตัวย่อ	display_format="flag_short"	🇹🇭 TH 🇺🇸 EN
ธง + ชื่อเต็ม	display_format="flag_full"	🇹🇭 ไทย 🇺🇸 English
ตัวย่ออย่างเดียว	display_format="short_only"	TH EN
ชื่อเต็มอย่างเดียว	display_format="full_only"	ไทย English

---

💡 ไอเดียการใช้งาน | Use Cases

1. Header โปร่งใส | Transparent Header

อยากใส่ในเมนูที่พื้นหลังโปร่งใส? ใช้แบบนี้เลย:

[pfs_dropdown
    display_format="flag_only"
    transparent="true"
    width="80px"
    style="minimal"
]

2. เมนูมือถือ | Mobile Menu

สำหรับหน้าจอมือถือ ใช้แบบเต็มความกว้าง:

[pfs_dropdown
    display_format="flag_full"
    width="100%"
    show_current_in_dropdown="true"
    size="large"
]

3. Sidebar | แถบด้านข้าง

วางไว้ใน sidebar ก็เหมาะ:

[pfs_flags
    display_format="flag_short"
    layout="vertical"
    size="medium"
]

4. Footer | ท้ายเว็บ

ตัวสลับภาษาเล็กๆ ไว้ที่ท้ายเว็บ:

[pfs_flags
    display_format="short_only"
    layout="horizontal"
    size="small"
    style="minimal"
]

5. ตัวบ่งชี้ภาษา | Language Indicator

แสดงธงภาษาที่ใช้อยู่ คลิกไม่ได้:

[pfs_flag
    language="th"
    display_format="flag_short"
    link="false"
    size="small"
]

---

🎯 CSS Classes ที่ใช้ได้

Containers หลัก

• .pfs-flag-switcher - ตัวครอบ flag switcher
• .pfs-language-dropdown - ตัวครอบดรอปดาวน์
• .pfs-single-flag - ตัวครอบธงเดี่ยว

Layouts

• .pfs-layout-horizontal - แนวนอน
• .pfs-layout-vertical - แนวตั้ง

Styles

• .pfs-style-rounded - มุมมน
• .pfs-style-square - มุมเหลี่ยม
• .pfs-style-circle - วงกลม
• .pfs-style-shadow - มีเงา
• .pfs-style-border - มีกรอบ
• .pfs-style-minimal - มินิมอล

Sizes

• .pfs-size-small - เล็ก
• .pfs-size-medium - กลาง
• .pfs-size-large - ใหญ่
• .pfs-size-extra-large - ใหญ่มาก

Classes พิเศษ

• .pfs-transparent - โหมดโปร่งใส
• .pfs-full-width - ดรอปดาวน์เต็มความกว้าง
• .pfs-current-language - ภาษาปัจจุบัน
• .pfs-current-option - ภาษาปัจจุบันในดรอปดาวน์

---

🎨 ตัวอย่าง Custom CSS

เปลี่ยนพื้นหลังดรอปดาวน์

.pfs-language-dropdown .pfs-current-display {
  background-color: #f5f5f5;
}

เปลี่ยนสีตอน hover

.pfs-language-link:hover {
  background-color: #e3f2fd;
  color: #1976d2;
}

ทำธงให้ใหญ่ขึ้น

.pfs-flag {
  width: 32px;
  height: 24px;
}

ปรับความกว้างดรอปดาวน์

.pfs-language-dropdown {
  min-width: 180px;
}

---

⚡ JavaScript API

รีเฟรชดรอปดาวน์

if (window.PFS) {
  window.PFS.refreshDropdowns();
}

ดึงข้อมูลภาษา

if (window.PFS) {
  window.PFS.getLanguageData().then((data) => {
    console.log(data);
  });
}

ติดตามการเปลี่ยนภาษา

document.addEventListener("pfs:language_switch", (e) => {
  console.log("เปลี่ยนภาษาเป็น:", e.detail);
});

---

🌐 รองรับเบราว์เซอร์ไหนบ้าง? | Browser Support

Browser	รองรับ
Chrome	✅ เวอร์ชันล่าสุด
Firefox	✅ เวอร์ชันล่าสุด
Safari	✅ เวอร์ชันล่าสุด
Edge	✅ เวอร์ชันล่าสุด
มือถือ	✅ ทุกรุ่น

---

📋 ต้องมีอะไรบ้าง? | Requirements

สิ่งที่ต้องมี

• WordPress 5.0 ขึ้นไป
• Polylang 2.0 ขึ้นไป
• PHP 7.0 ขึ้นไป
• Elementor 3.5+ (ถ้าจะใช้วิดเจ็ต Elementor)

---

📝 บันทึกการเปลี่ยนแปลง | Changelog

เวอร์ชัน 1.0.0 - รุ่นแรก!

• 🎨 UI สวยๆ แบบ Material Design
• ⚡ ใช้ Pure ES6 ไม่ง้อ jQuery
• 🎯 เลือกรูปแบบการแสดงได้หลากหลาย
• 🌊 โหมดโปร่งใสสำหรับ header
• 📏 กำหนดความกว้างได้ตามใจ
• ✅ เลือกแสดงภาษาปัจจุบันในดรอปดาวน์ได้
• 🏗️ วิดเจ็ต Elementor พร้อมใช้
• 📝 รองรับ shortcode
• 🌙 รองรับ Dark Mode
• ♿ ฟีเจอร์ช่วยเรื่อง Accessibility

---

🆘 ต้องการความช่วยเหลือ? | Need Help?

หากมีปัญหาหรือคำถามใดๆ สามารถติดต่อเราได้ทางฟอรั่มสนับสนุนของปลั๊กอิน หรือติดต่อผู้พัฒนาโดยตรงได้เลยครับ!

---

📄 License

ปลั๊กอินนี้เผยแพร่ภายใต้ GPL v2 หรือใหม่กว่า ใช้งานได้ฟรี แก้ไขได้ตามสบาย!

---

💝 Credits

พัฒนาด้วย ❤️ โดยใช้หลักการ Material Design และมาตรฐานเว็บสมัยใหม่

Built with ❤️ using Material Design principles and modern web standards.

---

🌟 สร้างด้วยรักสำหรับชุมชน WordPress 🌟

Polylang Flag Switcher - ทำให้เว็บไซต์ของคุณเป็นสากล!

---

ทำลายกำแพงภาษา ทีละธงชาติ 🏳️