เว็บไซต์หน้าเดียว คือ?

เว็บไซต์หน้าเดียว คือ หนึ่งในตระกูลธีมส์ของบีนธีมส์ จะเป็นธีมส์แบบหน้าเดียวจบ (onepage) ทำให้ง่ายต่อการเข้าถึงข้อมูล ซึ่งเหมาะสำหรับเว็บไซต์แนะนำตัวเอง (Portfolio) หรือ เว็บไซต์องค์กรขนาดเล็กที่มีปริมาณเนื้อหาจำนวนไม่มากนัก
 

จุดเด่นในตระกูลมีบีนธีมส์จะมีดังนี้
  • Onepage คือ เว็บไซต์ที่แสดงผลทุกอย่างให้จบภายในหน้าเดียว สะดวกในการค้นหาข้อมูลสำหรับผู้เข้ามาเยี่ยมชม
  • Customizer คือ เครื่องมือสำหรับการปรับแต่งเพื่อให้เป็นเว็บไซต์ในแบบของคุณได้ด้วยตนเอง
  • Responsive คือ สามารถแสดงผลได้สวยงามทั้งในคอมพิวเตอร์ มือถือ ฯลฯ
  • Mobile First คือ การออกแบบเริ่มต้นจากหน้าจอมือถือไปสู่หน้าจอคอมพิวเตอร์ ซึ่งทำให้การเปิดในมือถือรวดเร็วยิ่งขึ้น
  • Micro Format คือ การจัดการโค้ดให้ถูกหลัก SEO ทำให้สามารถติดกูเกิ้ลได้รวดเร็วยิ่งขึ้น

เข้าสู่ระบบ

ขั้นตอนการเข้าสู่ระบบหลังบ้าน (Backend)

login-to-backend
 

  1. ไปที่ url=yourwebsite/wp-admin
  2. ใส่ Username และ Password
  3. กดปุ่ม Login เพื่อเข้าสู่ระบบ

ขั้นตอนการติดตั้งธีม

  1. เลือกหัวข้อ Apperance -> Themes -> Upload Themes -> Choose File -> Install Now
  2. กด Active เพื่อเปิดใช้งานธีม
  3. สามารถเข้าไปใส่ Lincense ได้ที่ Lantao Lincense และ ติดตั้ง pluign พื้นฐานได้ที่ Install Plugins
  4. กดปุ่ม Install เพื่อติดตั้ง pluign พื้นฐาน kirki กับ Custom Post Type UI

เซคชั่น (Section)

การใช้งานในส่วนเซคชั่น (Section)

 

การแสดงผลของเซคชั่น

ส่วนการแสดงผลของธีมส์ในตระกูลหน้าเดียว จะเป็นการนำเพจมาต่อๆเรียงกัน ในที่นี้จะขอเรียกว่า “เซคชั่น” ซึ่งสามารถเปลี่ยนรูปแบบของแต่ละเซคชั่นได้ และ สลับตำแหน่งของแต่ละเซคชั่นได้

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

ตัวอย่างการแสดงผลของเซคชั่น(Section)
ตัวอย่างการแสดงผลของเซคชั่น(Section)

 

การเพิ่มลดเซคชั่น

การสร้างหรือลบเซคชั่นนั้นก็คือการสร้างเพจแบบปกติเลยแล้วระบบจะทำการดึงส่วนนี้เพื่อไปแสดงผลบนเว็บไซต์ และ ส่วนแสดงในส่วน Customizer ให้อัตโนมัติ
 

  1. การเพิ่มเซคชั่น เลือกที่หัวข้อ Pages -> Add New
  2. add-section
     

  3. การลบเซคชั่น เลือกเซคชั่นที่ต้องการลบ -> Trash
  4. remove-section
     

 

การเปลี่ยนตำแหน่งเซคชั่น

การจัดอันดับหรือการเปลี่ยนตำแหน่งของเซคชั่น สามารถทำได้ด้วยการเรียงอันดับตัวเลขในส่วน order เริ่มจาก 0 , 1, 2, 3 … เซคชั่นจะเรียงจากบนลงล่างตามลำดับ ซึ่งจะมีขั้นตอนในการทำตามนี้
 

  1. เลือกเซคชั่นที่ต้องการจัดอันดับ Sections -> Quick Edit
  2. order-quickedit
     

  3. เปลี่ยนในส่วน Order ให้เป็นอันดับที่เราต้องการ แล้วกดปุ่ม Update
  4. order-update
     

ตั้งค่า Customize

การใช้งานระบบ Customize

 

การเข้าใช้งาน Customize

  1. เลือกหัวข้อ Appearance –> Customize ในหมวดหมู่ด้านซ้ายมือ url=yourwebsite/wp-admin/customize.php
  2. where-customize
     

  3. เราก็จะเข้าสู่หน้าปรับแต่ง Customize เรียบร้อย
  4. to-customize
     

 

การตั้งค่าพื้นฐาน

การตั้งค่าในส่วน Customize ของแต่ละธีมส์จะมีความแต่งต่างกัน แต่โดยพื็นฐานหลักๆที่สามารถปรับแต่งได้มีตังนี้
 

การตั้งค่าการแสดงผลของเว็บไซต์ (Site Appearance)
  1. เลือกโทนสีหลักของเว็บไซต์ ซึ่งจะเปลี่ยนสีในส่วนเมนู ฯลฯ
  2. เลือกโทนสีหัวข้อ
  3. เลือกสีตัวอักษรในส่วนเมนู
  4. เลือกสีพื้นหลังในส่วนเครดิต (Footer)
  5. เลือกสีตัวอักษรในส่วนเครดิต (Footer)
  6. เปลี่ยนเนื้อหาในส่วนเครดิต (Footer)
  7. เลือกสีของลิงก์และปุ่มทั้งหมดของเว็บไซต์

ปล. ส่วนโลโก้ ย้ายไปอยู่หัวข้อ Site Identity ตามมาตราฐาน WordPress 4.5
ปล. ส่วนฟอนต์ เปลี่ยนไปใช้ Seed Fonts ตามมาตราฐานของ SeedThemes แทน

 

การตั้งค่าในส่วนเซคชั่น (Section)

การตั้งค่าในส่วนนี้จะแยกของแต่ละเซคชั่น สามารถตั้งค่าได้ตามการออกแบบที่เราต้องการได้
 

customize-section-1

customize-section-2

customize-section-3

customize-section-4

การตั้งค่าเซคชั่น (Section)

แยกเป็น 3 ส่วนดังนี้

  1. แสดงผลส่วนพื้นหลัง (Background)
    • เลือกสีพื้นหลัง
    • เลือกภาพพื้นหลัง
    • ตั้งภาพพื้นหลังเป็น parallax
  2. แสดงผลส่วนเนื้อหา (Content)
    • เลือกรูปแบบเนื้อหา คือ Full Left Right ถ้าเลือก Left หรือ Right สามารถใส่ Featured Image เพื่อแสดงรูปภาพได้
    • เลือกว่ามีพื้นหลังหรือไม่
    • เลือกความกว้างของพื้นหลัง
    • เลือกความมนของพื้นหลัง
  3. แสดงผลส่วนโพส (Post Type)
    • เลือกประภทของโพสที่ต้องการนำมาแสดง
    • เลือกรูปแบบคอลัมน์
    • เลือกรูปแบบของภาพ
    • เลือกความมนของรูปภาพ
    • เลือกความยาวของเนื้อหา
    • เลือกความมนของรูปภาพ
    • เลือกว่าต้องการแสดงเส้นสีหรือไม่
    • เลือกว่ามีพื้นหลังหรือไม่

ย้ายเว็บเวิร์ดเพรส