# คู่มือสำหรับการใช้งานเว็บไซต์โครงการก่อสร้าง สำนักชลประทานที่ 11
# คู่มือการจัดการข่าวสาร
### **1.การเข้าใช้งานระบบ**
- วิธีเข้าระบบหลังบ้าน กดที่ URL : [https://rid11-cm.rid.go.th/wp-admin](https://uat-hhk.rid.go.th/wp-admin/) หรือเข้ามาที่หน้าหลักของเว็บไซต์ด้านบนจะมี Web Address ให้พิมพ์ต่อท้ายดังนี้ /wp-admin เพิ่มเข้าไปจากนั้นกดปุ่ม Enter ที่แป้นพิมพ์ แสดง**ดังภาพที่ 1**
##### **ภาพที่ 1** วิธีเข้าระบบหลังบ้าน
[](https://bookstack.rid.go.th/uploads/images/gallery/2026-06/Zfc4WjUtpukEiQha-screenshot-2026-06-19-102553.png)
- เมื่อ Enter ระบบจะดำเนินการไปหน้าเข้าสู่ระบบหลังบ้านของเว็บไซต์
- กรอก Username และ Password จากนั้นคลิก  แสดง**ดังภาพที่ 2**
##### **ภาพที่ 2** หน้าจอการเข้าสู่ระบบ
##### 
- เมื่อเข้าสู่ระบบสำเร็จ ระบบจะดำเนินการไปหน้าหลักของระบบ ซึ่งจะมีเมนูแสดง**ดังภาพที่ 3**
- รายการเมนูอาจมีไม่เท่ากับในภาพ ขึ้นอยู่กับสิทธิ์ของผู้ใช้งานระบบ
##### **ภาพที่ 3** หน้าจอหลักของระบบ
---
### **2.เมนูหลักสำหรับการจัดการข่าวสารของเว็บไซต์**
- เรื่อง (Post) คือเนื้อหาข่าวสารที่เผยแพร่แบบ **ตามเวลา** เพื่อแจ้งประชาสัมพันธ์กิจกรรม โครงการ ข่าวสาร หน่วยงาน หรือประกาศต่าง ๆ ให้กับผู้เข้าชมเว็บไซต์
- เมนู เรื่อง เข้าโดยคลิกที่ ระบบจะแสดงรายการข่าวทั้งหมด**ดังภาพที่ 4**
##### **ภาพที่ 4** เมนู เรื่อง (Post)
#### 2.1 การเพิ่มข้อมูลข่าวสาร
- ที่คอลัมน์หมวดหมู่จะมีการแยกหมวดหมู่ของแต่ละเรื่องไว้ให้
- นำเม้าส์ไปชี้ที่ข่าวสารที่อยู่ในหมวดหมู่ "ข่าวสารและกิจกรรม" จะมีเมนูแสดง**ดังภาพที่ 5**
##### **ภาพที่** **5** เมนูจัดการข่าวสาร
****
- คลิกที่ 
- จะได้ข่าวที่มีชื่อเดิมแต่จะมี [](https://bookstack.rid.go.th/uploads/images/gallery/2026-06/mXGn4iq70dXrviKl-screenshot-2026-06-19-152856.png) ต่ออยู่ที่ท้ายเรื่อง
- คลิกที่ข่าวใหม่ที่ได้ทำการ copy ขึ้นมาจะเข้าไปที่หน้าสำหรับการแก้ไขข่าวสารประกอบไปด้วย 1.หัวข้อของข่าว 2.แถบเครื่องมือ แสดง**ดังภาพที่ 6**
##### **ภาพที่ 6** หน้าสำหรับแก้ไขข่าวสาร
****
- คลิกที่หัวข้อข่าวทำการเปลี่ยนเป็นหัวข้อของข่าวใหม่
- คลิกที่รูปภาพที่แถบเครื่องมือจะแสดงหน้าต่าง **ดังภาพที่ 7**##### **ภาพที่ 7** หน้าต่างสำหรับการอัปโหลดรูปภาพ
[](https://bookstack.rid.go.th/uploads/images/gallery/2026-06/ef8099rv0IKTOw0f-screenshot-2026-06-19-155341.png)
- ที่ Choose folder ให้เลือก folder ที่ต้องการ
- จากนั้นให้ทำการอัปโหลดรูปภาพข่าวทั้งหมดโดยลากรูปภาพจากเครื่องมาวางไว้ที่หน้านี้ หรือคลิกที่ [](https://bookstack.rid.go.th/uploads/images/gallery/2026-06/PPYg1KxEnMesmqrJ-screenshot-2026-06-19-155853.png)
- เมื่ออัปโหลดเรียบร้อยจะแสดงหน้าต่าง**ดังภาพที่ 8**##### **ภาพที่ 8** หน้าต่างภาพข่าวทั้งหมด
**[](https://bookstack.rid.go.th/uploads/images/gallery/2026-06/MByRnnxXXBn45iB9-screenshot-2026-06-19-160743.png)**
- เลือกภาพที่ต้องการและคลิกที่ [](https://bookstack.rid.go.th/uploads/images/gallery/2026-06/1wgf1J1Yp8LJjajn-screenshot-2026-06-19-161843.png) ภาพที่เลือกจะกลายเป็นภาพปกของข่าว
- จานั้นที่แถบเครื่องมือให้เลื่อนลงมาจะเจอคำว่า "slug" ให้ทำการคลิกที่ชื่อสีน้ำเงินจะมีกล่องแสดงขึ้นมาให้แก้ไขชื่อ ให้แก้เป็นชื่อที่ต้องการ**ดังภาพที่ 9** **\*ชื่อต้องไม่ซ้ำกับ slug ของข่าวอื่นๆ และแนะนำให้ใช้ภาษาอังกฤษ**##### **ภาพที่ 9** แก้ไขชื่อ slug
[](https://bookstack.rid.go.th/uploads/images/gallery/2026-06/m5ITc1xV2jP7Rq0z-screenshot-2026-06-19-162303.png)
- คลิกที่ [](https://bookstack.rid.go.th/uploads/images/gallery/2026-06/ZeilNeMbUFXHUjiL-screenshot-2026-06-19-162907.png) หรือ Ctrl+S จากนั้นคลิกที่ [](https://bookstack.rid.go.th/uploads/images/gallery/2026-06/uUlny8U2rQnmjzpM-screenshot-2026-06-19-163240.png) ไปที่หน้าสำหรับการแก้ไขเนื้อหาข่าว เมื่อเข้ามาที่หน้านี้ให้สังเกตที่ด้านขวาจะมีกล่ิงที่ชื่อ Structure ให้สังเกตที่กล่องด้านขวาที่ชื่อว่า Structure ถ้าไม่มีให้สังเกตที่มุมด้านขวาและคลิกที่รูป  ซึ่งในนี้จะมี Widget ที่ใช้งานอยู่หลักๆ คือ
#### 2.1.1 Text Editor
- ใช้สำหรับการแก้ไขเนื้อหา
- ประกอบไปด้วย 3 ส่วนหลักคือ Content Style และ Advanced **ดังภาพที่ 10**
##### **ภาพที่ 10** Widget Text Editor
**[](https://bookstack.rid.go.th/uploads/images/gallery/2026-07/eMa8nyCoGSEL96qP-screenshot-2026-07-20-132311.png)**
- ส่วน Style มีไว้สำหรับการแก้รูปแบบของตัวอักษร **ดังภาพที่ 11**##### **ภาพที่ 11** ส่วน Style
[](https://bookstack.rid.go.th/uploads/images/gallery/2026-07/nJx1YU8HkVUiQbOF-screenshot-2026-07-20-114439.png)
- ส่วน Advanced ใช้สำหรับการจัดตำแหน่งของหัวข้อ และสามารถใช้ css สำหรับการแก้ style ได้ที่ส่วนนี้โดยทำการเลื่อนลงไปด้านล่างและเลือกที่ [](https://bookstack.rid.go.th/uploads/images/gallery/2026-07/Dx0fxLR7FITLUTIw-screenshot-2026-07-20-114929.png) จะปรากฎกล่องสำหรับใส่โค้ด css **ดังภาพที่ 12 และ 13**##### **ภาพที่ 12** ส่วน Advanced
[](https://bookstack.rid.go.th/uploads/images/gallery/2026-07/4plv6UyRz26NzjvO-screenshot-2026-07-20-115220.png)
##### **ภาพที่ 13** Custom CSS
[](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
[](https://bookstack.rid.go.th/uploads/images/gallery/2026-06/ByLpZ7ZmMZyoigi2-screenshot-2026-06-19-163526.png)
- ให้ทำการคลิกที่รูปภาพจะเปิดหน้าต่าง"แก้ไขคลังรูป"ขึ้นมาให้ทำการคลิกที่  แล้วเลือกรูปข่าวที่ต้องการทั้งหมดจากนั้นคลิก  **ดังภาพที่ 15**
##### **ภาพที่ 15** การแก้ไขรูปภาพด้วย Image Carousel
[](https://bookstack.rid.go.th/uploads/images/gallery/2026-06/L4jQNOeFwQDvf01N-screenshot-2026-06-22-090050.png)
- จะกลับมาที่หน้าต่าง"แก้ไขคลังรูป"ให้คลิก [](https://bookstack.rid.go.th/uploads/images/gallery/2026-06/I7IuqM0ocP43SrMK-screenshot-2026-06-22-091422.png) ตรวจสอบว่ารูปภาพแสดงผลได้ถูกต้องจากนั้นคลิก [](https://bookstack.rid.go.th/uploads/images/gallery/2026-06/NDnqlV7HMCxAbjTt-screenshot-2026-06-22-091703.png) ที่มุมขวาบนเพื่อให้แสดงผลที่หน้าเว็ปไซต์
---
# คู่มือการจัดการ page (หน้า)
### **1.การแก้ไขหน้า**
- ที่หน้า dashboard ให้คลิกที่ [](https://bookstack.rid.go.th/uploads/images/gallery/2026-07/Eql5PRVW9QOYL86F-screenshot-2026-07-20-092827.png) จะแสดงหน้าทั้งหมด**ดังภาพที่ 1**
##### **ภาพที่ 1** หน้าทั้งหมดที่สามารถแก้ไขได้
[](https://bookstack.rid.go.th/uploads/images/gallery/2026-06/Zfc4WjUtpukEiQha-screenshot-2026-06-19-102553.png)
- เลือกหน้าที่ต้องการแก้ไขโดยการชี้เม้าส์ไปที่เรื่องที่ต้องการจะแก้ และทำการคลิกที่ Edit with Elementor จะแสดงหน้าที่ต้องการแก้ไขขึ้นมา
- หรือสามารถใช้อีกวิธีคือที่หน้า dashboard ให้ทำการคลิกที่ชื่อเว็บที่มุมซ้ายบน ระบบจะพาไปที่หน้าเว็บหลัก ให้ทำการไปที่หน้าที่ต้องการจากนั้นสังเกตที่แถบด้านบนให้ทำการคลิกที่ Edit with Elementor จะแสดงหน้าที่ต้องการแก้ไขขึ้นมาเช่นเดียวกัน**ดังภาพที่ 2**
##### **ภาพที่ 2** หน้าที่ต้องการแก้ไข
##### 
- ให้สังเกตที่กล่องด้านขวาที่ชื่อว่า Structure ถ้าไม่มีให้สังเกตที่มุมด้านขวาและคลิกที่รูป [](https://bookstack.rid.go.th/uploads/images/gallery/2026-07/8FviRbLrSKJeedeS-screenshot-2026-07-20-100609.png)
- ทำการคลิกที่สามเหลี่ยมหน้า Container จะแสดง widget ที่ใช้หลักๆสำหรับการแก้ไขหน้าดังนี้
#### 1.1 Heading
- ประกอบไปด้วย 3 ส่วนหลักคือ Content Style และ Advanced
- ส่วน Content มีไว้สำหรับการแก้หัวข้อ **ดังภาพที่ 3**
##### **ภาพที่ 3** Widget Heading ส่วน Content
- ส่วน Style มีไว้สำหรับการแก้รูปแบบของตัวอักษร **ดังภาพที่ 4**##### **ภาพที่ 4** Widget Heading ส่วน Style
[](https://bookstack.rid.go.th/uploads/images/gallery/2026-07/nJx1YU8HkVUiQbOF-screenshot-2026-07-20-114439.png)
- ในส่วนนี้จะมีจุดที่ใช้งานหลักๆคือ Alignment ไว้สำหรับจัดตำแหน่ง และ Typography ไว้สำหรับปรับรูปแบบตัวอักษรโดยจะมีรูปลูกโลกจะเป็นการเปลี่ยนรูปแบบตามค่าที่ระบบตั้งไว้ให้ แต่ถ้าอยากเปลี่ยนแบบอิสระให้คลิกเลือกที่รูปดินสอ
- ส่วน Advanced ใช้สำหรับการจัดตำแหน่งของหัวข้อ และสามารถใช้ css สำหรับการแก้ style ได้ที่ส่วนนี้โดยทำการเลื่อนลงไปด้านล่างและเลือกที่ [](https://bookstack.rid.go.th/uploads/images/gallery/2026-07/Dx0fxLR7FITLUTIw-screenshot-2026-07-20-114929.png) จะปรากฎกล่องสำหรับใส่โค้ด css **ดังภาพที่ 5 และ 6**##### **ภาพที่ 5** Widget Heading ส่วน Advanced
[](https://bookstack.rid.go.th/uploads/images/gallery/2026-07/4plv6UyRz26NzjvO-screenshot-2026-07-20-115220.png)
##### **ภาพที่ 6** Custom CSS
[](https://bookstack.rid.go.th/uploads/images/gallery/2026-07/tMjtNaUGg96NqSmv-screenshot-2026-07-20-115013.png)
#### 1.2 Text Editor
- ใช้สำหรับการแก้ไขเนื้อหา ประกอบไปด้วย 3 ส่วนหลักเช่นเดียวกับ Heading **ดังภาพที่ 7**##### **ภาพที่ 7** Widget Text Editor
**[](https://bookstack.rid.go.th/uploads/images/gallery/2026-07/eMa8nyCoGSEL96qP-screenshot-2026-07-20-132311.png)**
#### 1.3 Image
- ใช้สำหรับการแก้ไขรูปภาพ ประกอบไปด้วย 3 ส่วนหลักเช่นเดียวกับ Heading **ดังภาพที่ 8**##### **ภาพที่ 8** Widget Image
[](https://bookstack.rid.go.th/uploads/images/gallery/2026-07/8z2QrEqUyRdovCCm-screenshot-2026-07-20-132737.png)
- แก้ไขรูปภาพได้โดยการคลิกที่รูปจะปรากฎหน้าต่าง Insert Media ขึ้นมา ให้ทำการลากรูปที่ต้องการใส่ลงไป หรือเลือกที่ "อัปโหลดไฟล์" จากนั้นเลือกรูปที่ต้องการและคลิก [](https://bookstack.rid.go.th/uploads/images/gallery/2026-06/lB4XvjdMbhykkIza-screenshot-2026-06-22-100641.png) **ดังภาพที่ 9**##### **ภาพที่ 9** Insert Media
[](https://bookstack.rid.go.th/uploads/images/gallery/2026-07/kAsgAYf9FBIwfBBu-screenshot-2026-07-20-135330.png)
- เมื่อทำการแก้ไข widget ใดๆเรียบร้อยแล้วให้ทำการคลิกที่ [](https://bookstack.rid.go.th/uploads/images/gallery/2026-06/NDnqlV7HMCxAbjTt-screenshot-2026-06-22-091703.png)เพื่อเป็นการบันทึกและแสดงผลที่หน้าเว็บ
---