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

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

WORDPRESS

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

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

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


ค าน า รายงานเรอง “คมอการใช WordPress” ฉบบน เปนสวนหนงของวชานวตกรรมและเทคโนโลยการศกษา รหสวชา 1032103 มจดประสงคเพอศกษาความรเกยวกบการใชงานบลอกเพอเผยแพรความรทางสอออนไลน ซงรายงานฉบบนมเนอหาเกยวกบ 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 เหมาะกบการท าเวบไซตทกแบบ แตบางแบบนนเราอาจตองรลกซงหรอมพนฐานทางดานโปรแกรมเมอรดวย ดงนน ณ ทนเราจะขอพดในแงของ 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

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

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

สขภาพ

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

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

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


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

http://www.worspress.com/

4

2. เลอก General Education & Organization


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


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

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


6. เลอก Free Just get started

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


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

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


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

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

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


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

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


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

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

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


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

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

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


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

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

1

2

4

3

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


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

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

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

5 3

4


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

1 1. คลกเพมสอ

2

3

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


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 คลกเผยแพรเพอเผยแพรบทความ


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

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


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

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


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

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

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


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

1

2 3

4

5


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

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

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


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

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

5 2

3 4

1


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

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

การปรบแตง

1 2


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

1

รปโลโก

หวขอเวบ

ค าโปรย

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

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

1

2

3

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

1

3

2

4


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

2

1

3

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

1 2

3

4


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

ในกรณทเราตองการเปลยนภาษาของเวบไซต จากภาษาองกฤษเปนภาษาไทย ท าไดดงตอไปน 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


เอกสารอางอง

กตตพนธ ศรศกดา.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

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

Documents