Page 1

1

คูมือสําหรับจัดการเนื้อหาเว็บไซต Concordian International School

E-minenZ dot com Co., Ltd.


2

สารบัญ 1. เกี่ยวกับเว็บไซตและแนะนํา (Starting Guide)

[หนา 3]

1.1 หนาแนะนําหนาบาน (Frontend)

[หนา 3]

1.2 หลังบาน (Backend Office)

[หนา 4]

2. จัดการเนื้อหาโดยระบบหลังบาน (Manage Content with Backend Office)

[หนา 5]

2.1 เริ่มตนเขาใชงานระบบหลังบาน

[หนา 5]

2.2 แผงควบคุมหลังบาน

(Getting Started and Login)

(Admin Panel)

2.3 แถบเครื่องมือแกไขขอความ (Toolbar TextEditor) 2.4 อัพโหลดรูปภาพ

(Upload Image)

2.5 รูปภาพแบบแกลเลอรี่ 2.6 การฝงวิดีโอ

(Gallery Embed)

(Video Embed)

2.7 การฝงเอกสารรูปแบบไฟลพีดีเอฟ

[หนา 7] [หนา 8] [หนา 9] [หนา 11]

(PDF Embed)

3. เนื้อหาโดยใชระบบหลังบาน หนาโพสตและหนาเพจ (Post and Page)

E-minenZ dot com Co., Ltd.

[หนา 6]

[หนา 14] [หนา 15]


3

1. เกี่ยวกับเว็บไซตและแนะนํา (Starting Guide) 1.1 หนาบาน (frontend)

ภาพที่ 1.1-1 จากภาพเปนผลลัพธที่แสดงเมื่อเขาสูโดเมนของเรา เชน http://concordian.co.cc ตอไปนี้จะเรียกวา “หนาบาน”

E-minenZ dot com Co., Ltd.


4

1.2 หลังบาน (Backend Office)

ภาพที่ 1.2-1 เมื่อพิมพ “/wp-admin” ตอทายโดเมนเนมของเรา เชน http://โดเมนเนมของเรา/wpadmin หรือ http://concordian.co.cc/wp-admin จะเห็นวามีหนาใหใสรหัสผาน ถาหากเรา ไมไดเขาระบบทิ้งไว กรณีที่ลืมรหัสผาน หากคลิกเลือก “Lost your password?” ระบบจะสงรหัสผานใหมไปทาง email ของเรา

ภาพที่ 1.2-2 “หนาบานจะมีความสัมพันธกับหลังบานโดยที่หลังบานจะดําเนินการบริหารจัดการขอมูล รูปแบบ หนาตา การแสดงผลตางๆ ของหนาบาน โดยผานการสั่งงานจากระบบหลังบาน และจะกลาว รายละเอียดการใชงานในหัวขอตอไป...”

E-minenZ dot com Co., Ltd.


5

2. จัดการเนื้อหาโดยระบบหลังบาน (Manage Content with Backend Office) 2.1 เริ่มตนเขาใชงานระบบหลังบาน

(Getting Started and Login)

http://โดเมนเนม/wp-admin เชน http://concordian.co.cc/wp-admin โดยพิมพ ผลจะปรากฏ ดังภาพที่ 2.1-1

ภาพที่ 2.1-1 ระบบจะใหลงชื่อเขาใชงาน จากนั้นใสชื่อผูใช (Username) และรหัสผาน (Password) แลวคลิก Login เพื่อเขาสูระบบหลังบาน

“หัวขอถัดไปจะเปนการอธิบายแผงควบคุมที่ใชในการจัดการบริหารขอมูลดวยระบบหลังบาน”

E-minenZ dot com Co., Ltd.


6

2.2 แผงควบคุมหลังบาน (Admin Panel)

ภาพที่ 2.2-1 เมื่อทําการเขาสูระบบดวยผูใชและรหัสผาน ( Login) หลังบานจะแสดงผลหนาแผงควบคุม Dashboard เปนอันดับแรก เพื่อที่ผูใชจะเลือกดําเนินการจัดการเนื้อหาตามหมวดหมูของเมนู และทางลัด ( Shortcut Link) เพื่อดําเนินการ เพิ่ม ลบ หรือแกไข เนื้อหาใสสวนของหนาบาน (Frontend) 1) แผงควบคุมหลังบาน (Admin Panel) จะแบงกลุมออกตามระดับของผูใช และการใชงาน เชนการ จัดการเกี่ยวกับเนื้อหา การตั้งคาตางๆ ของเว็บไซต จะเห็นวามี แบงขึ้นดวยเสนขีด ดังภาพที่ 2.2-2

ภาพที่ 2.3-2

E-minenZ dot com Co., Ltd.


7

1) แผงควบคุม

Select Category to Post ใน Dashboard

ซึ่งเปนทางลัดของหมวดหมูที่ตองการจะเพิ่ม เนื้อหาในรูปแบบของ Post Category ใน ดังภาพที่ 2.2-2

“การเพิ่มเนื้อหาในรูปแบบของโพสตจะถูดอธิบายใน หัวขอถัดไป” ภาพที่ 2.3-2

2) เพิ่มเนื้อหาแบบดวน ดวย QuickPress เปนการเพิ่มเนื้อหาโดยที่ยังไมไดเลือก หมวดหมูของ Category ซึ่งอาจจะพิมพเปน Draft Post ไวกอน คอยใสหมวดหมู Category ในภายหลังได ภาพที่ 2.2-3 2.3 แถบเครื่องมือแกไขขอความ (Toolbar Texteditor)

ภาพที่ 2.3-1 จากภาพที่ 2.3-1 เปนรูปภาพแสดงแถบเครื่องมือที่ใชในการจัดการขอความ เชน B คือ Bold ตัวหนา, I ตัวเอียง, ลิสไมมีลําดับและมีลําดับ, การจัดวางขอความ, Paragraph, สีอักขระ, การวางและลบรูปแบบ เปนตน

E-minenZ dot com Co., Ltd.


8

2.4 อัพโหลดรูปภาพ (Upload Image) 1 ) อันดับแรกไปที่เมนู Media แลว New เพื่อทําการอัพโหลดภาพใหม จากนั้นเลือก Select ภาพที่ 2.4-1 2) เลือกรูปภาพที่จะอัพโหลดใหม ซึ่ง รูปภาพที่เลือก สามารถเลือกไดมากกวา 1 ภาพ เพื่อดําเนินการอัพโหลดไฟลภาพ...รอสักครู ไฟลภาพจะถูกอัพโหลดดังภาพที่ 2.4-2 ภาพที่ 2.4-2 3) คลิกที่ Show เพื่อใสหัวขอของภาพ และคําอธิบาย จากนั้นคลิกที่ Save All เพื่อบันทึก

ภาพที่ 2.4-3

E-minenZ dot com Co., Ltd.


9

2.5 รูปภาพแบบแกลเลอรี่ (Gallery Embed) เปนการสรางแกลเลอรี่โคดสําหรับไปฝงใน เนื้อหาของเว็บทําไดดังนี้ 1) ไปที่

Media -> Gallery Objects

ภาพที่ 2.5-1

2) ใสชื่อและคําอธิบายอัลบั้ม แลวเลือก

Create Album เพื่อสราง อัลบั้มใหม

ภาพที่ 2.5-2

3) เลือกภาพที่ตองการแลว

ADD เขาไปในอัลบั้ม

ภาพที่ 2.5-3

E-minenZ dot com Co., Ltd.


10

4) สราง

View ใหอัลบั้ม โดยใสชื่อและคําอธิบาย แลวเลือก *Album for this view: ชื่อ

อัลบั้มของเราจากขอ3 จากนั้นคลิก Create View

ภาพที่ 2.5-4

5) คัดลอก ShortCode หรือโคด ไปใชในลําดับตอไป

ภาพที่ 2.5-5

***สิ่งที่ไมควรปฏิบัติ (สําหรับขอ5) : ทานไมควรขยายขนาดของความกวาง ความสูง พื้นหลังของ Container และขนาดของ Thumbnails โดยเด็ดขาด เนื่องจาก Popup ที่แสดงแกลเลอรี่ถูกกําหนดคามาโดยปริยายแลว เวนแตทานจะนําไปฝงในรูปแบบอื่น

E-minenZ dot com Co., Ltd.


11

2.6

การฝงวิดีโอ (Video Embed)

1) ที่แถบ เครื่องมือแกไขขอความ (

Toolbar Texteditor) ในโหมดจําลอง คลิกที่

ภาพที่ 2.6-1

2) จะแสดง Popup ขึ้นมาใหใสคา Parameter ดังภาพ

ภาพที่ 2.6-2

3)

Embed Video จากไฟลที่อัพโหลดเอง ภาพที่ 2.6-3-1

เลือกที่

Media Library แลวเลือกไฟล

ภาพที่ 2.6-3-2

ทั้ง Video และ Image Preview (jpg, png เทานั้น) แลวคลิก OK

E-minenZ dot com Co., Ltd.


12

4) หรือจะ Embed แลวดึงขอมูลจาก Youtube.com (แนะนํา) คัดลอก

URL Youtube.com ของคลิป เพื่อใหไมผิดพลาด

ควรให URL อยูในรูปแบบ www.youtube.com/watch?v=xxxxxxx ดังภาพ

ภาพที่ 2.6-4-1

จากนั้นวาง ลงใน Popup (ขอ3)

ภาพที่ 2.6-4-2

จากนั้น ระบบหลังจะดึง

Screenshot Preview จาก Youtube.com ใหคัดลอก URL

ของรูปภาพ เพื่อไปสราง Featured Image Content ตอไป

ภาพที่ 2.6-4-3

E-minenZ dot com Co., Ltd.


13

5

) คลิกที่ Generate เพื่อสราง ShortCode

ภาพที่ 2.6-5

6) คัดลอก

ShortCode ไปใชงานในลําดับตอไป

ภาพที่ 2.6-6

จากนั้นก็ลบ

ShortCode ทิ้งไดเลย

E-minenZ dot com Co., Ltd.


14

2.7 การฝงเอกสารรูปแบบไฟล PDF 1) Upload file ไปที่เว็บไซต issuu.com ซึ่งเปนเว็บที่ใหบริการ upload magazine ฟรี 2) จากนั้นเลือกที่

Get Embed Code

ภาพที่ 2.7-1

3) เลือกเปน Wordpress และปรับขนาดความกวางเปน 900px

ภาพที่ 2.7-2

แลวคัดลอกเอา

Embed Code ไปไวใชตอไป

E-minenZ dot com Co., Ltd.


15

3. การจัดการเนื้อหาแบบโพสตและเพจ

(Post and Page)

ภาพที่ 3-0

1)

การใสขอความ/จัดรูปแบบขอความ ขอมูลจําเปนของหนาเว็บแตละหนา คือ ชื่อ และ ขอความ เราสามารถใช Toolbar

Texteditor จัดการรูปแบบของอักขระไดเชน เชนจัดชิดขอบ

ภาพที่ 3-1

หากตองการขอความที่เปนตัวอยางตัวอักษร แนะนําใหใชขอความจาก http://www.lipsum.com/

E-minenZ dot com Co., Ltd.


16

2) Excert

ภาพที่ 3-2

เปนขอความที่ขึ้น

Intro ของ Content

3) Post template/Page template

ภาพที่ 3-3

เปนการเลือก 4)

template ของการโพสตรูปแบบนั้นๆ

Post Category

ภาพที่ 3-4

ในรูปแบบโพสตจะมีใหเลือกวา ที่เรากําลังสรางนั้นจะถูกกําหนดใหอยูในหมวดหมูใด 5)

Featured Image Content ภาพที่ 3-5

เปนการแนบรูปประกอบทั้งหนา

E-minenZ dot com Co., Ltd.

Post และ Page


17

6) Custom Fields

ภาพที่ 3-6

ในแตละรูปแบบของ

Template ไดกําหนดไวแลววาสิ่งที่เราตองใสมีอะไรบางตามตาราง

E-minenZ dot com Co., Ltd.

manual  

CIS manaul web

Read more
Read more
Similar to
Popular now
Just for you