# คู่มือสำหรับการใช้งานเว็บไซต์ศูนย์ศึกษาการพัฒนาห้วยฮ่องไคร้อันเนื่องมาจากพระราชดำริ
# คู่มือการจัดการข่าวสาร
### **1.การเข้าใช้งานระบบ**
- วิธีเข้าระบบหลังบ้าน กดที่ URL : [https://hhk.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 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.2 Image
- ใช้สำหรับการแก้ไขรูปภาพ ประกอบไปด้วย 3 ส่วนหลักเช่นเดียวกับ Heading **ดังภาพที่ 14**##### **ภาพที่ 14** 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) **ดังภาพที่ 15**##### **ภาพที่ 15** Insert Media
[](https://bookstack.rid.go.th/uploads/images/gallery/2026-07/kAsgAYf9FBIwfBBu-screenshot-2026-07-20-135330.png)
#### 2.3 Image Carousel
- ใช้สำหรับการเพิ่มรูปภาพและนำมาแสดงเป็น slide **ดังภาพที่ 16**
##### **ภาพที่ 16** Image Carousel
[](https://bookstack.rid.go.th/uploads/images/gallery/2026-06/ByLpZ7ZmMZyoigi2-screenshot-2026-06-19-163526.png)
- ให้ทำการคลิกที่รูปภาพจะเปิดหน้าต่าง"แก้ไขคลังรูป"ขึ้นมาให้ทำการคลิกที่  แล้วเลือกรูปข่าวที่ต้องการทั้งหมดจากนั้นคลิก  **ดังภาพที่ 17**
##### **ภาพที่ 17** การแก้ไขรูปภาพด้วย 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)
#### 1.4 Image Box
- Image Box เป็น widget สำหรับการแสดงข้อมูลของผู้บริหารเมื่อต้องการเปลี่ยนข้อมูลให้ทำการคลิกที่รูปที่ต้องการจะทำการแก้ไข หรือที่ Image Box ใน Structure จะปรากฎเครื่องมือทางด้านซ้าย**ดังภาพที่ 10**
##### **ภาพที่ 10** Image Box
[](https://bookstack.rid.go.th/uploads/images/gallery/2026-08/2earmYdEubLyKKv4-screenshot-2026-08-27-090920.png)
- สามารถแก้รูปภาพด้วยวิธีเดียวกับ widget Image แก้ไขชื่อได้ที่ Title แก้ไขข้อมูลต่างๆได้ที่ Description
- ในส่วนของข้อมูลถ้าไม่อยากให้ระบบขึ้นบรรทัดใหม่ให้เองให้ทำการพิมพ์ <br> แทรกระหว่างข้อความที่ต้องการขึ้นบรรทัดใหม่ได้เลย
- เมื่อทำการแก้ไข widget ใดๆเรียบร้อยแล้วให้ทำการคลิกที่ [](https://bookstack.rid.go.th/uploads/images/gallery/2026-06/NDnqlV7HMCxAbjTt-screenshot-2026-06-22-091703.png)เพื่อเป็นการบันทึกและแสดงผลที่หน้าเว็บ
---
# คู่มือการจัดการไฟล์สำหรับ Download
### **การ upload ไฟล์เพื่อนำไปแสดงผลที่หน้าเว็บไซต์**
- ที่หน้า 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)
- ที่ด้านซ้ายจะมีการจัดหมวดหมู่อยู๋ใน folder ชื่อตามเมนูที่ใช้งาน ซึ่งไฟล์สำหรับการ download จะถูกแยกอยู่ใน folder เอกสาร download, งานวิจัย, logo (สำหรับเมนูตราสัญลักษณ์หน่วยงาน) และแบบฟอร์มการอบรม**ดังภาพที่ 2**
##### **ภาพที่ 2** folder สำหรับไฟล์ download
##### 
- ให้คลิกที่ folder ที่ต้องการแล้วทำการ upload ไฟล์ที่ต้องการโดยการลากไฟล์ลงไปบริเวรกรอบสีแดง**ดังภาพที่ 3**
##### **ภาพที่ 3** พื้นที่สำหรับลากไฟล์ที่ต้องการเพื่อ upload
- ก่อนการ upload แนะนำให้ตั้งชื่อไฟล์ให้เป็นชื่อที่ต้องการแสดงในเว็บ หรือทำการตั้งชื่อตามวิธีต่อไปนี้
- ให้ทำการคลิกที่ไฟล์ที่ได้ upload จะมีหน้าต่างปรากฎขึ้นมา**ดังภาพที่** **4**##### **ภาพที่ 4** Widget Heading ส่วน Style
[](https://bookstack.rid.go.th/uploads/images/gallery/2026-07/nJx1YU8HkVUiQbOF-screenshot-2026-07-20-114439.png)
- ให้ทำการเปลี่ยนชื่อเป็นชื่อที่ต้องการให้แสดงที่หน้าเว็บแล้วทำการคลิก x ปิดหน้าต่างนี้ได้เลย จากนั้นไฟล์ที่ได้ทำการ upload จะไปปรากฎที่หน้าเว็บไซต์ทันที
# การทำหน้าไว้อาลัย/ถวายพระพร
### **Popup Maker สำหรับการทำหน้าไว้อาลัย/ถวายพระพร**
- ที่หน้า dashboard คลิกที่ [](https://bookstack.rid.go.th/uploads/images/gallery/2026-07/tOsuIMSeADSd4Q1z-screenshot-2026-07-20-141606.png) จะปรากฎหน้า**ดังภาพที่ 1**
##### **ภาพที่ 1** Popup Maker
- จะมีรายชื่อ popup ที่เคยสร้างไว้ขึ้นมาขึ้นมา ที่หน้านี้จะสามารถเลือก เปิด-ปิด popup ที่จะใช้งานได้โดยการคลิกปุ่มที่ column Enabled
- คลิกที่หน้าที่ต้องการแก้ไขจะปรากฎหน้า**ดังภาพที่ 2**
##### **ภาพที่** **2** หน้าสำหรับแก้ไขหน้าไว้อาลัย/ถวายพระพร
****
- คลิกที่รูปภาพจะมี [](https://bookstack.rid.go.th/uploads/images/gallery/2026-07/ZlrxeDbhjguE4jD9-screenshot-2026-07-20-143133.png) แสดงขึ้นมาให้ทำการเลือก "แทนที่" > "เปิดคลังไฟล์สื่อ" **ดังภาพที่ 12**
##### **ภาพที่ 12** เมนูสำหรับการแก้ไขรูปภาพ
****
- จะปรากฎหน้าสำหรับการแก้ไขรูปภาพขึ้นมา**ดังภาพที่ 13** ให้ดำเนินการเลือกรูปที่ต้องการหรือทำการอัพโหลดโดยการลากภาพที่ต้องการมาใส่ที่หน้าต่างนี้
##### **ภาพที่ 13** หน้าต่างสำหรับการอัปโหลดรูปภาพ
[](https://bookstack.rid.go.th/uploads/images/gallery/2026-06/ef8099rv0IKTOw0f-screenshot-2026-06-19-155341.png)
---
- จากนั้นเลือกภาพที่ต้องการเมื่อทำการแก้ไขเรียบร้อยแล้วให้คลิกที่[ ](https://bookstack.rid.go.th/uploads/images/gallery/2026-08/wbm5Xd37kDpK6ItX-screenshot-2026-08-20-145751.png) ที่มุมขวาบนเพื่อบันทึกการแก้ไข