Heim >CMS-Tutorial >WordDrücken Sie >Erstellen eines WordPress -Plugins mit Vue

Erstellen eines WordPress -Plugins mit Vue

Jennifer Aniston
Jennifer AnistonOriginal
2025-02-09 11:12:101169Durchsuche

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

Building a WordPress Plugin with Vue

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:

    <code class="language-php"><?php
    /*
    Plugin Name: Latest Posts
    Description: Latest posts shortcode with Vue.js
    Version: 1.0
    */</code>
  3. Register -Shortcode: Fügen Sie diesen Code zu vueplugin.php hinzu, um einen Shortcode mit dem Namen latestPosts:

    zu registrieren
    <code class="language-php">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');</code>

    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.

Building a WordPress Plugin with Vue Building a WordPress Plugin with Vue Building a WordPress Plugin with Vue

Integrieren von Vue.js:

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

    <code class="language-javascript">(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>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>
            `
        });
    })();</code>
Diese Vue -Instanz holt Beiträge ab, zeigt sie in einer Liste an und aktualisiert alle 5 Sekunden.

  1. Ü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

Building a WordPress Plugin with Vue Building a WordPress Plugin with Vue

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn