เอกสารประกอบการอบรม “การประยุกตใชระบบบริหารจัดการเว็บไซตเพ่ือการจัดการเรยีนการสอน” ดวย 1 | P a g e

สําหรับ นักศึกษามหาวิทยาลัยศิลปากร โดย อาจารย จันทิมา เจริญผล นักวิชาการโสตทัศนศึกษา สํานักวิทยบริการและเทคโนโลยีสารสนเทศ มหาวิทยาลัยเทคโนโลยีราชมงคลธัญบุรี

เอกสารประกอบการอบรม “การประยุกตใชระบบบริหารจัดการเว็บไซตเพ่ือการจัดการเรียนการสอน”

สําหรับ นักศึกษามหาวิทยาลัยศิลปากร

ภาควิชาเทคโนโลยีการศึกษา คณะศึกษาศาสตร มหาวิทยาลัยศิลปากร

ในวันพุธท่ี 21, 28 กันยายน และ 12 ตุลาคม 2559 เวลา 9.00 น. – 12.00 น.

โดย อาจารยจันทิมา เจริญผล นักวิชาการโสตทัศนศึกษา

สํานักวิทยบริการและเทคโนโลยีสารสนเทศ มหาวทิยาลัยเทคโนโลยีราชมงคลธัญบุรี

เอกสารประกอบการอบรม “การประยุกตใชระบบบริหารจัดการเว็บไซตเพ่ือการจัดการเรยีนการสอน” ดวย 2 | P a g e

สําหรับ นักศึกษามหาวิทยาลัยศิลปากร โดย อาจารย จันทิมา เจริญผล นักวิชาการโสตทัศนศึกษา สํานักวิทยบริการและเทคโนโลยีสารสนเทศ มหาวิทยาลัยเทคโนโลยีราชมงคลธัญบุรี

สารบัญ

Contents

หนา

คูมือการใชงาน WordPress ......................................................................................................................................... 3

ตัวอยาง Web Application ท่ีสรางดวย WordPress ............................................................................................... 4

1. การติดตั้ง Bitnami Wordpress Stack ................................................................................................................. 5

2. การจัดการระบบ ....................................................................................................................................................... 9

2.1 การจัดการ back end ................................................................................................................................. 10

2.2 การจัดการเนื้อหาบทเรียนและรายละเอียดของรายวิชา ................................................................................. 13

2.3 การเพ่ิมสวนเสริม (Plugin) และการตั้งคาเว็บไซต ......................................................................................... 16

3. การจัดกิจกรรมการเรียนการสอนดวย Plugin เพ่ือเพ่ิมประสิทธิภาพเว็บไซต ...................................................... 17

3.1 แชรหนาเว็บไซต/ผลงาน ผาน Social Media ............................................................................................... 17

3.2 สรางอัลบั้มภาพแบบคลังภาพ และอัลบั้มภาพแบบ Slide .............................................................................. 17

3.3 กระดานสนทนา........................................................................................................................................... 19

3.4 การวางแผนการเรียนการสอน ...................................................................................................................... 20

3.5 การสรางลิงคเมนูเชื่อมโยงไมยังเว็บไซตอ่ืนๆ .................................................................................................. 21

3.5 คลังไฟลสื่อเอกสารประกอบการสอน ............................................................................................................ 21

3.7 การสรางเนื้อหาบทเรียนและแบบฝกหัดแบบมีปฏิสัมพันธ .............................................................................. 22

เอกสารประกอบการอบรม “การประยุกตใชระบบบริหารจัดการเว็บไซตเพ่ือการจัดการเรยีนการสอน” ดวย 3 | P a g e

สําหรับ นักศึกษามหาวิทยาลัยศิลปากร โดย อาจารย จันทิมา เจริญผล นักวิชาการโสตทัศนศึกษา สํานักวิทยบริการและเทคโนโลยีสารสนเทศ มหาวิทยาลัยเทคโนโลยีราชมงคลธัญบุรี

คูมือการใชงาน WordPress WordPress เปน Web Application ท่ีใชพัฒนาเว็บไซตเพ่ือเขียนบล็อกสวนตัว หรือการจัดการเนื้อหาจํานวน

มากและมีความซับซอนไดเปนอยางดี โดยมีรูปแบบธีม (Theme) และPlugins (สวนเสริม) มีท้ังแบบฟรีและเสียเงินใหเลือก

มากมาย เหมาะสําหรับผู ท่ี ไม มีความรู ด านการเขียนโคด การออกแบบ และท่ีสํา คัญคือเสียคา ใชจ ายนอย

หรือไมเสียเลย โดยมีวิธีการดาวนโหลด Web Application : WordPress รวมถึงข้ันตอนการใชงานดังนี้

ลําดับ รายละเอียด ภาพประกอบ

1. Web Application : WordPress

(https://wordpress.org/)

โดยตองจําลอง Webserver บน Windows

เหมาะสําหรับผูท่ีตองการจําลอง web server เพ่ือ

ใชทดสอบ web application ในท่ีนี้ขอเสนอการ

ใชงาน XAMPP เพ่ือใชจําลอง Webserver บน

Windows ในการทดสอบ การใชงาน WordPress

โดยสามารถดาวนโหลดไดท่ี

https://www.apachefriends.org/index.html

ขอแนะนํา หากตองการความงายและสะดวกมาก

ข้ึนสามารถดาวนโหลด Bitnami WordPress

stack ไดจากเว็บ https://bitnami.com สามารถ

ติดตั้งแบบอัตโนมัติไดเลย เนื่องจาก Bitnami ได

ร วมซอฟท แ วร ท่ี จํ า เป น ไว สํ า หรั บการ run

Application ไวแลว ดังนั้นจึงไมตองลง Xampp

https://bitnami.com/stack/wordpress/installer

เม่ือดาวนโหลดมาแลวสามารถติดตั้งไดทันที

เอกสารประกอบการอบรม “การประยุกตใชระบบบริหารจัดการเว็บไซตเพ่ือการจัดการเรยีนการสอน” ดวย 4 | P a g e

สําหรับ นักศึกษามหาวิทยาลัยศิลปากร โดย อาจารย จันทิมา เจริญผล นักวิชาการโสตทัศนศึกษา สํานักวิทยบริการและเทคโนโลยีสารสนเทศ มหาวิทยาลัยเทคโนโลยีราชมงคลธัญบุรี

ลําดับ รายละเอียด ภาพประกอบ

1.2 Theme ไดท่ี (https://wordpress.org/themes/)

1.3 Plugins ไดท่ี

(https://wordpress.org/plugins/)

ตัวอยาง Web Application ท่ีสรางดวย WordPress

เอกสารประกอบการอบรม “การประยุกตใชระบบบริหารจัดการเว็บไซตเพ่ือการจัดการเรยีนการสอน” ดวย 5 | P a g e

สําหรับ นักศึกษามหาวิทยาลัยศิลปากร โดย อาจารย จันทิมา เจริญผล นักวิชาการโสตทัศนศึกษา สํานักวิทยบริการและเทคโนโลยีสารสนเทศ มหาวิทยาลัยเทคโนโลยีราชมงคลธัญบุรี

1. การติดตั้ง Bitnami Wordpress Stack

ลําดับ รายละเอียด ภาพประกอบ

1. ติดตั้งโดยการดับเบิ้ลคลิกไฟลท่ีดาวนโหลดมา จะ

ข้ึนเปนหนาตางดังภาพ และคลิก Next

2. คลิก Next ตอไป จนเจอหนาตางดังภาพ และ

เลือกติดตั้งไวท่ี Folder ไหน (โดยสวนมากจะอยู

ใน Drive C >> คลิก Next

3. จะพบหนาตางดังภาพ ใหตั้งชื่อ ใสemail และ

User Login* และ Password* สําหรับเขาระบบ

>> คลิก Next

หมายเหตุ * สวนนี้มีความสําคัญมาก ตองจดจํา

Login : admin และ Password : 123456

เอกสารประกอบการอบรม “การประยุกตใชระบบบริหารจัดการเว็บไซตเพ่ือการจัดการเรยีนการสอน” ดวย 6 | P a g e

สําหรับ นักศึกษามหาวิทยาลัยศิลปากร โดย อาจารย จันทิมา เจริญผล นักวิชาการโสตทัศนศึกษา สํานักวิทยบริการและเทคโนโลยีสารสนเทศ มหาวิทยาลัยเทคโนโลยีราชมงคลธัญบุรี

ลําดับ รายละเอียด ภาพประกอบ

Tip! หากพบปญหา Port ซํ้ากัน กับระบบปฏิบัติการ

windows ใหทําการเปลี่ยนเปนตัวเลขอ่ืนๆ เชน

82 : Apache Web Server Port

**ในบางเครื่องอาจจะมีการใส Port ใหไวแลว

และสามารถติดตั้งไดเลยโดยไมตองเปลี่ยนเลข

port ดวยตนเอง**

และในหนาตาง MySQL Server port ใสเปน 444

หมายเหตุ : อาจจะใสเปนตัวเลขอ่ืนๆ ก็ไดจนกวา

ระบบจะไมเตือนวาซํ้ากับระบบอ่ืนๆ

5. ใสชื่อเว็บไซต (สามารถเปลี่ยนใหมไดในภายหลัง)

>> คลิก Next ตอไป

เอกสารประกอบการอบรม “การประยุกตใชระบบบริหารจัดการเว็บไซตเพ่ือการจัดการเรยีนการสอน” ดวย 7 | P a g e

สําหรับ นักศึกษามหาวิทยาลัยศิลปากร โดย อาจารย จันทิมา เจริญผล นักวิชาการโสตทัศนศึกษา สํานักวิทยบริการและเทคโนโลยีสารสนเทศ มหาวิทยาลัยเทคโนโลยีราชมงคลธัญบุรี

ลําดับ รายละเอียด ภาพประกอบ

6. เม่ือพบหนาตางดังภาพ ใหนําเครื่องหมายถูกออก

>> คลิก Next ตอไป

7. รอจนกวาจะติดตั้งเสร็จ

8. เม่ือติดตั้งเสร็จแลว ทําเครื่องหมายถูกท่ี Launch

Bitnami WordPress Stack และคลิกท่ี Finish

เอกสารประกอบการอบรม “การประยุกตใชระบบบริหารจัดการเว็บไซตเพ่ือการจัดการเรยีนการสอน” ดวย 8 | P a g e

สําหรับ นักศึกษามหาวิทยาลัยศิลปากร โดย อาจารย จันทิมา เจริญผล นักวิชาการโสตทัศนศึกษา สํานักวิทยบริการและเทคโนโลยีสารสนเทศ มหาวิทยาลัยเทคโนโลยีราชมงคลธัญบุรี

ลําดับ รายละเอียด ภาพประกอบ

9. จะพบกับหนาเว็บ Bitnami ใหคลิกท่ีลิงค Access

WordPress เพ่ือเขาหนาเว็บท่ีติดตั้งเสร็จสิ้นแลว

และจะพบหนาตาง Bitnami WordPress Stack

4.6.1.php56-0 เปนสวนท่ีใชจัดการเปด/ปด

Server

Tip! หมายเหตุ : ใหสังเกตท่ี URL Bar จะเปน 127.0.0.1:82 หมายเลข 82 จะเปนเลข Port ท่ีใสไวเม่ือเกิดปญหา Port

ซํ้ากัน หรืออาจพิมพเปน localhost:82 ก็ได แตหากไมเกิดปญหา ใหพิมพแค 127.0.0.1 หรือ localhost เทานั้น

เอกสารประกอบการอบรม “การประยุกตใชระบบบริหารจัดการเว็บไซตเพ่ือการจัดการเรยีนการสอน” ดวย 9 | P a g e

สําหรับ นักศึกษามหาวิทยาลัยศิลปากร โดย อาจารย จันทิมา เจริญผล นักวิชาการโสตทัศนศึกษา สํานักวิทยบริการและเทคโนโลยีสารสนเทศ มหาวิทยาลัยเทคโนโลยีราชมงคลธัญบุรี

2. การจัดการระบบ

ระบบประกอบดวย 2 สวนสําคัญ ไดแก ระบบFront end และ back end 10. Front end

http://127.0.0.1/wordpress

back end / Dashboard (หนาหลัก) http://127.0.0.1/wordpress/wp-admin

การเขาสูระบบ

User : admin

Password : 123456

ระบบอาจจะข้ึนหนาตาง phpMyadmin แลวให

ใส User Password ใหใส User : root และ

Password : 123456

Front end

back end

Tip! การเปดเว็บในครั้งตอไป หากมีการปดเครื่องไปแลว และตองการกลับใชงานอีกครั้ง แตถาหาก ไมสามารถเปดเว็บได ตองไป Start Service >> Apache และ MySQL โดยไปท่ีFolder ท่ี ติ ด ตั้ ง ไ ว C:\Bitnami\wordpress-4.6.1.php56-0 เปดโฟลเดอร แลวหาไฟล ท่ี

ช่ื อว า manager-windows.exe แล วดับ เบิ้ ล

คลิกท่ีไฟล **หากเกิดปญหาการลงหลายครั้ง และไมสามารถเ ป ด เ ว็ บ ม า ใ ช ง า น ไ ด แ น ะ นํ า ใ ห ค ลิ ก ท่ี uninstall.exe เพ่ือลบ app ออก** ถางงมากๆ ใหลบออกใหหมดและติดตั้งใหม

• Go to Application >> ไปยังหนาเว็บไซต

• Open phpMyadmin >> ไปยังหนาจัดการ

Database

• Open Application Folder >> ท่ี Folder ท่ี

ติดตั้ง

เอกสารประกอบการอบรม “การประยุกตใชระบบบริหารจัดการเว็บไซตเพ่ือการจัดการเรยีนการสอน” ดวย 10 | P a g e

สําหรับ นักศึกษามหาวิทยาลัยศิลปากร โดย อาจารย จันทิมา เจริญผล นักวิชาการโสตทัศนศึกษา สํานักวิทยบริการและเทคโนโลยีสารสนเทศ มหาวิทยาลัยเทคโนโลยีราชมงคลธัญบุรี

2.1 การจัดการ back end

ลําดับ รายละเอียด ภาพประกอบ

การเปล่ียนและการปรับแตง Theme

1. ไปท่ีเมนู Appearance >> Theme >>

Add new >> Upload Theme >> เลือกไฟล

(parabola.1.8.0.zip) หรือ ดาวนโหลด Theme

จากเว็บ www.wordpress.org

>> Install Now >> Activate

หมายเหตุ : theme ท่ีใชในการอธิบาย คือ

parabola.1.8.0 เ ม่ือลงแลวจะตองลง Plugin

ชื่อวา Cryout Serious Theme Settings ดวย

โดยคลิกท่ี Parabola Plugin >> install

2. การปรับแตง : Header Settings

ไปท่ี Appearance >> Parabola Settings

1. เปล่ียน Logo ของเว็บ Header Settings >>

Header Image >> เลือกท่ี Keep header

image aspect ratio Site Header >> Custom

Logo Upload >> เลือก Custom Logo >>

Select/Upload Image

2. ใส Favicon ของเว็บ Header Settings >>

Favicon Upload >> Select/Upload Image

>> Save Changes

เอกสารประกอบการอบรม “การประยุกตใชระบบบริหารจัดการเว็บไซตเพ่ือการจัดการเรยีนการสอน” ดวย 11 | P a g e

สําหรับ นักศึกษามหาวิทยาลัยศิลปากร โดย อาจารย จันทิมา เจริญผล นักวิชาการโสตทัศนศึกษา สํานักวิทยบริการและเทคโนโลยีสารสนเทศ มหาวิทยาลัยเทคโนโลยีราชมงคลธัญบุรี

ลําดับ รายละเอียด ภาพประกอบ

3. การปรับแตง : Presentation Page

ไปท่ี Appearance >> Parabola Settings

1. การตั้งคาสวนของการนําเสนอ Slider

- Enable Presentation Page >> Enable

- Show Posts On Presentation Page >>

Enable >> Posts Per Row : 2

- Slider Settings >> Animation : Fade

- Slider Navigation >>Numbers

- Slider Arrows >> Always Visible

2. การเพ่ิมรูปภาพ Slides

- Slides Content >> Custom Slides

- Slide 1 >> Image >> Select/Upload

Image >> Title >> Text >> Link

และ ใสรูปภาพ Slide 2 - Slide 5 หากตองการใส

ครบทุกสไลด หากไมครบใหเวนวางไว

3. การเพ่ิมรูปภาพสวนของ Presentation

Page Columns

- Columns Content >> Custom Columns

- Upload Image ใสรูปภาพ >> Save

Changes การตั้งคาท้ังหมด

เอกสารประกอบการอบรม “การประยุกตใชระบบบริหารจัดการเว็บไซตเพ่ือการจัดการเรยีนการสอน” ดวย 12 | P a g e

สําหรับ นักศึกษามหาวิทยาลัยศิลปากร โดย อาจารย จันทิมา เจริญผล นักวิชาการโสตทัศนศึกษา สํานักวิทยบริการและเทคโนโลยีสารสนเทศ มหาวิทยาลัยเทคโนโลยีราชมงคลธัญบุรี

ลําดับ รายละเอียด ภาพประกอบ

4. การตั้งคา ตัวอักษร TEXT SETTINGS

สามารถเขาไปท่ี Google fonts

( https://fonts.google.com/) เ พ่ื อ ดู รู ป แ บ บ

ตัวอักษร และนําช่ือของตัวอักษรท่ีตองการ มาใส

ในชอง or Google font

5. การตั้งคาสีสวนตางๆ COLOR SETTINGS

ตัวอยาง Code สี

#339999เขียว #E84A5F ชมพู

เอกสารประกอบการอบรม “การประยุกตใชระบบบริหารจัดการเว็บไซตเพ่ือการจัดการเรยีนการสอน” ดวย 13 | P a g e

สําหรับ นักศึกษามหาวิทยาลัยศิลปากร โดย อาจารย จันทิมา เจริญผล นักวิชาการโสตทัศนศึกษา สํานักวิทยบริการและเทคโนโลยีสารสนเทศ มหาวิทยาลัยเทคโนโลยีราชมงคลธัญบุรี

2.2 การจัดการเนื้อหาบทเรียนและรายละเอียดของรายวิชา

Sitemap (แผนผังเว็บไซต)

ตัวอยาง Sitemap บทเรียนเรื่อง พ.ร.บ. คอมพิวเตอร 2550 ( http://www.site.rmutt.ac.th/cuemedia )

เอกสารประกอบการอบรม “การประยุกตใชระบบบริหารจัดการเว็บไซตเพ่ือการจัดการเรยีนการสอน” ดวย 14 | P a g e

สําหรับ นักศึกษามหาวิทยาลัยศิลปากร โดย อาจารย จันทิมา เจริญผล นักวิชาการโสตทัศนศึกษา สํานักวิทยบริการและเทคโนโลยีสารสนเทศ มหาวิทยาลัยเทคโนโลยีราชมงคลธัญบุรี

2.2.1 การจัดการเนื้อหาบทเรียน ดวยเรื่อง (Post)

ลําดับ รายละเอียด ภาพประกอบ

1. คลิก Edit ในเรื่องท่ีตองการแกไข

2. 2.1 ใสชื่อเรื่อง

2.2 คลิกท่ี Tab Text เพ่ือใส

ตัวอักษรในรูปแบบของ code ตางๆ

ถาหากใสตัวอักษรธรรมดาใช Tab

Visual

3. Copy Code embed จาก

YouTube มาใส

4. คลิกเลือกFormat (รูปแบบPost)

5. เลือกหมวดหมู (Categories)

หรือเพ่ิมโดยคลิกท่ี +Add New

Category

6. พิมพใส Tag (คําคน) และคลิก

Add

7. Feature Image เพ่ิมรูปภาพ

เพ่ือใหแสดงเปน Feature

8. คลิก Update เพ่ือเผยแพรเรื่องท่ี

เขียน

การเพ่ิมเรื่องใหม (Post)

ไปท่ี เมนู Post >> Add New

มี 2 วิธี ดังภาพ

หมายเหตุ : ในสวนของการ Publish

สามารถกําหนดวันเวลาในการเผยแพรได

และสามารถใส Password ปองกัน เพ่ือ

จํากัดใหผูเรียนท่ีมี Password เทาน้ัน

สามารถเขาดูเรื่องน้ันๆ ได

เอกสารประกอบการอบรม “การประยุกตใชระบบบริหารจัดการเว็บไซตเพ่ือการจัดการเรยีนการสอน” ดวย 15 | P a g e

สําหรับ นักศึกษามหาวิทยาลัยศิลปากร โดย อาจารย จันทิมา เจริญผล นักวิชาการโสตทัศนศึกษา สํานักวิทยบริการและเทคโนโลยีสารสนเทศ มหาวิทยาลัยเทคโนโลยีราชมงคลธัญบุรี

2.2.2 การจัดการเนื้อหาและการจัดการเมนู (Page)

ลําดับ รายละเอียด ภาพประกอบ

1. การเพ่ิมหนาใหม (Page)

การเพ่ิมเมนูใหม เมนู Page >>

Add New หากตองการดู Page

ท้ังหมด คลิกเลือก All Page

2. 1. ใสชื่อหนา

2. คลิกท่ี Tab Visual เพ่ือใส

ตัวอักษรธรรมดา *ถาหากใสใน

รูปแบบของ code ตางๆ ใช Tab

Text

3. พิมพขอความท่ีตองการ รูปแบบ

การพิมพจะคลายกับ Microsoft

office

4. คลิกเลือกหมวดหมู เมนู (Page)

ถาหากไมไดเลือก (no parent) ก็จะ

เปนเมนูหลัก หากมีการเลือกให

หมวดหมูเมนู(Page) เมนู(Page) นั้น

ก็จะกลายเปนหัวขอยอยลงมา

5. เลือกรูปแบบของ Template

6. ตั้งคาจัดลําดับของหนา

7. Feature Image เพ่ิมรูปเพ่ือให

แสดงเปน Feature

8. คลิก Update เพ่ือเผยแพรเรื่องท่ี

เขียน

หมายเหตุ : ในสวนของการ Publish

สามารถกําหนดวันเวลาในการเผยแพรได

และสามารถใส Password ปองกัน เพ่ือ

จํากัดใหผูเรียนท่ีมี Password เทาน้ัน

สามารถเขาดูเรื่องน้ันๆ ได เชนเดียวกับ

การเขียนแบบเรื่อง(Post)

การลบหนา(Page)

เอกสารประกอบการอบรม “การประยุกตใชระบบบริหารจัดการเว็บไซตเพ่ือการจัดการเรยีนการสอน” ดวย 16 | P a g e

สําหรับ นักศึกษามหาวิทยาลัยศิลปากร โดย อาจารย จันทิมา เจริญผล นักวิชาการโสตทัศนศึกษา สํานักวิทยบริการและเทคโนโลยีสารสนเทศ มหาวิทยาลัยเทคโนโลยีราชมงคลธัญบุรี

2.3 การเพ่ิมสวนเสริม (Plugin) และการตั้งคาเว็บไซต

ลําดับ รายละเอียด ภาพประกอบ

การเพ่ิมสวนเสริม (Plugin)

1. ก า ร เ พ่ิ ม ส ว น เ ส ริ ม ( Plugin)

เมนู Plugin >> Add New

ห า ก ต อ ง ก า ร ดู Pluginท้ั ง ห ม ด

คลิกเลือก Installed Plugins

2. เมนู Plugin >> Add New >>

Uploaded Plugin >> เลือกไฟล

>> Install Now >> Activate

การตั้งคาท่ัวไป (General Settings)

1. การตั้งคาเว็บไซต

เมนู Settings >> General

- ในสวนนี้จะเปนการตั้งชื่อเว็บไซต

และคําโปรย

- แสดงท่ีอยูของเว็บไซต

- ท่ีอยู Email

- ผูท่ีสามารถสมัครเปนสมาชิก

เว็บไซต

- ผูสมัครเว็บไซตจะมีบทบาทระดับ

ใดในเว็บไซต

- **และสวนของการเปล่ียนภาษา

ของเว็บไซต**

- เม่ือตั้งคาเสร็จแลวใหคลิก Save

Changes

เอกสารประกอบการอบรม “การประยุกตใชระบบบริหารจัดการเว็บไซตเพ่ือการจัดการเรยีนการสอน” ดวย 17 | P a g e

สําหรับ นักศึกษามหาวิทยาลัยศิลปากร โดย อาจารย จันทิมา เจริญผล นักวิชาการโสตทัศนศึกษา สํานักวิทยบริการและเทคโนโลยีสารสนเทศ มหาวิทยาลัยเทคโนโลยีราชมงคลธัญบุรี

3. การจัดกิจกรรมการเรียนการสอนดวย Plugin เพ่ือเพ่ิมประสิทธิภาพเว็บไซต

3.1 แชรหนาเว็บไซต/ผลงาน ผาน Social Media

ลําดับ รายละเอียด ภาพประกอบ

1. ขอแนะนําปลั๊กอินท่ีชื่อวา

“add-to-any” เปนปลั๊กอินสําหรับ

การแชร เ นื้ อหา ใน เ ว็ บ ไปสู โ ล ก

ออนไลน เชน Facebook Google+

Twitter Pinterest Linkedin

Wordpess Tummblr เพียงแคคลิก

ท่ีปุม แชร หรือจะใสไวท่ี side bar

ดานขาง ก็ไดใชตองเพ่ิมในสวนของ

widgets ดานขวา

3.2 สรางอัลบ้ัมภาพแบบคลังภาพ และอัลบ้ัมภาพแบบ Slide

ลําดับ รายละเอียด ภาพประกอบ

2. การสรางอัลบ้ัมภาพ (คลังภาพ)

เพ่ืองายตอการรับชมภาพจํานวนมาก

มีวิธีการดังนี้ เขียนเรื่อง(Post) หรือ

เ ขียนหน า (Page) ตั้ ง ชื่ อ“อั ล บ้ั ม

ภาพ” คลิกท่ีเพ่ิมส่ือ(Add media)

>> สรางคลังรูปภาพ >> เลือก

รู ป ภ า พ ภ า พ ท่ี ถู ก เ ลื อ ก จ ะ มี

เครื่องหมายถูก >> คลิกสรางคลัง

ภาพใหม >> เผยแพร

แบบ Slide Show

เอกสารประกอบการอบรม “การประยุกตใชระบบบริหารจัดการเว็บไซตเพ่ือการจัดการเรยีนการสอน” ดวย 18 | P a g e

สําหรับ นักศึกษามหาวิทยาลัยศิลปากร โดย อาจารย จันทิมา เจริญผล นักวิชาการโสตทัศนศึกษา สํานักวิทยบริการและเทคโนโลยีสารสนเทศ มหาวิทยาลัยเทคโนโลยีราชมงคลธัญบุรี

ลําดับ รายละเอียด ภาพประกอบ

และการสร า งภ าพแบบ slide

ขอแนะนําปลั๊กอินท่ีชื่อวา

“Master Slider”

เอกสารประกอบการอบรม “การประยุกตใชระบบบริหารจัดการเว็บไซตเพ่ือการจัดการเรยีนการสอน” ดวย 19 | P a g e

สําหรับ นักศึกษามหาวิทยาลัยศิลปากร โดย อาจารย จันทิมา เจริญผล นักวิชาการโสตทัศนศึกษา สํานักวิทยบริการและเทคโนโลยีสารสนเทศ มหาวิทยาลัยเทคโนโลยีราชมงคลธัญบุรี

3.3 กระดานสนทนา

ลําดับ รายละเอียด ภาพประกอบ

กระดานสนทนา (แบบไมประสานเวลา) 3. การสรางกระดานสนทนา ขอแนะนํา

ปล๊ักอิน “wpForo” เพ่ือใชในการ

พูดคุยแลกเปลี่ยนความคิดเห็นใน

เรื่องตางๆ เก่ียวกับกิจกรรมการเรียน

การสอน

กระดานสนทนา (แบบประสานเวลา)

4. แนะนํา ปล๊ักอิน

“Zopim Live Chat”

ต อ ง ส มั ค ร เ ข า ใ ช ง า น ท่ี

https://dashboard.zopim.com/

แล ะนํ า โ ค ด ไ ป เ พ่ิ ม ท่ี ตั ว แก ไ ข

Themes (Appearance >> Editor

ซ่ึงจะเปนใหมี chat box เพ่ิมใน

ทุกๆ หนาบนเว็บ ก็จะสามารถพูดคุย

ไดแบบประสานเวลา และมีระบบ

การสงขอความในกรณีท่ีอาจารย

ผูสอนไมไดออนไลน ผูเรียนสามารถ

login เขาระบบดวย email หรือ

login Facebook หรือ login

google+ ได

เอกสารประกอบการอบรม “การประยุกตใชระบบบริหารจัดการเว็บไซตเพ่ือการจัดการเรยีนการสอน” ดวย 20 | P a g e

สําหรับ นักศึกษามหาวิทยาลัยศิลปากร โดย อาจารย จันทิมา เจริญผล นักวิชาการโสตทัศนศึกษา สํานักวิทยบริการและเทคโนโลยีสารสนเทศ มหาวิทยาลัยเทคโนโลยีราชมงคลธัญบุรี

3.4 การวางแผนการเรียนการสอน

ลําดับ รายละเอียด ภาพประกอบ

5. การสรางปฏิทินวางแผนการเรียน

ก า ร ส อ น ข อ แ น ะ นํ า ป ลั๊ ก อิ น

“the-events-calendar”

เพ่ือใชการวางแผนการเรียนการสอน

การเ พ่ิมเมนูตารางเหตุการณ “กําหนดการนําเสนอผลงาน” ท่ี mainmenu ตองไปท่ี รูปแบบบล็อก >> เมนู ตามท่ีไดปรับแตงเมนูไวตั้งแตแรกหรือเมนูหลัก

เอกสารประกอบการอบรม “การประยุกตใชระบบบริหารจัดการเว็บไซตเพ่ือการจัดการเรยีนการสอน” ดวย 21 | P a g e

สําหรับ นักศึกษามหาวิทยาลัยศิลปากร โดย อาจารย จันทิมา เจริญผล นักวิชาการโสตทัศนศึกษา สํานักวิทยบริการและเทคโนโลยีสารสนเทศ มหาวิทยาลัยเทคโนโลยีราชมงคลธัญบุรี

3.5 การสรางลิงคเมนูเช่ือมโยงไปยังเว็บไซตอ่ืนๆ

ลําดับ รายละเอียด ภาพประกอบ

6. การสรางลิงคเมนูเชื่อมโยง โดยไปท่ี

เมนู Appearance >> Menus

สามารถนํามาแสดงท่ี เว็บไซต ได

โดยไปท่ีเมนูWidgets >> Custom

Menu คลิกแลวลากไปวางยังสวนท่ี

ตองการ โดยเลือกชื่อตามท่ีไดตั้งชื่อ

ไว เชน แหลงเรียนรูเพ่ิมเติม เปนตน

และถาหากตองการเชื่อมโยงเรื่องท่ี

เขียนเปน Post/Page ขอแนะนํา

ปลั๊กอิน “Page Link to”

3.6 คลังไฟลส่ือเอกสารประกอบการสอน

ลําดับ รายละเอียด ภาพประกอบ

7. ก า ร ส ร า ง ค ลั ง ไ ฟ ล สื่ อ เ อ ก ส า ร

ประกอบการสอน ขอแนะนําปลั๊กอิน

“WP-Firebase” เพ่ือใชเปนสวนท่ี

ใหผูเรียนดาวนโหลดเอกสารตางมา

ใชในการเรียนรู

เอกสารประกอบการอบรม “การประยุกตใชระบบบริหารจัดการเว็บไซตเพ่ือการจัดการเรยีนการสอน” ดวย 22 | P a g e

สําหรับ นักศึกษามหาวิทยาลัยศิลปากร โดย อาจารย จันทิมา เจริญผล นักวิชาการโสตทัศนศึกษา สํานักวิทยบริการและเทคโนโลยีสารสนเทศ มหาวิทยาลัยเทคโนโลยีราชมงคลธัญบุรี

3.7 การสรางเนื้อหาบทเรียนและแบบฝกหัดแบบมีปฏิสัมพันธ

ลําดับ รายละเอียด ภาพประกอบ

8. การสรางบทเรียนแบบปฏิสัมพันธ

ขอแนะนําปลั๊กอิน “h5p” เพ่ือใช

เ ป น ส ว น ข อ ง เ นื้ อ ห า บ ท เ รี ย น

โดยเฉพาะการใชวิดี โอเปนสวน

นําเสนอเนื้อหา และมีคําถามเพ่ือให

ผูเรียนทบทวนความรูท่ีไดจากการดู

วิ ดี โ อ แ ล ะ ใ ช ส ร า ง กิ จ ก ร ร ม

หลากหลายรูปแบบ โดยสามารถเขา

ไปดูตัวอยางและดาวนโหลด ตัวอยาง

Content ไดท่ี

https://h5 p.org/content-types-

and-applications

ท่ีมา : https://h5p.org/

ท่ีมาวิดีโอ : https://youtu.be/8RnZtICLZCY