fbpx
Select Page

สอนทำเว็บไซต์ด้วย WordPress (บทที่ 3) สร้าง Homepage ปรับแต่งเมนู  หลังจากที่เราได้เรียนการลง wordpress ในบทที่ 1 และ เรียนรู้เครื่องมือต่างๆ ของ WordPress ในบทที่ 2 แล้ว เรามาเริ่มทำโฮมเพจแรกของเราเอง ด้วยธีมฟรี ที่ติดมากับ WordPress ดูบ้าง สิ่งที่ควรเตรียมให้พร้อม คือข้อมูล และ ภาพถ่ายสวยๆ ที่ต้องการลงในโฮมเพจเว็บไซต์คุณ ข้อควรระวังคือการละเมิดลิขสิทธิ์ เช่น การก๊อบปี้มาจากเว็บไซต์อื่นๆ ถือว่าผิดกฏหมาย อาจถูกฟ้องร้องดำเนินคดีได้ ผลเสียอีกประการหนึ่งที่คัดลอกข้อมูลคนอื่นมาใช้ กู้เกิลจะไม่ให้คะแนน SEO เว็บไซต์ของคุณ ถือว่าเป็นข้อมูลซ้ำซ้อน เมื่อเตรียมข้อมูลพร้อมแล้ว เรามาเริ่ม สร้างโฮมเพจง่ายๆ ด้วย WordPress กันเลย จากหน้าตา WordPress ที่ลงเสร็จเรียบร้อยแล้ว เราจะมาเปลี่ยนให้เป็น HomePage ที่สวยงาม หน้าตาเว็บไซต์ที่พึงเสร็จใหม่

 

1. ล็อกอิน เข้าระบบจัดการ WordPress

การล็อกอินเข้า wordpress

2. สร้างหน้าใหม่

เมื่อล็อกอินเข้าได้แล้ว เริ่มคลิกสั่งสร้างหน้าด้วยปุ่มสองตำแหน่ง เมื่อเอาเมาท์ชี้ตำแหน่ง

+สร้างหน้าใหม่ จะมีเมนูดรอบดาวน์ลงมา ให้คลิกที่ >>>หน้า<<<

หรืออีกทางเลือกหนึ่ง ที่เมนูด้านซ้ายมือใช้เมาท์ชี้ที่หน้า เลือก >>>เขี่ยนหน้าใหม่<<<

 

คลิกสร้างหน้าใหม่

3. แนะนำปุ่มต่างๆ ในการตกแต่งหน้า

เมื่อคลิกแล้ว จะปรากฎหน้าใหม่ขึ้นมาให้จัดการ แนะนำปุ่มต่างๆ

เครื่องหมาย + แสดงเครื่องมือในการจัดการหน้า เช่น ย่อหน้า ใส่รูปภาพ ภาพปก เครื่องหมายคำพูด เป็นต้น

เครื่องหมาย+

 

2 เดินหน้า ย้อนกลับ กรณีเราต้องย้อนกลับไปที่สเตปงานเก่า

3 เครื่องมือสำหรับย่อหน้า

4 คลิกปุ่มเผยแพร่ เมื่อทำงานเสร็จเป็นที่พอใจแล้ว

5 ติ๊กที่ปุ่มรอตรวจสอบกรณีต้องการเก็บไว้ก่อน ยังไม่ต้องการเผยแพร่

6 การสนทนา เลือกให้หน้านี้มีการค้อมเม้นท์ได้หรือไม่ ?

เครื่องมือเบื้องต้นสำหรับเขียนหน้า

 

 7 คุณสมบัติหน้า จะให้เลือกเทมเพลตที่ตั้งไว้ หรือ จะเลือกแบบเต็มพื้นที่ (full width)เทมเพลต

ใส่ข้อมูลลงในเพจ

ใส่ชื่อเรื่อง และ ข้อมูล ที่เตรียมไว้ ลงใน Body ของ เพจ 

 

การแทรกรูปภาพและอับโหลด

แทรกภาพ เมื่อใส่ชื่อเพจ และข้อมูล แล้ว สามารถอับโหลดรูปภาพแทรกในบทความได้ จากปุ่มที่ปรากฏ คลิกปุ่มอับโหลด เลือกภาพที่ต้องการแทรก แล้วคลิก open ภาพจะถูกแทรกเข้าในบทความ และจัดเก็บไว้ในคลังภาพโดยอัตโนมัติ

เลือกไฟล์ภาพจากคอมพิวเตอร์

 

เผยแพร่เพจ  เมื่อจัดการลงข้อมูลเรียบร้อยแล้ว ให้ทำการเผยแพร่ ด้วยการคลิก เผยแพร่

 

เผยแพร่ข้อมูล

 

5. 3 จุดที่ต้องปรับปรุง

ต้องการดูหน้าตาเพจที่เผยแพร่แล้ว คลิกที่ >>>ดูก่อน<<<

จะเห็นหน้าตัวอย่างเว็บไซต์ ซึ่งจะต้องมีการปรับปรุงอีกหลายจุดเช่น เมนู ส่วนหัวที่ดูค่อนข้างแปลก ฟุตเตอร์ ที่ยังไม่ต้องการใช้

 

ดูหน้าตัวอย่างเว็บไซต์

6. ปรับแต่งเมนู ปรับแต่งฟุตเตอร์ และคำโปรยของเว็บไซต์

 

  เว็บไซต์ใหม่

 

จัดการเมนู 

 

จัดการเมนู

ตั้งชื่อเมนู และ สร้างชื่อเมนู ตัวอย่างตั้งชื่อว่า เมนูหลัก สร้างเมนู

จัดการสร้างเมนูลำดับตามหมายเลข

  1. ติ๊กเลือกเมนู ที่ต้องการให้ปรากฎบนหน้าเว็บไซต์ 
  2. คลิก เพิ่มลงเมนู
  3. ติ๊กเพิ่มลงเมนูอัตโนมัติ 
  4. บันทึกเมนู 

จัดการเมนูตามหมายเลข

 

เปลี่ยนชื่อเมนูเป็น Homepage อย่าลืมบันทึกเมนูทุกครั้ง ระบบจะตั้งชื่อเมนูตามชื่อของเพจ ถ้าเราต้องการชื่อเมนูที่แตกต่าง หรือ ปลับให้สั้นลง ก็สามารถเปลี่ยนได้ที่นี่ เมื่อเปลี่ยนเรียบร้อยแล้วอย่าลืม บันทึกเมนู

Homepage

 

จัดการที่อยู่เมนู ทำตามหมายเลข เลือกเป็นเมนูหลัก แล้วบันทึกการเปลี่ยนแปลง

  1. คลิกจัดการเมนู
  2. เลือกเมนูหลัก คือเมนูที่เราสร้างไว้
  3. บันทึกการเปลี่ยนแปลง

จัดการที่อยูเมนู

ตั้งค่าให้ Homepage เป็นหน้าแรก 

 

เลือกหน้าที่ต้องการแสดงเป็นหน้าแรก

 

 

แก้ไขคำโปรยของเว็บไซต์ แทนคำว่า “แค่เว็บเวิร์ดเพรสเว็บหนึ่ง” ไปที่ส่วนของการตั้งค่า คลิก >>>ทั่วไป<<< จะขึ้นหน้าที่ต้องการแก้ไขดังภาพ จัดการแก้ไข เมื่อแก้ไขแล้ว กด >>> บันทึกการเปลี่ยนแปลง<<<

 

คำโปรยของเว็บไซต์ แทนคำว่า

แก้ไข Footer เอาส่วนที่ไม่จำเป็นออกไปก่อน ส่วนนี้เรียกว่า ฟุตเตอร์วิดเจดfooter

ลบฟุตเตอร์วิดเจด กลับไปที่หน้าควบคุมเว็บไซต์ คลิกที่ รูปแบบเว็บ เลือกคลิกในส่วนของ >>>วิดเจ็ต<<< ทำการลบ วิดเจ็ตที่ไม่ต้องการออก ตามภาพ 

ลบ footer widget

 

ยี่ยมชมเว็บไซต์ เมื่อแก้ไขทุกอย่างเสร็จเรียบร้อยแล้ว ออกไปเยี่ยมชมเว็บไซต์

เยี่ยมชมเว็บไซต์

7. Home Page สมบูรณ์

เมื่อลบเสร็จเรียบร้อยแล้ว ออกไปเยี่ยมชมเว็บไซต์ ก็จะได้ Home Page เบื้องต้น ดังภาพโฮมเพจตัวอย่าง การสร้างโฮมเพจจากธีม ฟรี จะมีลูกเล่นและความสวยงามสู้ธีมแบบมืออาชีพที่ทีมงานออกแบบธีม ได้สร้างไว้ ในบทต่อไปจะ ลองหาธีมสวยๆ มาแนะนำวิธีการติดตั้ง และการปรับแต่งเว็บให้สวยงาม

 

0 0 โหวต
Article Rating
Total 0 Votes
0%
0
คุณสามารถแสดงความคิดเห็น หรือสอบถามเพิ่มเติมได้ x
()
x

Pin It on Pinterest