STR Chaty - WordPress Plugin สำหรับรวมไอคอน Social Media

# STR Chaty - WordPress Plugin

WordPress Plugin สำหรับแสดง floating chat widget ที่รวมไอคอน Social Media ต่างๆ เพื่อให้ผู้เยี่ยมชมเว็บไซต์สามารถติดต่อได้ง่าย

## คุณสมบัติ

- ✅ รองรับ 5 แพลตฟอร์ม Social Media:
  - 📧 Email
  - 💬 Line
  - 💭 Facebook Messenger
  - ▶️ YouTube
  - 🎵 TikTok
- ✅ แสดงเฉพาะแพลตฟอร์มที่มีการตั้งค่าเท่านั้น
- ✅ Floating widget ที่มุมล่างขวาของหน้าเว็บ
- ✅ Toggle เปิด/ปิด widget ได้
- ✅ Responsive และใช้งานง่าย
- ✅ ใช้ Font Awesome สำหรับไอคอน

## ข้อกำหนดระบบ

- WordPress 5.0 หรือสูงกว่า
- PHP 7.0 หรือสูงกว่า
- jQuery (WordPress มักมีติดตั้งอยู่แล้ว)

## การติดตั้ง

1. **อัปโหลด Plugin**
   - ดาวน์โหลดไฟล์ plugin ทั้งหมด
   - อัปโหลดโฟลเดอร์ `str-chaty` ไปยัง `/wp-content/plugins/` ของเว็บไซต์ WordPress

2. **เปิดใช้งาน Plugin**
   - เข้าสู่ระบบ WordPress Admin
   - ไปที่ **Plugins** → **Installed Plugins**
   - ค้นหา "STR Chaty" และคลิก **Activate**

## วิธีการใช้งาน

### 1. ตั้งค่า Social Media

1. เข้าสู่ระบบ WordPress Admin
2. ไปที่เมนู **STR Chaty** ในแถบด้านซ้าย
3. กรอกข้อมูล Social Media ที่ต้องการแสดง:

   **Email Address**
   - กรอกอีเมลที่ต้องการให้ผู้เยี่ยมชมติดต่อ
   - ตัวอย่าง: `contact@example.com`

   **Line ID**
   - กรอก Line ID ของคุณ (ไม่ต้องใส่ ~)
   - ตัวอย่าง: `@yourlineid` หรือ `yourlineid`

   **Messenger Page**
   - กรอก Facebook Page username ของคุณ
   - ตัวอย่าง: `yourpage` (จะเชื่อมต่อไปที่ `https://m.me/yourpage`)

   **YouTube Channel**
   - กรอก YouTube channel ID หรือ username
   - ตัวอย่าง: `@yourchannel` หรือ `channel/UCxxxxx`

   **TikTok Username**
   - กรอก TikTok username ของคุณ (ไม่ต้องใส่ @)
   - ตัวอย่าง: `yourusername` (จะเชื่อมต่อไปที่ `https://tiktok.com/@yourusername`)

4. คลิก **Save Settings** เพื่อบันทึกการตั้งค่า

### 2. ตรวจสอบผลลัพธ์

- ไปที่หน้าเว็บไซต์ของคุณ (Frontend)
- ดูที่มุมล่างขวาของหน้าเว็บ จะเห็นปุ่ม chat widget สีเขียว
- คลิกที่ปุ่มเพื่อเปิด/ปิด widget และดูไอคอน Social Media ที่ตั้งค่าไว้

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

### ตัวอย่างการตั้งค่า

```
Email Address: contact@example.com
Line ID: @yourlineid
Messenger Page: yourpage
YouTube Channel: @yourchannel
TikTok Username: yourusername
```

### ผลลัพธ์

เมื่อตั้งค่าทั้งหมดแล้ว Widget จะแสดง:
- ไอคอน Email สีแดง
- ไอคอน Line สีเขียว
- ไอคอน Messenger สีน้ำเงิน
- ไอคอน YouTube สีแดง
- ไอคอน TikTok สีดำ

## การทำงานของ Widget

1. **สถานะปกติ**: Widget จะแสดงเป็นปุ่มสีเขียวที่มุมล่างขวา
2. **คลิกเปิด**: เมื่อคลิกที่ปุ่ม ไอคอน Social Media จะแสดงขึ้นมาแบบ slide up
3. **คลิกปิด**: คลิกที่ปุ่มอีกครั้ง หรือคลิกนอกพื้นที่ widget เพื่อปิด
4. **คลิกไอคอน**: เมื่อคลิกที่ไอคอนใดๆ จะเปิดลิงก์ไปยังแพลตฟอร์มนั้นๆ

## การปรับแต่ง (สำหรับ Developer)

### เปลี่ยนตำแหน่ง Widget

แก้ไขไฟล์ `assets/css/style.css`:

```css
.str-chaty-widget {
    position: fixed;
    bottom: 20px;  /* เปลี่ยนค่า bottom */
    right: 20px;   /* เปลี่ยนค่า right */
    z-index: 9999;
}
```

### เปลี่ยนสีของ Widget

แก้ไขไฟล์ `assets/css/style.css`:

```css
.str-chaty-toggle {
    background-color: #4CAF50; /* เปลี่ยนสีปุ่มหลัก */
}

.str-chaty-icon.email {
    background-color: #EA4335; /* เปลี่ยนสี Email */
}
```

### เพิ่ม Social Media ใหม่

1. แก้ไขไฟล์ `str-chaty.php`:
   - เพิ่ม `register_setting()` สำหรับ Social Media ใหม่
   - เพิ่ม `add_settings_field()` สำหรับฟิลด์ใหม่
   - เพิ่ม callback function สำหรับฟิลด์ใหม่
   - เพิ่ม HTML ใน `str_chaty_add_widget()`

2. แก้ไขไฟล์ `assets/css/style.css`:
   - เพิ่ม CSS class สำหรับไอคอนใหม่

## โครงสร้างไฟล์

```
str-chaty/
├── str-chaty.php          # ไฟล์หลักของ plugin
├── assets/
│   ├── css/
│   │   └── style.css      # สไตล์ CSS ของ widget
│   └── js/
│       └── script.js       # JavaScript สำหรับ toggle widget
└── README.md              # คู่มือการใช้งานนี้
```

## การแก้ไขปัญหา

### Widget ไม่แสดงบนหน้าเว็บ

- ตรวจสอบว่า Plugin ถูกเปิดใช้งานแล้ว
- ตรวจสอบว่าได้ตั้งค่า Social Media อย่างน้อย 1 แพลตฟอร์ม
- ล้าง Cache ของเว็บไซต์ (ถ้ามีการใช้ Cache Plugin)
- ตรวจสอบ Console ใน Browser ว่ามี JavaScript Error หรือไม่

### ไอคอนไม่แสดง

- ตรวจสอบว่า Font Awesome โหลดสำเร็จ (เปิด Developer Tools ดู Network tab)
- ตรวจสอบว่าได้กรอกข้อมูล Social Media ถูกต้องแล้ว

### Widget ซ่อนอยู่หลังเนื้อหา

- Widget ใช้ `z-index: 9999` ควรจะอยู่ด้านบนสุด
- ถ้ายังมีปัญหา อาจต้องเพิ่ม CSS ในธีมของคุณ:
  ```css
  .str-chaty-widget {
      z-index: 99999 !important;
  }
  ```

## การอัปเดต

1. สำรองข้อมูลการตั้งค่าปัจจุบัน
2. อัปโหลดไฟล์ใหม่ทับไฟล์เก่า
3. ตรวจสอบการทำงานของ Widget

## การสนับสนุน

- **Plugin URI**: http://www.krujant.com/str-chaty
- **Author**: Sitthichai Tipsing
- **Author URI**: http://www.krujant.com

## ใบอนุญาต

Plugin นี้เป็นของ Sitthichai Tipsing

## หมายเหตุ

- Widget นี้ใช้ Font Awesome จาก CDN (cdnjs.cloudflare.com)
- ต้องมีอินเทอร์เน็ตเพื่อโหลด Font Awesome
- Plugin นี้จะแสดง widget ในทุกหน้าเว็บไซต์ (Frontend)

## Version

- **Version**: 1.0.0
- **Last Updated**: 2024

---

Download : http://www.krujant.com/wp/plugin/str-chaty.7z

**พัฒนาโดย**: Sitthichai Tipsing  
**เวอร์ชัน**: 1.0.0