WordPress Plugin สำหรับแสดงสถิติจำนวนนักเรียนแยกตามระดับชั้น ม.1-ม.6

# STR Student Statistics - WordPress Plugin

## 📋 คำอธิบาย

STR Student Statistics เป็น WordPress Plugin สำหรับแสดงสถิติจำนวนนักเรียนแยกตามระดับชั้น ม.1-ม.6 พร้อมไอคอน Font Awesome และเอฟเฟกต์ตัวเลขวิ่ง (Counter Animation) ที่สวยงาม

## ✨ ฟีเจอร์

- ✅ แสดงสถิติจำนวนนักเรียนแยกตามระดับชั้น ม.1-ม.6
- ✅ เลือกไอคอน Font Awesome สำหรับแต่ละชั้น
- ✅ กำหนดข้อความแสดงผลสำหรับแต่ละชั้น
- ✅ เอฟเฟกต์ตัวเลขวิ่งเมื่อโหลดหน้าเว็บ
- ✅ Responsive Design รองรับทุกขนาดหน้าจอ
- ✅ ใช้ฟอนต์ Google Fonts (Kanit) สำหรับภาษาไทย
- ✅ แสดงยอดรวมจำนวนนักเรียนทั้งหมด

## 📦 ระบบที่ต้องการ

- WordPress 5.0 หรือสูงกว่า
- PHP 7.0 หรือสูงกว่า
- jQuery (มาใน WordPress อยู่แล้ว)

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

### วิธีที่ 1: ติดตั้งผ่าน WordPress Admin

1. เข้าไปที่ **Plugins** > **Add New**
2. คลิก **Upload Plugin**
3. เลือกไฟล์ `str-stato.zip`
4. คลิก **Install Now**
5. คลิก **Activate Plugin**

### วิธีที่ 2: ติดตั้งด้วยตนเอง

1. ดาวน์โหลดไฟล์ plugin
2. แตกไฟล์และอัปโหลดโฟลเดอร์ `str-stato` ไปยัง `/wp-content/plugins/`
3. ไปที่หน้า **Plugins** ใน WordPress Admin
4. คลิก **Activate** ที่ Plugin "STR Student Statistics"

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

### 1. ตั้งค่าข้อมูล

1. ไปที่เมนู **จำนวนนักเรียน** ใน WordPress Admin (แถบด้านซ้าย)
2. กรอกข้อมูลดังนี้:
   - **หัวเรื่องสถิติ**: ข้อความที่ต้องการแสดงด้านบนสุด (เช่น "สถิติจำนวนนักเรียน")
   - สำหรับแต่ละชั้น (ม.1-ม.6):
     - **จำนวนนักเรียน**: จำนวนนักเรียนในแต่ละชั้น
     - **ไอคอน**: เลือกไอคอน Font Awesome ที่ต้องการ
     - **ข้อความ**: ข้อความที่ต้องการแสดง (เช่น "ม.1", "ชั้นมัธยม 1" เป็นต้น)
3. คลิก **บันทึกข้อมูล**

### 2. ใช้ Shortcode แสดงผล

เพิ่ม Shortcode `[str_stato]` ลงในหน้าเว็บหรือบทความที่ต้องการแสดงสถิติ

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

```
[str_stato]
```

### 3. ตัวอย่างการใช้งานในหน้าเว็บ

#### ใช้ใน Page/Post Editor
```
เพิ่ม Shortcode นี้ในหน้าเว็บหรือบทความ:
[str_stato]
```

#### ใช้ใน Theme Template
```php
<?php echo do_shortcode('[str_stato]'); ?>
```

#### ใช้ใน Widget
- ไปที่ **Appearance** > **Widgets**
- เพิ่ม Widget **Shortcode**
- ใส่ `[str_stato]` ในช่อง Shortcode

## 🎨 ไอคอนที่รองรับ

Plugin รองรับไอคอน Font Awesome ต่อไปนี้:

- `fa-user-graduate` - นักเรียน
- `fa-users` - กลุ่มคน
- `fa-school` - โรงเรียน
- `fa-chalkboard-teacher` - ครู
- `fa-book-reader` - นักอ่าน
- `fa-graduation-cap` - หมวกบัณฑิต
- `fa-book` - หนังสือ
- `fa-pencil-alt` - ดินสอ

## 📱 Responsive Design

Plugin นี้รองรับการแสดงผลบนอุปกรณ์ต่างๆ:

- **Desktop**: แสดงผล 6 คอลัมน์ (ม.1-ม.6)
- **Tablet** (≤768px): แสดงผล 2 คอลัมน์ต่อแถว
- **Mobile** (≤480px): แสดงผล 1 คอลัมน์ต่อแถว

## 🔧 การปรับแต่ง

### เปลี่ยนสีและสไตล์

แก้ไขไฟล์ `css/style.css` เพื่อปรับแต่งสี รูปแบบ และขนาดตัวอักษร

**ตัวอย่างการเปลี่ยนสีไอคอน:**
```css
.str-stato-col i {
    color: #ff6b6b; /* เปลี่ยนเป็นสีแดง */
}
```

### เปลี่ยนความเร็วของตัวเลขวิ่ง

แก้ไขไฟล์ `js/script.js` ในส่วน `speed`:
```javascript
speed: 2000, // เปลี่ยนเป็น 3000 สำหรับช้าลง หรือ 1000 สำหรับเร็วกว่า
```

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

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

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

### ตัวเลขไม่วิ่ง
- ตรวจสอบว่า jQuery ถูกโหลดหรือไม่
- ตรวจสอบ Console ใน Browser สำหรับ Error
- ตรวจสอบว่า CDN สำหรับ jQuery CountTo ทำงานได้

### ไอคอนไม่แสดง
- ตรวจสอบว่า Font Awesome ถูกโหลดหรือไม่
- ตรวจสอบ Network Tab ใน Developer Tools

### หน้าเว็บแสดงผลไม่ถูกต้อง
- ตรวจสอบว่า CSS ถูกโหลดหรือไม่
- ล้าง Cache ของ Browser และ WordPress

## 📝 ข้อมูล Plugin

- **Plugin Name**: STR Student Statistics
- **Version**: 1.0
- **Author**: Sitthichai Tipsing
- **Author URI**: http://www.krujant.com
- **Plugin URI**: http://www.krujant.com/str-stato
- **Text Domain**: str-stato

## 🔐 ความปลอดภัย

- Plugin ใช้ WordPress Nonce เพื่อป้องกัน CSRF attacks
- ใช้ `sanitize_text_field()` และ `intval()` เพื่อป้องกัน XSS และการ Injection
- ใช้ `esc_html()` และ `esc_attr()` เพื่อ Escape ข้อมูลที่แสดงผล

## 📄 ใบอนุญาต

Plugin นี้เป็นของ Sitthichai Tipsing - สงวนลิขสิทธิ์

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

หากมีปัญหาหรือข้อเสนอแนะ สามารถติดต่อได้ที่:
- Website: http://www.sitthichaiit.com
- Email: [ติดต่อผ่านเว็บไซต์]

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

### ตัวอย่างที่ 1: แสดงสถิติในหน้าแรก

1. สร้าง Page ใหม่ชื่อ "หน้าแรก"
2. เพิ่ม Shortcode `[str_stato]`
3. ตั้งค่าเป็นหน้าแรกใน Settings > Reading

### ตัวอย่างที่ 2: แสดงสถิติใน Sidebar

1. ไปที่ Appearance > Widgets
2. เพิ่ม Widget "Shortcode" ใน Sidebar
3. ใส่ `[str_stato]` ในช่อง Shortcode

### ตัวอย่างที่ 3: แสดงใน Theme Template

เพิ่มโค้ดนี้ในไฟล์ Template:
```php
<?php
if (function_exists('do_shortcode')) {
    echo do_shortcode('[str_stato]');
}
?>
```

## 🎯 ขั้นตอนการใช้งานแบบละเอียด

### ขั้นตอนที่ 1: ติดตั้งและเปิดใช้งาน
1. ติดตั้ง Plugin ตามวิธีการข้างต้น
2. เปิดใช้งาน Plugin

### ขั้นตอนที่ 2: ตั้งค่าข้อมูล
1. ไปที่ **จำนวนนักเรียน** ในเมนูด้านซ้าย
2. กรอกข้อมูล:
   - หัวเรื่องสถิติ: "สถิติจำนวนนักเรียน"
   - ม.1: จำนวน 150, ไอคอน fa-user-graduate, ข้อความ "ม.1"
   - ม.2: จำนวน 145, ไอคอน fa-users, ข้อความ "ม.2"
   - (ทำเช่นเดียวกันกับ ม.3-ม.6)
3. คลิก **บันทึกข้อมูล**

### ขั้นตอนที่ 3: แสดงผลในหน้าเว็บ
1. สร้าง Page หรือ Post ใหม่
2. เพิ่ม Shortcode: `[str_stato]`
3. Publish หน้าเว็บ
4. เปิดดูผลลัพธ์

## 💡 เคล็ดลับ

- **อัปเดตข้อมูล**: ไปที่เมนู "จำนวนนักเรียน" เพื่ออัปเดตจำนวนนักเรียนใหม่
- **เปลี่ยนไอคอน**: เลือกไอคอนที่แตกต่างกันสำหรับแต่ละชั้นเพื่อให้ดูน่าสนใจ
- **ปรับแต่งข้อความ**: ใช้ข้อความที่สื่อความหมาย เช่น "ชั้นมัธยมศึกษาปีที่ 1" แทน "ม.1"

## 🔄 อนาคต

ฟีเจอร์ที่อาจเพิ่มในอนาคต:
- [ ] Export/Import ข้อมูล
- [ ] กราฟแสดงสถิติ
- [ ] รองรับระดับชั้นอื่นๆ (เช่น ป.1-ป.6)
- [ ] Shortcode Attributes สำหรับปรับแต่งเพิ่มเติม
- [ ] การแสดงผลแบบ Grid/List

---

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

**สร้างด้วย ❤️ โดย Sitthichai Tipsing**