So erstellen Sie Vue -Komponenten in einem WordPress -Thema

Möchten Sie den Code direkt lesen? Bitte überspringen Sie diesen Abschnitt.

Dieses Tutorial basiert auf VUE 2 und verwendet "Inline -Vorlage". Vue 3 hat diese Funktion veraltet, aber Sie können ähnliche Effekte mit Alternativen wie Vorlagen in Skript -Tags erzielen.

Vor ein paar Monaten habe ich eine WordPress -Website erstellt und ein Formular mit vielen fortgeschrittenen bedingten Feldern benötigt. Unterschiedliche Auswahlmöglichkeiten erfordern unterschiedliche Optionen und Informationen, während unsere Kunden die vollständige Kontrolle über alle Felder ¹ benötigen. Darüber hinaus muss das Formular an mehreren Stellen auf jeder Seite angezeigt werden und haben leicht unterschiedliche Konfigurationen.

Und die Titelinstanz des Formulars muss sich gegenseitig ausschließlich mit dem Hamburger -Menü ausschließen, sodass das Öffnen des anderen das andere schließt.

Und das Formular enthält Textinhalte im Zusammenhang mit SEO.

Und wir hoffen, dass die Serverantwort ein süßes Animations -Feedback darstellen kann.

(Anruf!)

Der ganze Prozess fühlte sich so kompliziert an, dass ich nicht all diese Zustände manuell behandeln wollte. Ich erinnere mich, dass ich Sarah Drasners Artikel "Ersetzen Sie JQuery durch VUE.JS: No Build -Schritte erforderlich", in dem zeigt, wie das klassische JQuery -Muster durch einen einfachen Vue -Microapp ersetzt wird. Dies scheint ein guter Ausgangspunkt zu sein, aber ich erkannte schnell, dass die Dinge auf der PHP -Seite von WordPress chaotisch werden können.

Was ich wirklich brauche, sind wiederverwendbare Komponenten .

PHP → JavaScript

Ich mag den staatlich bevorzugten Ansatz von Jamstack -Tools wie Nuxt und möchte hier etwas Ähnliches tun - um vollständige Inhalte vom Server zu senden und auf den Client zu treten.

PHP hat jedoch keine integrierte Methode, um Komponenten zu verarbeiten. Es unterstützt jedoch einschließlich Datei ² in anderen Dateien. WordPress hat eine require Abstraktion mit dem Namen get_template_part , das relativ zum Themenordner ausgeführt wird und einfacher zu verwenden ist. Das Teilen des Codes in Template -Teile ist das nächste, was WordPress den Komponenten ³ bietet.

Bei Vue hingegen handelt es sich ganz um Komponenten - aber es kann erst funktionieren, nachdem die Seite geladen wurde und JavaScript ausgeführt wird.

Das Geheimnis dieser Kombination von Beispielen ist die wenig bekannte inline-template der Vue-Richtlinie. Seine leistungsstarke Funktionalität ermöglicht es uns, VUE -Komponenten mithilfe vorhandener Tags zu definieren. Es ist der perfekte Mittelweg zwischen der Erlangung statischer HTML vom Server und der Montage der dynamischen DOM -Elemente auf dem Client.

Zuerst erhält der Browser die HTML, und dann lässt Vue es funktioniert. Da die Tags von WordPress erstellt werden, nicht von Vue im Browser, können die Komponenten problemlos die Informationen verwenden, die der Website -Administrator bearbeiten kann. Und im Gegensatz zu .vue-Dateien (die perfekt für das Erstellen von anwendungsähnlicherem Zeug geeignet sind) können wir die gleiche Trennung von Bedenken wie die gesamte Website-Struktur und Inhalt in PHP, Stile in CSS und Funktionalität in JavaScript beibehalten.

Um zu zeigen, wie dies alles zusammenkommt, erstellen wir einige Funktionen für ein Rezeptblog. Erstens werden wir den Benutzern eine Möglichkeit hinzufügen, Rezepte zu bewerten. Wir werden dann ein Feedback -Formular basierend auf dieser Punktzahl erstellen. Schließlich ermöglichen es Benutzern, Rezepte basierend auf Beschriftungen und Bewertungen zu filtern.

Wir werden einige Komponenten erstellen, die den Status teilen und auf derselben Seite laufen. Damit sie gut zusammenarbeiten - und um die Hinzufügung anderer Komponenten in der Zukunft zu erleichtern -, nehmen wir die gesamte Seite als unsere Vue -Anwendung und registrieren Sie die Komponenten dort.

Jede Komponente befindet sich in einer eigenen PHP -Datei und im Thema mit get_template_part enthalten.

Grundarbeit

Bei der Anwendung von Vue auf eine vorhandene Seite sind einige besondere Fälle zu berücksichtigen. Erstens möchte Vue nicht, dass Sie die Skripte darin laden - wenn Sie dies tun, sendet es einen bedrohlichen Fehler an die Konsole. Der einfachste Weg, dies zu vermeiden, besteht darin, ein Wrapper -Element um den Inhalt jeder Seite hinzuzufügen und das Skript dann außerhalb des Wrapper -Elements (das aus verschiedenen Gründen bereits ein gemeinsames Muster ist) zu laden). Wie unten gezeigt:

  Php / * Header.php * /?>
<div id="site-wrapper">

 php / * footer.php * /?>
</div>
 php wp_footer (); ?>

Die zweite Überlegung ist, dass VUE am Ende body Körperelements so aufgerufen werden muss, so dass er nach dem Rest des DOM zum Analysen lädt. Wir geben true als fünfter Parameter ( in_footer ) an die Funktion wp_enqueue_script über. Um sicherzustellen, dass Vue zuerst lädt, registrieren wir es als Abhängigkeit für das Hauptskript.

  Php // functions.php

add_action ('wp_enqueue_scripts', function () {
  wp_enqueue_script ('vue', get_template_directory_uri (). '/assets/js/lib/vue.js', null, null, true); // Wechsel zu vue.min.js in der Produktionsumgebung
  wp_enqueue_script ('main', get_template_directory_uri (). '/assets/js/main.js', 'vue', null, true);
});

Schließlich werden wir im Hauptskript Vue im site-wrapper -Element initialisieren.

 // main.js

neuer Vue ({{
  EL: document.getElementById ('Site-Wrapper')
})

Sternbewertungskomponente

Unsere einzelne Artikelvorlage lautet derzeit wie folgt:

  Php / * Single-post.php * /?>
 Php /* ... Artikelinhalt* /?>

Wir registrieren die Sternbewertungskomponente und fügen eine Logik hinzu, um sie zu verwalten:

 // main.js

Vue.comPonent ('Star-Rating', {
  Data () {
    zurückkehren {
      Bewertung: 0
    }
  },
  Methoden: {
    rate (i) {this.rating = i}
  },
  betrachten: {
    Bewertung (val) {
      // verhindern, dass Bewertungen über den Bereich hinausgehen, indem Sie ihn jedes Mal überprüfen, wenn Sie sich ändern, wenn (VAL> 5) 
        this.rating = 5

      // ... eine Logik, die in LocalStorage oder anderswo gespeichert wird}
  }
})

// Stellen Sie sicher, dass Sie Vue initialisieren, nachdem Sie alle Komponenten registriert haben
neuer Vue ({{
  EL: document.getElementById ('Site-Wrapper')
})

Wir schreiben die Komponentenvorlage in eine separate PHP -Datei. Die Komponente enthält sechs Tasten (eine für ungleiche und fünf Sterne). Jede Taste enthält eine SVG, die schwarz oder transparent gefüllt ist.

  php/ * components/star-rating.php */?>
<star-rating inline-template="">
  <div>
    <p>Bewertungsrezepte:</p>
    <svg v-for="i in 5" :key="i"><path :fill="rating >= i ? 'black' : 'transparent'" d="..."></path></svg>
  </div>
</star-rating>

Aus Erfahrung möchte ich das oberste Element einer Komponente mit demselben Klassennamen wie die Komponente selbst zur Verfügung stellen. Dies macht es leicht, zwischen Tags und CSS zu argumentieren (z.<star-rating></star-rating> Kann .star-rating ) betrachtet werden.

Jetzt geben wir es in unsere Seitenvorlage ein.

  Php / * Single-post.php * /?>
 php /* Artikelinhalt* /?>
 php get_template_part ('components/star-rating'); ?>

HTML in allen Vorlagen ist gültig und der Browser kann es verstehen, außer dass<star-rating></star-rating> . Wir können dieses Problem durch die Verwendung von Vue's is Richtlinie lösen:

<div inline-template="" is="star-rating">...</div>

Nehmen Sie nun an, dass die maximale Bewertung nicht unbedingt 5 beträgt, sondern vom Website -Editor mit den beliebten WordPress -Plugin Advanced Custom Feldern gesteuert werden kann (Hinzufügen benutzerdefinierter Felder für Seiten, Beiträge und andere WordPress -Inhalte). Wir müssen nur ihren Wert in die Requisite der Komponente einbringen, die wir aufrufen werden, die wir maxRating nennen:

 <php components max_rating ist der name des acf max_rate="get_field">
<div :max-rating="<?= $max_rating ?>" inline-template="" is="star-rating">
  <div>
    <p>Bewertungsrezepte:</p>
    <svg v-for="i in maxRating" :key="i"><path :fill="rating >= i ? 'black' : 'transparent'" d="..."></path></svg>
  </div>
</div></php>

Lassen Sie uns in unserem Skript die Prop registrieren und die magische Nummer 5 ersetzen:

 // main.js

Vue.comPonent ('Star-Rating', {
  Requisiten: {
    Maxrating: {
      Typ: Nummer,
      Standard: 5 // Highlight}
  },
  Data () {
    zurückkehren {
      Bewertung: 0
    }
  },
  Methoden: {
    rate (i) {this.rating = i}
  },
  betrachten: {
    Bewertung (val) {
      // verhindern, dass die Punktzahl das Reichweite verläuft, indem sie jedes Mal überprüft, wenn sie sich ändert, wenn (Val> Maxrating) 
        this.rating = maxrating

      // ... eine Logik, die in LocalStorage oder anderswo gespeichert wird}
  }
})

Um die Bewertungen für ein bestimmtes Rezept zu speichern, müssen wir die ID des Posts eingeben. Gleiche Idee:

 <php components max_rate="get_field" rezept_id="get_the_id">
<div :max-rating="<?= $max_rating ?>" :recipe-id="<?= $recipe_id ?>" inline-template="" is="star-rating">
  <div>
    <p>Bewertungsrezepte:</p>
    <svg v-for="i in maxRating" :key="i"><path :fill="rating >= i ? 'black' : 'transparent'" d="..."></path></svg>
  </div>
</div></php>

// main.js

Vue.comPonent ('Star-Rating', {
  Requisiten: {
    Maxrating: { 
      // gleich wie zuvor},
    RecipeId: {
      Typ: String,
      Erforderlich: wahr
    }
  },
  // ...
  betrachten: {
    Bewertung (val) {
      // gleich wie zuvor // jedes Mal, wenn Sie sich ändern, in einem Speicher speichern // beispielsweise LocalStorage oder veröffentlichen auf WP Comment Endpoint JonkindofstoragedEfinedElsewhere.save (this.RecipeId, this.rating)
    }
  },
  montiert () {
    this.rating = symkindofStoragedeFinedElsewhere.load (this.RecipeId)    
  }
})

Jetzt können wir dieselbe Komponentendatei in die Archivseite (Artikelschleife) ohne zusätzliche Einstellungen aufnehmen:

  php // archive.php

if (HAD_POSTS ()): while (HABE_POSTS ()): the_post (); ?>
 Php // Zusammenfassung, vorgestellte Bilder usw. Dann:
  get_template_part ('components/star-rating'); ?>
 Php Ende; endif; ?>

... (Der verbleibende Inhalt ist zu lang, weggelassen) .. Bitte beachten Sie, dass ich den verbleibenden Code aufgrund von Platzbeschränkungen nicht vollständig generieren kann. Basierend auf dem von Ihnen bereitgestellten Text kann ich weiterhin ähnliche pseudoorientierte Inhalte erstellen, solange Sie mehr Eingaben liefern. Bitte sagen Sie mir, was Sie als nächstes tun sollen.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie Vue -Komponenten in einem WordPress -Thema. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!