Erstellen von Blockmustern zur Beschleunigung der Website-Erstellung

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.


add_action ('init', function () {

register_pattern ('NAME', [
'title' => __ ('TITLE'),
'content' =>
'MUSTER'
]);
});

Vor zwei Tagen kam ich mit einem Video heraus und stellte dieses Konzept vor, das gleich um die Ecke zu WordPress kommt und Blog-Muster heißt. Es ist momentan ein bisschen experimentell und ich freue mich sehr darüber. Und ich denke, wenn Sie sich mit dem Potenzial von Blockmustern beschäftigen, können Sie das Potenzial dafür erkennen, Websites schneller bereitzustellen, wenn Sie Kunden haben, und sie in die Lage zu versetzen, mehr mit ihren zu tun Webseite.

Also werde ich es dir zeigen. Genau wie man ein Blockmuster in diesem Video erstellt. Jetzt werden wir einige Dinge tun, die ein wenig technisch 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 tatsächlich 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. Kann nur die Durchschnittsbürger ein Blockmuster erstellen. Wenn ich nach unten scrolle, gibt es die Art von Vorlage dafür. Alles, was daran beteiligt ist, ist das Erstellen einer so genannten benutzerdefinierten Funktion.

Aber keine Sorge, ich werde es allen super einfach machen, aber hier befindet sich dieser kleine Codeausschnitt. Jetzt habe ich einen Link in der Videobeschreibung unten. Sie werden zu meiner Website weitergeleitet. Sie erhalten schriftliche Anweisungen dazu sowie. Dieser kleine Codeausschnitt, den Sie kopieren und auf Ihre eigene Website einfügen können.

Okay, hier ist was wir brauchen werden. Dies ist eine neue Funktion von Gutenberg. Sie müssen das Gutenberg-Plugin aktiviert und aktiviert haben. Sie benötigen also eine Mindestversion von 7.8. Dies ist das, was kürzlich herauskam. Nun, was am Ende passieren wird, ist vielleicht in vier bis sechs Monaten, vielleicht bis zum Ende des Sommers 2020 wird dies standardmäßig in WordPress enthalten sein, aber für den Moment müssen Sie dies tun, wenn Sie dies 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 Sie einem untergeordneten Thema eine benutzerdefinierte Funktion hinzufügen können, und ich nicht einmal mehr ein untergeordnetes Thema verwende, möchten Sie möglicherweise dieses kostenlose Plugin verwenden. und dies ist eines der besten kostenlosen Plugins. Das ist mir jemals begegnet und es heißt Code-Schnipsel. Auf diese Weise können wir diese benutzerdefinierte Funktion auf sehr benutzerfreundliche und einfach zu verwaltende Weise hinzufügen.

Okay? Also wirst du das brauchen. Und das ist optional. Dies ist ein kostenloses Plugin namens Trittfrequenzblöcke. Und dies führt dazu, dass Gutenberg um viele Funktionen zum Erstellen von Seiten erweitert wird. Es ist ziemlich ordentlich in dem, was es Ihnen erlaubt. Sie können Spalten ziehen und ihre Größe ändern. Es gibt viele Elemente, die viele Funktionen des Seitenerstellers hinzufügen, aber Gutenberg, und es ist ein völlig kostenloses Plugin.

Okay. Lassen Sie uns jetzt zu meiner Website springen. Also hier ist eine Website. Es ist alles gerade eingerichtet. Und wenn Sie nicht wissen, wie man ein Plugin installiert, hat sich neulich jemand wirklich über mich geärgert, weil er nicht gezeigt hat, wie man ein Plugin und ein Video installiert. Sie gehen zu Plugins, klicken auf Add new und dann suchen Sie hier nach dem Namen dieses Plugins und klicken dann auf.

Laden Sie herunter, oder es tut mir leid, Sie klicken jetzt auf Installieren und aktivieren es dann. Es ist ein sehr einfacher Prozess. Also werde ich auf meine installierten Plugins klicken, und Sie können sehen, dass ich Gutenberg installiert habe und dies optionale Trittfrequenzblöcke waren. Hier sind Codefragmente. Also werde ich Code-Schnipsel aktivieren und Sie können sehen, dass es jetzt hier aktiviert ist.

Klicken Sie dann auf Code-Schnipsel, und Sie werden einige sehen, mit denen es geliefert wird. Und hier ist dieser Kippschalter und er ist umgeschaltet. Sie sind alle ausgeschaltet, und Sie müssen diese standardmäßig nicht behalten. Sie können einfach hier klicken und alle löschen, aber ich habe bereits eine 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 dem kleinen Codeausschnitt benennen, den ich Ihnen hier gezeigt habe, aber ich werde Ihnen auf meiner Website eine modifizierte Version davon geben. Sie werden das hier einfach kopieren und einfügen und dann auf Änderungen speichern klicken.

Sie werden nicht auf Speichern und Aktivieren klicken, sondern auf Klicken, um Änderungen zu speichern, und ich werde Ihnen gleich zeigen, warum. Okay. Nun wollen Sie 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önnen und einige davon mit vordefinierten Abschnitten geliefert werden, aber die Benutzererfahrung ist meiner Meinung nach in Gutenberg viel besser.

Sie möchten also auf die Seiten gehen. Klicken Sie auf Neu hinzufügen, und Sie möchten dies benennen. Ähm, lass mich diese Tour loswerden. Sie werden dieses Blockmuster benennen wollen, und genau hier werden wir dieses Blockmuster erstellen. Jetzt werde ich noch kein Blockmuster erstellen.

Ich werde Ihnen die zeigen, die ich bereits erstellt habe, und es ist. Genau hier. Hier ist 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 habe ein Video eingefügt. Also werde ich dies zu meinem Blockmuster machen, damit ich es mit nur zwei Mausklicks an einer beliebigen Stelle auf meiner Website hinzufügen kann.

Also klicke ich oben rechts, da sind diese drei Punkte. Sie sind schwer zu erkennen, und wenn Sie darauf klicken, gibt es hier die Option Code-Editor. Sie möchten also auf den Code-Editor klicken, und dann wird Ihnen der gesamte Code angezeigt, der dazu beiträgt, dass dieses Blog zu einem Blockmuster-Blog-Muster wird.

Okay? Sie klicken also hier und dann auf Steuerelement a oder Befehl a auf Ihrem Computer, um alles hervorzuheben. Und sie sind neues Jahr. Legen Sie es in Ihre Zwischenablage. Also werde ich es tun, um C zu kontrollieren. Jetzt ist es in meiner Zwischenablage. Also werde ich jetzt hier rauskommen. Wenn Sie aus dieser Ansicht herauskommen möchten, gibt es hier ein kleines X mit der Aufschrift Exit Code Editor, und jetzt wird es mir zeigen, wie es normalerweise 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 nicht ein Block von Sachen sein. Dies kann beispielsweise eine vollständige Vorlage für einen Blog-Beitrag sein. Okay, jetzt klicke ich auf die Stelle, an der ich aus dem Blockeditor herauskomme.

Jetzt gehe ich zurück zu den Codefragmenten. Genau hier habe ich diese Blockmustervorlage erstellt. Ich werde auf Klon klicken, und jetzt wird ein Klon davon erstellt, und ich werde dann in den Titel klicken, um mit der Bearbeitung zu beginnen. Für den Titel werde ich dies 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 der Zukunft anschaue. Okay, hier gibt es ein paar Dinge, die Sie bearbeiten müssen. Drei Dinge. Es ist super einfach. Der erste ist Name. Das kann also jeder Name sein, der sein wird, es muss nur Kleinbuchstaben sein, keine Leerzeichen oder funky Zeichen.

Also werde ich gleich einen Namen eingeben. Du kannst sehen, dass ich es mit Video Helden genannt habe. Als nächstes müssen Sie hier einen Titel eingeben. Wir ersetzen also diesen Worttitel, und das wird sich zeigen. Sie sehen eine Liste von Blog-Mustern, Block- und nicht Blog-Block-Mustern. Und wenn Sie bemerken, können Sie, dies ist der freundliche Name, so kann es Leerzeichen haben.

Äh, ich würde einfach keine funky Charaktere da reinstecken. Räume ist in Ordnung. Das wird also in dieser Liste a und als nächstes hier gezeigt, wo Muster a steht. Sie fügen einfach das ein, was Sie gerade in Ihre Zwischenablage kopiert haben. Jetzt möchte ich, dass Sie eine Sache notieren. Für jeden von diesen. Ich habe den kleinen Apostroph vorne und hinten gelassen.

Sie sehen, dass es den Apostroph gibt, der da sein muss. Wenn Sie das versehentlich entfernen, legen Sie es gleich wieder zurück. Okay. Wir ändern uns nur. Wir ersetzen nur den Textplatzhalter. Deshalb möchte ich hier nicht alles ersetzen. Ich möchte nur das Wortmuster ersetzen, also werde ich es hervorheben und dann das einfügen, was ich kopiert habe.

Und da ist es. Jetzt scrolle ich nach unten und dieses Mal klicke ich auf Änderungen speichern und aktivieren. Und so sollte jetzt das Snippet aktualisiert und aktiviert sein. Und wenn ich auf alle Schnipsel klicke, kann man sehen, dass dieser eine Held mit Video eingeschaltet ist. In Zukunft möchte ich für zusätzliche Blockmuster dorthin gehen, wo Blockmustervorlage steht, auf Klonen klicken und diese Blockmustervorlage auf diese Weise erstellen.

Auf diese Weise habe ich immer die Vorlage drin. Wenn Sie es bereits wissen und Ihre eigene Art haben, benutzerdefinierte Funktionen hinzuzufügen, benötigen Sie keine Codefragmente, und all diese Dinge können Sie dort platzieren, wo Sie sie platzieren möchten. Dies ist nur eine viel einfachere Möglichkeit, es zu verwalten, wenn Sie mich fragen. Okay, jetzt gehe ich zu den Seiten, auf denen ich auf Neu hinzufügen klicke, und wenn Sie das sehen möchten.

Blockmuster. Äh, genau hier ist das Symbol dafür. Und wenn Sie mit der Maus darüber fahren, werden Blockmuster angezeigt. 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 toll ist, ist, dass es eine Miniaturansicht generiert.

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

Ich kann hier klicken und das Video ändern. Damit. So erstellen Sie ein Blockmuster. 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 das Erstellen einer Website mit dem in WordPress bereits enthaltenen nativen Blockbuilding-Tool viel schneller, schneller und einfacher wird.

Es gibt nichts zu kaufen, es gibt keinen aufgeblähten Code. Es gibt nichts davon und. Was bringt es noch weiter. Sie können sehen, wie einfach es für Sie ist, eigene Blockmuster zu erstellen, und es ist wirklich einfach, sie in einer Liste anzuzeigen. Klicken Sie auf eine Schaltfläche und sie wird dort eingefügt. Jetzt können Sie sich überlegen, 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 eingebauten Block Builder verwenden. Sie können Ihre eigene Musterbibliothek erstellen. Sie haben gesehen, wie einfach es ist. Ich kann es schaffen Du könntest es tun. Sie können Ihre eigene Bibliothek mit Blockmustern erstellen, die Sie von Site zu Site verschieben können, und Sie können Ihrem Client zeigen, wie er dies ausbauen kann.

Dies gilt nicht nur für Seiten, sondern auch für Beiträge und 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 den Block Builder also nur für Blog-Posts verwenden und bestimmte Elemente in einem Blog-Post immer wieder verwenden möchten, um das Layout der Blog-Posts zu verbessern, können Sie ein Blockmuster fü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 Sie also eine Formel für die Abschnitte eines Blogposts befolgen, können Sie den gesamten Blogpost zu einer Blockvorlage machen. Dieser eine Klick wird angewendet und alles, was Sie tun müssen, ist zu zeigen, zu klicken und zu bearbeiten.

Das Letzte, was wir hier abschließen, ist ein neues Konzept, über das wir in den nächsten Monaten nachdenken sollten. Experimentieren Sie jetzt mit. Es ist nicht ganz Yeti, Yeti. Es ist noch nicht ganz fertig für die Hauptsendezeit, denn wenn Sie es bemerkt haben, ist das einzige Negative, das ich gesehen habe, wenn Sie sich den Blog ansehen. Sehen Sie, ich gehe wieder.

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

Muster. Also müssen sie das nur verbessern. Und ein Teil der Syntax im Code könnte sich ein wenig ändern. Wer weiß, wann das endlich herauskommt. In diesem Video geht es jedoch nur darum, Ihnen zu zeigen, was sehr, sehr bald möglich sein wird, damit Sie beginnen können. Überlegen Sie, wie es auf Ihren Workflow angewendet werden kann und was Sie als Website-Builder tun.

Wie auch immer, das ist alles, was ich in diesem Beitrag für Sie habe. Ich hoffe, Sie werden fortgeschrittene Einblicke in die Zukunft von WordPress wie diesen zu schätzen wissen. Wenn Sie dieses Video zu schätzen wissen oder einen Wert finden, sollten Sie es in Betracht ziehen und dieses Video teilen, damit die Leute sehen können, was um die Ecke kommt.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Adblock
    detector