So erstellen Sie WordPress-Blockmuster, um die Erstellung von Websites zu beschleunigen

Blockmuster werden für alle WordPress-Benutzer eine große Sache sein, und in diesem Beitrag werde ich Ihnen genau zeigen, wie Sie Ihre eigenen Blockmuster erstellen können.

 add_action( 'init', function() { register_pattern( 'NAME', [ 'title' => __( 'TITLE' ), 'content' => 'PATTERN' ] ); } );

Vor zwei Tagen kam ich mit einem Video heraus und stellte dieses Konzept vor, das gleich um die Ecke von WordPress kommt und Blog-Muster genannt wird. Es ist im Moment etwas experimentell, und es ist etwas, worüber ich wirklich aufgeregt bin. Und ich denke, wenn Sie sich mit dem Potenzial dessen befassen, was Blockmuster sind, dann können Sie das Potenzial dafür erkennen, dass es Ihnen hilft, Websites schneller bereitzustellen, wenn Sie Kunden haben, um es ihnen zu ermöglichen, mehr mit ihren zu tun Webseite.

Also werde ich es dir zeigen. In diesem Video erfahren Sie genau, wie Sie ein Blockmuster erstellen. Jetzt werden wir einige Dinge tun, die ein wenig auf der Seite der Techniker sind, und ich weiß, dass dies der WordPress-Kanal für Nicht-Techniker ist, also werde ich versuchen, es so einfach wie möglich zu machen, aber Sie sind es Ich werde am Ende sehen, wie einfach es ist, eines dieser Blockmuster zu erstellen.

Also lasst uns einfach weitermachen und einen Blick darauf werfen. Hier ist also die Seite, auf der über die neue Version dieser Funktion gesprochen wird, um sie zu erstellen. In der Lage, nur die durchschnittlichen Leute ein Blockmuster zu erstellen. Wenn ich also nach unten scrolle, gibt es die Art von Vorlage dafür. Alles, was daran beteiligt ist, ist das Erstellen einer sogenannten benutzerdefinierten Funktion.

Aber keine Sorge, ich werde es für alle sehr einfach machen, aber hier ist dieser kleine Codeschnipsel. Jetzt habe ich einen Link in der Videobeschreibung unten. Sie gelangen auf meine Website. Dazu erhalten Sie eine schriftliche Anleitung. Dieses kleine Code-Snippet, das Sie kopieren und auf Ihrer eigenen Website einfügen können.

Okay, hier ist, was wir brauchen werden. Dies ist eine neue Funktion für Gutenberg und Sie müssen das Gutenberg-Plugin installiert und aktiviert haben, also benötigen Sie eine Mindestversion von 7.8 und das ist, was kürzlich herausgekommen ist. Was jetzt passieren wird, ist vielleicht in vier bis sechs Monaten, vielleicht wird dies bis Ende des Sommers 2020 standardmäßig in WordPress enthalten sein, aber im Moment müssen Sie es tun, wenn Sie es ausprobieren möchten , müssen Sie das Gutenberg-Plugin installieren.

Das nächste, was Sie tun können, und dies ist optional, wenn Sie nicht wissen, wie man eine benutzerdefinierte Funktion zu einem untergeordneten Thema hinzufügt, und ich nicht einmal mehr ein untergeordnetes Thema verwende, möchten Sie vielleicht dieses kostenlose Plugin verwenden, und dies ist eines der besten kostenlosen Plugins. Darauf bin ich je gestoßen, und es heißt Codeschnipsel. Und dies wird es uns ermöglichen, diese benutzerdefinierte Funktion und eine sehr einfach zu verwendende und einfach zu verwaltende Weise hinzuzufügen.

Okay? Das wirst du also brauchen. Und das ist optional. Dies ist ein kostenloses Plugin namens Cadence Blocks. Und dies fügt Gutenberg eine Menge Seitenerstellungsfunktionen hinzu. Es ist ziemlich ordentlich in dem, was es Ihnen ermöglicht. Sie können Spalten ziehen und ihre Größe ändern. Es gibt viele Elemente, die viele dieser Seitenerstellungsfunktionen hinzufügen, aber zu Gutenberg, und es ist ein völlig kostenloses Plugin.

Okay. Kommen wir nun zu meiner Website. Also hier ist eine Webseite. Es ist jetzt alles eingerichtet. Und wenn Sie nicht wissen, wie man ein Plugin installiert, wurde neulich jemand wirklich sauer auf mich, weil ich nicht gezeigt habe, wie man ein Plugin und ein Video installiert. Du gehst zu Plugins, klickst auf Neu hinzufügen, und dann suchst du hier nach dem Namen dieses Plugins und klickst dann.

Laden Sie es herunter, oder es tut mir leid, Sie klicken jetzt auf Installieren und aktivieren es dann. Es ist ein sehr einfacher Vorgang. Ich klicke also auf meine installierten Plugins, und Sie können sehen, dass ich Gutenberg installiert habe und dies optionale Kadenzblöcke waren, und hier sind Code-Snippets. Also werde ich fortfahren und Code-Snippets aktivieren, und Sie können sehen, dass es jetzt hier aktiviert ist.

Also mach weiter und klicke auf Code-Snippets und du wirst einige sehen, die es enthält. Und hier ist dieser Kippschalter und er ist umgeschaltet. Sie sind alle ausgeschaltet und Sie müssen diese standardmäßig nicht beibehalten. Sie können einfach hier klicken und sie alle löschen, aber ich habe bereits eine hier hinzugefügt, die als Blockmustervorlage bezeichnet wird.

Also was würdest du tun. Klicken Sie auf Neu hinzufügen, und Sie können diese Blockmustervorlage in diesem kleinen Codeausschnitt benennen, den ich Ihnen gezeigt habe, der genau hier ist, aber ich werde Ihnen eine modifizierte Version davon auf meiner Website geben. Sie kopieren das einfach und fügen es hier ein, und dann klicken Sie auf Änderungen speichern.

Sie werden nicht auf Speichern und Aktivieren klicken, Sie werden auf klicken, um Änderungen zu speichern, und ich werde Ihnen gleich zeigen, warum. Okay. Jetzt wollen Sie also dieses Blockmuster erstellen. Und ein Blockmuster ist einfach nur ein gespeicherter Abschnitt. Wenn Sie also einen Seitenersteller verwenden, wissen Sie jetzt, dass Sie Abschnitte speichern könnten und einige von ihnen mit vorgefertigten Abschnitten geliefert werden, aber die Benutzererfahrung ist meiner Meinung nach in Gutenberg viel besser.

Was Sie also tun möchten, ist, zu den Seiten zu gehen. Und klicken Sie auf Neu hinzufügen, und Sie möchten dies benennen. Ähm, eigentlich lass mich diese Tour loswerden. Sie werden dieses Blockmuster benennen wollen, und genau hier werden wir dieses Blockmuster erstellen. Jetzt werde ich jetzt nicht durch die Erstellung eines Blockmusters gehen.

Ich zeige Ihnen das, das ich bereits erstellt habe, und es ist . Genau hier. Hier ist also ein Blockmuster, das ich erstellt habe. Sie konnten sehen, dass es dieser Abschnitt ist. Es hat diesen bunten Hintergrund. Ich habe hier eine Überschrift, einige Unterüberschriften und ein paar Schaltflächen, und ich füge ein Video ein. Also werde ich dies zu meinem Blockmuster machen, damit ich es mit zwei Mausklicks überall auf meiner Website hinzufügen kann.

Ich klicke also oben rechts auf diese drei Punkte. Sie sind irgendwie schwer zu sehen, und wenn Sie darauf klicken, gibt es genau hier diese Option mit der Aufschrift Code-Editor. Sie sollten also auf den Code-Editor klicken, und dann zeigt er Ihnen den gesamten Code, der dazu gehört, aus diesem Blog ein Blockmuster-Blogmuster zu machen.

Okay? Sie werden also hier klicken und dann auf Ihrem Computer auf Steuer- oder Befehlstaste a klicken, um alles hervorzuheben. Und sie sind Neujahr. Legen Sie es in Ihre Zwischenablage. Also werde ich es C steuern, also ist es jetzt in meiner Zwischenablage. Also, was ich jetzt tun werde, ist, dass ich hier rauskomme. Wenn Sie diese Ansicht verlassen möchten, gibt es hier ein kleines X mit der Aufschrift Exit-Code-Editor, und jetzt wird es mir so angezeigt, wie es normalerweise genau hier ist.

Okay. Sie können dies also als Entwurf speichern, wenn Sie möchten, aber Sie werden dies nicht benötigen. Dies ist nur für Sie, um dieses Blockmuster zu erstellen, und Sie können ein Blockmuster erstellen, das alles ist, und es muss kein Block sein. Das kann zum Beispiel eine ganze Vorlage für einen Blogbeitrag sein. Okay, also klicke ich jetzt auf die Stelle, wo das W ist, das mich aus dem Blockeditor herausholt.

Jetzt gehe ich zurück zu den Codeschnipseln. Genau hier habe ich also diese Blockmustervorlage erstellt. Ich klicke auf "Klonen", und jetzt wurde ein Klon davon erstellt, und ich klicke dann auf den Titel, um mit der Bearbeitung zu beginnen. Also werde ich den Titel in einen Titel ändern, der für die Verwaltung sinnvoll ist.

Also für mich werde ich es nur nennen. Ein Held mit Video. Jetzt weiß ich also, was das ist, wenn ich mir die Liste in Zukunft anschaue. Okay, hier gibt es ein paar Dinge, die Sie bearbeiten müssen. Drei Dinge. Es ist ganz einfach. Der erste ist der Name. Dies kann also ein beliebiger Name sein, er muss nur aus Kleinbuchstaben bestehen, ohne Leerzeichen oder unkonventionelle Zeichen.

Also werde ich weitermachen und gleich einen Namen eintragen. Sie können sehen, dass ich es Held mit Video genannt habe. Als nächstes müssen Sie hier einen Titel eingeben. Also ersetzen wir diesen Worttitel, und das wird darin angezeigt. Sie sehen sich eine Liste von Blog-Mustern an, Blöcke, nicht Blog-Block-Muster. Und wenn Sie bemerken, können Sie, dies ist der freundliche Name, also kann er Leerzeichen haben.

Uh, ich würde da einfach keine abgefahrenen Charaktere hineinstecken. Leerzeichen ist in Ordnung. Das wird also in dieser Liste a und als nächstes genau hier angezeigt, wo Muster a steht. Sie werden einfach einfügen, was Sie gerade in Ihre Zwischenablage kopiert haben. Jetzt möchte ich, dass Sie sich eines merken. Für jeden von diesen. Ich habe den kleinen Apostroph auf der Vorder- und Rückseite gelassen.

Sie sehen, dass dort das Apostroph stehen muss. Wenn Sie das versehentlich entfernen, legen Sie es gleich wieder ein. Okay. Wir ändern uns gerade. Wir ersetzen nur den Textplatzhalter. Also hier möchte ich nicht alles ersetzen. Ich möchte nur das Wortmuster ersetzen, also werde ich es hervorheben und dann werde ich einfügen, was ich kopiert habe.

Und da ist es. Also scrolle ich jetzt nach unten und klicke dieses Mal auf Änderungen speichern und aktivieren. Und jetzt sollte es Snippet aktualisiert und aktiviert heißen. Und wenn ich auf alle Schnipsel klicke, könntest du jetzt sehen, dass dieser eine Held mit Video eingeschaltet ist. In Zukunft möchte ich für zusätzliche Blockmuster zu der Stelle gehen, an der Blockmustervorlage steht, und auf Klonen klicken und diese Blockmustervorlage auf diese Weise erstellen.

So habe ich die Vorlage immer drin. Nun, wenn Sie es bereits wissen und Ihre eigene Methode zum Hinzufügen benutzerdefinierter Funktionen haben, brauchen Sie keine Code-Snippets und all diese Dinge können Sie dort platzieren, wo Sie sie platzieren möchten. Dies ist nur ein viel einfacherer Weg, es zu verwalten, wenn Sie mich fragen. Okay, also ich werde jetzt auf meine Seiten gehen und auf Neu hinzufügen klicken, und wenn ihr das sehen wollt.

Muster blockieren. Uh, hier ist das Symbol dafür. Und wenn Sie den Mauszeiger darüber bewegen, heißt es Blockmuster. Und wenn ich darauf klicke, sehen Sie einige der Blockmuster, mit denen gerade experimentiert wird. Aber wenn Sie nach unten scrollen, sehen Sie das Blockmuster, das ich erstellt habe. Und was wirklich nett ist, ist, dass es eine Thumbnail-Vorschau generiert.

Und das tut es dynamisch. Sie haben Tools zum Erstellen von Seiten, die dies nicht einmal tun. Uh, und es macht es so viel einfacher, Ihre Blockmuster zu verwalten. Also, und Sie können genau hier sehen, dass es Held mit Vorlage heißt. Wenn ich das jetzt irgendwo auf meiner Website verwenden möchte, ist es ein Mausklick. Und dann ist es da. Und alles, was ich an diesem Punkt tun musste, um einige Texte zu ändern, änderte die Links zu den Schaltflächen.

Ich kann hier klicken und das Video ändern. So. So erstellen Sie ein Blockmuster. Nun, das ist eine große Sache, denke ich, denn was passieren wird, ist ein Thema. Entwickler und Plugin-Ersteller können diese Blockmuster für Sie erstellen, sodass es viel schneller, schneller und einfacher sein wird, eine Website mit dem nativen Blockerstellungstool zu erstellen, das WordPress bereits enthält.

Es gibt nichts zu kaufen, es gibt kein Code-Bloat. Es gibt keines dieser Dinge, und. Was noch weiter geht. Sie können sehen, wie einfach es für Sie ist, Ihre eigenen Blockmuster zu erstellen, und es ist wirklich einfach, sie in einer Liste zu sehen. Klicken Sie auf eine Schaltfläche und es wird dort eingefügt. Jetzt könnten Sie also darüber nachdenken, wie viel einfacher es sein kann, eine Website zu erstellen, wenn Sie über eine eigene Bibliothek mit Blockmustern verfügen.

Wenn Sie also Websites für Kunden erstellen und keinen Seitenersteller verwenden möchten. Sie möchten nur den integrierten Block Builder verwenden. Sie könnten Ihre eigene Bibliothek mit Mustern erstellen. Sie haben gesehen, wie einfach es ist. Ich kann es tun. Du könntest es tun. Uh, Sie könnten Ihre eigene Bibliothek mit Blockmustern erstellen, die Sie von Site zu Site verschieben können, und Sie können Ihrem Kunden zeigen, wie er dies aufbauen kann.

Nun, das ist nicht nur für Seiten, das ist für Posts, und es ist nicht nur auf den einen Abschnitt beschränkt, den Sie gesehen haben. Grundsätzlich alles, was Sie auf einer Seite erstellen können. Sie können ein Blockmuster erstellen. Wenn Sie also den Block Builder nur für Blog-Posts verwenden und es bestimmte Elemente gibt, die Sie immer wieder in einem Blog-Post verwenden möchten, um das Layout der Blog-Posts zu verbessern, dann können Sie ein Blockmuster dafür erstellen es.

Und es ist wirklich einfach. Ein Klick und Sie können es verwenden. In der Tat die gesamten Blog-Post-Vorlagen. Wenn es also eine Formel gibt, der Sie für die Abschnitte eines Blogbeitrags folgen, können Sie den gesamten Blogbeitrag zu einer Blockvorlage machen. Dieser eine Klick wird angewendet und dann müssen Sie nur noch zeigen, klicken und bearbeiten.

Das letzte, was wir hier abschließen, ist ein neues Konzept, über das man in den nächsten Monaten nachdenken sollte. Probieren Sie es jetzt aus. Es ist nicht ganz Yeti, Yeti. Es ist noch nicht ganz bereit für die Hauptsendezeit, denn wenn Sie bemerkt haben, ähm, das einzige Negative, das ich gesehen habe, war, als Sie sich den Blog angesehen haben. Sehen Sie, ich gehe wieder.

Wenn Sie sich die Blockmuster ansehen, ist es nur eine höhere Artikelliste, durch die Sie scrollen müssen, also müssen sie den Prozess des Kategorisierens und Organisierens verbessern. Vielleicht haben sie eine Art Schnittstelle dafür, um es visueller und einfacher zu machen. Wenn Sie 50 verschiedene Blöcke haben wollen.

Muster. Also müssen sie das nur verbessern. Und ein Teil der Syntax des Codes könnte sich ein wenig ändern. Wer weiß, wann das endlich rauskommt. Aber der springende Punkt in diesem Video ist nur, Ihnen zu zeigen, was sehr, sehr bald möglich sein wird, damit Sie beginnen können. Denken Sie darüber nach, wie es auf Ihren Workflow angewendet werden kann und was Sie als Website-Ersteller tun.

Wie auch immer, das ist alles, was ich in diesem Beitrag für dich habe. Ich hoffe, Sie werden fortgeschrittene Einblicke in die Zukunft von WordPress wie diesen zu schätzen wissen, und wenn Ihnen dieses Video gefallen hat oder Sie einen Wert gefunden haben, ziehen Sie in Betracht, ihm einen Daumen nach oben zu geben und dieses Video zu teilen, damit die Leute sehen können, was um die Ecke kommt.