คู่มือการใช้งานระบบจัดการเนื้อหาเว็บไซต์ศูนย์ความเป็นเลิศทางจิตวิทยา

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

โดย
นายณฐั วฒั น์ เชอื กพรม 62010518013
นายธรี พฒั น์ ธรรมโรเวศ 62010518017
นายรณกฤต แน่นอุดร 62010518027

นายศภุ กร เทียงดี 62010518032
นายภวู รินทร์ อินทรปญั ญา 62010518044

นายสริ วชิ ญ์ กสพิ นั ธ์ 62010518048

นิสิตชนั้ ปีที่ 3 สาขาเทคโนโลยีการศึกษาและคอมพิวเตอรศ์ ึกษา
คณะศกึ ษาศาสตร์ มหาวิทยาลยั มหาสารคาม

ก

คำนำ

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

นิสิตชน้ั ปที ่ี 3
สาขาเทคโนโลยกี ารศึกษาและคอมพวิ เตอร์ศึกษา

คณะศกึ ษาศาสตร์ มหาวทิ ยาลัยมหาสารคาม

ข

สารบญั

เรอ่ื ง หน้า
1. การ login เขา้ สรู่ ะบบ .......................................................................................................................................1
2. การจัดการเนอ้ื หา / ขา่ ว / บทความ / อินโฟกราฟิก........................................................................................9

2.1 การเพ่มิ และเผยแพรเ่ นื้อหา ข่าวสาร / บทความ / อินโฟกราฟิก ............................................................9
2.1.1 การเพิม่ เน้ือหา................................................................................................................................9
2.1.2 การใส่หรอื แทรกรูปภาพ ลงในเนื้อหา ขา่ วสาร / บทความ / อินโฟกราฟิก ................................. 13
2.1.3 การอปั โหลดรูปจากไฟลภ์ ายนอก ................................................................................................ 13
2.1.4 การเลอื กไฟลร์ ปู จากคลังสอื่ ......................................................................................................... 15
2.1.5 การแทรกเน้ือหาเอกสารในรปู แบบ PDF ไฟล์ ............................................................................. 16
2.1.6 การตัง้ คา่ รูปภาพหน้าปก (Featured image) ของเนื้อหา ขา่ วสาร / บทความ / อินโฟ กราฟิก . 19
2.1.7 การเผยแพร่เน้ือหา ข่าวสาร / บทความ / อินโฟกราฟกิ .............................................................. 20

2.2 การลบเนอ้ื หาข่าวสาร / บทความ / อนิ โฟกราฟกิ ................................................................................. 22
3. คลังสื่อ............................................................................................................................................................ 23
4. หนา้ ................................................................................................................................................................ 26
5. ความคดิ เหน็ ................................................................................................................................................... 30
6. ปล๊ักอิน........................................................................................................................................................... 31
7. สร้างหน้าดว้ ย Pages...................................................................................................................................... 33
8. การจดั การ เมนู (Menus)............................................................................................................................... 35

8.1 วิธีสร้าง Menus ในเวริ ์ดเพรส ............................................................................................................... 35
8.1.1 Add menu items ..................................................................................................................... 35
8.1.2 การสร้างเมนูย่อย......................................................................................................................... 35

ค

8.1.3 การสลบั ตำแหนง่ ของเมนู ............................................................................................................ 36
8.1.4 การแสดง Menu ในหน้าเว็บไซต์................................................................................................. 36
8.1.5 วธิ เี พม่ิ -ลด ตัวเลือก Menu items............................................................................................... 36
9. การใชง้ าน Elementor เพ่ือแก้ไขหนา้ ........................................................................................................... 37
9.1 การแก้ไขขอ้ มูลหน้าประวัตแิ ละความเปน็ มา ......................................................................................... 40
9.2 การแก้ไขขอ้ มลู หน้าวสิ ัยทศั น์และพันธกิจ.............................................................................................. 42
9.3 การแก้ไขข้อมูลหน้าคณาจารย์............................................................................................................... 45

ง

สารบญั ภาพ

หน้า
ภาพที่ 1 การพมิ พ์ URL เพื่อเข้าหน้า Login .........................................................................................................1
ภาพที่ 2 การกรอก Username และ Password..................................................................................................1
ภาพที่ 3 แสดงหน้าจอการ login เขา้ สู่ระบบสำเรจ็ ..............................................................................................2
ภาพท่ี 4 เมนูเรอ่ื งหนา้ เร่ืองทั้งหมด .......................................................................................................................9
ภาพท่ี 5 เมนเู พิ่ม / เขียนเรื่องใหม่ ..................................................................................................................... 10

ภาพท่ี 5.1 เมนูเพมิ่ / เขียนเรือ่ งใหม่ ........................................................................................................... 10
ภาพที่ 6 แสดงหวั ข้อสำคัญๆ ทต่ี อ้ งใสร่ ายละเอียดขอ้ มลู ให้ครบถ้วน.................................................................. 11

ภาพท่ี 6.1 แสดงหวั ข้อสำคัญๆ ทตี่ ้องใสร่ ายละเอียดข้อมูลให้ครบถ้วน........................................................ 11
ภาพท่ี 7 แสดงแบบฟอรม์ ในการเพิ่มชอ่ื เรื่อง...................................................................................................... 12
ภาพที่ 9 แสดงแบบฟอรม์ ในการเพ่ิมรปู ภาพ ...................................................................................................... 13
ภาพท่ี 10 แสดงหนา้ จอการเพ่ิมไฟลร์ ูปภาพใหม่ ................................................................................................ 13
ภาพที่ 11 แสดงหน้าจอท่ีสำคัญสำหรับการใสร่ ายละเอยี ดของรูป...................................................................... 14
ภาพที่ 12 แสดงหน้าจอการเลอื กรูปภาพจากคลงั สื่อ.......................................................................................... 15
ภาพท่ี 13 แสดงหน้าจอการใส่รายละเอียดของ PDF ไฟล์.................................................................................. 16
ภาพท่ี 14 แสดงหน้าจอการแทรก PDF ไฟล์...................................................................................................... 16
ภาพท่ี 15 แสดงหนา้ จอการแนบลงิ กใ์ นข่าวสาร / บทความ / อินโฟกราฟิก ...................................................... 17

ภาพท่ี 15.1 แสดงหน้าจอการแนบลิงกใ์ นขา่ วสาร / บทความ / อนิ โฟกราฟิก ............................................ 17
ภาพท่ี 16 แสดงหนา้ จอการแนบลิงกใ์ นข่าวสาร / บทความ / อินโฟกราฟิก ...................................................... 18
ภาพที่ 17 แสดงการเลือกหมวดหมขู่ องเน้ือหา ข่าวสาร / บทความ / อินโฟกราฟกิ ........................................... 18
ภาพที่ 18 เมนูการต้งั ภาพประจำเร่ือง................................................................................................................ 19

จ

ภาพท่ี 19 แสดงภาพประจำเร่ืองของเน้ือหาขา่ วสาร / บทความ / อินโฟกราฟิก ............................................... 19
ภาพที่ 20 แสดงภาพประจำเรอื่ งของเนื้อหาข่าวสาร / บทความ / อินโฟกราฟิก ............................................... 20
ภาพท่ี 21 เมนูหนา้ เร่ืองท้ังหมด ......................................................................................................................... 20
ภาพที่ 22 แสดงหนา้ จอการแก้ไขเรื่อง................................................................................................................ 21
ภาพท่ี 23 แสดงข้ันตอนการลบเรอื่ ง................................................................................................................... 22
ภาพที่ 24 การเพมิ่ รูปภาพในคลงั ส่ือ .................................................................................................................. 23
ภาพท่ี 25 การเพิม่ รปู ภาพในคลังส่ือ .................................................................................................................. 23
ภาพที่ 26 คลังสื่อ............................................................................................................................................... 24
ภาพท่ี 27 การอัปโหลดสื่อใหม่........................................................................................................................... 24
ภาพที่ 28 การอปั โหลดสอื่ รูปภาพ...................................................................................................................... 25
ภาพท่ี 30 การเพม่ิ หน้าใหม่................................................................................................................................ 26
ภาพท่ี 31 แถวการเพิ่มหนา้ และรายละเอียดต่างๆ.............................................................................................. 26
ภาพที่ 32 การเพมิ่ ช่ือของหน้า ........................................................................................................................... 27
ภาพท่ี 33 แถบการเพมิ่ ข้อมูลของเวบ็ ไซต์ .......................................................................................................... 27
ภาพท่ี 34 คุณสมบตั ิหน้า ................................................................................................................................... 28
ภาพท่ี 35 การเผยแพร่หน้า................................................................................................................................ 29
ภาพที่ 36 หนา้ จัดการความคิดเหน็ .................................................................................................................... 30
ภาพท่ี 38 ปลก๊ั อนิ ทตี่ ดิ ต้ัง .................................................................................................................................. 31
ภาพท่ี 39 การตดิ ตั้งปล๊ักอนิ ............................................................................................................................... 32
ภาพที่ 40 การสร้างหนา้ เพจ .............................................................................................................................. 33

ภาพที่ 40.1 การสร้างหน้าเพจ..................................................................................................................... 33
ภาพที่ 42 วธิ เี พมิ่ Menus ในเวิรด์ เพรส............................................................................................................. 36
ภาพท่ี 43 วิธีใชง้ าน Elementor เพ่ือแกไ้ ขหน้า ................................................................................................ 37

ฉ

ภาพที่ 44 เมนูต่างๆ ของ Elementor............................................................................................................... 37
ภาพท่ี 45 ส่วนประกอบของโหมด Elementor ................................................................................................. 38
ภาพที่ 46 ใชง้ าน Elementor เพ่อื แก้ไขหนา้ ประวตั ิและความเปน็ มา ............................................................... 40
ภาพที่ 47 การแก้ไขในแบบ Elementor ........................................................................................................... 40
ภาพที่ 48 การแก้ไขหัวเรือ่ ง (Heading) ในแบบ Elementor............................................................................ 41
ภาพที่ 49 การแก้ไขในส่วนของ รายละเอยี ด(Text editor) ในแบบ Elementor .............................................. 41
ภาพท่ี 50 ใช้งาน Elementor เพือ่ แกไ้ ขหนา้ วิสัยทศั น์และพันธกจิ .................................................................... 42
ภาพที่ 51 แกไ้ ขวิสยั ทัศนแ์ ละพันธกจิ ในแบบ Elementor................................................................................. 42
ภาพท่ี 52 แก้ไขรปู ภาพวสิ ยั ทศั นแ์ ละพันธกจิ ในแบบ Elementor.................................................................... 43
ภาพที่ 53 เมนตู ่าง ๆ ในการแก้ไขรูปภาพ .......................................................................................................... 43
ภาพท่ี 54 แกไ้ ขในส่วนของข้อมลู วสิ ยั ทศั น์และพนั ธกจิ ในแบบ Elementor..................................................... 44
ภาพท่ี 55 ใช้งาน Elementor เพื่อแกไ้ ขหนา้ คณาจารย์ .................................................................................... 45
ภาพที่ 56 แก้ไขของคณาจารย์ ในแบบ Elementor.......................................................................................... 45
ภาพที่ 57 แกไ้ ขรูปภาพของคณาจารย์ ในแบบ Elementor .............................................................................. 46
ภาพที่ 58 เมนตู ่าง ๆ ในการแกไ้ ขรปู ภาพ .......................................................................................................... 46
ภาพท่ี 59 แกไ้ ขข้อมูลของคณาจารย์ ในแบบ Elementor................................................................................. 47

1

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

1. การ login เขา้ สรู่ ะบบ

1.1 ใหพ้ มิ พค์ ำวา่ /admin ต่อท้าย URL ของเวบ็ ภาควชิ าจติ วิทยา คือ https://pec.msu.ac.th/admin

ดังภาพท่ี 1

ภาพที่ 1 การพมิ พ์ URL เพือ่ เขา้ หนา้ Login

1.2 กรอก Username และ Password ดว้ ยระบบบัญชีผใู้ ช้งานอนิ เตอร์เน็ตของผ้ดู แู ลเว็บไซต์จากนน้ั
ทำงาน Login เพ่ือเขา้ ส่รู ะบบ ดงั ภาพท่ี 2
(หมายเหตุ Username คอื pec_msu และ Password คือ pecmsu123 )

ภาพที่ 2 การกรอก Username และ Password

2

1.3 เมอ่ื login เข้าสรู่ ะบบสำเร็จจะปรากฏเมนูการใช้งานต่างๆ ดงั ภาพที่ 3

ภาพที่ 3 แสดงหน้าจอการ login เข้าสูร่ ะบบสำเร็จ
หมายเลข 1 แผงควบคุม จัดการเมนู
หมายเลข 2 เร่อื ง

เร่ืองทงั้ หมด คือ เรอ่ื งท่ีผดู้ ูแลเผยแพร่ทัง้ หมดในเว็บไซต์
หมวดหมู่ คือ การ เรื่องผดู้ ูแลจดั หมวดหมูใ่ นการเผยแพร่ในเว็บไซต์
ป้ายกำกบั คือ แทก็ หมวดหมู่ของเรื่องเผยแพร่

3

หมายเลข 3 สื่อ

คลงั ส่ือ คือ ส่อื ท่ผี ูด้ ูแลเคยอัปโหลดไวใ้ นระบบ คลา้ ยๆระบบCloudหรือการเก็บข้อมลู
เพมิ่ ไฟลใ์ หม่ คือ การอัปโหลดไฟลต์ า่ งๆไปยังเว็บไซต์

หมายเลข 4 หนา้

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

หมายเลข 5 ความเห็น คือ ความคดิ เหน็ ทงั้ หมดบนเว็บไซต์ ซง่ึ ผดู้ ูแลสามารถตอบกลับ รอตรวจสอบ
อนุมัติ สแปม หรือลบได้

4

หมายเลข 6 Ultimate Member คอื ระบบสมคั รสมาชิกบนเวบ็ (เวบ็ ของภาควชิ าจิตทยา
ไม่ได้ใช้งานสมคั ร)

หมายเลข 7 Elementor คือ ปลั๊กอนิ ท่ีใช้ในการปรบั แต่งเว็บไซต์

5

หมายเลข 8 Templater คอื เว็บไซตส์ ำเร็จรูป หรอื แบบของเวบ็ ไซต์ สามารถนำมาใชป้ รบั แตง่ เพ่ือให้
เวบ็ ไซต์สวยงาม

หมายเลข 9 คือ รูปสัญลกั ษณ์ ปรับแตง่ ธมี ของเวบ็ ไซต์ วิดเจต็ จดั การเมนู และฟอนต์

6

หมายเลข 10 Fonts Plugin คอื การปรับเปล่ยี นแบบตวั หนงั สือในเว็บไซต์

หมายเลข 11 ปลก๊ั อนิ คือเครื่องมือคน้ หาและตดิ ตั้งส่วนเสรมิ ที่จะชว่ ยให้สามารถจัดการกับเวบ็ ไซตไ์ ด้งา่ ย
และสะดวกยิ่งข้ึน

หมายเลข 12 ผ้ใู ช้ คอื ส่วนจัดการผใู้ ช้ เชน่ เรยี กดูผู้ใช้ทั้งหมด, เพ่ิมผู้ใชใ้ หม,่ ดูโปรไฟล์ของตวั เอง

7

หมายเลข 13 เครื่องมือ เปน็ ส่วนทรี่ วบรวมเครือ่ งมือสำหรับจดั การ Import, Export หน้า Postm Page
รวมถงึ Export ข้อมูลส่วนตวั ของ User

หมายเลข 14 ตง้ั คา่ คือสว่ นจดั การต้งั ค่าตา่ ง ๆ ของระบบ เช่น การตัง้ คา่ ทัว่ ไป, การเขียนบทความ, การ
แสดงผล, ลงิ ค์ถาวร, ความคิดเหน็ , ไฟล์สอื่

8

หมายเลข 15 Smart Slider คือเคร่ืองมือรวมภาพใหเ้ ป็นภาพแบบสไลด์

9

2. การจดั การเน้ือหา / ขา่ ว / บทความ / อนิ โฟกราฟกิ

การจัดการเนื้อหาเป็นสว่ นท่ใี ช้สำหรบั จดั การกับเนอื้ หาที่จะปรากฏในสว่ นต่าง ๆ บนหน้าเวบ็ ไซต์แตล่ ะ
หนา้ สามารถจัดการเนอ้ื หาท่ีอยบู่ นเวบ็ ไซตไ์ ด้แก่ ข่าวประกาศ ข่าวประชาสัมพันธ์ ข่าวสอ่ื สารองค์กร ขา่ วสำหรับ
นักศกึ ษา โครงการความร่วมมือ เปน็ ตน้

2.1 การเพม่ิ และเผยแพรเ่ นอ้ื หา ข่าวสาร / บทความ / อนิ โฟกราฟกิ

2.1.1 การเพ่ิมเน้ือหา

1. ในการเพม่ิ เน้อื หาขา่ วสาร หรอื บทความ ให้กดทปี่ ุ่มเมนู”เร่ือง”ทางด้านซา้ ย
(หมายเลข 1) แลว้ จะปรากฏหน้าดงั ท่เี หน็ ในภาพท่ี 4 ข้นึ มา หากเร่ืองขา่ วสาร / บทความ /
อินโฟกราฟกิ ยงั ไม่ถูกสร้างจะไม่พบหัวข้อ ใดๆ

ภาพท่ี 4 เมนูเร่ืองหนา้ เรื่องท้ังหมด

10

2.ให้ทำการกดปมุ่ “เขียนเรือ่ งใหม”่ (หมายเลข 2 จะเข้าสู่หน้าเพมิ่ เรื่องใหม่ตามภาพท่ี 5-5.1 )

ภาพที่ 5 เมนเู พ่มิ / เขยี นเร่ืองใหม่

ภาพท่ี 5.1 เมนูเพ่ิม / เขียนเร่อื งใหม่
การเพิ่มเร่อื ง/เน้ือหาใหม่ มี 4 องคป์ ระกอบทต่ี ้องดำเนินการใสใ่ หค้ รบถ้วนดงั หัวข้อต่อไปน้ี
A. ช่อื เรื่อง
B. เนอ้ื หาของเรือ่ งนนั้ ๆ
C. หมวดหมู่ของเน้ือหา/เรือ่ งน้ันๆ
D. ภาพหน้าปก/ภาพประจำเร่ืองนนั้ ๆ (Featured image)

11

ภาพที่ 6 แสดงหวั ข้อสำคญั ๆ ที่ต้องใส่รายละเอยี ดข้อมลู ให้ครบถ้วน
ภาพที่ 6.1 แสดงหวั ข้อสำคญั ๆ ท่ตี ้องใส่รายละเอยี ดข้อมูลใหค้ รบถว้ น

12

โดยจะแนะนำการใส่รายละเอียดในแต่ละหวั ข้อ ดงั น้ี

A: ชื่อเรอ่ื ง : เพิ่มเรื่องใหม่ ให้พิมพ์หวั ข้อของเน้ือหาข่าวสาร / บทความ / อินโฟกราฟิก หรือเร่ืองที่
ต้องการ ดงั ภาพท่ี 7

ภาพที่ 7 แสดงแบบฟอร์มในการเพิ่มช่อื เรื่อง

B:รายละเอียดของเรอ่ื ง: โดยรายละเอยี ดเป็นสว่ นท่ีบอกใจความสำคญั ของ ขา่ วสาร / บทความ / อินโฟ
กราฟิก ใหพ้ ิมพร์ ายละเอยี ดของเน้อื หา ข่าวสาร / บทความ / อนิ โฟกราฟกิ ดังภาพที่ 8

ภาพที่ 8 แสดงแบบฟอรม์ ในการเพ่ิมรายละเอียดของเนื้อหาขา่ วสาร / บทความ / อนิ โฟกราฟิก

โดยในส่วนนีจ้ ะมเี ครื่องมือทีใ่ ชใ้ นการเขยี นเน้ือหา / บทความ คล้ายกบั เคร่อื งมือในโปรแกรม Microsoft
Word สามารถเพิ่มรปู ภาพ/ไฟล์เอกสารในรปู แบบ PDF ไฟล์ , เพิม่ ลงิ กจ์ ากรูป หรือข้อความ และ ใส่
รายละเอียดต่างๆ

หมายเลข B1 เป็นส่วนสำหรบั ใสร่ ายละเอยี ดของเนื้อหา ข่าวสาร / บทความ / อนิ โฟกราฟกิ

หมายเลข B2 เปน็ ส่วนสำหรบั การเพ่ิมไฟล์รูปภาพ และไฟลเ์ อกสารโดยมขี นั้ ตอนดงั นี้

13

2.1.2 การใส่หรือแทรกรูปภาพ ลงในเนื้อหา ขา่ วสาร / บทความ / อินโฟกราฟิก มีขน้ั ตอน
ดังต่อไปน้ี

ในบทความให้คลกิ ตำแหน่งที่ตอ้ งการวางภาพก่อน จากนน้ั ใหค้ ลิก จะพบกับ
หน้าจอดังภาพที่ 9

ภาพที่ 9 แสดงแบบฟอร์มในการเพิ่มรปู ภาพ

2.1.3 การอัปโหลดรปู จากไฟลภ์ ายนอก

ถา้ ตอ้ งการอัปโหลดไฟล์จากภายนอก ให้คลิกเลือก อัปโหลดไฟล์ จากนน้ั ให้คลกิ

ที่เลอื กหลายไฟล์ จะพบกบั หนา้ จอดังภาพที่ เม่ือได้ภาพท่ีตอ้ งการให้คลกิ Open เพ่อื

เพ่มิ ไฟล์รูปเข้าสู่คลงั สอ่ื ถ้าอัปโหลดไฟลร์ ปู สำเรจ็ จะแสดงเครื่องหมาย ดงั หมายเลข B2-1

ดังภาพท่ี 10

ภาพท่ี 10 แสดงหนา้ จอการเพ่มิ ไฟล์รูปภาพใหม่

14

เม่อื อัปโหลดรูปภาพเสรจ็ สว่ นสำคัญท่ีต้องดำเนนิ การตอ่ คือการใส่รายละเอียดของ
รูปภาพ โดยมีหัวขอ้ ทีต่ ้องดำเนนิ การ 4 หวั ขอ้ ดังภาพที่ 11

ภาพที่ 11 แสดงหน้าจอทสี่ ำคญั สำหรับการใส่รายละเอียดของรูป
B2-2 ข้อความ Alt : หนา้ ท่ีหลกั ของข้อความ Alt คือจะแสดงขอ้ ความ กรณีที่รปู ภาพโหลดไมข่ น้ึ เพ่ือ
บอกวา่ รูปน้ีคืออะไรในหนา้ เว็บ ซึ่งจดุ นีส้ ำคญั มาก เป็นคำที่ทำให้google ใชด้ วู า่ รปู ภาพของเราคือรูป
อะไร

B2-2 ชื่อ : คือชอื่ รปู ท่ีเราตัง้ ไวท้ ี่คอมพิวเตอร์ของเราก่อนอัปโหลดขน้ึ มา

B2-3 คำบรรยายภาพ : คือคำอธิบายใต้รปู ถา้ ใส่ช่องนี้ จะแสดงผลทหี่ น้าเว็บของเราดว้ ยใต้ รปู ภาพน้นั ๆ

B2-4 คำอธิบาย : คำอธบิ ายขนาดยาวของรปู ภาพนัน้ อีกทีแตค่ ำตรงสว่ นนจ้ี ะไม่แสดงที่หนา้ เว็บ ของเรา

*** คำแนะนำ ภาพทีเ่ ราอัปโหลดขึน้ เวบ็ จะมีขนาดกว้าง x ยาว เทา่ ไหร่ก็ได้ แตข่ นาดของไฟล์ ของ
รูปภาพตอ้ งอย่าให้เกิน 200 kb ซ่ึงเราควรบบี ไฟล์ต้ังแตต่ อนการออกแบบรปู ***

15

2.1.4 การเลอื กไฟลร์ ปู จากคลังส่อื

สามารถเลือกจากรูปท่อี ยูใ่ นคลงั ส่ือ ได้เลย หลงั จากนัน้ ให้คลกิ ท่ปี ุม่ “ใส่ไฟล์ลงในเรอ่ื ง”
ดงั ภาพ ที่ 12

ภาพท่ี 12 แสดงหนา้ จอการเลือกรปู ภาพจากคลังสื่อ
*** คำแนะนำ สามารถเลือกรูปได้ทลี ะหลายภาพ / ต่อการเลอื ก 1 คร้ัง ***

16

2.1.5 การแทรกเนื้อหาเอกสารในรูปแบบ PDF ไฟล์

การแทรกเน้อื หาเอกสารในรูปแบบ PDF ไฟล์สามารถทำไดโ้ ดยใช้วธิ ีเดียวกันกับ การแทรกภาพ
รูปภาพ และควรใสร่ ายละเอียดของไฟล์ PDF ใหค้ รบเช่นกับการใส่รายละเอียดของรูปภาพ ดงั ภาพท่ี 13

ภาพที่ 13 แสดงหนา้ จอการใส่รายละเอียดของ PDF ไฟล์
โดยเมื่อแทรกไฟลส์ ำเรจ็ จะแสดงโค้ดแท็กการแทรกไฟล์ PDF ดังภาพท่ี 14

ภาพที่ 14 แสดงหนา้ จอการแทรก PDF ไฟล์

17

หมายเลข B3 การใส่ลงิ ก์ข้อความ หรอื ลงิ กจ์ ากรปู ภาพ เม่ือเราต้องการทำข้อความบาง
ขอ้ ความใหล้ งิ ก์ไปยงั หนา้ อืน่ ๆ หรอื เว็บไซต์อ่นื ๆ สามารถทำไดด้ ังนี้

1. ครอบข้อความทตี่ อ้ งการจะสร้างเปน็ Link ดงั ภาพที่ 15

ภาพที่ 15 แสดงหนา้ จอการแนบลงิ ก์ในขา่ วสาร / บทความ / อนิ โฟกราฟกิ
2. จากน้นั คลิกท่ปี ุ่ม “เพ่ิม/แกไ้ ขลิงก”์ ดงั ภาพที่ 15.1

ภาพท่ี 15.1 แสดงหนา้ จอการแนบลงิ ก์ในข่าวสาร / บทความ / อินโฟกราฟิก

18

3. ใส่ URL ท่ตี ้องการลงิ ก์ไปยังเว็บไซตท์ ่ีต้องการ จากน้นั คลิกท่ปี มุ่ “นำไปใช้” ดงั ภาพที่ 16

ภาพท่ี 16 แสดงหนา้ จอการแนบลงิ ก์ในขา่ วสาร / บทความ / อินโฟกราฟิก

4. หากตอ้ งการแก้ไข URL ใหม่ใหเ้ ราคลิกท่ขี ้อความท่คี รอบไวอ้ กี คร้ังจะปรากฏปมุ่ “แก้ไข” จากน้ันใส่
URL ใหม่ที่ต้องการ และยังสามารถออก Link ท่ีไมต่ ้องการออกได้ โดยคลิกทีป่ ่มุ “เอาลิงก์ ออก” ในการ
ใส่หมวดหมใู่ หก้ บั เน้ือหา ข่าวสาร / บทความ / อินโฟกราฟกิ ทำได้โดยการเลือกทีเ่ มนูหมวดหมู่ จากน้ัน
ไปคลิกทแ่ี ทบ็ “ใช้งานบ่อย” และต๊ิกเลือกหมวดหมู่ จากรายการที ่ปรากฏ โดยในบทความ / ขา่ ว จะ
สามารถเลอื กหมวดหมู่ ใ่ ห้กับขา่ วสาร / บทความ / อนิ โฟกราฟิ ได้หลาย หมวดหม่ใู น 1 ข่าวสาร /
บทความ / อินโฟดังภาพที่ 17

ภาพที่ 17 แสดงการเลอื กหมวดหมขู่ องเน้ือหา ข่าวสาร / บทความ / อนิ โฟกราฟกิ

*** คำแนะนำ การเลือกหมวดหมู่ควรเลอื กหมวดหมใู่ หต้ รงกับเนอ้ื หาทีต่ ้องการเผยแพร่
ข่าวสาร สำหรบั การเผยแพร่ข่าวสารประชาสมั พนั ธ์
บทความ สำหรบั บทความเชิงวชิ าการและให้ความรทู้ างจิตวิทยา
infographic สำหรับสอื่ อนิ โฟกราฟิกให้ความรทู้ างจิตวทิ ยา

19

2.1.6 การต้ังค่ารูปภาพหนา้ ปก (Featured image) ของเนื้อหา ข่าวสาร / บทความ / อินโฟ
กราฟิก

รปู ภาพหนา้ ปก (Featured image) คอื รูปภาพที่แสดงถงึ เน้ือหา / บทความ ข่าว นน้ั ๆ
ในการ ใสร่ ปู ภาพหนา้ ปก ทำได้โดยการคลิกเลือกที่ “ต้งั คา่ รูปประจำเรอ่ื ง” จากน้ันให้เลือกภาพ
ทต่ี อ้ งการ เพ่ือต้ังเป็น ภาพประจำเร่ือง ดังภาพที่ 18

ภาพที่ 18 เมนูการตง้ั ภาพประจำเรอื่ ง
เมื่อใสภ่ าพประจำเรื่องเสรจ็ จะแสดง ดังภาพที่ 19

ภาพที่ 19 แสดงภาพประจำเร่อื งของเนื้อหาข่าวสาร / บทความ / อินโฟกราฟิก

20

2.1.7 การเผยแพรเ่ น้ือหา ขา่ วสาร / บทความ / อินโฟกราฟิก

เม่อื ตรวจสอบความถูกตอ้ งครบถ้วนแลว้ เราสามารถเขา้ ไปเผยแพรเ่ น้อื หาขา่ วสาร / บทความ /
อินโฟกราฟิก ของเราให้บคุ คลอ่นื เขา้ มาเยีย่ มชมได้โดยคลิกท่ี “เผยแพร่” ดงั ภาพท่ี 20

ภาพที่ 20 แสดงภาพประจำเรอื่ งของเนื้อหาข่าวสาร / บทความ / อินโฟกราฟิก
ภาพที่ 21 เมนูหน้าเร่ืองท้งั หมด

21

เมอ่ื กดเพ่ือเข้าสหู่ น้าแก้ไขเร่ืองจะพบกับภาพท่ี 22 จากนั้นสามารถทำการแก้ไขข้อมูลท่ตี ้องการ
เมื่อแก้ไขแลว้ ให้กด “อปั เดต” ทป่ี มุ่ หมายเลข 1 เพื่อทำการบันทกึ การแก้ไขท้ังหมด

ภาพท่ี 22 แสดงหนา้ จอการแก้ไขเรื่อง

22

2.2 การลบเนือ้ หาขา่ วสาร / บทความ / อินโฟกราฟิก

ในการลบเนือ้ หา ขา่ วสาร / บทความ / อินโฟกราฟิก สามารถทำไดโ้ ดยการเข้าเมนูเรอื่ งจะ
ปรากฏภาพ และค้นหาเร่ืองที่ตอ้ งการลบโดยพิมพ์ บางสว่ น ของชอ่ื เรื่องในช่องหมายเลข 1 เมื่อพบเร่อื งท่ี
ต้องการลบแลว้ ให้นำเม้าไปช้ีที่หวั ขอ้ ท่ตี ้องลบ จะพบแถบเมนูทซี่ อ่ นอยใู่ ห้กดคำาวา่ “ย้ายไปถงั ขยะ”
หมายเลข 2 เป็นตัวอักษร สแี ดงเพื่อทำการลบข้อมูล ดงั ภาพท่ี 23

ภาพท่ี 23 แสดงข้ันตอนการลบเรื่อง

23

3. คลงั สอ่ื

การอัปไฟลร์ ูปภาพไปยังเว็บไซตเ์ พื่อใช้งานคลา้ ยๆระบบ Cloud หรอื การเกบ็ ข้อมูลออนไลน์ ดงั ภาพท่ี 24

ภาพที่ 24 การเพม่ิ รูปภาพในคลงั สื่อ
เมือ่ คลิกเพ่ิมไฟลใ์ หเ้ ลอื่ นลงมาด้านล่าง จะมีหน้าต่างเพ่ิมไฟล์ดังภาพที่ 25

ภาพท่ี 25 การเพ่ิมรูปภาพในคลงั สื่อ

24

เม่ือเลื่อนลงมาจะพบกับสอื่ ท่ีเราอัปโหลดไว้ เพ่ือใช้ใหง้ ่ายต่อการใชง้ านในครงั้ ต่อไป ดงั ภาพที่ 26

ภาพท่ี 26 คลังส่ือ

เพ่มิ ไฟลใ์ หม่ สามารถอัพส่ือรูปไปในระบบได้แบบคลังส่ือ แต่ไมส่ ามารถดูสอ่ื ท่เี ราอัพได้เหมือนคลงั ส่ือ ดงั
ภาพที่ 27

ภาพที่ 27 การอัปโหลดสอ่ื ใหม่

25

เมอ่ื เลอื่ นลงมาจะพบกบั การอัปโหลดไฟล์สามารถอัปพรอ้ มกนั ไดห้ ลายไฟลด์ งั ภาพท่ี 28
ภาพที่ 28 การอัปโหลดสื่อรูปภาพ

26

4. หน้า

เปน็ การจดั การหนา้ ท่แี สดงอยู่บนเวบ็ ไซต์สามารถ แก้ไขหน้า ลบหน้า หรือดหู นา้ นัน้ ๆได้ ดงั ภาพท่ี 30

ภาพท่ี 29 หน้าท้ังหมดของเว็บไซต์

หากตอ้ งการเพิม่ หนา้ ไปยงั เมนูของเว็บไซต์ สามารถทำได้โดยการคลิกที่ “เขียนหนา้ ใหม่”ดงั ภาพท่ี 30

ภาพที่ 30 การเพม่ิ หน้าใหม่
หากต้องการเพ่มิ รายละเอยี ดอ่ืนๆในหนา้ ทีจ่ ะเพิ่มให้คลกิ ท่ี “เขยี นหนา้ ใหม่”และเล่ือนลงมาด้านล่างจะ
พบกับแถบเมนูตา่ งๆ ดังภาพท่ี 31

ภาพท่ี 31 แถวการเพ่ิมหนา้ และรายละเอยี ดตา่ งๆ

27

โดยสามารถใสช่ ื่อของหนา้ น้นั ๆได้ เพื่อใหผ้ ู้ดแู ลระบบจดจำหนา้ ที่จะเพม่ิ ได้ดังภาพท่ี 32

ภาพที่ 32 การเพม่ิ ชื่อของหน้า
เมื่อต้องการเพ่มิ ข้อมลู ต่างๆไปยงั เวบ็ ไซต์สามารถทำไดโ้ ดยผา่ นแถบข้อความดังภาพที่ 33

ภาพที่ 33 แถบการเพิ่มขอ้ มูลของเว็บไซต์

ขอ้ มูลแถบจากภาพท่ี

สามารถเพิ่มสือ่ ทต่ี ้องการให้แสดงในหน้าเว็บไซต์ เช่น ภาพ เสียง เปน็ ต้น

แบบตวั อักษรทแี่ สดงบนเว็บไซต์

ขนาดตัวอกั ษรทแี่ สดงบนเว็บไซต์

แบบหัวขอ้ ท่แี สดงบนเว็บไซต์

ตัวอกั ษรหนา
ตวั อักษรเอยี ง

28

เพิม่ จดุ หนา้ หวั ข้อ
เพ่มิ เลขหนา้
ขอ้ ความอ้างองิ
ชดิ ซ้าย
ก่ึงกลาง
ชดิ ขวา
เพม่ิ หรือแนบลงิ ก์
เพม่ิ ปา้ ยกำกับ
แสดงเมนเู พิ่มเตมิ ดังภาพ

คณุ สมบตั ิหน้า เปน็ เมนูสำหรบั การเพิ่มหนา้ ไปยังหนา้ ที่มีอยู่แลว้ สามารถเพ่มิ ไปยงั กลุ่มหลกั หรือ
กลุ่มใหม่ได้ ดงั ภาพท่ี 34

ภาพท่ี 34 คุณสมบัตหิ น้า

29

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

ภาพที่ 35 การเผยแพรห่ น้า

30

5. ความคดิ เหน็

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

ภาพท่ี 36 หนา้ จัดการความคิดเห็น

31

6. ปลัก๊ อิน

เป็นสว่ นเสรมิ ของ WordPress ที่สามารถทำให้เว็บไซต์ WordPress กลายเปน็ เว็บทีค่ รบเครอื่ ง ทำงานได้
ตามท่เี ราต้องการ มตี ง้ั แต่ปลั๊กอนิ พ้นื ฐานที่ต้องใช้ จนถงึ ปล๊ักอนิ เสริม ทท่ี ำงานเฉพาะด้าน ซ่งึ ในเวบ็ ไซต์
wordpress.org มปี ลั๊กอินใหเ้ ใช้ฟรี มากถงึ 59,563 ตวั มีทุกประเภทการใช้งาน

ภาพท่ี 37 หนา้ ปล๊กั อนิ
ในนปี้ ลกั๊ อินท่ตี ดิ ตัง้ ทั้งหมดน้ัน คือปลั๊กอนิ ทผี่ ดู้ ูแลระบบติดตง้ั ไวแ้ ล้วและสามารถอัปเดต ลบไดใ้ นหนา้ นี้
ดงั ภาพที่ 38

ภาพท่ี 38 ปล๊ักอินท่ีติดตงั้
ในส่วนของการเพ่ิมปล๊กั อนิ ใหม่ คอื การเพิ่มฟงั กช์ นั ลูกเล่นในเวบ็ ไซต์ผูด้ แู ลสามารถเพิ่มปลั๊กอนิ ใหม่ๆได้
โดยคลิกท่ีตดิ ตั้งตอนนี้ ดงั ภาพ

(หมายเหตุ ปล้ักอนิ แต่ละชนดิ มีความสามารถแตกตา่ งกันผูุ้ดูแลระบบควรดูรายละเอยี ดและศึกษาก่อนติดต้ัง)

32

ภาพท่ี 39 การตดิ ต้ังปล๊ักอนิ

33

7. สร้างหน้าด้วย Pages

Pages คอื หนงึ่ ใน Post Type เช่นเดยี วกันกบั Posts สามารถสร้างหนา้ ลงข้อมูลได้เหมือนกบั Posts
เลย แตจ่ ะไมส่ ามารถแบง่ เป็น หมวดหมู่ และ แท็ก เหมือน Posts ไม่สามารถเรยี งลำดบั เป็นวันเดอื นปีได้ เหมาะ
สำหรบั เมนหู รอื หน้า ท่มี ีขอ้ มูลตายตวั ไม่ได้อัพเดตตลอดเวลาเหมอื นข่าว เชน่ About, Service, Contact

ภาพท่ี 40 การสรา้ งหนา้ เพจ

ภาพที่ 40.1 การสรา้ งหน้าเพจ

34

7.1 โครงสรา้ งของ Pages
หน้า –> เขียนหน้าใหม่ : เพือ่ เพม่ิ หน้าเพจ
ใสช่ อ่ื : ตงั้ ชอ่ื หนา้ เช่น Home, About, Service, Contact
Block ตรงกลาง : สำหรบั เขียนบทความ ยาวแค่ไหนก็ได้ ตามความขยนั
เผยแพร่ : ต้งั ค่าการมองเหน็
Public : ทกุ คนมองเห็นได้
Private : แอดมินเทา่ นั้น
Password Protected : เฉพาะคนท่ีมรี หัสผ่านถึงจะมองเห็น
Publish : สามารถตงั้ วันเวลาได้ ใหเ้ ผยแพร่อตั โนมตั ิ
คณุ สมบตั ิหน้า : url ของบทความที่ต่อทา้ ยช่อื โดเมนของเรา เน้นกระชับ สน้ั มคี วามหมาย
รูปประจำหนา้ : ภาพหนา้ ปกของบทความ ลากมาใสไ่ ดเ้ ลย
Page Setting : เลอื กธีมเพลตของแตล่ ะหน้า เช่น
Default template * มาตรฐาน
Landing Page
Left Sidebar
Right Sidebar
* แต่ขึ้นอยู่กบั แต่ละธมี ทีเ่ ราใช้ อาจจะมธี ีมเพลตไม่เหมอื นกัน *

35

8. การจดั การ เมนู (Menus)

Menus ก็คอื เมนูอย่างท่ีเราเข้าใจนน้ั แหละครับ ใน WordPress มีระบบจัดการเมนทู เ่ี รยี บง่าย แต่ทรง
พลัง สามารถสร้างเมนหู ลายๆ ชดุ แสดงได้หลากหลายตำแหน่ง เชน่ Main menu, Mobile menu, Secondary
menu แตข่ ึ้นอยู่กับแต่ละธมี ด้วยว่า มีตำแหนง่ ใหแ้ สดงเมนูได้ก่ีจดุ

8.1 วธิ ีสรา้ ง Menus ในเวิร์ดเพรส

ไปที่เมนู รูปลักษณ์ –> เมนู
คลกิ “Create a new menu” เพื่อสร้างเมนูชดุ ใหม่ กรณีที่ยงั ไมเ่ คยสร้างเลย
Menu Name : ตง้ั ช่ือเมนไู ดต้ ามสบายใจ
Save Menu : กดบันทกึ แล้วคอ่ ยใส่เมนูต่างๆ
ดังภาพที่ 41

ภาพท่ี 41 การสรา้ งเมนู

8.1.1 Add menu items
ดา้ นซา้ ยมือสามารถต๊ิกเลอื ก เมนูของหนา้ ทีต่ ้องการสร้างเป็นเมนูหลกั แล้วคลกิ Add to

Menu เมนทู ี่เราต๊ิก กจ็ ะปรากฏตรงกลาง
8.1.2 การสร้างเมนูย่อย

ลากเขา้ ไปดา้ นในกเ็ สร็จแล้ว เช่น ในรปู ผมจะตงั้ “เกีย่ วกบั เรา” เป็นเมนหู ลกั และ
“บริการ” เปน็ เมนยู อ่ ย แคล่ าก บริการ เขา้ ไปดา้ นใน 1 step

36

8.1.3 การสลบั ตำแหนง่ ของเมนู

ลากขึ้น-ลง ซ้าย-ขวา ได้อิสระ

8.1.4 การแสดง Menu ในหนา้ เว็บไซต์

สามารถเลอื กไดว้ า่ จะแสดง Menu ท่เี ราสรา้ งในตำแหน่งไหน เช่น Main Menu,
Mobile Menu แต่ละธีมอาจจะมีตำแหน่งมากกว่าน้ี ดงั ภาพท่ี 42

ภาพที่ 42 วิธีเพ่มิ Menus ในเวริ ด์ เพรส

8.1.5 วิธีเพิม่ -ลด ตวั เลอื ก Menu items

Menu items หรอื ชุดตวั เลือกเมนดู ้านซา้ ยมือ โดยพ้นื ฐานของ wordPress แล้วจะมี
แค่ Pages, Posts, Custom Links, Categories แลว้ ถา้ จะแสดงตัวเลอื กเมนใู ห้มากกวา่ นั้นละ?
เช่น อยากจะดึง Product Category หรอื Post Type ท่ีถูกตดิ ตง้ั จากปล๊ักอนิ ใหมๆ่ เราสามารถ
เพ่มิ หรือ ลด เองได้อสิ ระครับ เช่น อยากจะแสดงตัวเลอื ก Tags วธิ กี ารคอื คลิก “Screen
Options” ด้านบนขวา ระบบจะแสดง Boxes กบั Show advanced menu propertiesใน
สว่ น Boxes : ให้เราติก๊ เลอื ก Type ท่เี ราต้องการ จะให้แสดงในชุด Menu items ด้านซ้ายมอื

37

9. การใชง้ าน Elementor เพื่อแกไ้ ขหนา้

นอกจากแก้ไขหน้าในแบบข้างตน้ (พนื้ ฐานของ WordPress) แล้ว เราไดม้ กี ารติดต้ังปลกั๊ อนิ Elementor
เชา้ มาเปน็ ตวั ช่วยแก้ไขหน้าได้อยา่ งอสิ ระ และง่ายมากย่ิงขึ้น Elementor มีเครอ่ื งมอื หลากหลายอย่างทจ่ี ะ
สร้างสรรค์เน้ือหาได้สวยงามและง่ายตอ่ การใชง้ านอยา่ งมาก สังเกตวา่ หลังติดตงั้ Elementor ที่ส่วนหนา้ แกไ้ ข
เนื้อหา และเร่ือง จะมีปุ่ม Edit with Elementor แสดงขึน้ มา เราสามารถเลือกทจ่ี ะแกไ้ ขหนา้ ด้วยวิธีใช้งาน
Elementor ไดท้ ันที ดงั ตวั อย่างต่อไปน้ี

1.คลิกเข้าไปที่ หนา้ ตามหมายเลข 1
2.เลือกหนา้ ทีต่ ้องการแก้ไข ตามหมายเลข 2 ดังภาพที่ 43

ภาพที่ 43 วิธีใชง้ าน Elementor เพ่อื แกไ้ ขหน้า
3.ระบบจะเข้าสูห่ นา้ แก้ไขในแบบ Elementor สามารถแก้ไขหน้าไดท้ ันที ดังภาพท่ี 44

ภาพที่ 44 เมนูต่างๆ ของ Elementor

38

ส่วนประกอบของโหมด Elementor ดังภาพท่ี 45

ภาพท่ี 45 ส่วนประกอบของโหมด Elementor
หน้าต่างเครื่องมือของ Elementor ประกอบดว้ ย 3 สว่ นหลักๆ ไดแ้ ก่ แถบเมนดู า้ นบน มี เมนหู ลกั
(ดา้ นซา้ ย) และเมนูตวั เลือก Widget (ดา้ นขวา)

แถบเครื่องมือ เปน็ สว่ นแสดงเครื่องมือและการตั้งคา่ ตา่ งๆ จะเปลี่ยนรูปแบบไป ตามการเลอื กเมนตู ่างๆ
เชน่ ถ้าเลอื ก เมนูตวั เลือก Widget จะแสดง Widget ต่างๆ มาให้เลอื กนําไปใชง้ าน เป็นต้น

1. Settings เป็นการเลือกเพื่อใหแ้ สดงเครือ่ งมอื และการตั้งคา่ ต่างๆ สว่ นใหญ่เราจะอยู่ในแถบเมนูน้ีเสมอ

2. Navigator เมือ่ คลิกเมนูน้ี จะมปี ๊อปอัพเล็กๆ แสดงข้นึ มาทเ่ี น้ือหา บอกการลําดับ Section และนาํ ทาง
เราไปยงั แต่ ละ Section ไดง้ ่าย รวมถงึ ทราบวา่ แตล่ ะ Section ประกอบไปด้วย Column หรอื Widget
อะไรบา้ ง กรณตี อ้ งการทราบ สว่ นประกอบของเน้อื หาอย่างย่อ เพ่ือจดั ลาํ ดับ หรอื แกไ้ ขในหน้าท่ีมเี นอื้ หา
มากๆ

3. History เปน็ ท่เี ก็บบนั ทึกประวตั กิ ารเปลย่ี นแปลงทง้ั หมดของหนา้ เน้ือหาทเ่ี ราเข้ามาแก้ไข หากเรา
ตอ้ งการยอ้ นกลับ เมอ่ื แก้ไขผิดพลาดไป กส็ ามารถมาเลอื กยอ้ นไปเวอรช์ น่ั ก่อนท่ีเราจะทําผดิ ได้งา่ ยๆ

4. Responsive Mode เป็นการเลอื กแสดงผลตัวอย่างหน้าเว็บไซต์ บนหนา้ จอคอมพิวเตอร์ แท็บเลต็
และมือถือ

39

5. Preview Changes เปน็ การกดดตู ัวอยา่ งหนา้ เว็บไซต์จรงิ ก่อนการอัพเดตเพอ่ื เผยแพร่

6. Save Options หน้าทย่ี งั ไมเ่ คยเผยแพร่จะแสดงปุ่ม Publish เพือ่ ให้เผยแพร่ หน้าท่ีเคยเผยแพร่ไปแลว้
จะแสดงปุ่ม Update เพ่ืออัพเดตเนื้อหาทีผ่ ่านการแก้ไขข้นึ เผยแพร่ นอกจากนย้ี งั มีตัวเลือก Save Draft
(บันทึกแบบร่าง) และ Save as Template (บันทึกเปน็ เทมเพลต จะกลา่ วในหวั ข้อถดั ไป) ได้อีกด้วย

หลงั จากได้รสู้ ่วนประกอบของโหมด Elementor ไปแลว้ เรามาเริม่ แกไ้ ขเนื้อหาดว้ ย Elementor ซึง่ ใน
ที่นีจ้ ะขอ อธิบายเฉพาะทใ่ี ช้ในหน้าเว็บไซตจ์ รงิ ของ สศช. เทา่ นน้ั สว่ นอน่ื ๆ ให้ผ้อู ่านลองศึกษาเพม่ิ เตมิ
และใช้งานดูดว้ ยตนเอง เพราะ เครอ่ื งมือมมี ากมายให้เลอื กใช้งาน

โครงสร้างของเน้ือหา เม่ือเข้าสู่โหมด Elementor เราจะสนใจสว่ น Top Bar, Header, Sidebar,
Footer และเมนู เราจะสนใจแตเ่ นื้อหาเทา่ นั้น ในส่วนเน้ือหาจะประกอบด้วย Section, Column และ
Widget โดยอธบิ ายอย่างงา่ ยคอื ใน เน้ือหา 1 หนา้ มีหลายๆ Section ประกอบกัน ในแตล่ ะ Section มี
หลาย Column อยู่ และแตล่ ะ Column จะมี Widget ที่ เป็นส่วนเนอื้ หาจริงๆอยู่ ท้ังนีเ้ พอ่ื ให้เรา
สามารถจัดองคป์ ระกอบ และรูปแบบได้หลากหลาย จงึ มีหลายส่วนให้ไดต้ ้งั คา่ และ ปรบั เปล่ยี นกัน
โครงสรา้ งเน้ือหาแสดงดังรูป

40

9.1 การแก้ไขขอ้ มูลหนา้ ประวัตแิ ละความเป็นมา

1.คลกิ เขา้ ไปที่ หน้า ตามหมายเลข 1
2.เลอื กหน้าที่ต้องการแก้ไข ตามหมายเลข 2 ดังภาพที่ 46

ภาพท่ี 46 ใช้งาน Elementor เพื่อแก้ไขหนา้ ประวัติและความเปน็ มา
3.ระบบจะเขา้ สู่หน้าแก้ไขในแบบ Elementor สามารถแก้ไขหนา้ ไดท้ นั ที ดงั ภาพท่ี 47

ภาพท่ี 47 การแก้ไขในแบบ Elementor
4.แก้ไขในสว่ นของ หัวเรอ่ื ง (Heading) โดยการกดทแี่ สดงดังภาพที่ 48

41

ภาพท่ี 48 การแก้ไขหวั เรอ่ื ง (Heading) ในแบบ Elementor
5..แก้ไขในสว่ นของ รายละเอียด(Text editor) โดยการกดทีแ่ สดงดงั ภาพที่ 49

ภาพท่ี 49 การแก้ไขในสว่ นของ รายละเอียด(Text editor) ในแบบ Elementor
หมายเลข 1 แสดงการพมิ พท์ ี่แก้ไข เพิ่ม หรือ ลบขอ้ มลู
หมายเลข 2 หน้าตา่ งแสดงเคร่อื งมือการปรบั ขนาดตวั หนังสอื ฟอนต์ สีของตวั หนังส่อื

42

9.2 การแกไ้ ขขอ้ มลู หนา้ วสิ ัยทัศน์และพันธกิจ

1.คลิกเข้าไปท่ี หน้า ตามหมายเลข 1
2.เลอื กหน้าที่ต้องการแก้ไข ตามหมายเลข 2 ดงั ภาพท่ี 50

ภาพที่ 50 ใช้งาน Elementor เพอ่ื แก้ไขหน้าวสิ ยั ทศั นแ์ ละพนั ธกจิ
3.ระบบจะเขา้ สู่หนา้ แก้ไขในแบบ Elementor สามารถแก้ไขหน้าไดท้ ันที ดงั ภาพท่ี 51

ภาพที่ 51 แก้ไขวิสัยทัศน์และพันธกิจในแบบ Elementor