คู่มือเว็บไซต์ศูนย์บริการฯ 2563

คมู่ อื การใช้งาน Website & Line Tpso3 ศนู ย์บรกิ ารวิชาการพฒั นาสงั คมและจดั สวสั ดกิ ารสังคม ปี 2563 สานักงานส่งเสริมและสนับสนนุ วชิ าการ 3 กระทรวงการพัฒนาสังคมและความมนั่ คงของมนุษย์ โดย นางสาวชตุ กิ าญจน์ เขยี วลี ตาแหนง่ นกั พัฒนาสังคม กลมุ่ การวจิ ัยและการพฒั นาระบบเครือข่าย

คำนำ เอกสารคู่มือการปฏิบัติงานเล่มน้ี จัดทาขึ้นเพ่ือรวบรวมข้ันตอนการดาเนินงานเก่ียวกับเว็ปไซต์ “ศูนย์บริการวิชาการพัฒนาสังคมและจัดสวัสดิการสังคม” พร้อมท้ังการบริหารจัดการช่องทาง ประชาสมั พันธ์ขา่ วสารสานกั งานส่งเสริมและสนับสนุนวิชาการ 3 กระทรวงการพัฒนาสังคมและความ มั่นคงของมนุษย์ ( Line Business ID-TPSO3) สาหรับให้ผู้ท่ีรับผิดชอบคนต่อไปได้ศึกษาแนวทาง สามารถปฏิบัติงานได้อย่างมีประสิทธิภาพและประสิทธิผลยิ่งข้ึน โดยแสดงรายละเอียดขั้นตอนการ ดาเนนิ การในส่วนตา่ งๆ ซงึ่ ในคู่มือจะประกอบไปดว้ ย • การลงชือ่ เข้าใช้งาน • การลงขา่ วในระบบขา่ วประชาสัมพนั ธ์ • การแกไ้ ขเมนแู ละบทความตา่ งๆ • การตัง้ คา่ การแสดงผลของเวป็ ไซต์ เปน็ ต้น ทง้ั นเี้ พ่อื ใหก้ ารปฏิบตั ิงานเป็นระบบและมีมาตรฐานเดียวกนั หวังเปน็ อย่างยง่ิ ว่าเอกสารคู่มือ การปฏิบัติงานเลม่ นี้ จะเป็นประโยชนใ์ ชเ้ ป็นแนวทาง ในการปฏิบตั ิงานใหม้ ปี ระสทิ ธภิ าพย่ิงขึน้ ต่อไป ผู้จัดทา นางสาวชตุ ิกาญจน์ เขียวลี 30 กนั ยายน 2563

สำรบัญ หน้ำ เรื่อง 1 คำนำ 2 สำรบญั 3 1. กำรเขำ้ ใชง้ ำนเวบ็ ไซต์ Log in Site Manage (ระบบหลงั บ้ำน) 4 5 - FTP Login (Filezilla Program) 6 - Web Program : Joomla! 3.9.15 7 2. วธิ ีดูตำแหน่งโมดูลใน Joomla3 (Module Position Joomla! 3.9.15) 8 3. กำรสร้ำงหมวดหมู่เน้ือหำ 9 4. กำรสร้ำงเมนูบำร์ (Mine Menu) 10 5. กำรสร้ำงเมนูยอ่ ย (Dopdow Menu) 11 6. เมนูเน้ือหำที่สร้ำงดว้ ย (Quix-Page) 12 7. กำรสร้ำงคอลมั นด์ ว้ ย (Quix-Page) 13 8.กำรแกไ้ ขบทควำมหนำ้ แรก (HOME) 14-15 9. กำรอพั โหลด VDO/Channel TPSO3 16 10. กำรแกไ้ ขแบนเนอร์/LOGO 11. กำรแกไ้ ขบทควำม (Social Lab:SL) 12. กำรแกไ้ ขบทควำม (Knowledge Management : KM) 13. กำรแกไ้ ขบทควำม (Routine to Research:R2R) 14. กำรอพั โหลดไฟล์ PDF. (FileZilla Client) 15. กำรแกไ้ ขคลิปวดี ีทศั น์ (Youdif Video Share)

สำรบัญ หน้ำ เรื่อง 17 18 16. กำรแกไ้ ขที่อย/ู่ ติดต่อเรำ (Contact) 19 17. กำรแกไ้ ขส่วนขอ้ ควำมส่วนล่ำง (Footer) 20-23 18. กำรปักหมุดแผนท่ีบนเวบ็ ไซตด์ ว้ ย (Google Map) 19. กำรบริหำรจดั กำร Line –Business ID-TPSO3

เวบ็ ไซตศ์ ูนย์บริการวชิ าการพฒั นาสงั คมและจัดสวสั ดกิ ารสงั คม ปี 2563 Log in Site Manage URL : www.tpso4.m-society.go.th/asc Web Program : Joomla! 3.9.15 URL Admin : www.tpso4.m-society.go.th/asc/administrator User Name : asc1 Password : asc11234 FTP Login (Filezilla Program) Hostname : 27.254.85.195 Username : tpsomso3 Password : 7wDaA7n62k Port : 2121 1

Log in Social Manage : Youtube รหสั เขำ้ Login E-Mail สำนกั งำนและ User Youtube ในกำรอพั โหลดเอกสำรและสื่อ ❖E-Mail: [email protected] ❖Pass:Tpso1234 วธิ ีดตู ำแหน่งโมดลู ใน Joomla3 (Module Position Joomla! 3.9.15) วิธีดูตำแหน่งโมดูลใน Joomla3 (Module Position Joomla3) พมิ พค์ ำสง่ั ?tp=1 ต่อทำ้ ย ลิงค์ของหน้ำที่เรำต้องกำรดูตำแหน่ง หรื อ position เพื่อใช้ในกำรกำหนดจุดวำงส่ื อ ประชำสัมพนั ธ์หรือกำรแสดงผลของเน้ือหำเว็บไซต์ ประโยชน์ของกำรดูตำแหน่งโมดูลใน Joomla!3.9.15 หรือหำกเรำตอ้ งกำรจะแกไ้ ขส่ือตำแหน่งแสดงผล กส็ ำมำรถใชว้ ิธีน้ีตรวจสอบได้ ในเบ้ืองตน้ เช่นกัน ทีน้ีพอเรำรู้ตำแหน่งโมดูล เรำก็จะรู้ว่ำโมดูลใหม่ท่ีเรำต้องกำรจะแสดง เรำจะแสดงตรงตำแหน่งไหนของโมดูลน้นั เอง วธิ ีดูตำแหน่งโมดลู ใน Joomla3 (Module Position Joomla! 3.9.15 ) ตวั อยำ่ งเช่น http://tpso4.m-society.go.th/asc/index.php/th/?tp=1 เพยี งแค่น้ีเรำกส็ ำมำรถดูตำแหน่งโมดูล หรือ Position ในจูมล่ำไดแ้ ลว้ ค่ะ 2

กำรสร้ำงหมวดหมู่เนื้อหำ 1.เขำ้ ไปท่ีเมนูเน้ือหำ เลือก หมวดหมู่-สร้ำงหมวดหมู่ใหม่ และต้งั ชื่อตำมที่ต้องกำร 2.สำหรับเน้ือหำท่ีมีกำรแสดงผลเป็นคลิปVDO ใหน้ ำ Youtube ID ที่ขีดเสน้ ใตส้ ีแดง มำใส่แทนท่ีของ แต่ละคลิป เพอื่ เปลี่ยนคลิปใหมข่ ้ึนแสดงผลแทนคลิปเก่ำ ดงั ตวั อยำ่ งดำ้ นลำ่ งน้ี ***หมำยเหต:ุ กำรสร้ำงหมวดหมจู่ ะสร้ำงข้ึนต่อเมื่อตอ้ งกำรแยกรำยกำรแสดงผลใหอ้ ยใู่ น หมวดหมู่เดียวกนั ง่ำยต่อกำรคน้ หำ 3

กำรสร้ำงเมนูบำร์ (Main Menu) 1 2 1.เขำ้ ไปท่ีเมนู-สร้ำงเมนูใหม่-กำหนดชื่อเมนูและชนิดของเมนู-เน้ือหำ/คลงั เน้ือหำ 2.กำหนดหมวดหมู่->หมวดหมทู่ ้งั หมดและกำหนดใหเ้ ป็น Main Menu บนั ทึก&ปิ ด 3 3.เขำ้ ไปต้งั คำ่ เมนูใหม่ท่ี ส่วนเสริม-เทมเพลต-รูปแบบเทมเพลต-TPSO4_asc เลือกเมนูต้งั คำ่ (Main Menu) ->กำหนด I-Con/Subtitle โดยคล๊ิกที่ช่อง บนั ทึก&ปิ ด 4

New Menu Bar/ Dopdow (กำหนดเมนูย่อย) 1 5 2 3 4 1.เขำ้ ท่ีเมนู -Main Menu กดสร้ำงใหม่ 2.กรอกขอ้ ควำม (ชื่อเมนู) กำหนดรำยละเอียดชนิดของเมนูเป็น Quix->Page 3.เลือกพ้นื ที่กำรแสดงผล Select The Page->Home 4.กำหนดคำ่ เมนูดำ้ นขวำ เมนู ->Main Menu เมนูหลกั -> หนำ้ แรก สถำนะ เผยแพร่ 5.บนั ทกึ &ปิ ด 5

เมนูเนื้อหำสร้ำงด้วย Quix-Page เนื้อหำท่สี ำมำรถเข้ำไปแก้ไขได้ท่ี Quix-Page หน่วยงำน พมจ.76 จงั หวดั กิจกรรมพฒั นำบุคลำกร ปี 2562 กิจกรรม SOCIAL SMART CITY ปี 2562 กิจกรรม SOCIAL SMART CITY ปี 2563 หน่วยเคลื่อนที่ ปี 2562 วดี ีทศั น์เยบ็ หนำ้ กำกอนำมยั พ้ืนท่ีดำเนินกำรจดั องคค์ วำมรู้ ปี 2560-2563 ศูนยข์ อ้ มูลข่ำวสำรเกี่ยวกบั โรคติดเช้ือไวรัสโคโรนำ 2019 (COVID-19) แผน่ พบั COVID-19 กิจกรรมพฒั นำบุคคลำกร ปี 2563 หน่วยเคลื่อนที่ ปี 2563 KM ปี 2563 R2R ปี 2563 KM ปี 2562 R2R ปี 2562 หลกั สูตรออนไลน์ ศูนยพ์ ฒั นำคุณภำพชีวติ และส่งเสริมอำชีพผสู้ ูงอำยุ (ศพอส. ขอ้ มูลพิกดั สำนกั งำนพฒั นำสงั คมและควำมมน่ั คงของมนุษย์ จงั หวดั ศูนยบ์ ริกำรคนพิกำรทว่ั ไป (MAP) ทำเนียบหน่วยงำน พม. หอ้ งสมุดอิเลก็ ทรอนิกส์ TPSO3 (E-LIBRARY) วสิ ยั ทศั น์ พนั ธกิจ ยทุ ธศำสตร์ เครือข่ำยพ้ืนท่ีตำบลตน้ แบบ SOCIAL SMART CITY (SSC) SOCIAL LAB ปี 2562 6

กำรสร้ำงคอลมั น์ด้วย Quix-Page 2 3 กำหนดช่ือเมนู กำหนดเมนูท่ีตอ้ งกำรแสดงผล กำหนดเมนูท่ีตอ้ งกำรใหเ้ ช่ือมลิงค์ Drop Down Lish และ Create Menu 1 1.Quix-page คลิ๊กท่ีเมนู สร้ำงใหม่ 2.กรอกช่ือเมนูท่ีตอ้ งกำรเพมิ่ +Add Section เลือกรูปแบบที่ตอ้ งกำร + Add New Element 3.กำหนดลกั ษณะของ Element (รูปแบบกำรนำเสนอ) 7

Edit : หน้ำแรก (Home) 1. เลือกในแถบเมนูดำ้ นบน Quix --> Pages 1 2 2. เลือกหนำ้ Home จะเขำ้ สู่หนำ้ ต่ำงแกไ้ ข Home(หนำ้ แรก) 2.1 ตอ้ งกำรแกไ้ ขโมดูลตำแหน่งใด ใหไ้ ปที่ไอคอนรูปเฟื อง Settingsของตำแหน่งน้นั 2.2 ตอ้ งกำรเพมิ่ โมดูล ใหไ้ ปที่ไอคอน + ตรงดำ้ นล่ำง เพม่ิ โมดูล Settings 8

กำรอพั โหลด VDO /Channel TPSO3 1.อพั โหลดไฟล์ VDO ลง Youtube สสว.3 และเพม่ิ คลิปลงเพลยล์ ิส Channel TPSO3 2.นำ Youtube ID มำใส่แทนที่เพอื่ เปล่ียนคลิปใหม่ข้ึนแสดงผล 1 2 9

กำรแก้ไขแบนเนอร์/Logo 1. คล๊ิกท่ี -->ส่วนเสริม --> เลือกท่ีโมดูล -->Logo 1 2 3 2.คลิ๊กที่ Logo (หมำยเลข3) เพอ่ื เขำ้ ไปเปลี่ยนรูปภำพตำมท่ีเรำกำหนด 4 ก่อน หลงั 10

Edit : Social Lab (SL) 1. เลือกในแถบเมนูดำ้ นบน Quix --> Pages 1 2 2. เลือกหนำ้ Social Lab จะเขำ้ สู่หนำ้ ต่ำงแกไ้ ข Social Lab 2.1 ตอ้ งกำรแกไ้ ขโมดูลตำแหน่งใด ใหไ้ ปท่ีไอคอนรูปเฟื อง Settings ของตำแหน่งน้นั 2.2 ตอ้ งกำรเพมิ่ โมดูล ใหไ้ ปท่ีไอคอน + ตรงดำ้ นล่ำง เพม่ิ โมดูล Settings 11

Edit : องค์ควำมรู้ (KM) 1. เลือกในแถบเมนูดำ้ นบน เน้ือหำ --> เน้ือหำ -->KM62 1 2 3 2. เม่ือเขำ้ มำในเน้ือหำของ KM62 สำมำรถเพม่ิ ลบ หรือแกไ้ ข เม่ือเสร็จใหก้ ด บนั ทึก & ปิ ด 12

Edit : งำนวจิ ัย (R2R) 1. เลือกในแถบเมนูดำ้ นบน เน้ือหำ --> เน้ือหำ --> R2R62 1 2 2. เมื่อเขำ้ มำในเน้ือหำของ R2R62 สำมำรถเพม่ิ ลบ หรือแกไ้ ข เมื่อเสร็จให้ กด บนั ทึก & ปิ ด 13

กำรอพั โหลดไฟล์ PDF.ขนึ้ เวบ็ ศูนย์เรียนรู้ผ่ำน FileZilla Client 1.FileZilla Client ->Log in Quickconnect (ftp://[email protected]:2121) 2.เขำ้ ตำม Foder ดงั น้ี public_html->asc->download->pdf->network62->แลว้ ลำก ไฟลP์ DFมำวำงในช่อง Filename โดยต้งั ช่ือใหเ้ ป็นภำษำ Eng เช่น Con1,Con2 12 พื้นทลี่ ำกไฟล์ PDF มำใส่ 14

กำรอพั โหลดไฟล์ PDF.ขนึ้ เวบ็ ศูนย์เรียนรู้ผ่ำน FileZilla Client Edit : ทำเนียบเครือข่ำย (ต่อ) 3. เลือกในแถบเมนูดำ้ นบน เน้ือหำ --> เน้ือหำ --> ทำเนียบหน่วยงำน พม. ระดบั จงั หวดั , เครือข่ำยพ้นื ที่ตน้ แบบ, เครือข่ำยองคก์ รในพ้นื ท่ี, ผปู้ ระสำนงำนเครือข่ำยระดบั จงั หวดั 4. เมื่อเขำ้ มำในเน้ือหำ สำมำรถแกไ้ ขไฟลไ์ ด้ โดยเปล่ียนชื่อลิงคใ์ นช่องเขียนเน้ือหำ ในตำแหน่งท่ีขีดเสน้ ใต้ เมื่อเสร็จใหก้ ด บนั ทึก & ปิ ด ***เม่ือมกี ำรสร้ำงหน้ำใหม่ให้ Copy Coed ***และเปลย่ี นช่ือตรง Con1เป็ น Con2 {aridoc engine=\"pdfjs\" width=\"1100\" height=\"700\"}http://tpso4.m-society.go.th/asc/download/pdf/network62/con5.pdf{/aridoc} 15

Edit : เมนู วดี ที ศั น์ 1. เลือกในแถบเมนูดำ้ นบน คอมโพเนน้ ท์ --> Youdif Video Share --> Videos 1 2 3 2. เมื่อตอ้ งกำรแกไ้ ขวีดีโอ สำมำรถเปล่ียน ชื่อ(Title), YouTube URL, รูป หนำ้ ปก (Image) Title URL Image 16

Edit : Contact (ตดิ ต่อเรำ) 1. เลือกในแถบเมนูดำ้ นบน Quix --> Pages --> Contact 1 2 3 2. เลือกหนำ้ Social Lab จะเขำ้ สู่หนำ้ ต่ำงแกไ้ ข Social Lab 2.1 ตอ้ งกำรแกไ้ ขโมดูลตำแหน่งใด ใหไ้ ปที่ไอคอนรูปเฟื อง Settings ของตำแหน่งน้นั 2.2 ตอ้ งกำรเพมิ่ โมดูล ใหไ้ ปท่ีไอคอน + ตรงดำ้ นล่ำง เพม่ิ โมดูล Settings 17

Edit : Footer (ส่วนล่ำงสุด) ของเวบ็ ไซต์ 1. ทำกำรแกไ้ ขโดยเลือกในแถบเมนูดำ้ นบน ส่วนเสริม --> โมดูล --> footer 1 2 2. เมื่อเขำ้ มำในโมดูล สำมำรถแกไ้ ขขอ้ มูลได้ เม่ือเสร็จใหก้ ด บนั ทกึ & ปิ ด 18

การปักหมุด Google Map (แผนที่) 1.รวบรวมขอ้ มูลด้านตา่ งๆ ทจี่ ะใหแ้ สดงในแผนท่ดี ว้ ย Ms.Excelคา่ พกิ ัด Lat/Long 2.การสร้างแผนที่ดว้ ย Quix -> Login เขา้ ระบบหลังบา้ นเวบ็ ศูนยฯ์ เลอื กเมนู Quix เลือก- >Pages->สรา้ งใหม่->ตั้งช่ือใน Tap ด้านบนแลว้ กด Save และเลือก Add Section - >Element Row HTML Code และกาหนดความกว้างของแผนทีแ่ ล้ว Save หมายเหต:ุ สามารถทาการแก้ไขใดๆดว้ ยการคลก๊ิ เครอ่ื งหมาย “ฟนั เฟ่ือง”ทุก Element 19

การบรหิ ารจดั การ LINE Business ID-TPSO3 20

กำรต้งั ค่ำ โปรไฟล์ LINE Business ID-TPSO3 1.คล๊ิกเลือกเมนู “ต้งั ค่ำหนำ้ โปรไฟล”์ เพอ่ื กำหนดคำ่ ต้งั ๆหรือสถำนะดำ้ นหนำ้ โปรไฟล์ - เปลี่ยนรูปโปรไฟล-์ ช่ือ/ขอ้ มูลพ้นื ฐำน/สีพ้นื หลงั -ป่ มุ บำร์ 21

กำรสร้ำงข้อควำมบรอดแคสต์ 1.เลือกเมนู “หนำ้ หลกั ” บรอดแคสต์ คลิ๊ก “สร้ำงใหม่ หำกตอ้ งกำรโพสต์แบบกำหนดวนั /เวลำ คลิ๊กเลือก วนั ที่บรอดแคสต์ /เวลำท่ีตอ้ งกำรใหร้ ะบบโพสตอ์ ตั โนมตั ิไดต้ ำมควำมเหมำะสม 2.พมิ พข์ อ้ ควำมในช่องที่กำหนด โดยไม่เกิน 500 ตวั อกั ษร 3.หำกตอ้ งกำรโพสตร์ ูปภำพพร้อมกบั ขอ้ ควำม คลิ๊กเพิ่มตวั เลือก / รูปภำพ และกดอพั โหลดไฟล์ ภำพที่ตอ้ งกำร เม่ือตรวจสอบขอ้ ควำมเรียบร้อยแลว้ คลิ๊ก “ส่ง” เพ่อื ทำกำรบอร์ดแคสตข์ อ้ ควำม หมำยเหตุ : กำรบรอดแคสต์ ขอ้ ควำมสำมำรถโพสตพ์ ร้อมกนั ไดไ้ ม่เกิน 3 กล่องขอ้ ควำม /1 คร้ัง 22

คู่มือวธิ ีใช้ LINE Official Account (เพมิ่ เตมิ ) 1.1 วิธีใช้ LINE Official Account 1.2 วธิ ีลอ็ กอินและสร้ำงบญั ชี LINE Official Account 1.3 วิธีใชต้ ้งั คำ่ บญั ชีพ้นื ฐำน 1.4 วิธีใช้ LINE Official Account_เพมิ่ ทำงลดั ใหก้ ลุ่มเป้ำหมำย เขำ้ ถึงขอ้ มูลง่ำยยงิ่ ข้นึ ดว้ ยริชเมนู (Rich Menu) 1.5 วิธีสร้ำง Mini Website ดว้ ยหนำ้ โปรไฟล์ (Profile) 1.6 วิธีใช้ LINE Official Account_เพมิ่ ผตู้ ิดตำมดว้ ย ป่ ุมเพม่ิ เพอื่ น, สร้ำงโปสเตอร์, สร้ำงคูปอง (Coupon), โพสตแ์ ละโฆษณำบนไทมไ์ ลน์ (Timeline) 1.7 กำรอพั เกรดพรีเมียมไอดี (Premium ID) และแพค็ เกจรำยเดือน 1.8 วิธีเพม่ิ ยอดขำยดว้ ย ริชเมสเซจ (Rich Message), ริชวดี ิโอ (Rich Video) และเพมิ่ ลกู คำ้ ประจำดว้ ยบตั รสะสมแตม้ (Reward Cards) 1.9 วธิ ีใช้ LINE Official Account_จดั กำรแชทดว้ ยแทก็ (Chat tag), โนต้ (Note) และขอ้ ควำมตอบกลบั (Quick Replies) 1.10 เคลด็ ลบั ทำใหล้ ูกคำ้ ประทบั ใจยงิ่ ข้ึน ดว้ ยขอ้ มูลเชิงลึก (Insight), แบบสอบถำม(Surveys) และกำรเช่ือมต่อ API ศึกษำเพมิ่ เติมไดท้ ่ี QR-Code→ 23

TPSO3 สำนักงำนส่งเสริมและสนบั สนุนวิชำกำร 3 กระทรวงกำรพฒั นำสังคมและควำมมั่นคงของมนษุ ย์ ศำลำกลำงจงั หวดั นครปฐมชน้ั 5 ตำบลถนนขำด อำเภอเมืองนครปฐม จงั หวัดนครปฐม 73000 โทรศพั ท/์ โทรสำร 0-3431-0005,0-3431-0006 Email:[email protected] Line :TPSO3 E-Book : Website