STR Slider Plugin WordPress Plugin สำหรับสร้าง Slider (สไลด์โชว์)

# คู่มือการใช้งาน STR Slider Plugin

## ข้อมูลทั่วไป

**STR Slider** เป็น WordPress Plugin สำหรับสร้าง Slider (สไลด์โชว์) ที่ใช้งานง่าย มีฟีเจอร์รองรับการสร้างหลายกลุ่ม Slider และแต่ละกลุ่มสามารถมีได้สูงสุด 5 slides

### คุณสมบัติหลัก
- สร้าง Slider Group ได้หลายกลุ่ม
- แต่ละกลุ่มมีได้สูงสุด 5 slides
- รองรับเอฟเฟกต์การเปลี่ยนภาพหลายแบบ (Fade, Slide Left/Right/Up/Down, Random)
- Auto-play อัตโนมัติทุก 5 วินาที
- มีปุ่มควบคุม Previous/Next
- รองรับการลิงก์จากแต่ละ slide
- Drag & Drop เพื่อจัดลำดับ slides
- Responsive Design รองรับทุกขนาดหน้าจอ

---

## วิธีการติดตั้ง

1. อัปโหลดโฟลเดอร์ `str-slider` ไปยัง `/wp-content/plugins/`
2. ไปที่ **Plugins** ใน WordPress Admin
3. คลิก **Activate** ที่ STR Slider Plugin

---

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

### 1. สร้าง Slider Group ใหม่

1. ไปที่เมนู **Slider Groups** ใน WordPress Admin (จะอยู่ด้านซ้ายมือ)
2. คลิก **Add New** เพื่อสร้าง Slider Group ใหม่
3. ใส่ชื่อ Slider Group (เช่น "Homepage Slider", "Product Slider" เป็นต้น)
4. คลิก **Save Draft** หรือ **Publish**

### 2. เพิ่ม Slides ให้กับ Slider Group

1. หลังจากสร้าง Slider Group แล้ว ให้เลื่อนลงไปที่ส่วน **Slides**
2. คุณจะเห็นช่องว่างสำหรับเพิ่ม slides ได้สูงสุด 5 slides

#### สำหรับแต่ละ slide คุณสามารถ:

**เพิ่มรูปภาพ:**
- คลิกปุ่ม **Change Image** หรือคลิกที่ช่องว่าง **Add Image**
- เลือกรูปภาพจาก Media Library หรืออัปโหลดใหม่
- **ขนาดรูปภาพที่แนะนำ: 1920x480 pixels**

**ตั้งค่า Title:**
- ใส่ชื่อหรือคำอธิบายของ slide (optional)

**เพิ่ม Link URL:**
- ใส่ URL ที่ต้องการให้ slide นี้ลิงก์ไปเมื่อคลิก (optional)
- ตัวอย่าง: `https://www.krujant.com/str-slider`

**ลบ Slide:**
- คลิกปุ่ม **Remove** เพื่อลบ slide ออก

**จัดลำดับ Slides:**
- ลากและวาง (Drag & Drop) ที่ไอคอนเมนู (☰) ด้านซ้ายของแต่ละ slide เพื่อจัดลำดับ
- ลำดับจะถูกบันทึกอัตโนมัติ

### 3. ตั้งค่า Transition Effect

1. ในหน้าแก้ไข Slider Group ให้เลื่อนลงไปที่ส่วน **Slider Settings**
2. เลือก Transition Effect ที่ต้องการ:
   - **Fade** - ค่อยๆ จางหายไป
   - **Slide Left** - เลื่อนไปทางซ้าย
   - **Slide Right** - เลื่อนไปทางขวา
   - **Slide Up** - เลื่อนขึ้น
   - **Slide Down** - เลื่อนลง
   - **Random** - สุ่มเอฟเฟกต์ทุกครั้ง

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

### 4. ใช้ Shortcode แสดง Slider

1. หลังจากสร้างและตั้งค่า Slider Group แล้ว
2. ดูที่กล่อง **Shortcode** ทางด้านขวา (Sidebar)
3. จะเห็น Shortcode ในรูปแบบ: `[str_slider id="123"]`
4. คลิกปุ่ม **Copy** เพื่อคัดลอก Shortcode
5. วาง Shortcode ลงใน:
   - **Post หรือ Page**: วาง Shortcode ใน Editor
   - **Widget**: ใช้ Shortcode Widget
   - **Theme Template**: ใช้ `<?php echo do_shortcode('[str_slider id="123"]'); ?>`

**ตัวอย่างการใช้งาน:**
```
[str_slider id="1"]
```

**หมายเหตุ:** ตัวเลข `id` คือ ID ของ Slider Group ที่คุณสร้าง (ดูได้จาก URL หรือในหน้า All Slider Groups)

---

## ฟีเจอร์เพิ่มเติม

### Auto-Play
Slider จะเปลี่ยนภาพอัตโนมัติทุก **5 วินาที**

### การควบคุมด้วยมือ
- คลิกปุ่ม **<** (Previous) เพื่อดู slide ก่อนหน้า
- คลิกปุ่ม **>** (Next) เพื่อดู slide ถัดไป

### Responsive Design
Slider จะปรับขนาดให้เหมาะสมกับหน้าจอทุกขนาด:
- Desktop (1424px+): ความสูง 356px
- Tablet (1200px): ความสูง 300px
- Tablet (992px): ความสูง 250px
- Mobile (768px): ความสูง 200px
- Mobile (576px): ความสูง 150px

---

## ข้อกำหนดและข้อจำกัด

- **จำนวน Slides**: สูงสุด 5 slides ต่อ 1 Slider Group
- **ขนาดรูปภาพ**: แนะนำ 1920x480 pixels สำหรับผลลัพธ์ที่ดีที่สุด
- **รูปแบบไฟล์**: รองรับไฟล์รูปภาพมาตรฐาน (JPG, PNG, GIF, WebP)

---

## การแก้ไขปัญหาเบื้องต้น

### Slider ไม่แสดงผล
- ตรวจสอบว่าได้ใส่ Shortcode ถูกต้อง
- ตรวจสอบว่า Slider Group มี slides อย่างน้อย 1 slide
- ตรวจสอบว่า Slider Group ถูก Publish แล้ว

### รูปภาพไม่แสดง
- ตรวจสอบว่าได้อัปโหลดรูปภาพแล้ว
- ตรวจสอบสิทธิ์การเข้าถึงไฟล์รูปภาพ
- ลอง Clear Cache ของ WordPress หรือ Browser

### Transition Effect ไม่ทำงาน
- ตรวจสอบว่าได้เลือก Transition Effect แล้ว
- ลองเปลี่ยนเป็น Effect อื่น
- ตรวจสอบว่า JavaScript ทำงานปกติ (เปิด Developer Console)

---

## ข้อมูลเทคนิค

### Database Table
Plugin จะสร้างตาราง `wp_str_slides` ในฐานข้อมูลเพื่อเก็บข้อมูล slides

### File Structure
```
str-slider/
├── assets/
│   ├── css/
│   │   ├── str-slider.css
│   │   └── admin.css
│   └── js/
│       └── str-slider.js
├── includes/
│   ├── class-str-slider.php
│   └── class-str-slider-admin.php
└── str-slider.php
```

### Dependencies
- WordPress 5.0+
- jQuery (มาพร้อมกับ WordPress)
- WordPress Media Library

---

## การอัปเดต

เมื่อมีการอัปเดต Plugin:
1. Backup ข้อมูลก่อน (แนะนำให้ใช้ Backup Plugin)
2. อัปเดตผ่าน WordPress Admin > Plugins
3. หรืออัปโหลดไฟล์ใหม่ทับไฟล์เดิม

---

## การติดต่อและสนับสนุน

- **Plugin URI**: https://www.krujant.com/str-slider
- **Author**: Sitthichai Tipsing
- **Author URI**: https://www.krujant.com

---

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

### ตัวอย่าง 1: Homepage Slider
```
[str_slider id="1"]
```
แสดง Slider ที่หน้าแรกของเว็บไซต์

### ตัวอย่าง 2: Product Slider
```
[str_slider id="2"]
```
แสดง Slider สำหรับสินค้าในหน้ารายละเอียดสินค้า

### ตัวอย่าง 3: ใช้ใน Theme Template
```php
<?php
if (function_exists('do_shortcode')) {
    echo do_shortcode('[str_slider id="1"]');
}
?>
```

---

## Changelog

### Version 1.0.0
- Initial release
- รองรับการสร้าง Slider Group หลายกลุ่ม
- รองรับสูงสุด 5 slides ต่อกลุ่ม
- รองรับ Transition Effects หลายแบบ
- Auto-play อัตโนมัติ
- Drag & Drop สำหรับจัดลำดับ
- Responsive Design

---

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