Nachdem wir erfahren haben, dass sowohl Webkomponenten als auch interaktive Webkomponenten einfacher zu bedienen sind als Sie denken, sehen wir uns an, wie Sie sie dem Content -Management -System hinzufügen, nämlich WordPress.
Es gibt drei Hauptmethoden, um sie hinzuzufügen. Erstens, indem Sie manuell in die Website eingeben - sie direkt in ein Gerät oder einen Textblock einfügen, können Sie im Grunde genommen überall andere HTML platzieren. Zweitens können wir sie als Themenausgabe in der Themendatei hinzufügen. Schließlich können wir sie als Ausgabe von benutzerdefinierten Blöcken hinzufügen.
Unabhängig davon, wie Sie am Ende Webkomponenten hinzufügen, müssen wir Folgendes sicherstellen:
Wir werden aus meinem vorherigen Artikel über interaktive Webkomponenten hinzufügen<zombie-profile></zombie-profile> Webkomponenten. Bitte überprüfen Sie den Code auf CodePen.
Schauen wir uns den ersten Punkt an. Sobald wir die Vorlage haben, ist es einfach, sie der footer.php -Datei des WordPress -Themas hinzuzufügen, aber anstatt sie direkt zum Thema hinzuzufügen, haben Sie sie an wp_footer an, damit das Laden der Komponente unabhängig von der footer.php -Datei und dem gesamten Thema ist - das Thema verwendet wp_footer , die meisten Themen. Wenn die Vorlage beim Versuch nicht in Ihrem Thema angezeigt wird, überprüfen Sie, ob wp_footer in der Datei footoc.php -Vorlagendatei Ihres Themas aufgerufen wird.
php function diy_ezwebcomp_foter () {?> php}
add_action ('wp_footer', 'diy_eZwebcomp_footer'); Als nächstes kommt JavaScript, das Komponenten registriert. Wir können JavaScript auch über wp_footer hinzufügen, aber die Registrierung ist die empfohlene Möglichkeit, JavaScript mit WordPress zu verknüpfen. Lassen Sie uns JavaScript in eine Datei namens ezwebcomp.js (dieser Name ist vollständig willkürlich) ein.
wp_enqueue_script ('ezwebcccc_js', get_template_directory_uri (). Wir müssen sicherstellen, dass der letzte Parameter auf true eingestellt ist, d. H. Er lädt JavaScript vor dem Endkörper -Tag. Wenn wir es in den Kopf laden, wird es unsere HTML -Vorlage nicht finden und es wird sehr wütend sein (werfen Sie ein paar Fehler).
Wenn Sie Ihre Webkomponenten vollständig zusammenfassen können, können Sie den nächsten Schritt überspringen. Wenn Sie dies jedoch nicht können, müssen Sie diese nichtkapseligen Stile registrieren, damit sie überall dort verfügbar sind, wo Sie die Webkomponenten verwenden. (Ähnlich wie bei JavaScript können wir es direkt zur Fußzeile hinzufügen, aber die Registrierung von Stilen ist die empfohlene Methode). Wir werden also unsere CSS -Datei registrieren:
WP_ENQUEUE_STYLE ('eZWEBCOMP_STYLE', Get_Template_Directory_uri ().Das ist nicht zu schwierig, oder? Wenn Sie nicht vorhaben, einen Benutzer außer Administrator verwenden zu lassen, können Sie ihn überall hinzufügen, wo Sie ihn verwenden möchten. Aber das ist nicht immer, also werden wir uns weiterentwickeln!
WordPress hat verschiedene Möglichkeiten, um Benutzern zu helfen, gültige HTML zu erstellen und zu verhindern, dass Ihr Onkel Eddie die "lustigen" Bilder, die von Shady AL direkt in den Editor erhalten wurden, einfügen (einschließlich Skripte zum Hacken aller Ihrer Besucher).
Wenn Sie also Webkomponenten direkt zu Blöcken oder Widgets hinzufügen, müssen wir mit der in WordPress integrierten Codefilterung vorsichtig sein. Wenn Sie es vollständig deaktivieren, wird Onkel Eddie (und Shady Al) alles tun, was er will, aber wir können es ändern, damit unsere Webkomponenten das Tor durchlaufen (zum Glück blockiert es Onkel Eddie).
Zunächst können wir den Filter wp_kses_allowed verwenden, um unsere Webkomponenten der Liste der Elemente hinzuzufügen, die nicht herausgefiltert werden sollten. Es ist so, als würden wir die Komponente aufweichen, die wir tun, indem wir sie dem Tag hinzuzufügen, das an die Filterfunktion übergeben wird.
Funktion add_diy_eZwebccccccmp_to_kses_alowed ($ the_allowed_tags) {
$ the_allowed_tags ['Zombie-profil'] = array ();
}
add_filter ('wp_kses_allowed_html', 'add_diy_eZwebcomp_to_kses_allowed'); Wir<zombie-profile></zombie-profile> Die Komponente fügt ein leeres Array hinzu, da WordPress sowohl Eigenschaften als auch Elemente herausfiltert. Dies bringt uns ein weiteres Problem: slot sind standardmäßig nicht zulässig. Daher müssen wir es in jedem Element, das es verwenden soll, explizit zulassen, und entsprechend kann der Benutzer beschließen, es jedem darin enthaltenen Element hinzuzufügen. slot Warten Sie, auch wenn Sie es sechs Mal mit jedem Benutzer überprüft true , sind diese Elementlisten auch anders<span></span> Anwesend<img alt="Die Verwendung von Webkomponenten in WordPress ist einfacher als Sie denken" > Und<ul></ul> Ich habe diese drei Elemente gestellt<zombie-profile></zombie-profile> Komponenten -Slots.
Funktion add_diy_eZwebccccccmp_to_kses_alowed ($ the_allowed_tags) {
$ the_allowed_tags ['Zombie-profil'] = array ();
$ the_allowed_tags ['span'] ['slot'] = true;
$ the_allowed_tags ['ul'] ['slot'] = true;
$ the_allowed_tags ['img'] ['slot'] = true;
return $ the_allowed_tags;
}
add_filter ('wp_kses_allowed_html', 'add_diy_eZwebcomp_to_kses_allowed'); Wir können auch slot -Attribute in allen zulässigen Elementen mithilfe einer Methode wie dem folgenden Code aktivieren:
Funktion add_diy_eZwebccccccmp_to_kses_alowed ($ the_allowed_tags) {
$ the_allowed_tags ['Zombie-profil'] = array ();
foreach ($ the_allowed_tags as & $ tag) {
$ tag ['slot'] = true;
}
return $ the_allowed_tags;
}
add_filter ('wp_kses_allowed_html', 'add_diy_eZwebcomp_to_kses_allowed');Leider gibt es ein anderes mögliches Problem. Wenn alle Elemente in Ihrem Slot Inline-/Phrasenelemente sind, haben Sie möglicherweise nicht dieses Problem. Wenn Sie jedoch ein Element auf Blockebene in Ihre Webkomponente einsetzen, haben Sie möglicherweise Konflikte mit dem Block-Parser im Code-Editor. Sie können besser Boxen als ich sein können, aber ich verliere immer.
Aus Gründen, die ich nicht vollständig erklären kann, geht der Client -Parser davon aus oder Dies ist zwar frustrierend und Sie müssen Ihren Web -Editor dies lernen lassen, es gibt eine Problemumgehung. Wenn wir unsere Webkomponenten direkt in einen benutzerdefinierten HTML -Block im Block -Editor einfügen, lässt uns der Client -Parser nicht weinen, auf dem Bürgersteig hin und her schwanken und unsere Fähigkeit zum Codieren in Frage stellen ... natürlich ist dies niemals jemandem passiert ... besonders denen, die Artikel schreiben ... Solange es außerhalb von HTML -Blöcken nicht aktualisiert wird, ist es sehr einfach, unsere schönen Webkomponenten in der Themendatei auszugeben. Wir fügen es so hinzu, wie wir es in einem anderen Kontext hinzufügen, und vorausgesetzt, wir haben die Vorlagen, Skripte und Stile installiert, die Dinge funktionieren. Angenommen, wir möchten Inhalte für WordPress -Beiträge oder benutzerdefinierte Post -Typen in einer Webkomponente ausgeben. Sie wissen, schreiben einen Beitrag, und dieser Beitrag ist der Inhalt der Komponente. Auf diese Weise können wir den WordPress -Editor zur Ausgabe verwenden Das ist der größte Teil des Inhalts! Aber wir brauchen immer noch Felder im Alter, des Infektionsdatums und des Interesses von Zombies. Wir erstellen diese Felder mithilfe der integrierten benutzerdefinierten Feldfunktion von WordPress. Wir werden den Template -Teil des Druckprozesses für jeden Beitrag (z. B. content.php) verwenden, um die Webkomponente auszugeben. Erstens werden wir den offenen Drucken drucken Als nächstes drucken wir den für den Namen verwendeten Titel In meinem Code habe ich getestet, ob diese Felder vor dem Drucken aus zwei Gründen vorhanden sind: Als nächstes nehmen wir die benutzerdefinierten Felder und legen sie in den Schlitz, zu dem sie gehören. Auch dies wird zur Themenvorlage für die Ausgabe des Post -Inhalts gelten. Php echo $ temp; php}?> Einer der Nachteile der Verwendung von WordPress -benutzerdefinierten Feldern ist, dass Sie keine spezielle Formatierung ausführen können. Ein nicht-technischer Web-Editor, der diesen Inhalt bevölkert Da wir den Körper des Beitrags als unsere Aussage verwenden, erhalten wir einen zusätzlichen Code, wie z. B. Absatz -Tags, die den Inhalt umgeben. Wenn Sie Profilaussagen in benutzerdefinierten Feldern einsetzen, können dies jedoch abhängig von Ihrem Zweck auch das erwartete/gewünschte Verhalten sein. Dann veröffentlichen Sie einfach jeden Beitrag als einen und können so viele Beiträge/Zombie -Profile hinzufügen, wie Sie möchten! Das Erstellen von benutzerdefinierten Blöcken ist eine großartige Möglichkeit, Webkomponenten hinzuzufügen. Ihre Benutzer können die gewünschten Felder ausfüllen und die Magie von Webkomponenten ohne Code oder technisches Wissen erhalten. Außerdem ist der Block vollständig themenunabhängig, sodass wir diesen Block auf einer Website verwenden und ihn dann auf anderen WordPress-Sites installieren können-es ist ein bisschen so, als ob wir die Webkomponenten erwarten! Es gibt zwei Hauptteile des benutzerdefinierten Blocks: PHP und JavaScript. Wir werden auch einige CSS hinzufügen, um die Bearbeitungserfahrung zu verbessern. Erstens ist PHP: CSS ist nicht erforderlich, es hilft, die Profilbilder von Zombies zu verhindern, dass sich die Profilbilder mit dem, was sich im WordPress -Editor befindet, überlappt. Das JavaScript, das wir brauchen, ist etwas komplizierter. Ich habe versucht, es so weit wie möglich zu vereinfachen und es so zugänglich wie möglich zu machen. Deshalb habe ich es mit ES5 geschrieben, um die Kompilierung erforderlich zu machen. Wäre es nicht toll, wenn eine gutherzige Person, ein Artikelschreiber und eine völlig großartige Person eine Vorlage erstellen, die Sie Ihre Webkomponenten anschließen und für Ihre Website verwenden können? Nun, dieser Typ war nicht verfügbar (er ging, um Wohltätigkeitsorganisationen zu helfen oder so), also habe ich es getan. Es ist auf GitHub: Mach es selbst - einfache Webkomponenten von WordPress Das Plugin ist eine Codierungsvorlage, die Ihre benutzerdefinierten Webkomponenten registriert, die von der Komponente geforderten Skripte und Stile registriert, Beispiele für benutzerdefinierte Blockfelder enthält, die Sie möglicherweise benötigen, und stellt sogar sicher, dass es im Editor wunderschön gestaltet ist. Genau wie ein anderes WordPress-Plugin manuell installieren, platzieren Sie es in einem neuen Ordner in Obwohl es so aussieht, als ob es viel Code gibt, machen wir eigentlich nur einige ziemlich Standard -WordPress -Vorgänge, um benutzerdefinierte Webkomponenten zu registrieren und zu rendern. Und da wir es als Plugin verpacken, können wir es auf jede WordPress -Site setzen und Zombieprofile veröffentlichen, bis wir zufrieden sind. Ich denke, der Gleichgewichtspunkt versucht, die Komponenten auch im WordPress -Block -Editor als Front -End zu bringen. Ohne diese Überlegung können wir den Job mit weniger Code erledigen. Trotzdem haben wir die genauen Komponenten, die wir in unserem vorherigen Beitrag vorgenommen haben, erfolgreich in das CMS eingelegt, mit denen wir eine beliebige Anzahl von Zombie -Profilen auf der Website platzieren können. Wir kombinieren Webkomponentenwissen mit WordPress -Blöcken, um einen wiederverwendbaren Block für wiederverwendbare Webkomponenten zu entwickeln. Welche Art von Komponenten würden Sie für Ihre WordPress -Website erstellen? Ich denke, hier gibt es viele Möglichkeiten und ich würde gerne wissen, was Sie am Ende machen werden. Fügen Sie dem Thema Komponenten hinzu
<zombie-profile></zombie-profile> Archiv der Elemente. Dies ist großartig, weil der WordPress -Editor uns bereits einen von ihnen tippt<zombie-profile></zombie-profile> Der größte Teil der für den Komponenteninhalt erforderlichen Benutzeroberfläche:
<li> Der Post -Titel kann als Name des Zombies verwendet werden.
<li> Regelmäßige Absatzblöcke in Post -Inhalten können für Zombie -Aussagen verwendet werden.
<li> Ausgewählte Bilder können für Profilbilder von Zombies verwendet werden.
<zombie-profile></zombie-profile> Tags, dann posten Miniaturansichten (falls vorhanden).<zombie-profile> Php // Wenn es postgeführte Bilder gibt ...
if (has_post_thumbnail ()) {
$ src = wp_get_attachment_image_url (get_post_thumbnail_id ()); <img slot="profile-image" src="<?php%20echo%20%24src;%20?>" alt="Die Verwendung von Webkomponenten in WordPress ist einfacher als Sie denken" > php}
??></zombie-profile> <php wenn das feld des posttitels existiert ... if> php echo get_the_title ();
php}
?></php>
<li> In den meisten Fällen ist das Verstecken von Etiketten und Elementen auf leeren Feldern eine gute Programmierungspraxis.
<li> Wenn wir am Ende einen leeren Namen ausgeben
<span></span> (Zum Beispiel `），那么该字段将在最终的个人资料中显示为空，而不是使用我们Web组件内置的默认文本、图像等。（例如，如果你希望文本字段在没有内容时为空，你可以在自定义字段中输入空格，或者跳过代码中的).
<php zombie age temp="get_post_meta" true if> php echo $ temp;
php}
// Zombie -Infektionsdatum $ temp = get_post_meta (the_id (), 'Infektionsdatum', true);
if ($ temp) {??> php echo $ temp;
php}
// Zombie Zinsen $ temp = get_post_meta (the_id (), 'Interessen', true);
if ($ temp) {??></php><li> Tags (z. B. 20. ). (Möglicherweise können Sie diese Schnittstellenbeschränkung auflösen, indem Sie leistungsstärkere benutzerdefinierte Feld -Plugins wie erweiterte benutzerdefinierte Felder, Pods oder ähnliche Plugins verwenden.) Schließlich fügen wir die Zombie -Anweisung und das Ende hinzu<zombie-profile></zombie-profile> Etikett. php $ temp = get_the_content ();
if ($ temp) {??> php echo $ temp;
php}
?> Blockparty: Webkomponenten in benutzerdefinierten Blöcken
Funktion ez_webcomp_register_block () {
// Registrieren Sie das JavaScript, das zum Erstellen von benutzerdefinierten Blöcken erforderlich ist
wp_register_script (
'Ez-Webcomp',
Plugins_url ('block.js', __file__),
Array ('WP-Blocks', 'WP-Element', 'WP-Editor'),
fileMtime (plugin_dir_path (__ file__). 'block.js')
);
// CSS -Datei der CSS -Datei der Komponenten wp_register_style (
'Ez-Webcomp',
Plugins_url ('eZWebcc-Stil.css', __file__),
Array (),
fileMtime (plugin_dir_path (__ file__). 'eZWebComp-Stil.css')
);
// Registrieren Sie benutzerdefinierte Block Register_Block_type ('ez-webcc/zombie-profile', Array (Array (
// Wir haben bereits externe Stile;
'editor_script' => 'ez-webcomp', ',
));
}
add_action ('init', 'ez_webcomp_register_block'); /* Legt die Breite und Höhe des Bildes fest.
* Ihre Kilometerleistung kann variieren. Bitte stellen Sie sich nach Bedarf an.
* "Bild" ist die Klasse, die wir zum Editor in block.js*/ hinzufügen,*/
#Editor .pic img {
Breite: 300px;
Höhe: 300px;
}
/* Dieses CSS stellt sicher, dass dem Bild der richtige Raum zugewiesen wird.
* Und verhindert auch, dass die Schaltfläche die Größe vor der Auswahl des Bildes verhindern.
*/
#Editor .pic Button.comPonents-Button {
Überlauf: sichtbar;
Höhe: Auto;
} Code anzeigen
(Funktion (Blöcke, Editor, Element, Komponenten) {
// Die Funktion zum Erstellen von Element var el = element.createelement;
// Texteingabe von Block Feldern var RichText = editor.richText;
// Prozess hochladen Image/Media var MediaUpload = editor.mediaupload;
// Gehen Sie zurück zu Register_Block_Type in PHP
Blocks.registerBlockType ('ez-webccc/zombie-profile', {{
Titel: 'Zombie-Profil', // benutzerfreundlicher Name im Block-Selektor-Symbol: 'ID-Alt', // Symbole, die in der Kategorie Block Selector verwendet werden: 'Layout',,
// Eigenschaften sind alle verschiedenen Felder, die wir verwenden werden.
// Wir definieren, was sie sind und wie der Blockeditor die Daten von ihnen erhält.
Attribute: {
Name: {
// Inhaltstyp: 'String',,
// Der Ort, mit dem die Informationsquelle erhalten werden kann: 'Text',,
// Selector ist die Art und Weise, wie der Blockeditor Inhalt auswählt und erhält.
// Diese sollten in einer Instanz des Blocks eindeutig sein.
// Wenn du nur einen IMG oder einen hast<p> usw. Sie können den Element -Selektor verwenden.
Selector: '.zname',
},
MediaId: {Typ: 'Nummer',},
MediaUrl: {Typ: 'String', Quelle: 'Attribut', Selector: 'IMG', Attribut: 'Src',},
Alter: {Typ: 'String', Quelle: 'Text', Selector: '.age',},
InfectDate: {Typ: 'Datum', Quelle: 'Text', Selector: '.infektion-date'},
Interessen: {Typ: 'Array', Quelle: 'Kinder', Selektor: 'ul',},
Anweisung: {Typ: 'Array', Quelle: 'Kinder', Selektor: '.statement',},
},
// Die Funktion bearbeiten, wie Sie Inhalte im Block -Editor anzeigen.
Bearbeiten: Funktion (Requisiten) {
var attribute = props.attributes;
var onselectimage = function (Media) {
return props.setAttributes ({Mediaurl: media.url, mediaId: media.id,});
};
// Die Rückgabeerklärung wird im Editor angezeigt.
// el () erstellt ein Element und legt seine unterschiedlichen Eigenschaften fest.
Return EL (
// Verwenden Sie hier die Einfachheit halber anstelle von Zombie-Profile-Webkomponenten.
'div',
{className: props.className},
// der Name des Zombie El (Richtext, {
Tagname: 'H2',
Inline: wahr,
Klassenname: 'Zname',
Platzhalter: 'Zombie -Name…',,
Wert: Attribute.name,
onchange: function (value) {
props.setAttributes ({name: value});
},
}),
el (
// Zombie -Profil Bild 'Div',
{className: 'pic'},
EL (MediaUpload, {
Onselect: Onselectimage,
erlaubt: 'Bild',
Wert: Attribute.Mediaid,
Render: Funktion (obj) {
Return EL (
Komponenten.Button,
{
Klassenname: Attribute.Mediaid?
Onclick: Obj.open,
},
! Attribute.Mediaid?
);
},
})
),
// Wir werden den Titel El ('H3', {}, 'Alter') des Zombie -Zeitalters im Block -Editor einschließen.
// Altersfeld El (RichText, {
Tagname: 'Div',
Klassenname: 'Alter',
Platzhalter: 'Zombie' Alter… ',,
Wert: Attribute.age,
onchange: function (value) {
props.setAttributes ({alter: value});
},
}),
// Infektionsdatum Titel El ('H3', {}, 'Infektionsdatum'),
// Infektionsdatum Feld El (Richtext, {
Tagname: 'Div',
Klassenname: 'Infektionsdatum',
Platzhalter: 'Zombie' Infektionsdatum… ',,
Wert: Attribute.infectdate,
onchange: function (value) {
props.SetAttributes ({InfektionDate: value});
},
}),
// Hobby -Titel El ('H3', {}, 'Interessen'),
// Hobby Field El (Richtext, {
Tagname: 'ul',
// Jedes Mal, wenn Sie die Taste "Enter" drücken, wird eine neue erstellt</p> Stellen Sie eine Verbindung zu Webkomponenten her
/wp-content/plugins , achten Sie darauf, dass Sie es mit Ihrer spezifischen Webkomponente aktualisieren und dann in WordPress auf dem Bildschirm "Installed Plugins" aktivieren. Nicht schlecht, richtig?
Das obige ist der detaillierte Inhalt vonDie Verwendung von Webkomponenten in WordPress ist einfacher als Sie denken. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
So kaufen und verkaufen Sie Bitcoin in China
So beheben Sie das Fehlen von winntbbu.dll
Standarddrucker festlegen
Der Computer kann nicht kopieren und einfügen
Was bedeutet der Befehl rm-rf unter Linux?
WeChat konnte keine Daten laden
So löschen Sie leere Seiten in Word
HTML zum Erstellen von Webseiten
Neueste Nachrichten zu BTC-Münzen
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
