การสร้างและบริหารจัดการ Website ด้วย Wordpress · มีอยู่3 วิธีในการใช้งาน WordPress

ศนยคอมพวเตอร มหาวทยาลยขอนแกน

การสรางและบรหารจดการ

Website ดวย Wordpress กตตพนธ ศรศกดา

สารบญ

แนะนา Wordpress....................................................................................................................................................... 1

WordPress มการทางานอยางไร .................................................................................................................................. 2

การตดตงและใชงาน XAMPP ..................................................................................................................................... 3

การสรางฐานขอมลเพอตดตง Wordpress ................................................................................................................ 7

การตดตง Wordpress ................................................................................................................................................... 9

การเขาใชงาน Wordpress .......................................................................................................................................... 13

สวนประกอบของ Wordpress.................................................................................................................................... 14

การใชงานเมนเรอง (Posts) ........................................................................................................................................ 15

การเพม หมวดหม.................................................................................................................................................. 16

การเพมบทความหรอการเขยนเรองใหม ............................................................................................................... 17

การใชงาน ไฟลสอ (Media) ...................................................................................................................................... 19

การใชงานเมน หนา (Pages) ...................................................................................................................................... 20

สวนใชงานเมน Comments ........................................................................................................................................ 21

สวนใชงานเมน Appearance หรอสวนกาหนดรปแบบบลอก ................................................................................... 22

การปรบแตงธม ......................................................................................................................................................... 25

การเพม User และกาหนดสทธตางๆ ......................................................................................................................... 28

การตดตง ใชงานปลกอน (plug-in) ............................................................................................................................ 30

ปลกอน Contact Form ........................................................................................................................................... 30

Facebook Like Box Plugin Widget ....................................................................................................................... 33

ห น า | 1 การสรางและบรหารจดการ Web site ดวย Wordpress

แนะนา Wordpress

WordPressเปนเครองมอทชวยในการเขยนเวบบลอกอกตวหนงซงจรงๆแลวมโปรแกรมทชวยเขยนบลอก

อยมากมายWordPressเปนอกหนงตวทไดรบความนยมสงโดยWordPressมการแยกใหผใชงานนาไปใชไดสองสวน

คอ

1. WordPress.com สวนนผใชงาน สามารถสมครสมาชก ใชงานบรการของWordPressไดทนทไมม

คาใชจายโดยจะไดใชระบบWordPressอยางสมบรณและสมาชกจะไดชอ http://yourname.wordpress.com ในการ

เผยแพรเวบไซต

2. WordPress.org สวนนจะเปนเวบทใหบรการดาวนโหลดโคดสาหรบนาไปตดตงบน Serverอนๆเอางายๆ

คอสาหรบผทมความชานาญตองการนาแกนหลกของWordPressไปวางบนพนทของตนเองซงขอดกคอการทางานท

รวดเรวปรบแตงไดดยงขน

Wordpress คอโปรแกรมชนดหนงทมระบบจดการเนอหาภายในเวบอยางงาย หรอทเรยกกนวา Contents

Management System(CMS) เชน PHP Nuke, Joomla, Mambo, Oscommerce, Xoopsเปนตน สามารถดรายละเอยด

เพมเตมเกยวกบ CMS ไดท www.CMSThailand.com

Wordpressเปน CMS ประเภท Blog ซงพฒนาขนโดยภาษา PHP และทางานบนฐานขอมล MySQL ภายใน

สญญาอนญาตใชงานแบบ General Public License(GNU) มเวบไซตหลกอยท http://wordpress.org/ และภาษาไทย

ท http://th.wordpress.org/

มอย 3 วธในการใชงาน WordPress เพอสรางและดแลบลอก

1. ใชบรการท WordPress.Com วธนเปนวธทงายและเรวทสดในการทจะมบลอกเปนของตนเองคณสามารถใช

งานไดอยางเตมฟงกชนทมแตคณจะไมสามารถปรบแตงคณลกษณะทเดนหรอตดตงปลกอนของ

WordPressเพมเตมได

2. ตดตงบน Hosting คอคณจะตองเชา host ทมฐานขอมล MySQL ดวยรวมทงจดโดเมน เพอทาบลอกในชอ

โดเมนของคณเอง หรออาจจะใชแบบ Sub-domain กไดถาไมอยากเสยเงน กอาจจะหา host ฟร ๆ ทรองรบ

PHP และ MySQL โดยชอทไดเปน Sub-domain ของ host ฟรนนกไดการตดตงในลกษณะนจะทาใหคณ

สามารถตดตงปลกอน ปรบแตงคณลกษณะตางๆ ของWordPressไดตามความตองการของคณเอง

3. ตดตงบนเครองของคณเอง คอตดตงโปรแกรมททาใหเครองของคณเปน Web Server เชนXampp, Wamp,

AppServ หรอ WM Server Toolsเปนตน แลวตดตง WordPressทดสอบการใชงานตาง ๆเมอคลองแลวก

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

เขามาอานบลอกของคณ หรอจะตดตงบลอกในรปแบบของอนทราเนตกไดอกเชนกน


WordPress มการทางานอยางไร

WordPress ใชคาสง PHP บน Web Server เพอตดตอสอสารกบฐานขอมล MySQL ในขนตอนการตดตง

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

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

ในความเปนจรงแลว เนอหาของบลอกคณทงหมด ถกเกบไวในไฟลฐานขอมล MySQL ในการแสดงเนอหาของ

บลอกและการบรหารสวนตาง ๆ ของหนาจอนน WordPress ใชไฟลธม (theme) ซงบรรจไปดวยแมแบบสาหรบ

แสดงขอมลชนดตาง ๆ และเพจ (pages) ไฟลขอความเหลานจะประกอบไปดวยโคด PHP, XHTML และ CSS เพอ

ใชในการควบคมการแสดงผลบทความบนทหนาเวบ

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

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

เพมคณลกษณะเดนๆทนาสนใจเขาไปไดสวนประกอบของการแสดงผล (Page Layout)

การแสดงผลของบลอก WordPressมความแตกตางกนตามธม (Themes) ทตดตงซงธมจะเปนตวกาหนดการ

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

บลอกทวไป


การตดตงและการใชงาน XAMPP

1. ทาการดาวนโหลดซอฟแวร XAMPP ตามระบบปฏบตการของเครองทใชท

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

2. ทาการตดตงโปรแกรม

3. ทาการเลอก Components ตามตองการ

คลก

คลก


4. เมอตดตงโปรแกรมเสรจเรยบรอยใหเขาไปท Directory ของโปรแกรมทไดทาการตดตง

5. จากนนเปดโปรแกรม xampp-control.exe ขนมาเพอเรยกใชโปรแกรม

6. ทาการเปดใชงานใน 2 สวนหลกๆ โดยการกดปม Start ท Apache และ MySQL

คลก


7. จากนนทาการทดสอบ Web Server พมพ localhost แลวกด Enter ดงตอยางรปดานลาง

8. ทาการเปลยน password ของฐานขอมล Mysql โดยเขาไปทเมน Security

คลก

คลก


9. คลกทลงก http://localhost/security/xamppsecurity.php เพอตงคา password ใหม

10. ตง password ใหม แลวบนทกทปม Password changing

*หมายเหต จา password นไวเพอใชในการตดตง wordpress ตอไป

คลก

ใส password

ทตองการ

คลก


การสรางฐานขอมลเพอตดตง Wordpress

1. ทาการสรางฐานขอมลไว เพอใชในการตดตง Wordpress โดยพมพ localhost/phpmyadmin

2. ทาการ Login ใสชอผใชเปน root และรหสผานตามทตวเองตงไว

3. สรางฐานขอมลโดยมขนตอนดงน

(1) คลกทเมน ฐานขอมล

(2) ตงชอฐานขอมลเชน wordpress

(3) เลอกการตรวจทานเปน utf8_unicode_ci

(4) คลกบนทกทปม สราง

1

3 2 4


4. เมอสรางเสรจแลวจะมชอฐานขอมลทเราสรางขนมาในเมนดานซายดงตวอยางในรปดานลาง


การตดตง Wordpress

เรมดวยการโหลดไฟลตดตงเวรดเพรสภาษาไทยรนลาสดท http://th.wordpress.org

นาไฟลตดตงทดาวนโหลดมา แตกไฟลซบออกมาใน directory XAMPP/htdocs

เขาไปท http://localhost/wordpress จะพบวาหนาเวบเปนแบบน ใหทาตามขนตอน

คลก

คลก


เตรยมขอมลรายละเอยดทการตดตงตองการใหพรอม

ใสขอมลเพอเชอมตอการตดตงเวรดเพรสและฐานขอมล

คลก

2.คลก

1.กรอกรายละเอยด


เชอมตอสาเรจแลว กเรมทาการตดตง

ใสรายละเอยดของเวบเวรดเพรสททาการตดตง

คลก

1.กรอกรายละเอยด

2.คลก


ตดตงสาเรจแลว

เมอตดตงสาเรจ ระบบจะพาคณมายงหนา login เพอเขาสระบบและหนาจดการของเวรดเพรสเพอตงคาหรอเขยนเวบ


หนาเวบททาการตดตงสาเรจแลวจะอยท http://localhost/wordpress ตามทเราสรางไว

การเขาใชงาน Wordpress

ในกรณทจาลองเครองเปน Server ใหพมพ https://localhost/wordpress/wp-adminในชอง URL ของ browser จะพบ

หนาจอใหใส Username และ Password

ภาพแสดงหนาจอ Login


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

สวนประกอบของ Wordpress

- หนาควบคม (Dashboard) คอ หนาขอความบอรด

- เรอง (Posts) คอ การจดการ Content

- ไฟลสอ (Media) คอ การจดการไฟล Media

- หนา (Pages) คอ การจดการ Pages

- ความเหน (Comments) คอ การจดการการโพสกลบ

- รปแบบบลอก (Appearance) คอ การจดการรปแบบเพจ

- ปลกอน (Plugin) คอ ระบบเสรมสาหรบจดการ Wordpress

- ผใชงาน (User) คอ การจดการผใชงาน

- เครองมอ (Tools) คอ เครองมอระบบ

- ตงคา (Settings) คอ การจดการทวไป


การใชงานเมนเรอง (Posts)

เมนเรอง จะประกอบไปดวย

- เรองทงหมด (All Posts) คอ บทความทถกโพสทงหมด

- เขยนเรองใหม (Add New) คอ การเพมโพสใหม

- หมวดหม (Categories) คอ การแบงกลมของบทความ

- ปายกากบ (Post Tags) คอ การตดแทกบทความอนๆเขามาทบทความทเราโพสขน


การเพม หมวดหม

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

บทความคอการแยก ประเภทแตละบทความใหเปนหมวดหม เชน ประเภทบทความ”ขาวประชาสมพนธ” , ประเภท

บทความ“รางวลทไดรบ” เมอไดกลมบทความแลวกมาเพมกลมบทความโดยไปทเมน หมวดหม

ในหนาจอ Categories ใหทานไปท Add New Category เพมรายละเอยดดงน

1. ชอใสชอของ Categories ลงไป

2. Slugใสขอความอางองลงไป แตถาหากปลอยวางไว ระบบจะนาขอความในชอง Name มาใสให

อตโนมต

3. หลกเลอก None

4. คาขยายความใสรายละเอยดเกยวกบ Categories หรอหมายเหตตางๆเมอใสขอมลครบแลวใหกด

ปม Add New Category ดานลาง

1

2

3

4


การเพมบทความหรอการเขยนเรองใหม

เปนการเพมเรองหรอบทความทจะแสดงบนหนาเวบ สามารถกาหนดหมวดหมของเรองหรอบทความนน

ได ขนตอนการเพมมดงตอไปน

1. คลกทเมน “เรอง”

2. คลกทเมน “เขยนเรองใหม”

1

2


1. สถานะ

- ฉบบรางคอ บทความทเปนโครงราง ตองมผใชทสทธอนญาต อนญาตใหบทความของเราโพสได

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

- รอคอยการตรวจสอบคอบทความแบบรอการตรวจทาน เชนเดยวกบแบบ ฉบบรางตองมผตรวจทาน

บทความกอน

2. เหนได (Visibility)มรายละเอยดดงน

- สาธารณะ (Public)คอการแสดงบทความขนเพจตามปกต แตถาหากเลอก เปลยนใหเรองนเปนหนา

แรก (Stick this post to the front page )ขอความจะถกนาไปเกบไวในสวนของ Sticky ของ All Posts

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

- รหสผานปองกน (Password Protected)บทความทตองใส Password เพอเขาดบทความ

- สวนตว (Private)คอบทความทเปนสวนตวเขาดไดเฉพาะผโพสเทานน

3. เผยแพรทนท (Publish immediately)

- วนทของวนทแผยแพรเรอง

2

1

3


การใชงาน ไฟลสอ (Media)

คาวา ไฟลสอ (Media) กคอ สอทเปน ไฟลรปภาพ ไฟลวดโอคลป ไฟลเสยง และอนๆ

เมนไฟลสอ จะประกอบไปดวย คลงไฟลสอ, เพมไฟลใหม ในสวนของ คลงไฟลสอคอสวนทแสดงไฟล

สอ ทงหมดทถกใชงานภายในเวบ และสามารถจดการ เพม, ลบ, แกไข และดรายละเอยดของไฟลไดภายในนตาม

ภาพตวอยางตอไปน

คลกเพอเพมไฟลสอ


การใชงานเมน หนา (Pages)

Pages คอ หนาจอแตละหนาทอยในเวบนนๆ แสดงรายละเอยดตางๆ ทเราตองการจะแสดง แตละเวบอาจจะ

มาหลายหนาจอ การทจะจดการเนอหาและรายละเอยดในหนาจอ สาหรบ WordPressแบงออกเปนสองเมน ดงน

1. หนาทงหมด (All Page)คอ สวนทรวมเอาหนาจอทมการสรางขนมาใชงานทงหมดเอาไวในหนาจอน

2. เขยนหนาใหม (Add New) คอ สวนของการสรางหนาจอใหม สามารถสรางไดโดยไปทเมน หนา -->เขยน

หนาใหมหรอ กดปม เขยนหนาใหมในสวนบนของหนาจอ หนาทงหมด (All Pages)กได เมอเขาสหนาจอ

เขยนหนาใหมจะปรากฏหนาจอและตองกรอกรายละเอยดดงภาพตอไปน

คลกเพอเพมหนา


สวนใชงานเมนความเหน (Comments)

คอสวนทแสดงความคดเหนในสวนตางๆของเนอหาภายในเวบ มดงน

- ทงหมด คอ แสดงความคดเหนทงหมด

- รอคอยการตรวจสอบ คอ ความคดเหนทรอคอยการตรวจสอบจากผดแลระบบ

- อนมต คอ ความคดเหนทผานการอนมต

- ความเหนสแปม คอ ความคดเหนทเปนแสปมตอระบบ

- ถงขยะ คอความคดเหนทไดทาการลบหรอยายไปเกบยงถงขยะ


สวนใชงานเมน Appearance หรอสวนกาหนดรปแบบบลอก

ในสวนนเปนการจดการรปแบบในการแสดงผล เปนสวนใหญในเวบ แตจะขนอยกบรปแบบทเราเลอกวาจะ

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

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

2. ไปทเมน Theme

1

2


3. สามารถเขาไปดาวนโหลด Theme ไดท http://wordpress.org/themes

4. ใหทาการดาวนโหลดโดยคลกทปม Download ดงตวอยางภาพดานลาง

คลก


5. เมอไดไฟล Theme นาสกล .zip มาแลวใหไปทหวขอ ตดตง Themes

6. ไปทหวขอยอย อปโหลด

7. กดทปม เรยกด แลวคนหาไฟล .zip ทตองการตดตง

8. กดทปม ตดตงตอนน

9. เมอระบบตดตง Theme เสรจสมบรณจะมการแจงวา "Theme installed successfully." ใหกดท Activate เพอ

ใชงาน Theme ทตดตง

1

2


การปรบแตงธม

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

คมอนจะเปนตวอยางการปรบแตงธมชอ Frontier ซงดาวนโหลดมาจาก http://wordpress.org/themes/frontier

ขนตอนในการปรบแตงมดงน

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

2. ไปทเมน Frontier Options ดงแสดงในรปตวอยางดานลาง

1

2


3. สวนประกอบเมนตางๆของธมประกอบดวย

(1) Display คอ เมนปรบแตงคาพนฐานหนาเวบ เชน โลโกเวบ เปนตน

(2) Layout คอ เมนปรบแตงเคาโครงของเวบ

(3) Blog View คอ เมนปรบแตงการแสดงผลของหนารายการ

(4) Single View คอ เมนปรบแตงการแสดงหนาเนอหา

(5) Widget คอ เมนปรบแตงเคาโครงของสวนเสรม

(6) Color คอ เมนปรบสของเวบ

(7) Custom CSS คอ เมนปรบโคด CSS ของธม

1 2 3 4 5 6 7 8


การปรบแตงเมน

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

2. ไปทเมน เมน

3. ใหทาการสรางเมนใหม โดยคลกทปม สรางเมนใหม

4. สามารถเลอกเมนจากหนาทเราสรางไว ลงกและหมวดหม

5. สามารถปรบตาแหนงเมนโดยการลากเพอจดตาแหนง

6. เสรจแลวใหทาการคลกทปม บนทก

2

1

3

4

5

6


การเพม User และกาหนดสทธตางๆ

การเพม User เพอใหสามารถเขามาใชงานใน เวบได สามารถทาไดดงน

1. เขาไปทเมน ผใชงาน

2. ถาตองการเพมผใชงานใหม ไปทปม เพมผใชใหม

3. จะมฟอรมกรอกขอมลผใชงานดงตวอยางภาพดานลาง

1

2


สทธหรอบทบาทของผใชงานมดงตอไปน

1. สมาชกรบขาว (Subscriber) คอ สมาชกทวไป สามารถเขาใชงานไดเฉพาะสวนของเมน Profile จะสามารถ

แกไขไดเฉพาะขอมลสวนตวของผใชงานนน

2. ผควบคมเวบ (Administrator) คอ ผดและระบบ สามารถจดการไดทกอยางภายใน Wordpress

3. ผตรวจทาน (Editor) คอ บรรณาธการเวบ สามารถเขาใชงานเมน Posts, Media, Links, Pages, Comments

และ Profile ไดอยางเตมรปแบบ และจะมองเหนเมน Tools แตไมสามารถจดการรายละเอยดได

4. ผเขยน (Author) คอ ผเขยนบทความ สามารถใชงานเมน Posts ไดแตไมสามารถ ปด Comments ได

สามารถใชงานเมนอยาง Media, Comments, Profile ไดปกต และจะมองเหนเมน Tools แตไมสามารจดการ

อะไรได

5. ผสนบสนน (Contributor) คอ ผสนบสนน สามารถ Posts บทความไดแตตองผานการตรวจทานจาก

ผใชงานทมสทธอนญาตกอนบทความนนถงจะแสดงบนเวบได มสทธ Comments และแกไข Profile ได

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


การตดตง ใชงานปลกอน (plug-in)

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

ปลกอนทเราตองการได เชน ปลกอนระบบลงทเบยน ปลกอนระบบฟอรมตดตอเรา เปนตน

1. ปลกอน Contact Form มขนตอนและการตดตงดงน

1) เขาไปทเมน ปลกอน

2) ในชองคนหาปลกอนใหคนหาดวยคา “contact form”

3) คลกปม คนหาปลกอน

4) จะมรายชอปลกอนทพบ ใหเลอกทรายการ Easy Contact Form คลกทปม ตดตงตอนน

1

2

4

3


5) เมอทาการตดตงแลว มเมน Contact Form ขนมา เมอคลกเขาไปแลวจะพบหนาจดการ ใหทาการ Copy

โคด Form short code ดงแสดงในภาพดานลาง

6) ใหทาการสรางหนาใหมโดยดงน

(1) ไปทเมน หนา

(2) คลกทเมน เขยนหนาใหม

(3) ตงชอหนาเปน “ตดตอเรา” หรออะไรกได

(4) วางโคดท Copy จากขนตอนกอนหนาลงใหเนอหา แลวบนทกทปม เผยแพร

2 คดลอก short code

1

2

3

4

1


7) ในหนาเวบ ตดตอเรา จะไดแบบฟอรมสาหรบกรอกตดตอเรา ดงแสดงในรปตวอยางดานลาง


2. Facebook Like Box Plugin Widget

เปนปลกอนเพมกลองถกใจแฟนเพจของ Facebook มขนตอนตดตงและใชงานดงนคอ

1) ไปทเมนสาหรบตดตงปลกอนและคนหาปลกอนชอ facebook like box

2) คลกเลอกทปม ตดตงตอนน ในรายการ Facebook Like Box Widget

1

2


3) สาหรบปลกอนนจะไมมเมนใหจดการเพมขนมา จะสงเกตจากชอทมคาวา widget ของชอปลกอนน

เพราะฉะนนปลกอนนสามารถจดการไดจากเมน widget

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

(2) คลกทเมน Wigets

(3) คลกทแถบ Wiget ชอ Facebook Like Box Widget

(4) เลอกตาแหนงของ widget น

(5) ทบนทกทปม เพม Widget

1

2

3

4

5


4) เมอเพม widget แลวจะเขามาทตาแหนงทเราเพม จากตวอยางจะอยในตาแหนง Sidebar-Right หมายถง

คอลมนดานขวาของหนาเวบ

(1) ใหคลกทแถบ Sidebar-Right

(2) คลกทกลอง widget Facebook Like Box Widget ใหใสรายละเอยดตางเขาไป

5) เมอเพมเรยบรอยแลว กลบมาดทหนาเวบจะพบกลองถกใจแฟนเพจ Facebook ขนมาในคอลมน

ดานขวาของเวบเรา ดงรปตวอยางดานลาง

2

1

Documents

การสร้างและบริหารจัดการ Website ด้วย Wordpress · มีอยู่3 วิธีในการใช้งาน WordPress