Erstellen eines WordPress -Plugins mit Vue

Dieses Tutorial zeigt, wie eine moderne WordPress -Benutzeroberfläche mit Vue.js erstellt wird, ein progressives JavaScript -Framework. Wir erstellen ein einfaches Plugin mit einer Vue -Schnittstelle, die über die Fetch -API mit der WordPress -REST -API interagiert.

Schlüsselkonzepte:

• Diese Anleitung deckt das Erstellen eines WordPress -Plugins ab, das einen Shortcode registriert, Vue.js integriert und eine VUE -App erstellt, die mit dem Endpunkt /wp-json/wp/v2/posts?filter[orderby]=date interagiert, um neuere Beiträge anzuzeigen.
• Wir werden demonstrieren, dass wir eine VUE -Instanz erstellen, indem wir Lebenszyklushaken wie mounted() und Daten abrufen. Echtzeit-Updates mit setInterval() werden ebenfalls angezeigt.
• Das Tutorial setzt eine grundlegende Vertrautheit mit Vue.js.
voraus

Erstellen des WordPress -Plugins:

1. Plugin -Verzeichnis erstellen: Erstellen Sie einen Ordner (z. B. vueplugin) in Ihrem WordPress wp-content/plugins -Verzeichnis.

2. vueplugin.php: Innerhalb des Ordners erstellen vueplugin.php mit dem folgenden Anfangsinhalt:

   <?php
   /*
   Plugin Name: Latest Posts
   Description: Latest posts shortcode with Vue.js
   Version: 1.0
   */

3. Register -Shortcode: Fügen Sie diesen Code zu vueplugin.php hinzu, um einen Shortcode mit dem Namen latestPosts:

   zu registrieren

   function handle_shortcode() {
       return '<div id="mount"></div>';
   }
   add_shortcode('latestPosts', 'handle_shortcode');
   
   function enqueue_scripts() {
       global $post;
       if (has_shortcode($post->post_content, "latestPosts")) {
           wp_enqueue_script('vue', 'https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js', [], '2.5.17');
           wp_enqueue_script('latest-posts', plugin_dir_url(__FILE__) . 'latest-posts.js', [], '1.0', true);
       }
   }
   add_action('wp_enqueue_scripts', 'enqueue_scripts');

   Dies erlebt die Vue.js -Bibliothek und eine benutzerdefinierte JavaScript -Datei (latest-posts.js).

4. Aktivieren Sie Plugin: Aktivieren Sie das Plugin über Ihr WordPress -Administrator -Dashboard.

5. Test -Shortcode: add [latestPosts] zu einem Beitrag oder einer Seite hinzufügen, um den Shortcode zu testen.

Integrieren von Vue.js:

1. latest-posts.js: in Ihrem Plugin -Verzeichnis erstellen mit diesem Code: latest-posts.js

   (function() {
       var vm = new Vue({
           el: '#mount',
           data: {
               posts: []
           },
           mounted: function() {
               this.fetchPosts();
               setInterval(this.fetchPosts.bind(this), 5000);
           },
           methods: {
               fetchPosts: function() {
                   fetch('/wp-json/wp/v2/posts?filter[orderby]=date')
                       .then(response => response.json())
                       .then(data => this.posts = data);
               }
           },
           template: `
               <div>
                   <h1 id="My-Latest-Posts">My Latest Posts</h1>
                   <div v-if="posts.length > 0">
                       <ul>
                           <li v-for="post in posts">
                               <a :href="https://www.php.cn/link/f417d05af72b37f956c906aea42d1511">{{ post.title.rendered }}</a>
                           </li>
                       </ul>
                   </div>
                   <div v-else>
                       <p>Loading posts...</p>
                   </div>
               </div>
           `
       });
   })();

Diese Vue -Instanz holt Beiträge ab, zeigt sie in einer Liste an und aktualisiert alle 5 Sekunden.

2. Überprüfung: Überprüfen Sie die Entwicklerkonsole Ihres Browsers auf "Komponenten ist montiert" und die abgerufenen Pfosten. Das Skript sollte auch in Ihrer Seitenquelle enthalten sein. latest-posts.js

Schlussfolgerung:

Dieses erweiterte Tutorial bietet ein vollständiges Beispiel für die Integration von VUE.js in ein WordPress-Plugin für eine dynamische Echtzeit-Benutzererfahrung. Denken Sie daran, Pfade und Styling nach Bedarf für Ihr spezifisches Thema anzupassen. Die FAQs der ursprünglichen Eingabe wurden weggelassen, da sie innerhalb des überarbeiteten und erweiterten Tutorials angemessen abgedeckt sind.

Das obige ist der detaillierte Inhalt vonErstellen eines WordPress -Plugins mit Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!