คู่มือ การสร้างเว็บไซต์ด้วย wordpress ·...

คมอการสรางเวบไซตดวย

WORDPRESS

คณะผจดท า นางสาวพชรดา บญจต, นางสาว อ าภา หวงผล นางสาววารณ ขนโท, นางสาว จราพรรณ ทองหนเอยด นางสาวณฐฐา วรบตร, นางสาวชลธชา พรมรตน, นายทกษณ ธระตา สาขาวทยาศาสตรทวไป คณะวทยาลยการฝกหดคร

คมอการสรางเวบไซตดวย WORDPRESS

คมอการสรางเวบไซตดวยWordPress จดท าโดย นางสาวพชรดา บญจต รหส 008 นางสาวอ าภา หวงผล รหส 019 นางสาววารณ ขนโท รหส 020 นางสาวชลธชา พรมรตน รหส 021 นางสาวจราพรรณ ทองหนเอยด รหส 029 นางสาวณฐฐา วรบตร รหส 035 นายทกษณ ธระตา รหส 040 ชนปท 4 สาขาวชาวทยาศาสตรทวไป คณะวทยาลยการฝกหดคร เสนอ อ.ดร. สไม บลไบ มหาวทยาลยราชภฏพระนคร ภาคเรยนท1 ปการศกษา 2559

คมอการสรางเวบไซตดวย WORDPRESS

ค าน า รายงานเรอง “คมอการใช WordPress” ฉบบน เปนสวนหนงของวชานวตกรรมและเทคโนโลยการศกษา รหสวชา 1032103 มจดประสงคเพอศกษาความรเกยวกบการใชงานบลอกเพอเผยแพรความรทางสอออนไลน ซงรายงานฉบบนมเนอหาเกยวกบ WordPressคออะไร WordPressเหมาะกบการใชงานแบบไหน การสมครขอเขาใชงานบลอก การเขาสหนาควบคม การใชงานเมนเรอง การใชงานเมนไฟล การใชงานเมนหนา การใชงานเมนความเหน และการใชงานรปแบบบลอก เพอใหสามารถเขาใจและใชงานWordpressเบองตนได หวงเปนอยางยงวารายงานเลมนจะกอใหเกดประโยชนตอการเรยนการสอน พชรดา บญจต และคณะ

คมอการสรางเวบไซตดวย WORDPRESS

สารบญ WordPress คออะไร……………………………………………………………………1 WordPress เหมาะกบเวบไซตแบบไหน…………………………………………….....2 การสมครเขาใชงานบลอก……………………………………………………………..3 การเขาสหนาควบคม…………………………………………………………………..8 การใชงานเมนเรอง……………………………………………………………………11 การเพมหมวดหม…………………………………………………………………12 การเพมบทความหรอการเขยนเรองใหม…………………………...…………….13 การใชงานไฟลสอ…………………………………………………………………….17 การใชงานเมนหนา…………………………………………………………………....18 การใชงานเมนความเหน………………………………………………………………20 การใชงานการรปแบบบลอก………………………………………………………….21 การปรบแตง.........................................................................................................22 การเปลยนภาษา............................................................................................................26 เอกสารอางอาง.............................................................................................................27

1

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

คมอการสรางเวบไซตดวย WORDPRESS

WordPress คออะไร

WordPress เหมาะกบการท าเวบไซตทกแบบ แตบางแบบนนเราอาจตองรลกซงหรอมพนฐานทางดานโปรแกรมเมอรดวย ดงนน ณ ทนเราจะขอพดในแงของ Beginner จรงๆ เพราะ CMS แตละตวนนกมจดเดนแตกตางการ เวบเหลานเปนเวบทเหมาะกบการใชงาน WordPress คะ 1. เวบบลอกเหมาะมากสดๆ เปน cms ทบลอกเกอรใชงานมากทสดในโลกเลยกวาได 2. เวบ Article เขยนบทความตางๆรววโรงแรม,รานอาหาร,งานฝมอ, แอปมอถอ ฯลฯ 3.เวบขาว เวบวาไรต การจดหมวดหมและแทก(Categories, Tags) ใน WordPress นนชวยไดงายมากๆ ธม Magazine กเยอะสดๆ เชนกน เวบขาวทไมใชส านกขาวโดยตรงกมกจะใช WordPress เพราะสามารถลดคาใชจายไดมากกวา 4. เวบ Portfolio มธมเกยวกบ Portfolio เยอะมากมายใหคณน าเสนอผลงานของคณไดอยางนาสนใจ 5. เวบบรษท มธมทดนาเชอถอ เปน Professional ใหเลอกมากมาย มเครองมอครบครนโดยเราไมตองจางออกแบบเพม 6. เวบไซต e-commerce ขายสนคาออนไลน โดยใชปลกอนเชน WooCommerce หรอ Easydigitaldownloads 7. นอกจากน WordPress ยงสามารถสรางเวบบอรด และเวบ community ไดดวย โดยใชปลกอนเชน bbPress 8. เวบไซตทตองการความแรงในดาน SEO เพราะ WP ถอวาเดนในเรองนมากๆ เขยนเลนๆ กตดผลการคนหาใน Google ได 9. เวบไซตทมหลายภาษา WordPress นนถกแปลทวโลกรวมทง ภาษาไทย และยงมปลกอนทชวยจดการเนอหาส าหรบเวบไซตทตองการใชหลายภาษาดวย เชน WPML, Polylang

WordPress เหมาะกบเวบไซตแบบไหน

2 คมอการสรางเวบไซตดวย WORDPRESS

3

1. เขาไปท www.wordpress.com แลวเลอก สรางเวบไซต

2. ก าหนดการจดท าเวบไซตเปนเรองเกยวกบอะไร เชน เลอก Education & Organization

ศลปะและบนเทง

ธรกจและบรการ

สขภาพ

ครอบครว,บานและวถการด าเนนชวต

การศกษาและการองคกร

การเขยนและหนงสอ

คมอการสรางเวบไซตดวย WORDPRESS

การสมครเขาใชงานบลอก

4

2. เลอก General Education & Organization

คมอการสรางเวบไซตดวย WORDPRESS

3. การก าหนดลกษณะของหนาแรก เชน A grid of my latest post

5 คมอการสรางเวบไซตดวย WORDPRESS

5. การก าหนดชอ ตงชอตามทตองการแตตองแตกตางลงทายดวย .wordpress.com แลวเลอก Select เชน Krugensci.wordpress.com

4. การเลอกธม เชน Revelar *เราสามารถเปลยนไปใชธมอนไดในภายหลงหรอสามารถขามขนตอนนไดโดยเลอก Skip for now ทอยดานลาง

6 คมอการสรางเวบไซตดวย WORDPRESS

6. เลอก Free Just get started

7. ใส Email address และ Password ตามล าดบ แลวเลอก Create My Account

7 คมอการสรางเวบไซตดวย WORDPRESS

8. ลอกอนเขาส E-mail ทใชในการสมคร เลอกขอความของ wordpress.com แลวเลอกConfirm now

9. หลงจากเลอกConfirm now จะปรากฎแทบใหมใหลอกอนเขาเวบ กรอกขอมลทใชในการสมคร

8 คมอการสรางเวบไซตดวย WORDPRESS

การเขาสหนาควบคม

1.หลงจากลอกอนเขาใชงานแลว รปแบบของบลอกจะมลกษณะน

2.คลกขวาทชอบลอก แลวเลอกเปดลงคในแทบใหม

9 คมอการสรางเวบไซตดวย WORDPRESS

2.เปดไปทหนาแทบใหม

3. พมพ /wp-admin/ แลวกด Enter

10 คมอการสรางเวบไซตดวย WORDPRESS

3. หลงจาก Enter แลวจะไดรปแบบหนาแบบน เรยกวา “หนาควบคม”

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

สวนประกอบของ Wordpress - หนาควบคม (Dashboard) คอ หนาขอความบอรด - เรอง (Post) คอ การจดการ Content - ไฟลสอ (Media) คอ การจดการไฟล Media - หนา (page) คอ การจดการ page - ความเหน (Comments) คอ การจดการโพสกลบ - รปแบบบลอก (Appearance) คอ การจดการรปแบบเพจ - ผใช (User) คอ การจดการผใชงาน - เครองมอ (Tools) คอ เครองมอระบบ - ตงคา (Settings) คอการจดการทวไป

11 คมอการสรางเวบไซตดวย WORDPRESS

การใชงานเมนเรอง

เมนเรองจะประกอบไปดวย - เรองทงหมด (All Post) คอ บทความทถกโพสทงหมด - เขยนเรองใหม (Add New) คอ การเพมโพสใหม - หมวดหม ( Categories) การแบงกลมของบทความ - ปายกบก า (Post tags) คอ การตดแทกบทความอนๆทเขามาทบทความทเราโพส

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

12 คมอการสรางเวบไซตดวย WORDPRESS

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

การโพสบทความควรทจะตองจดกลมของบทความกอนเพอความสะดวกในการจดการภายหลง การจดกลมบทความคอการแยก ประเภทแตละบทความใหเปนหมวดหม เชน ประเภทบทความ “เรองวทยๆ ” เมอไดกลมบทความแลว กเพมกลมบทความโดยไปทเมนหมวดหม

1

2

4

3

ในหนาจอเมนเรอง ใหเลอกหมวดหม ( Categories) แลสรายละเอยดดงน 1. ใสชอของหมวดหมลงไป 2. ปายก ากบหลกเลอก ไมม 3. รายละเอยดใสรายละเอยดเกยวกบหมวดหมหรอหมายเหตตางๆ 4.เมอใสขอมลครบแลว กด สรางหมวดหมใหม

13 คมอการสรางเวบไซตดวย WORDPRESS

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

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

หลกจากนนใสขอมลตางดงน 3.ใสหวขอทน 4.ใสเนอหารายละเอยด 5. แถบเครองมอ

5 3

4

14 คมอการสรางเวบไซตดวย WORDPRESS

*** แทรกไฟลสอ หากตองการแทรกไฟลสอเขามาใวในเนอหาสามารถท าไดโดย

1 1. คลกเพมสอ

2

3

2. เลอกไฟลสอทตองการทอยในคลงไฟลสอ ถาหากไมมไฟลสอในคลงไฟลสอสามารถอปโหลดไฟลไดโดยคลกทอปโหลดไฟลสอ 3. ใสไฟลลงในเรอง จะไดดงภาพดานลาง

15 คมอการสรางเวบไซตดวย WORDPRESS

6.ใสหมวดหม ในการณทไมใสหมวดหม บทความนนจะอยในหมวดหมทชอวาไมมหมวดหม

7. เผยแพร 7.1 สถานะ - ฉบบราง คอ บทความทเปนโครงราง - รอคอยการตรวจสอบให คอ บทความแบบรอการตรวจทาน 7.2 เหนได (Visibility) มรายละเอยดดงน - สาธารณะ(Public) คอ การแสดงบทความขนเพจปกต - รหสผานปองกน(Password Protected) คอบทความทตองใสPasswordเพอเขาดบทความ - สวนตว (Private) คอ บทความทเปนสวนตวเขาดไดเฉพาะผโพสเทานน

7.1

7.4

7.2

7.3

6

7.3 เผยแพรทนท (Publish immediately) วนทของวนทเผยแพร 7.4 คลกเผยแพรเพอเผยแพรบทความ

16 คมอการสรางเวบไซตดวย WORDPRESS

8. ดการเปลยนแปลง คลกดการเปลยนแปลงเพอดการเผยแพร

9.เนอหาจะแสดงผลในหนาเวบดงน

17 คมอการสรางเวบไซตดวย WORDPRESS

การใชงานเมนไฟลสอ

ค าวาไฟลสอ(Media)สอทเปนไฟลรปภาพ ไฟลวดโอคลป ไฟลเสยง และอนๆ เมนไฟลสอ จะประกอบไปดวย 1. คลงไฟลสอ คอ สวนทแสดงไฟลสอทงหมดทถกใชงานภายในเวบ และสามารถจดการเพมลบ แกไข และดรายละเอยดของไฟลได 2. เพมไฟลใหม

18 คมอการสรางเวบไซตดวย WORDPRESS

หนา(Page) คอ หนาจอแตละหนาทอยในเวบนนๆ แสดงรายละเอยดตางๆทเราตองการแสดง แตละเวบอาจจะมาหลายหนาจอ การทจดการเนอหาและรายละเอยดในหนาจอ ส าหรบ Wordpress แบงออกเปน 2 เมนดงน 1. หนาทงหมด (All Page) คอสวนทรวมเอาหนาจอทมการสรางขนมาใชงานทงหมดเอาไวในหนาจอน ค าสงยอยในการจดการหนาเนอหาประกอบดวย - ค าสง แกไข เพอเขาไปแกขเนอหา - ค าสง แกไขอยางรวดเรว เพอเขาสโหมดการแกไขเนอหา - ค าสง ถงขยะ เพอลบหนาทเลอก - ค าสง ด เพอแสดงผลหนาในโหมดผใช

การใชงานเมนหนา

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

19 คมอการสรางเวบไซตดวย WORDPRESS

2. เขยนหนาใหม (Add New) คอ สวนของการสรางหนาจอใหม สามารถสรางไดโดยไปทเมนหนา เขยนหนาใหม หรอกดปมเขยนหนาใหมในสวนบนของหนาจอ หนาทงหมด(All Page) กได เมอเขาสหนาจอเขยนหนาใหมจะปรากฎหนาจอและตองกรอกรายละเอยดคลายๆกบการเพมเรองใหม สวนประกอบของเมนเขยนหนาใหม 1. หวขอเนอหา 2. เนอหา 3. แถบเครองมอ 4. สถานะการเผยแพรเนอหา 5. ล าดบในการแสดงเนอหา ***สวนประกอบขอ 1,2,3,4และการแสดงผลในหนาเวบจะเหมอนกนกบการเขยนเรองใหม ***การแทรกไฟลสอในหนา ท าเหมอนกนกบการแทรกไฟลสอในเรอง (หนา14)

1

2 3

4

5

20 คมอการสรางเวบไซตดวย WORDPRESS

การใชงานเมนความเหน

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

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

21 คมอการสรางเวบไซตดวย WORDPRESS

การใชงานรปแบบบลอก

ในสวนนเปนการจดการรปแบบในการแสดงผลเปนสวนใหญในเวบ แตจะขนอยกบรปแบบทเราเลอกวาจะสามารถจดการในสวนใดไดบาง สวนนมชอเรยกวา Theme การตดตงและใชงานมขนตอนดงตอไปน 1. ไปทเมน รปแบบบลอก 2. ไปทเมน Theme 3. เลอก free เพอเลอก Theme ทไมมคาใชจาย 4. เลอก theme ทเราตองการ 5. เลอก ใชงาน เพอใช theme ทเลอก

5 2

3 4

1

22 คมอการสรางเวบไซตดวย WORDPRESS

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

ในสวนนเปนการจดการรปแบบในการแสดงผลเปนสวนใหญในเวบ เปนการออกแบบสวนตางๆของหนาเวบ ไมวาจะเปน พนหลง รปแบบตวอกษรตางๆของเวบ แตจะขนอยกบรปแบบทเราเลอกวาจะสามารถจดการในสวนใดไดบาง สวนนมชอเรยกวา “ปรบแตง” งานมขนตอนดงตอไปน 1. ไปทเมน “รปแบบบลอก” 2. ไปทเมน “ปรบแตง” จอจะแสดงแถบเมนตางๆทสามารถใชในการปรบแตงเวบของเราได จะเสดงการใชงานของแถบเมนทส าคญๆ ดงน

การปรบแตง

1 2

23 คมอการสรางเวบไซตดวย WORDPRESS

2.1 เลอก “อตลกษณเวบไซต” เพอปรบเปลยนโลโกของเวบไซต หรอการเปลยนชอหวขอเวบและค าโปรยซงเปนการใสชอรอง หรอค าจ ากดความของเวบไซต ดงภาพ - การใชงานเมน “รปโลโก” ท าไดดงน คลก “เลอกรปโลโก” > “อพไฟล ” > “เลอก” - การใชงานเมน “หวขอเวบ” ท าไดดงน ปอนชอทเราตองการเปลยน > “บนทก” - การใชงานเมน “ค าโปรย” ท าเชนเดยวกบ “หวขอเวบ”

1

รปโลโก

หวขอเวบ

ค าโปรย

24 คมอการสรางดวยเวบไซต WORDPRESS

2.2 เลอก “Colors & Backgrounds ” เพอปรบเปลยนสและพนหลงของเวบไซต ทงนการเปลยนสหรอพนหลงกขนอยกบธมทเราเลอกดวยวา มขอจ ากดของการเปลยนพนหลงหรอไม บางธมจะมพนหลงส าเรจรปใหเราเลอก บางธมกใหเราเลอกสพนหลงไดอยางอสระ จากเวบไซตตวอยาง มพนหลงส าเรจรปใหเลอกกสามารถใชงานไดโดย เลอกพนหลง > บนทกและเผยแพร

1

2

3

2.3 เลอก “Front” เพอปรบเปลยนลกษณะตวอกษรของเวบไซต ในสวนของหวเวบและตวอกษรในสวนตางๆของเวบ สามารถปรบขนาดได เพอเนนสวนทตองการใหโดดเดน ใชงานไดโดย เลอกFront > “บนทกและเผยแพร”

1

3

2

4

25 คมอการสรางเวบไซตดวย WORDPRESS

2.4 เลอก “ภาพสวนหว” เพอปรบเปลยนภาพสวนหวของเวบไซต ทงนการเปลยนภาพสวนหวกขนอยกบธมทเราเลอกดวยเชนกนวา มขอจ ากดของการเปลยนภาพหรอไม บางธมจะภาพใหเราเลอกอยแลว แตเรากสามารถอพโหลดรปภาพไดอยางอสระ จากเวบไซตตวอยาง มภาพใหเลอกกสามารถเลอกภาพมาใชงานไดหรอจะอพโหลดภาพทเราชอบมากได ใชงานไดโดย เลอกภาพ หรอ “เพมรปภาพใหม” > “บนทกและเผยแพร”

2

1

3

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

1 2

3

4

26 คมอการสรางเวบไซตดวย WORDPRESS

การเปลยนภาษา

ในกรณทเราตองการเปลยนภาษาของเวบไซต จากภาษาองกฤษเปนภาษาไทย ท าไดดงตอไปน 1. เขาหนาควบคมเพอเปลยนภาษาของ Wordpress โดยเขาเวบ https:// ชอเวบทตง .wordpress.com/wp-admin/ 2. คลกทแถบชวยเหลอ (help) “ ” 3. คลก “Account Settings” 4. คลกหาภาษาไทยในชอง “Interface Language” 5. คลก “Save Account Settings” เปนอนเสรจเรยบรอย 2

1

3

3

5

4

27 คมอการสรางเวบไซตดวย WORDPRESS

เอกสารอางอง

กตตพนธ ศรศกดา.2559.การสรางและบรหารจดการเวบไซตดวยWordPress. (ออนไลน).แหลงทมา :https://dorm.kku.ac.th/uploads/news/files/Wordpress.pdf 27 กรกฎาคม 2559 บญเลศ อรณพบลย.2559.เวบไซตรปแบบบลอกงายๆดวยWordPress.com. (ออนไลน).แหลงทมา:http://www.lib.buu.ac.th/webnew2/wp-content/uploads /2013/08/20130415-wordpress-com.pdf 27 กรกฎาคม 2559