คู่มือสำหรับการใช้งานเว็บไซต์ศูนย์ศึกษาการพัฒนาห้วยฮ่องไคร้อันเนื่องมาจากพระราชดำริ

• คู่มือการจัดการข่าวสาร
• คู่มือการจัดการ page (หน้า)
• คู่มือการจัดการไฟล์สำหรับ Download
• การทำหน้าไว้อาลัย/ถวายพระพร

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

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

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

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

• เมื่อ Enter ระบบจะดำเนินการไปหน้าเข้าสู่ระบบหลังบ้านของเว็บไซต์
• กรอก Username และ Password จากนั้นคลิก  แสดงดังภาพที่ 2

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

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

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

---

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

• เรื่อง (Post) คือเนื้อหาข่าวสารที่เผยแพร่แบบ ตามเวลา เพื่อแจ้งประชาสัมพันธ์กิจกรรม โครงการ ข่าวสาร หน่วยงาน หรือประกาศต่าง ๆ ให้กับผู้เข้าชมเว็บไซต์
• เมนู เรื่อง เข้าโดยคลิกที่ ระบบจะแสดงรายการข่าวทั้งหมดดังภาพที่ 4

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

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

• ที่คอลัมน์หมวดหมู่จะมีการแยกหมวดหมู่ของแต่ละเรื่องไว้ให้
• นำเม้าส์ไปชี้ที่ข่าวสารที่อยู่ในหมวดหมู่ที่ต้องการจะเพิ่ม จะมีเมนูแสดงดังภาพที่ 5

ภาพที่ 5 เมนูจัดการข่าวสาร

• คลิกที่ 

• จะได้ข่าวที่มีชื่อเดิมแต่จะมี ต่ออยู่ที่ท้ายเรื่อง

• คลิกที่ข่าวใหม่ที่ได้ทำการ copy ขึ้นมาจะเข้าไปที่หน้าสำหรับการแก้ไขข่าวสารประกอบไปด้วย 1.หัวข้อของข่าว 2.แถบเครื่องมือ แสดงดังภาพที่ 6

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

• คลิกที่หัวข้อข่าวทำการเปลี่ยนเป็นหัวข้อของข่าวใหม่
• คลิกที่รูปภาพที่แถบเครื่องมือจะแสดงหน้าต่าง ดังภาพที่ 7

  ภาพที่ 7 หน้าต่างสำหรับการอัปโหลดรูปภาพ

  

• ที่ Choose folder ให้เลือก folder ที่ต้องการ

• จากนั้นให้ทำการอัปโหลดรูปภาพข่าวทั้งหมดโดยลากรูปภาพจากเครื่องมาวางไว้ที่หน้านี้ หรือคลิกที่
• เมื่ออัปโหลดเรียบร้อยจะแสดงหน้าต่างดังภาพที่ 8

  ภาพที่ 8 หน้าต่างภาพข่าวทั้งหมด

  
• เลือกภาพที่ต้องการและคลิกที่ ภาพที่เลือกจะกลายเป็นภาพปกของข่าว
• จานั้นที่แถบเครื่องมือให้เลื่อนลงมาจะเจอคำว่า "slug" ให้ทำการคลิกที่ชื่อสีน้ำเงินจะมีกล่องแสดงขึ้นมาให้แก้ไขชื่อ ให้แก้เป็นชื่อที่ต้องการดังภาพที่ 9 *ชื่อต้องไม่ซ้ำกับ slug ของข่าวอื่นๆ และแนะนำให้ใช้ภาษาอังกฤษ

  ภาพที่ 9 แก้ไขชื่อ slug

  
• คลิกที่ หรือ Ctrl+S จากนั้นคลิกที่ ไปที่หน้าสำหรับการแก้ไขเนื้อหาข่าว เมื่อเข้ามาที่หน้านี้ให้สังเกตที่ด้านขวาจะมีกล่ิงที่ชื่อ Structure ให้สังเกตที่กล่องด้านขวาที่ชื่อว่า Structure ถ้าไม่มีให้สังเกตที่มุมด้านขวาและคลิกที่รูป ซึ่งในนี้จะมี Widget ที่ใช้งานอยู่หลักๆ คือ

2.1 Text Editor

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

ภาพที่ 10 Widget Text Editor

• ส่วน Style มีไว้สำหรับการแก้รูปแบบของตัวอักษร ดังภาพที่ 11

  ภาพที่ 11 ส่วน Style
  
  
  

• ส่วน Advanced ใช้สำหรับการจัดตำแหน่งของหัวข้อ และสามารถใช้ css สำหรับการแก้ style ได้ที่ส่วนนี้โดยทำการเลื่อนลงไปด้านล่างและเลือกที่  จะปรากฎกล่องสำหรับใส่โค้ด css ดังภาพที่ 12 และ 13

  ภาพที่ 12 ส่วน Advanced

ภาพที่ 13 Custom CSS

2.2 Image

• ใช้สำหรับการแก้ไขรูปภาพ ประกอบไปด้วย 3 ส่วนหลักเช่นเดียวกับ Heading ดังภาพที่ 14

  ภาพที่ 14 Widget Image

• แก้ไขรูปภาพได้โดยการคลิกที่รูปจะปรากฎหน้าต่าง Insert Media ขึ้นมา ให้ทำการลากรูปที่ต้องการใส่ลงไป หรือเลือกที่ "อัปโหลดไฟล์" จากนั้นเลือกรูปที่ต้องการและคลิก ดังภาพที่ 15

  ภาพที่ 15 Insert Media

2.3 Image Carousel

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

ภาพที่ 16 Image Carousel

• ให้ทำการคลิกที่รูปภาพจะเปิดหน้าต่าง"แก้ไขคลังรูป"ขึ้นมาให้ทำการคลิกที่ แล้วเลือกรูปข่าวที่ต้องการทั้งหมดจากนั้นคลิก ดังภาพที่ 17

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

• จะกลับมาที่หน้าต่าง"แก้ไขคลังรูป"ให้คลิก ตรวจสอบว่ารูปภาพแสดงผลได้ถูกต้องจากนั้นคลิก ที่มุมขวาบนเพื่อให้แสดงผลที่หน้าเว็ปไซต์

---

คู่มือการจัดการ page (หน้า)

1.การแก้ไขหน้า

• ที่หน้า dashboard ให้คลิกที่ จะแสดงหน้าทั้งหมดดังภาพที่ 1

ภาพที่ 1 หน้าทั้งหมดที่สามารถแก้ไขได้

• เลือกหน้าที่ต้องการแก้ไขโดยการชี้เม้าส์ไปที่เรื่องที่ต้องการจะแก้ และทำการคลิกที่ Edit with Elementor จะแสดงหน้าที่ต้องการแก้ไขขึ้นมา
• หรือสามารถใช้อีกวิธีคือที่หน้า dashboard ให้ทำการคลิกที่ชื่อเว็บที่มุมซ้ายบน ระบบจะพาไปที่หน้าเว็บหลัก ให้ทำการไปที่หน้าที่ต้องการจากนั้นสังเกตที่แถบด้านบนให้ทำการคลิกที่ Edit with Elementor จะแสดงหน้าที่ต้องการแก้ไขขึ้นมาเช่นเดียวกันดังภาพที่ 2

ภาพที่ 2 หน้าที่ต้องการแก้ไข

•  ให้สังเกตที่กล่องด้านขวาที่ชื่อว่า Structure ถ้าไม่มีให้สังเกตที่มุมด้านขวาและคลิกที่รูป
• ทำการคลิกที่สามเหลี่ยมหน้า Container จะแสดง widget ที่ใช้หลักๆสำหรับการแก้ไขหน้าดังนี้

1.1 Heading

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

ภาพที่ 3 Widget Heading ส่วน Content

• ส่วน Style มีไว้สำหรับการแก้รูปแบบของตัวอักษร ดังภาพที่ 4

  ภาพที่ 4 Widget Heading ส่วน Style
  
  
  

• ในส่วนนี้จะมีจุดที่ใช้งานหลักๆคือ Alignment ไว้สำหรับจัดตำแหน่ง และ Typography ไว้สำหรับปรับรูปแบบตัวอักษรโดยจะมีรูปลูกโลกจะเป็นการเปลี่ยนรูปแบบตามค่าที่ระบบตั้งไว้ให้ แต่ถ้าอยากเปลี่ยนแบบอิสระให้คลิกเลือกที่รูปดินสอ
• ส่วน Advanced ใช้สำหรับการจัดตำแหน่งของหัวข้อ และสามารถใช้ css สำหรับการแก้ style ได้ที่ส่วนนี้โดยทำการเลื่อนลงไปด้านล่างและเลือกที่ จะปรากฎกล่องสำหรับใส่โค้ด css ดังภาพที่ 5 และ 6

  ภาพที่ 5 Widget Heading ส่วน Advanced

ภาพที่ 6 Custom CSS

1.2 Text Editor

• ใช้สำหรับการแก้ไขเนื้อหา ประกอบไปด้วย 3 ส่วนหลักเช่นเดียวกับ Heading ดังภาพที่ 7

  ภาพที่ 7 Widget Text Editor

1.3 Image

• ใช้สำหรับการแก้ไขรูปภาพ ประกอบไปด้วย 3 ส่วนหลักเช่นเดียวกับ Heading ดังภาพที่ 8

  ภาพที่ 8 Widget Image

• แก้ไขรูปภาพได้โดยการคลิกที่รูปจะปรากฎหน้าต่าง Insert Media ขึ้นมา ให้ทำการลากรูปที่ต้องการใส่ลงไป หรือเลือกที่ "อัปโหลดไฟล์" จากนั้นเลือกรูปที่ต้องการและคลิก ดังภาพที่ 9

  ภาพที่ 9 Insert Media

1.4 Image Box

• Image Box เป็น widget สำหรับการแสดงข้อมูลของผู้บริหารเมื่อต้องการเปลี่ยนข้อมูลให้ทำการคลิกที่รูปที่ต้องการจะทำการแก้ไข หรือที่ Image Box ใน Structure จะปรากฎเครื่องมือทางด้านซ้ายดังภาพที่ 10

ภาพที่ 10 Image Box

• สามารถแก้รูปภาพด้วยวิธีเดียวกับ widget Image แก้ไขชื่อได้ที่ Title แก้ไขข้อมูลต่างๆได้ที่ Description
• ในส่วนของข้อมูลถ้าไม่อยากให้ระบบขึ้นบรรทัดใหม่ให้เองให้ทำการพิมพ์ <br> แทรกระหว่างข้อความที่ต้องการขึ้นบรรทัดใหม่ได้เลย
• เมื่อทำการแก้ไข widget ใดๆเรียบร้อยแล้วให้ทำการคลิกที่ เพื่อเป็นการบันทึกและแสดงผลที่หน้าเว็บ

---

คู่มือการจัดการไฟล์สำหรับ Download

การ upload ไฟล์เพื่อนำไปแสดงผลที่หน้าเว็บไซต์

• ที่หน้า dashboard ให้คลิกที่ จะแสดงหน้าสำหรับจัดการไฟล์ทั้งหมดที่ใช้งานในเว็บไซต์ดังภาพที่ 1

ภาพที่ 1 หน้าสำหรับจัดการไฟล์ทั้งหมด

• ที่ด้านซ้ายจะมีการจัดหมวดหมู่อยู๋ใน folder ชื่อตามเมนูที่ใช้งาน ซึ่งไฟล์สำหรับการ download จะถูกแยกอยู่ใน folder เอกสาร download, งานวิจัย, logo (สำหรับเมนูตราสัญลักษณ์หน่วยงาน) และแบบฟอร์มการอบรมดังภาพที่ 2
  

ภาพที่ 2 folder สำหรับไฟล์ download

•  ให้คลิกที่ folder ที่ต้องการแล้วทำการ upload ไฟล์ที่ต้องการโดยการลากไฟล์ลงไปบริเวรกรอบสีแดงดังภาพที่ 3

ภาพที่ 3 พื้นที่สำหรับลากไฟล์ที่ต้องการเพื่อ upload

• ก่อนการ upload แนะนำให้ตั้งชื่อไฟล์ให้เป็นชื่อที่ต้องการแสดงในเว็บ หรือทำการตั้งชื่อตามวิธีต่อไปนี้
• ให้ทำการคลิกที่ไฟล์ที่ได้ upload จะมีหน้าต่างปรากฎขึ้นมาดังภาพที่ 4

  ภาพที่ 4 Widget Heading ส่วน Style
  
  
  

• ให้ทำการเปลี่ยนชื่อเป็นชื่อที่ต้องการให้แสดงที่หน้าเว็บแล้วทำการคลิก x ปิดหน้าต่างนี้ได้เลย จากนั้นไฟล์ที่ได้ทำการ upload จะไปปรากฎที่หน้าเว็บไซต์ทันที

การทำหน้าไว้อาลัย/ถวายพระพร

 

Popup Maker สำหรับการทำหน้าไว้อาลัย/ถวายพระพร

• ที่หน้า dashboard คลิกที่ จะปรากฎหน้าดังภาพที่ 1
  

ภาพที่ 1 Popup Maker

• จะมีรายชื่อ popup ที่เคยสร้างไว้ขึ้นมาขึ้นมา ที่หน้านี้จะสามารถเลือก เปิด-ปิด popup ที่จะใช้งานได้โดยการคลิกปุ่มที่ column Enabled
• คลิกที่หน้าที่ต้องการแก้ไขจะปรากฎหน้าดังภาพที่ 2

ภาพที่ 2 หน้าสำหรับแก้ไขหน้าไว้อาลัย/ถวายพระพร

• คลิกที่รูปภาพจะมี แสดงขึ้นมาให้ทำการเลือก "แทนที่" > "เปิดคลังไฟล์สื่อ" ดังภาพที่ 12

ภาพที่ 12 เมนูสำหรับการแก้ไขรูปภาพ

• จะปรากฎหน้าสำหรับการแก้ไขรูปภาพขึ้นมาดังภาพที่ 13 ให้ดำเนินการเลือกรูปที่ต้องการหรือทำการอัพโหลดโดยการลากภาพที่ต้องการมาใส่ที่หน้าต่างนี้
  

  ภาพที่ 13 หน้าต่างสำหรับการอัปโหลดรูปภาพ

  

---

• จากนั้นเลือกภาพที่ต้องการเมื่อทำการแก้ไขเรียบร้อยแล้วให้คลิกที่  ที่มุมขวาบนเพื่อบันทึกการแก้ไข