ผู้เขียน หัวข้อ: สร้างเว็บง่ายๆ ด้วยปลั๊กอิน Motopress Content Editor  (อ่าน 649 ครั้ง)

0 สมาชิก และ 1 บุคคลทั่วไป กำลังดูหัวข้อนี้

ออฟไลน์ smf

  • [color=green][i]"ถ้าคุณไม่สามารถอธิบายอย่างง่ายๆ ให้คนอื่นเข้าใจได้แล้วล่ะก็ แสดงว่าคุณยังเข้าใจมันไม่ดีพอ"[/i][/color]
  • Administrator
  • Hero Member
  • *****
  • กระทู้: 1,368
  • พอยท์: 5
    • ดูรายละเอียด
    • pordoo.com
    • อีเมล์
MotoPress Content Editorคือ ปลั๊กอินที่ช่วยให้เราสามารถสร้างเนื้อหาหลายแบบได้ง่ายๆ แบบสำเร็จรูป ลากวางๆ ได้เลย หลายคนอาจจะติดปากเรียกปลั๊กอินแนวนี้ว่า Page Builder ก็ไม่ผิด

จริงๆแล้ว Content Editor ตัวนี้ ใช้งานร่วมกับ Cherry Framework สร้างเป็นธีมขายแบบจริงจังที่ MotoPress (Framework เป็นธีมประเภทหนึ่ง แต่ต่างจากธีมทั่วไปตรงที่สามารถปรับแต่งได้แทบทุกส่วนในธีม คือสามารถนำ Theme Framework มาปรับแต่งจนเป็นอีกธีมได้เลย ต่างจากธีมทั่วไป ที่ถูกวางรูปแบบไว้เรียบร้อยและเลือกได้ตามที่เขามีให้เท่านั้น) โดยธีมที่สร้างขายในเว็บนั้นทั้งหมดใช้ Cherry Framework ร่วมกับตัวปลั๊กอิน Content Editor นี้เอง

สำหรับใครที่อยากดูตัวอย่างที่ทำสำเร็จแล้วว่าเป็นยังไง เลื่อนลงข้างล่างสุดได้เลยนะคะ
หลัก การทำงานก็คือ เมื่อเราต้องการสร้างหรือแก้ไข ​Post หรือ ​Page ใดๆ แทนที่เราจะทำใช้ Visual Editor ของ WordPress ก็ใช้ของ MotoPress Content Editor แทน เราก็จะสามารถที่จะใช้โมดูลต่างๆ ในการสร้างเว็บได้เพียงแค่ลากวางและใส่เนื้อหาเท่านั้น
content-editor-button height=247
โม ดูล คือ ส่วนเสริมสำเร็จรูปต่างๆ ที่เราจะนำไปใช้ประกอบกันในการทำเว็บ เช่นเดียวกับปลั๊กอิน Page Builder อืนๆ ในปลั๊กอินนี้จะแยกโมดูลต่างๆ ออกไปตามหมวดหมู่ คือ
Text  โมดูลเกี่ยวกับข้อความ
text height=266
Image โมดูลเกี่ยวกับภาพ
images height=260
Buttons ว่าด้วยปุ่มต่าง
buttons height=190
Video ใส่ได้ทั้งวิดีโอและออดิโอ
videos height=139
โมดูลพิเศษต่างๆ
custom-code height=166
WordPress Widget ยังคงสามารถนำของ WordPress มาใช้ได้ด้วย ทำให้ยืดหยุ่นไปอีก
widgets height=204
สามารถทดลองเล่นก่อนได้ที่ Demo (บางทีอาจจะโหลดช้าเพราะเป็นการเชื่อมต่อออกนอกประเทศ)
ด้านล่างเป็นตัวอย่างที่เขาทำไว้แล้ว โดยเราสามารถคลิกแก้ไขเพิ่มเติมได้เลย
try-demo height=1157
นอกจากนี้ Content Editor นี้ มีการใช้งานร่วมกันกับ Cherry Framework ดังนั้น หากเราติดตั้งปลั๊กอิน Cherry Plugin ลงไป พร้อมกับปลั๊กอินที่ชื่อว่า MotoPress and CherryFramework-3 Integration ก็จะทำให้เราสามารถใช้โมดูลต่างๆ ของ​ Cherry Framework มากกว่า 30 โมดูลได้ด้วย
cherry-module height=275ตัวอย่างโมดูลที่มีเสริมขึ้นมาเป็นของ Cherry Pluginซึ่ง หลังจากลองใช้ดูแล้ว ก็คิดว่า Cherry Plugin นั้นไม่จำเป็นเท่าไหร่ แถมยังทำให้บางโมดูลทำงานผิดเพี้ยน! เช่น Button ซึ่งอาจจะเป็นเพราะธีมที่ใช้ไม่ใช่ธีมที่สนับสนุน Cherry Framework โดยตรง มันเลยตีกัน เราอาจจะใช้ปลั๊กอินพวก Shortcode อย่าง Simple shortcode หรือ Shortcode Untimate ก็ได้ เพราะ Content Editor นั้น สามารถเรียก Visual Editor ของ WordPress มาทำงานเหมือนที่เราเขียนใน WordPress ปกติได้อยู่แล้ว ทำให้เราใช้พวก shortcode อื่นได้ด้วย
DownloadWooCommerceหากต้องการใช้งานร่วมกับ WooCommerce ก็มีปลั๊กอินเสริมโมดูลเกี่ยวกับ WooCommerce ชื่อ MotoPress and WooCommerce integration สามารถดาวน์โหลดได้ฟรีค่ะ
content-editor-woocommerce-2 height=561การใช้งานเมื่อเราคลิกเพิ่ม Post หรือ ​Page ใหม่ จะมีปุ่ม MotoPress Content Editor สำหรับให้เรากดเพื่อใช้งาน
motopress-button height=275
 
 
หลัง จากนั้น ปลั๊กอินจะแสดงหน้าแก้ไขด้วย Content Editor ตรงนี้จะมีเทมเพลตสำเร็จรูปที่ด้านล่างให้เราเลือกใช้งานได้ด้วย โดยสามารถคลิกเลือกที่ด้านล่างตรงเทมเพลตที่เราต้องการได้เลย แล้วมันก็จะสร้างเนื้อหาให้อัตโนมัติ เราก็เพียงแต่แก้ไขให้เป็นข้อมูลของเรา เช่น Landing page
motopress-1 height=653
 
เราสามารถเริ่มสร้างข้อมูลของเราได้เอง โดยการเลือกโมดูลจากปุ่มโมดูลประเภทต่างๆ ด้านซ้ายมือ แล้วลากมาวางที่หน้าเพจด้านขวามือ
first-title height=314
หลัง จากลากมาวางครั้งแรก หน้าก็จะเปลี่ยนเป็นหน้าปกติสีขาว พร้อมทั้งให้เราปรับแต่งโมดูลที่เราลากลงมาวางก่อนหน้านี้ โดยก็จะมีเครื่องมือแก้ไขสำหรับโมดูลนั้นๆ ให้เราด้วย
insert-title height=172
 การแก้ไขโมดูลโมดูลแต่ละอันที่เราแทรกลงไปนั้น จะเรียกว่าเป็น Object แต่ละ Object ก็จะสามารถปรับแต่ง Style ต่างๆ ได้ เช่น กำหนด margin ต่างๆ ถ้าใครพอจะรู้เรื่อง CSS บ้างก็น่าจะเข้าใจได้ไม่ยาก ใครที่ไม่รู้ก็สามารถลองปรับดู เราจะเห็นความแตกต่าง เป็นการเรียนรู้ไปในตัวค่ะ โดยการคลิกที่ Object ที่เราต้องการจะแก้ไข แล้วคลิกที่แท็บ Style
object-style height=530
ส่วนแท็บ Settings นั้นก็จะเกี่ยวกับการตั้งค่าของแต่ละโมดูล ซึ่งแต่ละอันก็จะไม่เหมือนกัน เช่น ถ้าเป็น Slider ก็จะมีการควบคุมขนาดและการเคลื่อนไหวต่างๆ เป็นต้นslider-settings height=343
เราสามารถลบ Object ใดๆ ได้ด้วยการคลิกที่ Object นั้นก่อน เสร็จแล้วก็คลิกที่ปุ่ม Delete Object ด้านบน
delete-object height=420
แถว และ คอลัมน์ปลั๊ก อินนี้ค่อนข้างแตกต่างจาก Page Builder อื่นๆ ตรงที่ตัวอื่นจะให้เราสร้างแถว (Row) หรือ คอลัมน์ (Column) ไว้ก่อนแล้วจึงเลือก Add Object เข้าไป แต่การเพิ่ม Row หรือ Column ของ MotoPress Content Editor นั้น ทำได้ง่ายๆ โดยเมื่อเราลากโมดูลไหนไปวาง ต่อจากโมดูลอื่นๆ ก็จะมีเส้นสีน้ำเงินขึ้นมา พร้อมกับแสดงข้อความว่า ตำแหน่งนี้เป็น Row หรือว่า Columninsert-row height=182แทรกโมดูลเป็น Rowสัง เกตุง่ายๆ ถ้าเราไปวางต่อด้านล่าง มันก็จะแสดงแทรกเป็นแถวให้เราเลย คือเต็มทั้งแถว แต่ถ้าเรานำไปแทรกที่ด้านหน้า หรือด้านหลังของโมดูลตัวก่อนหน้า ก็จะมีคำว่า Column ขึ้นมา แล้วคอลัมน์นั้น ก็จะถูกแทรกไว้หน้าหรือหลังตามที่เราลากไปไว้นั่นเองค่ะinsert-colum height=331แทรกคอลัมน์นอก จากนี้ เรายังสามารถแก้ไข Style ของคอลัมน์และแถวได้เช่นเดียวที่เราทำกับ Object โดยการคลิกที่ชี้เม้าส์ไปที่ Object นั้นๆ ก็จะมีไข่ปลาขึ้นมา อันที่อยู่ด้านก็คือ Column ส่วนอันซ้ายก็คือ Row นั่นเอง
setting-column height=395
 
สำหรับ Settings ในส่วนของ Row นั้น เราสามารถกำหนดพื้นหลังได้ด้วย ทั้งแบบเป็นสี วิดีโอ หรือภาพพื้นหลังแบบ Parallax
 (Parallax  คือ ภาพพื้นหลังที่จะเคลื่อนด้วยความเร็วต่างกันกับเนื้อหา ทำให้รู้สึกเหมือนทั้งสองอย่างมีระยะห่างไม่เท่ากัน ดูเหมือนเป็นเลเยอร์ซ้อนกัน)
parallax-settings height=437
parallax-bg height=616
ส่วนของ Style ก็ยังกำหนดเพิ่มเติมได้ มีแบบสำเร็จเป็นชุดให้เราเลือกได้เลย
full-width height=422
สามารถปรับขนาดได้ด้วยการชี้ไปแถวขอบๆ ของคอลัมน์ แล้วจะมีสัญลักษณ์ปรับขนาดให้เราเลื่อนปรับ
column-resize height=209
ผลจากการทดลองใช้งาน
 ทำหน้า Landing Page ง่ายๆ ส่วนใหญ่ใช้เครื่องมือที่เขาให้มาแล้ว ยกเว้นปุ่ม ​Sign Up ใช้ปลั๊กอิน Symple Shortcode แทรกได้เช่นเดียวกัน
สำหรับท่านที่สนใจปลั๊กอินนี้ สามารถดูรายละเอียดและลองทดสอบดูก่อนได้ ที่เว็บMotoPress ได้เลยค่ะ
ที่มา: http://www.wpthaiuser.com/motopress-content-editor/
« แก้ไขครั้งสุดท้าย: 1 กันยายน 2016, 14:13:12 โดย smf »