หน้า Landing page ที่เราต้องการสร้าง
ปกติ เมื่อเราเห็นธีม WordPress ต่างๆ นั้นมักจะมาในรูปแบบของบล็อก เพราะ WordPress นั้นต่อยอดมาจากเว็บบล็อก โดยเฉพาะธีมฟรีต่างๆ ซึ่งหากเราชอบรูปแบบของธีมนั้นๆ เพียงแต่ไม่ได้อยากแสดงบล็อก แค่อยากนำรูปแบบต่างๆ มาทำเว็บข้อมูลของตัวเองล่ะ
ธีม Twenty Twelve ที่มาพร้อมกับ WordPress
หากใครได้อ่านเรื่อง
Setting ของ WordPress มาบ้างแล้ว คงพอจะทราบว่า WordPress มีการตั้งค่าหนึ่งในการตั้งค่า
Reading นั่นก็คือ
Front page displays นั่นเอง ซึ่ง
Front page displays ก็คือการตั้งค่าให้หน้าใดๆ ก็ตามเป็นหน้าแรก แทนหน้าบล็อกที่แสดงปกติ เราสามารถนำการตั้งค่านี้มาสร้างหน้าเว็บของตัวเองได้ โดยไม่จำเป็นต้องจ้างนักออกแบบมาเขียนเทมเพลตใหม่ก็ได้ค่ะ
วันนี้เราจะมาสร้างหน้า Home หรือใครจะประยุกต์ไปสร้างหน้า
Landing page สำหรับแสดงข้อมูลสินค้า หน้าขายสินค้าต่างๆ ก็แล้วแต่ความพอใจนะคะ ปลั๊กอินที่เราจะใช้วันนี้เป็นปลั๊กอินฟรี ที่เรียบง่าย ขนาดเล็ก ใช้งานได้ดี ชื่อ
Simple Shortcode เขียนโดย AJ Clarke จาก wpexplorer.com
DownloadDemo ตัวอย่าง :
http://wpexplorer-demos.com/symple-shortcodes/
Plugin Simple Shortcode
ขั้นแรกให้เราทำการสร้างหน้าใหม่เสียก่อน
ปรับรูปแบบหน้าเป็นแบบเต็มพื้นที่หากไม่ต้องการให้แสดง Sidebar หรือ widget
ปรับหน้าเป็น Full-width ใน Page Templage
ใส่ภาพหลักที่ต้องการ เพื่อดึงดูดความสนใจ
ทำการแบ่งคอลัมน์ด้วยการคลิกที่ปุ่มแทรก shortcut แล้วเลือก Columns
ทำการแลือกรูปแบบคอลัมน์ โดยในที่นี้เราจะแบ่งหน้าเป็น 3 คอลัมน์ก็ให้เลือกเป็นแบบ 1/3
โดยจะเขียนข้อมูลของคอลัมน์แรกก่อน ก็ตั้งค่าคอลัมน์ดังต่อไปนี้
Fadein คือการกำหนดแอนนิเมชั่นให้กับคอล้มน์แบบ fade หรือค่อยๆ ปรากฏเมื่อเลื่อนไปถึง สามารถกำหนดให้เป็น True หากต้องการ หรือ False หากไม่ต้องการใช้เอฟเฟคนี้
Size คือการกำหนดจำนวนของคอลัมน์ที่ต้องการ หากต้องการแบ่งเป็น 3 คอลัมน์ก็กำหนดเป็น 1/3 หากต้องการแบ่งเป็น 2 คือครึ่งๆ ก็กำหนดเป็น 1/2 เป็นต้น
Position เป็นการกำหนดำแหน่ง โดย First คือคอลัมน์แรก ส่วน Middle ใช้กำหนดให้กับคอลัมน์อื่นๆ ที่อยู่ระหว่างนั้น และ Last ใช้กำหนดให้กับคอลัมน์สุดท้าย ไม่ว่าเราจะสร้างกี่คอลัมน์ก็ตาม
Starting Content คือกล่องที่ใช้สำหรับใส่คอนเท้นท์ต่างๆ ตรงนี้เราสามารถแก้ในภายหลังได้
แต่ละอันก็จะมีการตั้งค่าที่ไม่เหมือนกัน แนะนำให้ลองเล่นดู
หลังกจากที่เรากดแทรกโค้ดคอลัมน์ไปโค้ดแรกแล้ว เราก็จะได้โค้ดแบบนี้มา
[symple_column size="one-third" position="first" fade_in="false"] Symple Shortcodes is the best Free shortcodes plugin out there.
[/symple_column]
อย่าเพิ่งตกใจนะคะ ให้ดูว่าส่วนไหนคือ Content ก็ให้เราแทนที่ตรงนั้นด้วยข้อความของเราค่ะ
หลังจากเราได้คอลัมน์แรกไปแล้ว เนื่องจากเราจะทำแบบ 3 คอลัมน์ เราจึงต้องคลิกสร้างคอลัมน์อีก 2 ครั้ง โดยเปลี่ยนตรง Position เป็น middle และ last ตามลำดับ หากเราทำมากกว่าหรือน้อยกว่านี้ ก็เพียงแค่กำหนดอันแรกเป็น first อันที่อยู่ระหว่างนั้นทั้งหมดเป็น middle และอันสุดท้ายเป็น Last ก็ได้ค่ะ ถ้าหากทำแค่ 2 คอลัมน์ ก็จะมีแค่ first, last นะคะ
ตัวอย่าง shortcode ที่ได้
แทนค่าเดิมด้วยข้อมูลของเรา
ผลลัพธ์
เราอาจใช้วิธีเดียวกันนี้ในการเพิ่มข้อมูลอื่นๆ เข้าไปตามที่เราต้องการ
Column 1/3 ใส่ข้อมูลแบบลิสต์ ซึ่งของจริงก็ต้องทำ 3 ชุด 3 คอลัมน์เช่นกัน
ผลลัพธ์ที่ได้
ใส่ฟีดแบคจากลูกค้าหรือ Testimonial
ผลลัพธ์ที่ได้
นอกจากนี้เรายังสามารถสร้าง shortcode ซ้อน shortcode ได้ค่ะ เช่นด้านล่างนี้ เราจะสร้าง shortcode แบบ Boxes ขึ้นมา แล้วสร้าง shortcode แบบ Bottons ไว้ภายใน Boxes
ผลลัพธ์ที่ได้
หลังจากเพิ่มข้อมูลเป็นที่น่าพอใจแล้ว ก็ให้เราคลิก Publish แล้วไปที่
Settings > Reading > Front page displays เลือก
A static page แล้วเลือก Front page เป็นหน้าที่เราสร้างไว้ หากเป็นภาษาไทยก็ให้คลิกตามด้านล่างได้เลยค่ะ
ผลลัพธ์ที่ได้เมื่อเข้าสู่หน้าแรกของเว็บไซต์
หน้า Home แบบสร้างเอง
เราใช้ปลั๊กอินเพิ่มเติมคือ
Hide Title เพื่อซ่อน Title ด้านบนไว้ หากไม่ซ่อนมันก็จะแสดงชื่อเรื่อง Sale ด้านบน ซึ่งเมื่อใช้เป็นหน้า Home เราไม่ต้องการให้ส่วนนี้ปรากฏ
ยัง มีฟังชั่นอีกมากมาย เช่น Skillbars ให้เราใส่ระดับความสามารถ หรือ Google map ที่ให้เราใส่แผนที่ โดยรวมก็ใช้งานได้ดี เน้นที่ความเรียบง่ายและขนาดเล็กมาก โอกาศหน้าจะแนะนำปลั๊กอินอื่นๆ มาให้ลองใช้ดูอีกนะคะ
ปลั๊กอินที่คล้ายกัน ทั้งแบบฟรีและเสียเงินที่มา:
http://www.wpthaiuser.com/homepage-landing-page/
