คู่มือสำหรับการใช้งานเว็บไซต์โครงการก่อสร้าง สำนักชลประทานที่ 11

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

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

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

• วิธีเข้าระบบหลังบ้าน กดที่ URL : https://rid11-cm.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.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.1.2 Image Carousel

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

ภาพที่ 14 Image Carousel

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

ภาพที่ 15 การแก้ไขรูปภาพด้วย 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

• เมื่อทำการแก้ไข widget ใดๆเรียบร้อยแล้วให้ทำการคลิกที่ เพื่อเป็นการบันทึกและแสดงผลที่หน้าเว็บ

---