Basic WordPress

สรางเวบไซตดวย WordPress “มเวบไซตงายๆในไมกขนตอน”

พงษศธร เชดสม www.naygho.org

pongsathorn@naygho.org

2

ความรพนฐานกอนการท าเวบ

โฮมเพจ (Home Page)

หนาแรกของเวบไซต ซงเวบเพจทกๆ หนาของเวบไซทจะถกเชอมโยงมาจากโฮมเพจ

บางครงผใชเขาใจค าวาโฮมเพจหมายถงเวบไซททงหมด แตความจรงแลวโฮมเพจหมายถงหนา

แรกเทานน โดย ถาเปรยบกบหนงสอ โฮมเพจกเปนเสมอนหนาปกหรอสารบญซงจะเปน การ

แสดงใหเหนวาในเวบไซตของเรานนมอะไรบาง ผพฒนาเวบไซตจงตองออกแบบใหสวยงามและ

นาสนใจใหมากทสด

3

เวบเพจ (Web Page)

หนาเวบแตละหนาทแสดงขอมลตางๆ โดยปกตแลวจะถกสรางใหอยในรปแบบไฟล HTML

(Hyper Text Markup Language) โดยไฟล HTML 1 ไฟลกคอเวบเพจ 1 หนา ซงภายใน

เวบเพจอาจประกอบไปดวยขอความ ภาพ เสยง วดโอ และภาพเคลอนไหวแบบมลตมเดย ซง

นอกจากเวบเพจในแตละหนาจะมการแสดงขอมลตางๆแลวยงสามารถ เชอมโยงกนในแตละหนา

เพอใหผชมเวบไซตนนเรยกดเอกสารหนาอนๆ ทเกยวของไดสะดวกและรวดเรวอกดวย

เวบไซต (Website)

เวบเพจหลายๆ หนารวมถงหนา

โฮมเพจดวยทแสดงขอมลทงหมด

และเชอมโยงกน โดยน าเสนอ

ขอมลผานคอมพวเตอร ถกจดเกบ

ไ ว ใ น เ ว ล ด ไ ว ด เ ว บ เ ว บ ไ ซ ต

โดยทวไปจะใหบรการตอผใชฟร

แตในขณะเดยวกนบางเวบไซตจ าเปนตองมการสมครสมาชก และเสยคาบรการเพอทจะดขอมล

ในเวบไซตนน ซงไดแกขอมลทางวชาการ ขอมลตลาดหลกทรพย หรอขอมล

4

โดเมนเนม (Domain Name)

ชอทใชระบลงในคอมพวเตอร เพอไปคนหาในระบบ โดเมนเนมซสเทม เพอระบถง ไอพ

แอดเดรส ของชอนนๆ เปนชอทผจดทะเบยนระบใหกบผใชเพอเขามายงเวบไซตของตน บางครง

เราอาจจะใช "ทอยเวบไซต" แทนกได มทงแบบเสยคาเชารายปและแบบฟร

โดเมนเนม หรอ ชอโดเมน เปนชอทตงขนเพอใหงายตอการจดจ า เนองจากไอพแอดเดรสนน

จดจ าไดยากกวา และเมอการเปลยนแปลงไอพแอดเดรส ผใชไมจ าเปนตองรบรหรอจดจ าไอพ

แอดเดรสใหม ยงคงใชโดเมนเนมเดมไดตอไป อกขระทจะใชในการตงชอโดเมนเนม ไดแก

ตวอกษรภาษาองกฤษ ตวเลข และ "-" คนดวย "."โดยปกต จะขนตนดวยตวอกษร และลงทายดวย

ตวอกษรหรอตวเลข มความยาวตงแต 1 ถง 63 ตวอกษร ตวอกษรตวใหญ A - Z หรอตวอกษรตว

เลก ถอวาเหมอนกน 1 ไอพแอดเดรส สามารถใชโดเมนเนมไดมากกวา 1 โดเมนเนม และหลายๆ

โดเมนเนมอาจจะใชไอพแอดเดรสเดยวกนได เชน www.naygho.org

เวบโฮสตง(Web Hosting)

รปแบบการใหบรการส าหรบผใชอนเทอรเนต อยางหนง ซงผใชงานนนมความตองทจะ

ฝากเวบไซตของตนเองไว กบผใหบรการเซฟเวอร (HSP: Hosting Service Provider) เพอให

5

เวบไซต ของตนเองนน ออนไลนอยบนโลกอนเทอรเนตตลอด 24 ชม. โดยททางผ ใหบรการจะจดเกบขอมลเวบไซต ฐานขอมล อเมล ฯลฯ ไวในเครองเซฟเวอรหรอทเรยกกนวาเวบเซฟเว อร (Web Server) ซงเวบเซฟเวอรจะท าหนาท เปนสอกลางทจะแสดงผลหนาเวบไซตใหกบผทองอนเทอรเนตทวไป ไดเชาชมผานโดเมนเนมไดตลอดเวลา WordPress คออะไร

WordPress เปน open source web software ทเราสามารถตดตงบนเวบ server ของ

เราเพอสรางเวบไซต, blog หรอ community ตอนเรมแรก WordPress เปนเครองมอไวส าหรบสราง blog แตไดรบการพฒนามาเรอย ๆ จนสามารถสรางเปนเวบไซต หรอ เวบ community ไดแลว โดยมระบบจดการบทความ หรอ Content Management System (CMS) เชน joomla, simple machines, open cart, magento เปนตน ท าใหงายตอการใชงาน ซง WordPress สรางขนโดย Matt Mullenweg และ Mike Little ในป 2003 นบวามการพฒนามาถง 9 ปแลว

6

เวบไซตจะออนไลนไดมสวนประกอบอะไรบาง?

Domain Name >> คมอเลมนจะพาท าโดยใช sub domain ฟรจากเวบwww.hostinger.in.th Web Hosting >> คมอเลมนจะพาท าโดยใช sub domain ฟรจากเวบwww.hostinger.in.th File Website >> คมอเลมนจะพาท าโดยใช WordPress

สงทผออกแบบเวบไซตจ าเปนตองเตรยมกอนการออกแบบจรง บทความจาก (http://www.superwebsite.com/th/tips/view/4-ความรพนฐานเกยวกบการสรางเวบไซต)

ขนตอนการพฒนาเวบไซต การออกแบบเวบไซตใหมขอมลและรายละเอยดทครบถวนและครอบคลมกบความตองการ เวบไซตมความสวยงาม อกทงงายตอการดและปรบเปลยนขอมลในภายหลงนน ควรมการวางแผนในการพฒนาเวบไซตทด ซงพอสรปขนตอนไดดงนคอ

▪ ก าหนดวตถประสงคของเวบไซต การพฒนาเวบไซต ควรเรมจากการก าหนดวตถประสงคใหเหนภาพชดเจนวาตองการน าเสนอหรอตองการใหเกดผลอะไร เมอทราบวตถประสงคแลวกจะสามารถก าหนดรายละเอยดอนๆ ทเกยวของได เชนลกษณะหนาตาและสสนของเวบเพจ

7

▪ ก าหนดกลมผชมเปาหมาย เมอทราบวตถประสงคของการพฒนาเวบไซตแลว ขนตอนตอมาจะเปนการก าหนดกลมผชมเปาหมายทจะเขาชมและใชบรการเวบไซตน เพอออกแบบเวบไซตใหตอบสนองความตองการของคนกลมนมากทสด ไมวาจะเปนการเลอกเนอหา โทนส กราฟก และเทคโนโลยทน ามาสนบสนนการสรางเวบไซต

▪ เตรยมแหลงขอมล เนอหาหรอขอมลนบเปนสาระส าคญของการสรางเวบไซต ดงนนผออกแบบเวบไซตจงจ าเปนทจะตองรวาตองน าขอมลจากแหลงใดบาง เพอใหขอมลบนเวบไซตสมบรณทสด

เนอหาทควรมในเวบไซต การศกษาตวอยางจากเวบไซตทวไป จะชวยใหเรามองเหนวาในเวบไซตของเราควรม

เนอหาอะไรบาง อยางไรกตามเนอหาตาง ๆ บนเวบไซตนนไมมขอก าหนดทเปนมาตรฐานตายตว แตขนอยกบสงทจะน าเสนอและจดเดนทเราตองการใหม ซงจะท าใหรายละเอยดปลกยอยของแตละเวบไซตแตกตางกนออกไป แตหลก ๆ ส าคญแลว พอสรปไดวาขอมลพนฐานทควรมในเวบไซตควรประกอบดวย

▪ ขอมลเกยวกบบรษท องคกร หรอผจดท า (About Us) คอขอมลเกยวกบเจาของเวบไซต เพอบอกใหผชมรวาเราเปนใคร มาจากไหน และตองการน าเสนออะไร เชน วตถประสงคของเวบไซต ประวตความเปนมา สถานทตงของหนวยงาน เปนตน

▪ รายละเอยดของผลตภณฑหรอบรการ (Product/Service Information) คอขอมลหลกทเราน าเสนอในเวบไซต ซงหากเปนเวบไซตทางธรกจ ผเขาชมอาจตองการรรายละเอยดของผลตภณฑหรอบรการในเวบไซตของเรา เพอประกอบการตดสนใจในการซอสนคาหรอบรการ แตหากเปนเวบไซตทใหความร สวนนกอาจจะประกอบดวยบทความ ภาพกราฟก มลตมเดย และการเชอมโยงไปยงเวบไซตอนเพอใหไดขอมลเพมเตม

▪ ขาวสาร (News / Press Release) อาจเปนขาวสารทตองการสงถงบคคลทวไปหรอสมาชก เพอใหรบรความเคลอนไหวเกยวกบบรษทหรอเวบไซตของเรา เชนการเปดตวสนคาบรการใหม ๆ โปรโมชนสนคาประจ าเดอน หรอกจกรรมตาง ๆ ทเกดขน

▪ ค าถามค าตอบ (Frequently Asked Question) ค าถามค าตอบมความจ าเปน เพราะผเขาชมบางสวนอาจไมเขาใจขอมลหรอมปญหาทตองการสอบถาม การตดตอทางอเมลหรอชองทางอน แมวาจะท าไดแตเสยเวลา ดงนนเราควรคาดการณหรอรวบรวมค าถามทเคย

8

ตอบไปแลวใสไวในเวบเพจ ซงผเขาชมทสงสยจะสามารถเปดดไดทนท นอกจากน อาจมเวบบอรดส าหรบใหผดแลเวบไซตคอยตอบค าถาม รวมทงอาจเปดใหผเขาชมดวยกนกได

▪ ขอมลในการตดตอ (Contact Information) เพอใหผเขาชมเวบไซตของเราทเกดขอสงสย หรอตองการสอบถามขอมลเพมเตม สามารถตดตอกบเราได ควรจะระบอเมลแอดเดรส (E-mail Address) ทอย เบอรโทรศพท ทตดตอไดไว ดวย รวมทงอาจมแผนทส าหรบลกคาทตองการตดตอโดยตรง

สวนประกอบของหนาเวบเพจ โดยทวไปแลว หนาเวบเพจจะแบงออกเปนสวนหลก ๆ ดงนคอ

▪ สวนหว (Page Header) อยตอนบนสดของหนาเวบเพจ เปนบรเวณทส าคญทสด เนองจากผเขาเยยมชมเวบไซตจะมองเหนกอนบรเวณอน สวนใหญนยมใชวางโลโก ชอเวบไซต ปายโฆษณา ลงคส าหรบการตดตอ หรอลงคทส าคญ และระบบน าทาง

▪ สวนเนอหา (Page Body) อยตอนกลางหนา ใชแสดงเนอหาภายในเวบเพจซงอาจประกอบไปดวยขอความ ภาพกราฟก ตารางขอมล และอน ๆ บางครงเมนหลกหรอเมนเฉพาะกลม อาจอยในสวนนกได โดยมกวางไวดานซายมอสด เนองจากผเขาชมจะมองเหนไดงาย

▪ สวนทาย (Page Footer) อยดานลางสดของหนาเวบเพจ สวนใหญจะนยมใชวางระบบน าทางภายในเวบไซตแบบทเปนลงคขอความงาย ๆ นอกจากนกอาจจะมชอของเจาของเวบไซต ขอความแสดงลขสทธ และอเมลแอดเดรส (E-mail Address) ของผดแลเวบไซต

▪ แถบขาง (Side Bar) ปจจบนจะนยมออกแบบดานขางของหนาเวบเพจใหนาสนใจ เพอใชวางปายแบนเนอร หรอลงคแนะน าเกยวกบบรการของเวบไซต เปน

9

1. สมคร hosting , domain ขนตอนแรกท าการสมครสมาชกเพอขอพนทฝากไฟลเวบไซต (hosting) และรวมไปถงการ

ขอโดเมนเนม (Domain)

1 ใหเขาไปทเวบไซต www.hostinger.in.th

2 คลกเลอกในแทป Web Hosting > Free แลวกดทปมสงซอ

10

3 กรอกขอมลเพอท าการสรางบญชใหม ใสขอมลตามทเวบไซตก าหนดสามารถสมครโดย

ใช Account facebook และ google ในการสมครกได ในทนจะสมครโดยการกรอก

ขอมลพนฐานทเวบไซตก าหนด ใสเรยบรอยใหกดสรางบญช

4 สรางบญชเรยบรอยใหไปท e-mail เพอท าการยนยนการสมครสมาชก

11

5 เวบไซตทเราท าการสมครสมาชกไวจะสง e-mail ใหสองฉบบ จากนนใหเราคลกลงคท

ทางเวบไซตสงมาให กเปนการเรยบรอยในการยนยนการสมครสมาชก

6 เลอกโฮสตงแพกเกจ ในทนใหเลอกเปน Free คณสมบตโฮสตงฟรทเราจะได พนท 2000 MB

100 GB แบนวธ

2 MySQL Databases

2 บญชอเมลล

Website Builder

Script Autoinstaller

12

7 จากนนใหใสโดเมนและรหสผาน

-เลอกประเภทโดเมน ใหเลอกเปนโดนเมนยอย

-โดเมนยอย ใหใสตามทเราตองการ และจะมโดนเมนหลกใหเราเลอก แนะน าใหเลอก

ตวทสนๆ เพองายตอการจดจ า จากตวอยางจะไดเปน naygho.esy.es

-รหสผาน สามารถใสไดตามทเราตองการ หรอ สามารถคลกท สราง เพอใหระบบ

สรางรหสผานใหอตโนมต

8 ยนยนการสงซอ

-ตรวจสอบขอมลวาถกตองตามทเราไดหรอกไวกอนหนาหรอเปลา

-ใส Captcha ตามภาพใหถกตอง และตกถกในชอง ฉนยอมรบ terms และเงอนไข

การใชงาน แลวกดสงซอ

13

9 จากนนระบบจะแจงวาไดท าการสรางบญชเรยบรอยแลว ใหคลกทเครองหมายบวก

หรอ คลกทชอโดเมน naygho.esy.es จากนนใหเลอกท โปรแกรมตดตงอตโนมต

10 หนาโปรแกรมตดตงอตโนมต จะมโปรแกรมใหเราเลอกมากมายในสวนนใหเราดท การ

สรางเนอหา และเลอกท Wordpress

14

2. ตดตง wordpress 1 ใสขอมลพนฐานของเวบไซต

- url : http://www.naygho.esy.es/ ……….. จะใสหรอไมใสกได ถาใสจะเปนการ

ก าหนดพาทเวบไซต ถาเราไมใสเราสามารถเขาเวบไซตของเราโดยผานโดเมนท

เราก าหนดไวไดเลย http://www.naygho.esy.es

- รหสผใชงานแอดมน จากเดมระบบจะมการก าหนดให ถาเราจะเอาตามทระบบ

ไดก าหนดไวใหกไมตองแกไขในสวนน ในทน คอ naygho

- รหสผานแอดมน ใหเราใสรหสทเราตองการ

- เวบไซต Title หมายถงชอเวบไซตของเรา และจะไปปรากฏอยทไตเตลของเวบ

บราวเซอร

- เวบไซต Tagline คอขอความ Statement สน ๆ ทระบคณลกษณะของเวบไซต

เรา

15

2 จากนนระบบจะบอกวามการตดตงเรยบรอยแลว สามารถคลกทลงคเวบเพอเขาไปด

เวบไซตของไดเลย

3. ตงคาเบองตน (config) การเขาสหนา admin สามารถเขาไดโดยเพม /wp-admin ตอทายชอเวบของเรา หรอ

http://naygho.esy.es/wp-admin จากนนระบบจะใหเราท าการอพเดตฐานขอมล

ใหท าการคลกท อปเดตฐานขอมลเวรดเพรส

16

หนาแอดมน

url : http://naygho.esy.es/wp-admin

ใสชอผใชและรหสผานตามทก าหนดไวกอนหนา

หนาควบคม เปนหนาทท าหนาทควบคมการท างานทงหมดของเวบไซต

17

1 ใหคลกท ตงคา

ตงคาทวไป

- หวขอเวบไซต

- ค าโปรย

- ทอยเวรดเพรส (URL)

- ทอยเวบไซต (URL)

- อเมล

เปนคาทถกตงคาจากการตดตงเวบไซต

หรอ จะเปลยนกสามารถเปลยนได

18

- สมครสมาชก ตกถกในชอง ใครกสามารถสมครได ถาตองการใหสามารถสมคร

สมาชกได ถาไมตองการใหสมครสามาชกใหเอาเครองหมายถกออก

- บทบาทหลกผใชใหม ใหเลอกเปนสามาชกรบขาว

- เขตเวลา ใหเบอกเปน UTC +7

- รปแบบวนท ใหเลอกตามทตองการ

- รปแบบเวลา ใหเลอกตามทตองการ

- วนทเรมของสปดาห ใหเลอกตามทตองการ ในทนเลอกเปนวนอาทตย

- ภาษาของเวบ เลอกเปนภาษาไทย

4. ตดตง theme Theme สามารถหาโหลดไดจากเวบอนๆมากมาย หรอสามารถหาไดจากในระบบควบคม

ของการท างานไดเลย

Upload theme ขนเวบไซต

1 ใหเลอกท รปแบบบลอก > เพมใหม > อพโหลด theme

19

2 ใหเลอกไฟล theme ทเราตองการโดย เลอกท Browse > ไฟลทตองการ > จากนน

คลกตดตงตอนน

3 ตดตงเรยบรอยจะมหนาตางบอกรายละเอยดตางๆ ใหกดท เปดใชงาน

5. แกไข theme 1 เขาไปท รปแบบบลอก > theme options

20

สวนของการแกไขจะแบงออกเปน 3 สวน

-main

-additional

-font

Main

Logo / avatar --- โลโกของเวบไซต

เลอกโลโกเวบไซตของเรา สามารถใสรเราได แตตองมขนาดกวาง 150 px

โดยเลอกท upload > เลอกหลายไฟล หรอ จะดงรปภาพโลโกทตองการมาวางไดเลย >

เลอก

จะไดแบบน

Logo border

Bordered & shadowed > ใสขอบของโลโก

21

No border, just image > ไมใสขอบของโลโก

Intro

Intro background

คอ สพนหลงของขอความ

Intro image background

คอ รปพนหลงของขอความ (ตองมขนาดความกวาง 740px)

Intro text

คอ ตวหนงสอ หรอขอความทเราจะใสลงไป

ผลทได

22

*แนะน าใหใสแคขอความอยางเดยว ถาใสสพนหลงกไมตองใสรปภาพ และถาเลอกเปน

รปภาพพนหลงกไมตองใสความขอความ

Resize & justify text

Resize & justify a text with Slabtext. > เปนการปรบใหขอความ เลก ใหญ ให

เมาะสมกบสวนหวของเวบ

Additional

Default post thumbnail

คอ รปภาพตวอยางของบทความ (ความกวางตองมขนาด 150px)

ใหเลอกท upload > เลอกรปทเราตองการ สามารถทดงมาไวไดเลย

23

Link color

คอ สของชอบทความ

ผลทได

Font

Font คอรปแบบตวหนงสอในเวบไซตของเรา

24

6. สราง menu เมนเปรยบเสมอนปายบอกทาง แบงออกเปน 5 ประเภท ซงแตละประเภทจะแสดงใน

ต าแหนงทแตกตางกนทงนขนอยกบ theme ทเลอกใชดงน

• Main menu เปนลกษณะเมนหลกของเวบไซตทมมาใหพรอมกบธม หรอ

เทมเพลตสวนใหญประกอบไปดวยรายการเมน เชน หนาแรก,เกยวกบเรา,

เวบบอรด

• Top menu เปนลกษณะเมนทมความส าคญนอยกวา main menu จะ

แสดงอยบนของเวบไซต

• User menu เปนชอทเกยวของกบสมาชกของเวบไซต เชน แกไข

รายละเอยดสวนตว เปนตน ซงจะแสดงผลเมอสมาชกของเวบไซตได

ลอกอนเขาสระบบของเวบไซตแลวเทานน

• Resource เปนลกษณะเมนทไมเกยวกบชอเมนอนๆ เชน เมนลงคไปยง

เวบไซตอนๆ , เมนแสดงบทความเฉพาะเจาะจง เปนตน

• Key concepts เปนลกษณะเมนทเกบรายการเมนยงบทความตางๆ ท

มอยในเวบไซตโดยตรง

การสรางเมน

25

1. .ใหเขาไปท รปแบบบลอก > เมน

2. ใหคลกท สรางเมนใหม

3. ใหใสชอเมน แลวคลกทสรางเมน

4. คลกตวเลอกทอย theme ทจะใหแสดงเมนใน theme ซงแตละ theme จะ

แสดงผลทแตกตางกน ตกท main Navigation

การลบเมน

26

ถาหากเราตองการลบเมนทไมไดใชงานแลวออกจากระบบ สามารถท าไดดงน

1. เขาไปทหนาเมน ใหคลกแทบ จดการทอย

2. คลกท แกไข ของเมนทอยของ theme ทตองการลบ

3. จะแสดงรายการโครงสรางเมนเหมอนตอนทสรางเมน ใหคลกท ลบเมน

27

4. จะแสดงหนาตางถามความยนยนการลบ ใหคลก ปมตกลง

ประเภทของรายการเมน

กอนทเราจะสรางเมนนน เราควรจะท าความรจกกบประเภทของรายการเมนกนกอน ซงม

อย 3 ประเภทดวยกน

1. หนา (page) : เปนรายการเมนทเชอโยงกบหนาเพจ (page,post)

2. ลงค (Link) : เปนการรายการเมนทเชอมโยงกบเวบไซตอนๆภายนอก

3. หมวดหม (Category) : เปนรายการเมนทดงเอาหมวดหมมาใชเปนเมน

สรางรายการเมนประเภท “หนา”

ส าหรบรายการเมนประเภท “หนา” เปนการสรางเมนลงคดง post จากหมวดหมทมใน

เวบไซต โดยมขนตอนดงน

ขนตอนท 1 การสรางเมน

1. คลกทเมน เมนในรปแบบบลอก

2. คลกท สรางเมนใหม

3. ก าหนดชอเมน ในทนคอ ทดสอบ 1

28

4. คลปปม สรางเมน

5. คลกทรายการเมนทตองการ

6. จะแสดงรายละเอยดของรายการเมนนน ใหคลกท ลบออก

7. คลกทรายการเมนทตองการแกไข

8. แกไขรายละเอยดทตองการ โดย URL คอ URL ของเวบไซต สวนปายชอเมน

คอ ชอทจะแสดงเปนรายการเมน

29

9. แดรกเมาสลากยายเมนไปยงล าดบเมนทตองการแสดงในทนล าดบแรก

10. คลกปม สรางเมน

ขนตอนท 2 การตงคาแสดงเมน

1. คลกตวเลอกทอย theme ทจะใหแสดงเมนใน theme ซงแตละ theme จะ

แสดงรายการแตกตางกน

2. คลกปม บนทกเมน

เมอเปดหนาเวบไซตจะแสดงรายการตามเมนทก าหนด ดงภาพ

30

7. Widget อานวา วดจท เปนลกษณะโปรแกรมเสรมขนาดเลกทชวยเพมประสทธภาพการท างาน

ใหกบเวบไซต เชน เครองมอแปลภาษา เปนตน หรอเปนลกษณะการดงขอมลขาวสารท

อพเดตบอยๆ จากเวบไซตอนมาแสดงผลบนเวบไซตของเรา เชน widget ราคาน ามน ,

พยากรณอากาศ, ขาว เปนตน

แนะน า widget ทนาสนใจ

แปลบทความเปนภาษาทตองการดวย GTranslate

GTranslate เปนวดจททใชส าหรบแปลบทความทงหนาเวบไซตใหเปน

ภาษาทตองการ สามารถดาวโหลดวดจทนโดยคนหาในเวบ WordPress ตามขนน

31

1. ใหเขาเวบ wordpress.com

2. คนหาทชองคนหา GTranslate

3. ท าการดาวโหลดมาเกบไวทเครอง

4. จากนนใหอพโหลดไปยงเวบไซตของเราเอง โดยไปทเมน ปลกอน > เพม

ปลกอนใหม >อพโหลดปลกอน > เลอกไฟลปลกอนทโหลดมา จากนนให

กดทเปดใชงานปลกอน

ขนตอนท 1 ก าหนดคาใหก าวดจทตวน โดยท ไปทตงคาเลอก GTranslate

ก าหนดคาตางทส าคญใหกบ GTranslate

▪ Translation : เลอกวธการแปลภาษา

▪ Default language : ก าหนดภาษาหลกของเวบ

▪ Open in new windows : ก าหนดใหแสดงธงชาตของภาษาทเลอก

▪ Show flags : ก าหนดใหแสดงธงชาตของภาษาทเลอก

▪ Flag size : เลอกขนาดของธงชาตของภาษา

▪ Flag languages : เลอกธงชาตทภาษาตองการ

▪ Shows dropdown : ก าหนดใหแสดงชอภาษาแบบรายการใหเลอก

▪ Dropdown languages : เลอกชอภาษาทจะแสดงแบบรายการใหเลอก

32

ขนตอนท 2 ก าหนดต าแหนงแสดง widget

1. คลกทเมน widgets ใน รปแบบบลอก

33

2. จะปรากฏกรอบปลกอน GTranslate ดงภาพใหแดรกเมาสลากยายกรอบ

GTranslate มาวางในดาน side area โดยแดรกเมาสลากยายต าแหนงวาง

ไดตามตองการ

3. คลกลกศรทกรอบ GTranslate เพอแสดงการตงคาวดจท

4. ทชอง title ใหก าหนดชอทแสดงหวกรอบวดจท

5. คลกทปม บนทก

34

6. เมอเปดเวบไซตจะแสดง widget GTranslate ตามทเราก าหนดไว

แชรบทความไปยง Social Network ดวย Social web Link

Social web link เปนวดจททใชส าหรบสรางปมแชรเวบไซตไปยงเวบไซต social ตางๆท

ตองการ สามารถดาวโหลดวดจทนโดยคนหาจากเวบ wordpress.com หรอ คนหาในหนาเพม

ปลกอนไดเลย

35

1. ใหเขาเวบ wordpress.com

2. คนหาทชองคนหา Social Web Link

3. ท าการดาวโหลดมาเกบไวทเครอง

4. จากนนใหอพโหลดไปยงเวบไซตของเราเอง โดยไปทเมน ปลกอน > เพม

ปลกอนใหม >อพโหลดปลกอน > เลอกไฟลปลกอนทโหลดมา จากนนให

กดทเปดใชงานปลกอน

ขนตอนท 1 ก าหนดคาให widget

1. คลกเมน Social Web Link setting ใน ตงคา

2. คลกแทบ Default Social sites

3. เลอกเวบไซต social และก าหนดคาใหกบ Social Web Link ทตองการ

4. คลกแทบ Additional Settings

5. ท icon size ใหเลอกขนาดของไอคอน Social ทตองการแสดง

6. ท Display Style ใหเลอกลกษณะแนวการแสดงไอคอน

▪ Horizontal

▪ One Vertical Column with no names : แสดงเฉพาะไอคอนใน

แนวตง 1 คอลมน

36

▪ One vertical Column with names : แสดงไอคอนพรอมตงชอใน

แนวตง 1 คอลมน

▪ Two vertical Column with no names : แสดงเฉพาะไอคอนใน

แนวตง 2 คอลมน

▪ Two vertical Column with names : แสดงไอคอนพรอมชอใน

แนวตง 2 คอลมน

7. คลกปม save settings

ขนตอนท 2 ก าหนดต าแหนงแสดง widget

8. สรางหนา page

หนา page เปนลกษณะบทความทไมคอยมการเปลยนแปลงเชน หนาตดตอ หนาเกยวกบ

เปนตน ซงหนาเหลานจะไมมหมวดหมใดๆและไมสามารถก าหนดค าส าคญได โดยปกต

หนา page จะไปปรากฏอยตรงสวนของเมนหลก ดงนนจะตองสรางเมนหลกขนมากอนจง

จะแสดงหนา page ทสรางขนได

การจดการหนา page

1. คลกทเมน หนา > หนาทงหมด

37

สรางหนา page ใหมในเวบไซต

ส าหรบวธการสรางหนา page จะคลายกบการสราง post ดงน

1. คลกเมน หนา > เขยนหนาใหม (หรอคลกเมน > หนาทงหมด แลวคลกทปม

เขยนหนาใหม)

2. ก าหนดรายละเอยดตางๆดงน

▪ ชอ page : เมอก าหนดชอหนา page แลวจะปรากฏ URL (ลงคถาวร)

ใหโดยอตโนมต โดยชอหวขอไมควรยาวเกนไปเพราะจะตองไปปรากฏ

เปนชอเมน

▪ เนอหา : กรอกรายละเอยดตางๆ

▪ รปพเศษ : เลอกรปประจ าตวส าหรบบทความ

38

3. เมอก าหนดเสรจแลวใหคลกปม เผยแพร

การแกไขหนา page

หนา page ทสรางแลวหากตองการแกไขเนอหาหรอปรบแตงเนอหาหรอคารายละเอยด

ตางๆใหกบหนา page สามารถเลอกแกไขได 2 รปแบบ ดงน

แกไขอยางเรว

การแกไขอยางเรวน จะสามารแกไขไดเฉพาะชอบทความ หมวดหม และวนเวลาท

เขยนบทความ สวนเนอหาไมสามารถแกไขได สามารถท าไดดงน

39

1. คลกท แกไขอยางเรว ของหนา page ทตองการแกไข

2. จากนนใหแกไขชอหวขอ วนเวลาบทความ หรอเลอกเทมเพลต ตามตองการ

3. เมอเสรจแลวใหคลกปม อปเดต

แกไขทงหมด (แกไข)

ส าหรบวธนสามารถแกไขรายละเอยดของหนา page ไดทงหมด สามารถท าไดดงน

1. คลกท แกไข ของหนา page ทตองการแกไข

2. จากนนใหแกไขรายละเอยดบทความตามตองการ

3. เมอเสรจแลวใหคลกปม อปเดต

ลบหนา page ทไมตองการ

ส าหรบหนา page ทไมตองการหรอไมไดใชงานหรอไมตองการเผยแพรแลว เราสามารถ

ลบหนา page ออกได ซงการลบจะแบงออกเปน 2 ประเภทดวยกน คอ ลบแบบชวคราวโดย

40

เกบไวในถงขยะ (สามารถน ากลบมาใชได) และลบออกจากเวบไซต (ไมสามารถน ากลบมา

เผยแพรได)

ลบหนา page แบบชวคราว

การลบแบบชวคราวจะเปนการยายหนา page ไปเกบไวในถงขยะเมอไมตองการ

เผยแพร กอนจะตดสนใจลบออกจากเวบไซตจรง สามารถท าไดโดยคลกทถงขยะ ของหนา

page ทตองการลบ

9. สรางบทความ

สรางบทความใหม

1. คลกท เรอง > เขยนเรองใหม

ลบชวคราว

41

2. ใสชอเรอง ,ใสเนอหา

เพมรปภาพในบทความ

1. กดท >> เพมสอ

2. ใสไฟลสอ หากตองการอปโหลดรปจากเครองใสบนเวบไซตใหกดทค าวา อปโหลดไฟล

แลวสามารถดงไฟลรปลงในพนทสขาว หรอ กดทเลอกไฟล แลวกดท ใสไฟลลงในเรอง

42

หากตองมไฟลอยในเวบไซตอยแลวใหกดทค าวา คลงไฟลสอ แลวเลอกรปท

ตองการ แลวกดท ใสไฟลลงในเรอง

หากตองการใสรปภาพจากลงค url ดานนอกใหกดทค าวา ใสไฟลจาก URL ใส

ลงครปภาพ แลวกดท ใสไฟลลงในเรอง

43

ตวอยางลงครปภาพ : https://cdn.pixabay.com/photo/2016/04/15/20/08/fish-1331816_960_720.png

เพมขอความในบทความ

รปแบบขอความ

รปแบบตวอกษร B ตวหนา I ตวเอยง

รายชอแบบหวขอ และ รายชอแบบตวเลข

44

จดขอความ ชดซาย ตรงกลาง ชดขวา

เพมลงคแกไขลงค เอาลงคออก

ขดกลางตวอกษร

เสนแนวนอน

สตวอกษร

วางเปนขอความจากตนฉบบ

ลางรปแบบ

ตวอกษรพเศษ

ลดยอหนา เพมยอหนา

ยอนกลบ ถดไป

45

เพมลงคในบทความ

กรณทตองการลงคไปยงเวบอนหรอภายในเวบของเราเอง ซงสามารถท าไดดงน

1. สรางขอความทตองการลงค (เชอมโยง)

2. คลมด าขอความ

3. เลอกท เพอเพมลงคลงไปในขอความ

4. ใสลงค แลวกด enter

จะไดแบบน

เพมวดโอลงในบทความ

กรณทตองการเพมวดโอจาก YouTube หรอ เวบอน สามารถท าไดโดยวธดงน แต

อาจจะมความซบซอนเลกนอย เพราะตองคดลอกโคดจากเวบ YouTube

1. เขาเปนทวดโอทเราตองการจากเวบ YouTube

2. แลวใหกดท แชร

46

3. แลวกดท ฝง

4. จากนนใหคดลอกโคดทแสดงมาใสเวบไซตของเรา

47

5. ในเวบไซตของเรา ใหกดท ตวอกษร จากหนาทเราก าลงสรางบทความ

6. วางโคดทคดลอกมาลงในบรรทดสดทายของขอความทมอย

7. จากนนใหกดกลบมาท เสมอนจรง

48

8. หากตองการใหวดโออยตรงกลางบทความสามารถท าไดโดยใสแทกในหนา

ตวอกษร หนาทวางโคด <center>โคดวดโอ</center> <center><iframe src="https://www.youtube.com/embed/3ysgcha8z4w" width="560"

height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe></center>

49

หนาทท าการทดสอบ

50

------ END-------

พงษศธร เชดสม

www.naygho.org

fb.com/k.naygho

pongsathorn@naygho.org