CodeWatchers

วิธีใช้ Vue JS กับ WordPress

Rifat บทช่วยสอน WordPress May 3, 2024

ในโลกดิจิทัลในปัจจุบัน การสร้างประสบการณ์เว็บแบบไดนามิกและการโต้ตอบกลายเป็นเรื่องสำคัญที่สุดสำหรับนักพัฒนา ด้วยการเพิ่มขึ้นของเฟรมเวิร์ก JavaScript เช่น Vue.js และการใช้งานระบบจัดการเนื้อหา (CMS) เช่น WordPress อย่างแพร่หลาย การรวมเทคโนโลยีเหล่านี้กลายเป็นโซลูชั่นที่ทรงพลังสำหรับการสร้างเว็บไซต์ที่มีฟีเจอร์หลากหลาย

วิธีใช้ Vue JS กับ WordPress

ในคู่มือนี้ เราจะสำรวจวิธีควบคุมพลังของ Vue.js ภายในระบบนิเวศของ WordPress เราจะอธิบายขั้นตอนการตั้งค่า Vue.js ด้วย WordPress ซึ่งครอบคลุมทุกอย่างตั้งแต่การติดตั้งไปจนถึงเทคนิคขั้นสูงเพื่อการบูรณาการที่ราบรื่น ไม่ว่าคุณจะเป็นมือใหม่หรือนักพัฒนาที่มีประสบการณ์ คู่มือนี้จะช่วยให้คุณมีความรู้และเครื่องมือที่จำเป็นในการใช้ Vue.js กับ WordPress ได้อย่างมีประสิทธิภาพ และสร้างประสบการณ์เว็บที่น่าสนใจ

Vue Js คืออะไร?

Vue.js เป็นเฟรมเวิร์ก JavaScript แบบโปรเกรสซีฟที่ใช้สำหรับสร้างส่วนต่อประสานกับผู้ใช้ มีชื่อเสียงในด้านความเรียบง่ายและความยืดหยุ่น ทำให้เป็นตัวเลือกยอดนิยมในหมู่นักพัฒนาในการสร้างแอปพลิเคชันเว็บแบบไดนามิกและเชิงโต้ตอบ

Vue.js ใช้สถาปัตยกรรมแบบคอมโพเนนต์ ช่วยให้นักพัฒนาสามารถแบ่งแอปพลิเคชันของตนออกเป็นส่วนประกอบแบบโมดูลาร์ที่นำมาใช้ซ้ำได้ ซึ่งสามารถจัดการและบำรุงรักษาได้อย่างง่ายดาย ด้วยการเรียนรู้ที่นุ่มนวลและเอกสารประกอบที่กว้างขวาง Vue.js ช่วยให้นักพัฒนาสามารถสร้างเว็บแอปพลิเคชันสมัยใหม่ได้อย่างมีประสิทธิภาพได้อย่างง่ายดาย

สร้างเว็บไซต์ที่น่าทึ่ง

ด้วย Elementor ตัวสร้างหน้าฟรีที่ดีที่สุด

เริ่มเลย

เหตุใดจึงต้องใช้ Vue ใน WordPress?

มีเหตุผลที่น่าสนใจหลายประการในการใช้ Vue.js ร่วมกับ WordPress

ประการแรก Vue.js มีชื่อเสียงในด้านความเรียบง่าย ทำให้เป็นตัวเลือกที่เหมาะสำหรับนักพัฒนาที่ต้องการเรียนรู้อย่างรวดเร็วและปรับใช้เฟรมเวิร์ก JavaScript ที่ทันสมัย

นอกจากนี้ การรวม Vue.js เข้ากับ WordPress ยังมีประโยชน์ในทางปฏิบัติอีกด้วย

ตัวอย่างเช่น ไลบรารีแบบดั้งเดิม เช่น jQuery สามารถปรับขนาดได้น้อยกว่าและอาจนำไปสู่ความขัดแย้งในบางสถานการณ์ ด้วยการใช้ Vue.js ควบคู่ไปกับ WordPress เป็น API นักพัฒนาจะสามารถเพิ่มความเร็วและประสิทธิภาพของเว็บไซต์ได้อย่างมาก

นอกจากนี้ Vue.js ยังสามารถประกอบได้สูง ช่วยให้ใช้งานอินเทอร์เฟซผู้ใช้ภายในปลั๊กอิน แผงผู้ดูแลระบบ และพื้นที่อื่นๆ ของไซต์ WordPress ได้ง่ายขึ้น สถาปัตยกรรมที่ขับเคลื่อนด้วยส่วนประกอบทำให้เป็นเครื่องมืออเนกประสงค์และมีประสิทธิภาพสำหรับการสร้างแอปพลิเคชันเว็บสมัยใหม่ภายในระบบนิเวศของ WordPress

นอกจากนี้ WordPress ยังขับเคลื่อนเว็บที่รู้จักมากกว่า 25% ซึ่งหมายความว่ามีแนวโน้มที่จะเป็นส่วนหนึ่งของกลุ่มการพัฒนาหรือของลูกค้าของคุณอยู่แล้ว การนำ WordPress มาใช้อย่างแพร่หลายนี้ทำให้การบูรณาการ Vue.js เป็นทางเลือกที่เป็นธรรมชาติสำหรับการพัฒนาส่วนหน้า

วิธีใช้ WordPress และ Vue?

ที่นี่เราจะพูดถึง 2 วิธีในการใช้ Vue และ WP โดยสิ้นเชิง มาดูวิธีทำให้มันทำงานร่วมกันกันเถอะ!

1. สร้าง SPA เป็นเว็บไซต์/แอปย่อย

Vue สามารถใช้ในการพัฒนา "เว็บไซต์ย่อย" ภายในแผงผู้ดูแลระบบ WordPress วิธีการนี้มีประโยชน์สำหรับการสร้างปลั๊กอินที่ซับซ้อนหรือหน้าผู้ดูแลระบบแบบกำหนดเองที่ต้องใช้ระบบแท็บหรือระบบหลายหน้า

ต่างจากวิธีการ WordPress ทั่วไป การใช้ Vue ช่วยให้การเปลี่ยนระหว่างหน้าต่างๆ ราบรื่นขึ้น โดยไม่ต้องโหลดซ้ำทั้งหน้า ช่วยเพิ่มประสบการณ์ผู้ใช้

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

ส่วนต่อประสานผู้ใช้ (UI) ที่แสดงที่นี่เป็นของปลั๊กอิน WP Rocket ภายในแผงผู้ดูแลระบบ WordPress UI นี้ได้รับการปรับแต่งทั้งหมดและมีหน้าย่อยของตัวเองแสดงเป็นแท็บ แต่ละแท็บสอดคล้องกับ URL ย่อยที่แตกต่างกัน ช่วยให้แบ่งปันกับผู้อื่นได้ง่าย โดยพื้นฐานแล้วมันมีลักษณะคล้ายกับเว็บไซต์ขนาดเล็กภายในแผงผู้ดูแลระบบ WP

การปรับแต่งดังกล่าวทำได้ตรงไปตรงมาด้วย Vue และ Vue-router อย่างไรก็ตาม มีสิ่งหนึ่งที่ต้องได้รับการดูแลอย่างระมัดระวัง นั่นก็คือ การจัดการ URL เนื่องจากการอยู่ร่วมกันของ "เว็บไซต์" สองแห่ง - แผงผู้ดูแลระบบ WordPress และอินเทอร์เฟซที่ขับเคลื่อนโดย Vue - URL ที่อาจขัดแย้งกันอาจเกิดขึ้นได้

เพื่อแก้ไขข้อกังวลนี้ การปรับเปลี่ยนง่ายๆ ภายในอินสแตนซ์ Vue Router ก็เพียงพอแล้ว โดยเฉพาะอย่างยิ่ง คุณต้องแก้ไขสองตัวเลือก:

  1. ตัวเลือกพื้นฐาน: ควรตั้งค่าเป็นเส้นทางเพจ WP ที่คุณกำหนดเอง
  2. ตัวเลือกโหมด: ควรตั้งค่าเป็น "แฮช"

การใช้โหมด "แฮช" ช่วยให้มั่นใจได้ว่ามีการใช้แฮชแทนการแก้ไข URL ทั้งหมด ซึ่งช่วยลดข้อขัดแย้งที่อาจเกิดขึ้น

นอกจากนี้ เป็นที่น่าสังเกตว่าคุณยังสามารถแทนที่หน้า WordPress อื่นๆ ได้ เช่น หน้าตัวแก้ไขเนื้อหา โดยใช้เทคนิคที่คล้ายกัน ดังตัวอย่างจากตัวแก้ไข Elementor

เครื่องมือแก้ไข WordPress แบบเดิมแปลงเป็นอินเทอร์เฟซที่มีโครงสร้างโดยใช้สัญลักษณ์แฮชเพื่อแยกแยะ URL ย่อย

โดยพื้นฐานแล้ว เป็นไปได้ที่จะสร้างเว็บไซต์ย่อยภายในส่วนต่างๆ ของแผงผู้ดูแลระบบ WordPress เช่น หน้าปลั๊กอิน ตัวแก้ไข แดชบอร์ด หรืออินเทอร์เฟซสำนักงานกลาง

เพื่อให้บรรลุเป้าหมายนี้ กระบวนการเกี่ยวข้องกับการใช้ Vue CLI หรือเครื่องมือทางเลือกเพื่อสร้าง Vue Single Page Application (SPA) แบบสแตนด์อโลน จากนั้น กำหนดค่าตัวเลือกฐานและโหมดของเราเตอร์ตามลำดับ ส่งออกแอปพลิเคชัน และรวมเข้ากับ WordPress ผ่านทาง hooks ที่เหมาะสมภายในระบบนิเวศของ WordPress

2. สร้างส่วนประกอบที่ใช้ซ้ำได้บนส่วนหน้าหรือผู้ดูแลระบบ

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

สิ่งสำคัญที่ควรทราบคือเมื่อรวมส่วนประกอบ Vue.js เข้ากับ WordPress หรือเทมเพลตแบ็กเอนด์อื่นๆ อาจจำเป็นต้องเลือกใช้ Vue เวอร์ชัน Runtime + Compiler ช่วยให้มั่นใจได้ถึงการทำงานที่ราบรื่นและความเข้ากันได้กับสภาพแวดล้อมแบ็กเอนด์

ส่วนประกอบบางอย่างจะโต้ตอบกับข้อมูลที่แสดงผล ในขณะที่ส่วนประกอบอื่นๆ จะไม่โต้ตอบ จากความแตกต่างนี้ จะต้องสร้างส่วนประกอบประเภทต่างๆ ส่วนประกอบบางส่วนจะมีเทมเพลต

Vue.component('alert-box', {
  template: `
    <div class="demo-alert-box">
      <strong>Error!</strong>
      <slot></slot>
    </div>
  `
})

ในขณะที่คนอื่นจะใช้มาร์กอัปที่สร้างขึ้น

<my-component inline-template>
  <div>
    <p>These are compiled as the component's own template.</p>
    <p>Not parent's transclusion content.</p>
  </div>
</my-component>

Vue ยังสามารถใช้ประโยชน์เพื่อสร้าง Web Components ดั้งเดิม โดยนำเสนอข้อได้เปรียบของการนำกลับมาใช้ใหม่ได้ในโปรเจ็กต์ต่างๆ ที่คล้ายกับ ionicons (สร้างขึ้นด้วย Stencil JS)

ส่วนประกอบเหล่านี้สามารถรวมเข้ากับเทมเพลต WordPress PHP หรือฟังก์ชันที่สร้าง HTML ข้อมูลสามารถส่งผ่านไปยังอินสแตนซ์หรือส่วนประกอบ Vue จาก WordPress ได้โดยการจัดสตริงให้เป็นตัวแปรส่วนกลางหรือกำหนดโดยตรงให้กับเสาส่วนประกอบ แนวคิดนี้เกี่ยวข้องกับ การโหลด Vue และการเชื่อมโยงอินสแตนซ์ Vue กับ HTML ID เพื่อการบูรณาการที่ราบรื่น

<?php

function themeslug_enqueue_style() {
    wp_enqueue_style( 'my-theme', 'style.css', false );
}

function themeslug_enqueue_script() {
    wp_enqueue_script( 'my-js', 'filename.js', false );
}

add_action( 'wp_enqueue_scripts', 'themeslug_enqueue_style', 10 );
add_action( 'wp_enqueue_scripts', 'themeslug_enqueue_script', 10 );
?>

นี่คือส่วนบนและล่างของเทมเพลต WP

<html>
<div id="app">
  {{ message }}
</div>
</html>

<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
</script>

3. สร้างเว็บไซต์ส่วนหน้าแยกต่างหาก

สุดท้ายนี้ สิ่งสำคัญคือต้องเน้นคุณลักษณะที่บางคนอาจเห็นได้ชัดเจนแต่ไม่ใช่ทั้งหมด

ตั้งแต่เวอร์ชัน 4.7 เป็นต้นมา WordPress ได้รวม REST API ไว้ด้วย ซึ่งช่วยให้นักพัฒนาสามารถเข้าถึงจุดสิ้นสุดต่างๆ และดึงข้อมูล เช่น โพสต์ เพจ และฟิลด์ที่กำหนดเองด้วยความช่วยเหลือของปลั๊กอิน ฟังก์ชันการทำงานนี้สอดคล้องกับแนวคิดของ Headless CMS

ในความเป็นจริง การประยุกต์ใช้ความสามารถนี้ขยายไปไกลเกินกว่าที่คิดได้ในตอนแรก ส่วนหน้าแยกต่างหากของคุณ ซึ่งใช้ WordPress REST API อาจอยู่ในรูปแบบต่างๆ:

  • แอพหรือเว็บไซต์ SPA (แอปพลิเคชันหน้าเดียว)
  • แอปหรือเว็บไซต์ SSR (แสดงผลฝั่งเซิร์ฟเวอร์)
  • เว็บไซต์ที่สร้างขึ้นแบบคงที่ตามสถาปัตยกรรม JAMStack
  • Progressive Web App (PWA)
  • แอปพลิเคชันมือถือ
  • แบ็กเอนด์เสาหินอีกอันหนึ่งที่ใช้เครื่องมือเทมเพลตที่ง่ายกว่าหรือเร็วกว่า

โดยพื้นฐานแล้ว ไคลเอนต์ใดๆ ที่สามารถใช้ API และตำแหน่งที่คุณยังคงควบคุมฟรอนต์เอนด์ได้อย่างเต็มที่นั้นก็สามารถทำงานได้ WordPress ทำหน้าที่เป็นแหล่งข้อมูลที่คล้ายกับ API แบ็กเอนด์เป็นหลัก โดยเฉพาะอย่างยิ่ง ปลั๊กอิน เช่น ACF (ฟิลด์ที่กำหนดเองขั้นสูง) หรือพ็อดสามารถเปิดเผยฟิลด์ที่กำหนดเองผ่าน API ได้เช่นกัน

นอกจากนี้ คุณยังมีความยืดหยุ่นในการเพิ่มตำแหน่งข้อมูลแบบกำหนดเองให้กับ WordPress API และใช้ระบบการตรวจสอบสิทธิ์ รวมถึงการสร้าง nonces และส่วนประกอบที่จำเป็นอื่นๆ

ห่อ

โดยสรุป การรวม Vue.js เข้ากับ WordPress ช่วยให้นักพัฒนามีโซลูชันที่มีประสิทธิภาพสำหรับการสร้างประสบการณ์เว็บแบบไดนามิกและโต้ตอบภายในระบบนิเวศของ WordPress Vue.js เป็นที่รู้จักในด้านความเรียบง่ายและความยืดหยุ่น ช่วยให้นักพัฒนาสามารถสร้างเว็บแอปพลิเคชันสมัยใหม่ได้อย่างมีประสิทธิภาพและง่ายดายผ่านสถาปัตยกรรมแบบคอมโพเนนต์

Divi WordPress Theme