# คู่มือการจัดการข่าวสาร

### **1.การเข้าใช้งานระบบ**

- วิธีเข้าระบบหลังบ้าน กดที่ URL : [https://songkhlaproject.rid.go.th/wp-admin](https://uat-hhk.rid.go.th/wp-admin/) หรือเข้ามาที่หน้าหลักของเว็บไซต์ด้านบนจะมี Web Address ให้พิมพ์ต่อท้ายดังนี้ /wp-admin เพิ่มเข้าไปจากนั้นกดปุ่ม Enter ที่แป้นพิมพ์ แสดง**ดังภาพที่ 1**

##### **ภาพที่ 1** วิธีเข้าระบบหลังบ้าน

[![Screenshot 2026-09-03 124045.png](https://bookstack.rid.go.th/uploads/images/gallery/2026-09/JMNclJ0TasCK1fgg-screenshot-2026-09-03-124045.png)](https://bookstack.rid.go.th/uploads/images/gallery/2026-06/Zfc4WjUtpukEiQha-screenshot-2026-06-19-102553.png)

- เมื่อ Enter ระบบจะดำเนินการไปหน้าเข้าสู่ระบบหลังบ้านของเว็บไซต์
- กรอก Username และ Password จากนั้นคลิก ![Screenshot 2026-06-19 144324.png](https://bookstack.rid.go.th/uploads/images/gallery/2026-06/VJpDFlDE8jzlTeew-screenshot-2026-06-19-144324.png) แสดง**ดังภาพที่ 2**

##### **ภาพที่ 2** หน้าจอการเข้าสู่ระบบ

##### ![Screenshot 2026-06-19 144122.png](https://bookstack.rid.go.th/uploads/images/gallery/2026-06/ENFW1wcxLdlwibje-screenshot-2026-06-19-144122.png)

- เมื่อเข้าสู่ระบบสำเร็จ ระบบจะดำเนินการไปหน้าหลักของระบบ ซึ่งจะมีเมนูแสดง**ดังภาพที่ 3**

##### **ภาพที่ 3** หน้าจอหลักของระบบ  


![Screenshot 2026-09-03 124142.png](https://bookstack.rid.go.th/uploads/images/gallery/2026-09/wCQXvazyzFn4Akwi-screenshot-2026-09-03-124142.png)

---

### **2.เมนูหลักสำหรับการจัดการข่าวสารของเว็บไซต์**

- เรื่อง (Post) คือเนื้อหาข่าวสารที่เผยแพร่แบบ **ตามเวลา** เพื่อแจ้งประชาสัมพันธ์กิจกรรม โครงการ ข่าวสาร หน่วยงาน หรือประกาศต่าง ๆ ให้กับผู้เข้าชมเว็บไซต์
- เมนู เรื่อง เข้าโดยคลิกที่ ![Screenshot 2026-06-19 145055.png](https://bookstack.rid.go.th/uploads/images/gallery/2026-06/741o6lLxF0UYGJFF-screenshot-2026-06-19-145055.png)ระบบจะแสดงรายการข่าวทั้งหมด**ดังภาพที่ 4**

##### **ภาพที่ 4** เมนู เรื่อง (Post)

![Screenshot 2026-09-03 124231.png](https://bookstack.rid.go.th/uploads/images/gallery/2026-09/ugYns1q766OgmRZ6-screenshot-2026-09-03-124231.png)

#### 2.1 การเพิ่มข้อมูลข่าวสาร

- ที่คอลัมน์หมวดหมู่จะมีการแยกหมวดหมู่ของแต่ละเรื่องไว้ให้
- <span style="text-align: center;">นำเม้าส์ไปชี้ที่ข่าวสารที่อยู่ในหมวดหมู่ "ข่าวสารและกิจกรรม" จะมีเมนูแสดง**ดังภาพที่ 5**</span>

##### <span style="text-align: center;">**ภาพที่** **5** เมนูจัดการข่าวสาร</span>

<span style="text-align: center;">**![Screenshot 2026-09-03 125139.png](https://bookstack.rid.go.th/uploads/images/gallery/2026-09/4UzqVp792G8TGuWT-screenshot-2026-09-03-125139.png)**</span>

- คลิกที่ ![Screenshot 2026-06-19 152447.png](https://bookstack.rid.go.th/uploads/images/gallery/2026-06/d9QRneYTbVlA9VQr-screenshot-2026-06-19-152447.png)
- จะได้ข่าวที่มีชื่อเดิมแต่จะมี [![Screenshot 2026-06-19 152856.png](https://bookstack.rid.go.th/uploads/images/gallery/2026-06/scaled-1680-/mXGn4iq70dXrviKl-screenshot-2026-06-19-152856.png)](https://bookstack.rid.go.th/uploads/images/gallery/2026-06/mXGn4iq70dXrviKl-screenshot-2026-06-19-152856.png) ต่ออยู่ที่ท้ายเรื่อง
- คลิกที่ข่าวใหม่ที่ได้ทำการ copy ขึ้นมาจะเข้าไปที่หน้าสำหรับการแก้ไขข่าวสารประกอบไปด้วย 1.หัวข้อของข่าว 2.แถบเครื่องมือ แสดง**ดังภาพที่ 6**

##### **ภาพที่ 6** หน้าสำหรับแก้ไขข่าวสาร

**![Screenshot 2026-09-03 125300.png](https://bookstack.rid.go.th/uploads/images/gallery/2026-09/J3qNgKNA8slRmSEy-screenshot-2026-09-03-125300.png)**

- คลิกที่หัวข้อข่าวทำการเปลี่ยนเป็นหัวข้อของข่าวใหม่
- คลิกที่รูปภาพที่แถบเครื่องมือจะแสดงหน้าต่าง **ดังภาพที่ 7**##### **ภาพที่ 7** หน้าต่างสำหรับการอัปโหลดรูปภาพ
    
    [![Screenshot 2026-06-19 155341.png](https://bookstack.rid.go.th/uploads/images/gallery/2026-06/scaled-1680-/ef8099rv0IKTOw0f-screenshot-2026-06-19-155341.png)](https://bookstack.rid.go.th/uploads/images/gallery/2026-06/ef8099rv0IKTOw0f-screenshot-2026-06-19-155341.png)
- ที่ Choose folder ให้เลือก folder ที่ต้องการ
- จากนั้นให้ทำการอัปโหลดรูปภาพข่าวทั้งหมดโดยลากรูปภาพจากเครื่องมาวางไว้ที่หน้านี้ หรือคลิกที่ [![Screenshot 2026-06-19 155955.png](https://bookstack.rid.go.th/uploads/images/gallery/2026-06/XSN96TVWgPOulTIW-screenshot-2026-06-19-155955.png)](https://bookstack.rid.go.th/uploads/images/gallery/2026-06/PPYg1KxEnMesmqrJ-screenshot-2026-06-19-155853.png)
- เมื่ออัปโหลดเรียบร้อยจะแสดงหน้าต่าง**ดังภาพที่ 8**##### **ภาพที่ 8** หน้าต่างภาพข่าวทั้งหมด
    
    **[![Screenshot 2026-09-03 125648.png](https://bookstack.rid.go.th/uploads/images/gallery/2026-09/Xfevglx9V0HplMRs-screenshot-2026-09-03-125648.png)](https://bookstack.rid.go.th/uploads/images/gallery/2026-06/MByRnnxXXBn45iB9-screenshot-2026-06-19-160743.png)**
- เลือกภาพที่ต้องการและคลิกที่ [![Screenshot 2026-06-19 161843.png](https://bookstack.rid.go.th/uploads/images/gallery/2026-06/scaled-1680-/1wgf1J1Yp8LJjajn-screenshot-2026-06-19-161843.png)](https://bookstack.rid.go.th/uploads/images/gallery/2026-06/1wgf1J1Yp8LJjajn-screenshot-2026-06-19-161843.png) ภาพที่เลือกจะกลายเป็นภาพปกของข่าว
- จานั้นที่แถบเครื่องมือให้เลื่อนลงมาจะเจอคำว่า "slug" ให้ทำการคลิกที่ชื่อสีน้ำเงินจะมีกล่องแสดงขึ้นมาให้แก้ไขชื่อ ให้แก้เป็นชื่อที่ต้องการ**ดังภาพที่ 9** <span style="color: rgb(224, 62, 45);">**\*ชื่อต้องไม่ซ้ำกับ slug ของข่าวอื่นๆ และแนะนำให้ใช้ภาษาอังกฤษ**</span>##### **ภาพที่ 9** แก้ไขชื่อ slug
    
    [![Screenshot 2026-07-21 103853.png](https://bookstack.rid.go.th/uploads/images/gallery/2026-07/v4cMLdTgVwIY2pJ8-screenshot-2026-07-21-103853.png)](https://bookstack.rid.go.th/uploads/images/gallery/2026-06/m5ITc1xV2jP7Rq0z-screenshot-2026-06-19-162303.png)
- คลิกที่ [![Screenshot 2026-06-19 162907.png](https://bookstack.rid.go.th/uploads/images/gallery/2026-06/scaled-1680-/ZeilNeMbUFXHUjiL-screenshot-2026-06-19-162907.png)](https://bookstack.rid.go.th/uploads/images/gallery/2026-06/ZeilNeMbUFXHUjiL-screenshot-2026-06-19-162907.png) หรือ Ctrl+S จากนั้นคลิกที่ [![Screenshot 2026-06-19 163240.png](https://bookstack.rid.go.th/uploads/images/gallery/2026-06/scaled-1680-/uUlny8U2rQnmjzpM-screenshot-2026-06-19-163240.png)](https://bookstack.rid.go.th/uploads/images/gallery/2026-06/uUlny8U2rQnmjzpM-screenshot-2026-06-19-163240.png) ไปที่หน้าสำหรับการแก้ไขเนื้อหาข่าว เมื่อเข้ามาที่หน้านี้ให้สังเกตที่ด้านขวาจะมีกล่ิงที่ชื่อ Structure ให้สังเกตที่กล่องด้านขวาที่ชื่อว่า Structure ถ้าไม่มีให้สังเกตที่มุมด้านขวาและคลิกที่รูป ![Screenshot 2026-07-20 100609.png](https://bookstack.rid.go.th/uploads/images/gallery/2026-07/scaled-1680-/8FviRbLrSKJeedeS-screenshot-2026-07-20-100609.png) ซึ่งในนี้จะมี Widget ที่ใช้งานอยู่หลักๆ คือ

#### 2.1.1 Text Editor

- ใช้สำหรับการแก้ไขเนื้อหา
- ประกอบไปด้วย 3 ส่วนหลักคือ Content Style และ Advanced **ดังภาพที่ 10**

##### **ภาพที่ 10** Widget Text Editor

**[![Screenshot 2026-07-20 132311.png](https://bookstack.rid.go.th/uploads/images/gallery/2026-07/scaled-1680-/eMa8nyCoGSEL96qP-screenshot-2026-07-20-132311.png)](https://bookstack.rid.go.th/uploads/images/gallery/2026-07/eMa8nyCoGSEL96qP-screenshot-2026-07-20-132311.png)**


- ส่วน Style มีไว้สำหรับการแก้รูปแบบของตัวอักษร **ดังภาพที่ 11**##### **ภาพที่ 11** ส่วน Style  
      
    [![Screenshot 2026-07-20 114439.png](https://bookstack.rid.go.th/uploads/images/gallery/2026-07/scaled-1680-/nJx1YU8HkVUiQbOF-screenshot-2026-07-20-114439.png)](https://bookstack.rid.go.th/uploads/images/gallery/2026-07/nJx1YU8HkVUiQbOF-screenshot-2026-07-20-114439.png)
- ส่วน Advanced ใช้สำหรับการจัดตำแหน่งของหัวข้อ และสามารถใช้ css สำหรับการแก้ style ได้ที่ส่วนนี้โดยทำการเลื่อนลงไปด้านล่างและเลือกที่ [![Screenshot 2026-07-20 114929.png](https://bookstack.rid.go.th/uploads/images/gallery/2026-07/scaled-1680-/Dx0fxLR7FITLUTIw-screenshot-2026-07-20-114929.png)](https://bookstack.rid.go.th/uploads/images/gallery/2026-07/Dx0fxLR7FITLUTIw-screenshot-2026-07-20-114929.png) จะปรากฎกล่องสำหรับใส่โค้ด css **ดังภาพที่ 12 และ 13**##### **ภาพที่ 12** ส่วน Advanced

[![Screenshot 2026-07-20 115220.png](https://bookstack.rid.go.th/uploads/images/gallery/2026-07/scaled-1680-/4plv6UyRz26NzjvO-screenshot-2026-07-20-115220.png)](https://bookstack.rid.go.th/uploads/images/gallery/2026-07/4plv6UyRz26NzjvO-screenshot-2026-07-20-115220.png)

##### **ภาพที่ 13** Custom CSS

[![Screenshot 2026-07-20 115013.png](https://bookstack.rid.go.th/uploads/images/gallery/2026-07/scaled-1680-/tMjtNaUGg96NqSmv-screenshot-2026-07-20-115013.png)](https://bookstack.rid.go.th/uploads/images/gallery/2026-07/tMjtNaUGg96NqSmv-screenshot-2026-07-20-115013.png)

#### 2.1.2 Image Carousel

- ใช้สำหรับการเพิ่มรูปภาพและนำมาแสดงเป็น slide **ดังภาพที่ 14**


##### **ภาพที่ 14** Image Carousel

[![Screenshot 2026-07-21 130841.png](https://bookstack.rid.go.th/uploads/images/gallery/2026-07/OBs4dDhPG2IrGjMn-screenshot-2026-07-21-130841.png)](https://bookstack.rid.go.th/uploads/images/gallery/2026-06/ByLpZ7ZmMZyoigi2-screenshot-2026-06-19-163526.png)

- ให้ทำการคลิกที่รูปภาพจะเปิดหน้าต่าง"แก้ไขคลังรูป"ขึ้นมาให้ทำการคลิกที่ ![Screenshot 2026-06-22 085603.png](https://bookstack.rid.go.th/uploads/images/gallery/2026-06/scaled-1680-/Yi0oBH16KCjdPyfD-screenshot-2026-06-22-085603.png) แล้วเลือกรูปข่าวที่ต้องการทั้งหมดจากนั้นคลิก ![Screenshot 2026-06-22 085914.png](https://bookstack.rid.go.th/uploads/images/gallery/2026-06/scaled-1680-/iY5l50XENP3ofrqN-screenshot-2026-06-22-085914.png) **ดังภาพที่ 15**

##### **ภาพที่ 15** การแก้ไขรูปภาพด้วย Image Carousel

[![Screenshot 2026-09-03 130046.png](https://bookstack.rid.go.th/uploads/images/gallery/2026-09/rC9nYYRMAYSFdP7f-screenshot-2026-09-03-130046.png)](https://bookstack.rid.go.th/uploads/images/gallery/2026-06/L4jQNOeFwQDvf01N-screenshot-2026-06-22-090050.png)

- จะกลับมาที่หน้าต่าง"แก้ไขคลังรูป"ให้คลิก [![Screenshot 2026-06-22 091422.png](https://bookstack.rid.go.th/uploads/images/gallery/2026-06/scaled-1680-/I7IuqM0ocP43SrMK-screenshot-2026-06-22-091422.png)](https://bookstack.rid.go.th/uploads/images/gallery/2026-06/I7IuqM0ocP43SrMK-screenshot-2026-06-22-091422.png) ตรวจสอบว่ารูปภาพแสดงผลได้ถูกต้องจากนั้นคลิก [![Screenshot 2026-06-22 091703.png](https://bookstack.rid.go.th/uploads/images/gallery/2026-06/scaled-1680-/NDnqlV7HMCxAbjTt-screenshot-2026-06-22-091703.png)](https://bookstack.rid.go.th/uploads/images/gallery/2026-06/NDnqlV7HMCxAbjTt-screenshot-2026-06-22-091703.png) ที่มุมขวาบนเพื่อให้แสดงผลที่หน้าเว็ปไซต์ #### 2.2 การเพิ่มข้อมูลรายงานสถานการณ์น้ำ
    
    
    - ให้ทำเหมือนกับการเพิ่มข้อมูลข่าวสารและกิจกรรมแต่ให้เลือกคลิก [![Screenshot 2026-06-19 152447.png](https://bookstack.rid.go.th/uploads/images/gallery/2026-06/scaled-1680-/d9QRneYTbVlA9VQr-screenshot-2026-06-19-152447.png)](https://bookstack.rid.go.th/uploads/images/gallery/2026-06/d9QRneYTbVlA9VQr-screenshot-2026-06-19-152447.png) ที่เรื่องที่อยู่ในหมวดหมู่"รายงานสถานการณ์น้ำ"
    - เมื่อมาถึงหน้าสำหรับการแก้ไขรายงานสถานการณ์น้ำ ให้คลิกที่รูปภาพจากนั้นทำการคลิกที่รูปภาพที่แถบทางด้านซ้าย **ดังภาพที่ 16**
    
    ##### **ภาพที่ 16** การแก้ไขรูปภาพรายงานสถานการณ์น้ำ
    
    [![Screenshot 2026-06-22 100355.png](https://bookstack.rid.go.th/uploads/images/gallery/2026-06/scaled-1680-/gwY6DkJGgnzYMntB-screenshot-2026-06-22-100355.png)](https://bookstack.rid.go.th/uploads/images/gallery/2026-06/gwY6DkJGgnzYMntB-screenshot-2026-06-22-100355.png)
    
    
    - ให้ทำการคลิกเข้าไปจะเปิดหน้าต่าง"Insert Media"ขึ้นมา ทำการตรวจสอบว่าตรง FileBird เลือกที่"สถานการณ์น้ำ" [![Screenshot 2026-06-22 100603.png](https://bookstack.rid.go.th/uploads/images/gallery/2026-06/Zk6aObNPlEuSLs6F-screenshot-2026-06-22-100603.png)](https://bookstack.rid.go.th/uploads/images/gallery/2026-06/ZMZyaKVfCozsXEKc-screenshot-2026-06-22-085651.png) จากนั้นให้ทำการเลือกรูปข่าวที่ได้อัพโหลดไว้ทั้งหมดจากนั้นคลิก ![Screenshot 2026-06-22 100641.png](https://bookstack.rid.go.th/uploads/images/gallery/2026-06/lB4XvjdMbhykkIza-screenshot-2026-06-22-100641.png) **ดังภาพที่ 17**##### **ภาพที่ 17** การแก้ไขรูปภาพรายงานสถานการณ์น้ำ(ต่อ)
    
    **[![Screenshot 2026-06-22 100731.png](https://bookstack.rid.go.th/uploads/images/gallery/2026-06/scaled-1680-/KiWMaPuFAYTknkC3-screenshot-2026-06-22-100731.png)](https://bookstack.rid.go.th/uploads/images/gallery/2026-06/KiWMaPuFAYTknkC3-screenshot-2026-06-22-100731.png)**
    
    
    - ตรวจสอบว่ารูปภาพแสดงผลได้ถูกต้องจากนั้นคลิก [![Screenshot 2026-06-22 091703.png](https://bookstack.rid.go.th/uploads/images/gallery/2026-06/scaled-1680-/NDnqlV7HMCxAbjTt-screenshot-2026-06-22-091703.png)](https://bookstack.rid.go.th/uploads/images/gallery/2026-06/NDnqlV7HMCxAbjTt-screenshot-2026-06-22-091703.png) ที่มุมขวาบนเพื่อให้แสดงผลที่หน้าเว็ปไซต์

---