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!