Heim > Web-Frontend > CSS-Tutorial > So erstellen Sie Blockthema -Muster in WordPress 6.0

So erstellen Sie Blockthema -Muster in WordPress 6.0

Christopher Nolan
Freigeben: 2025-03-13 10:02:09
Original
870 Leute haben es durchsucht

So erstellen Sie Blockthema -Muster in WordPress 6.0

WordPress 5.5 führt den Blockmodus (auch allgemein als "Blöcke" bezeichnet) ein, mit dem Benutzer vordefinierte Blocklayouts erstellen und freigeben können. Diese Layouts werden im Schemaverzeichnis gespeichert und enthalten verschiedene Schemas, die von der WordPress -Community entworfen wurden. Diese Modi verwenden ein einfaches Copy-Paste-Format ohne Codierungskenntnisse, das den Benutzern die Zeit erheblich spart.

Während es bereits viele Artikel über Muster gibt, fehlt es an umfassenden und neuesten Artikeln zur Erstellung von Mustern, die über die neuesten Verbesserungen abdecken. Dieser Artikel zielt darauf ab, diese Lücke zu schließen, die jüngsten Verbesserungen wie das Erstellen von Mustern ohne Registrierung hervorzuheben und neue und erfahrene Autoren eine Schritt-für-Schritt-Anleitung zum Erstellen und Verwenden von Mustern, insbesondere in Blockthemen, zu bieten.

Die Verwendung des Blockmodus in Blockthemen ist seit der Veröffentlichung von WordPress 5.9 und 222 (TT2) Standardthemen gestiegen. Ich war schon immer ein großer Fan von Blockmustern und habe sie in meinen Blockthemen erstellt und verwendet.

WordPress 6.0 bietet Autoren drei Hauptmodus -Verbesserungen:

  • Ermöglicht den Registrierungsmodus über den Ordner /musters (ähnlich wie /Teile, /Vorlagen und /Stile).
  • Verwenden Sie themen.json, um das Schema im Public -Modus -Verzeichnis zu registrieren.
  • Fügt ein Muster hinzu, das Benutzern beim Erstellen einer neuen Seite zur Verfügung gestellt werden kann.

In dem Einführungsvideo "Erkundung von WordPress 6.0" hob das Automattic Product Liaison Ann McCathy einige der neuen Verbesserungsmodusfunktionen (ab 15:00 Uhr) hervor und diskutierte zukünftige Pläne für die Verbesserung des zukünftigen Modus - einschließlich Modi als Abschnittselemente, Optionen zur Auswahl von Modi, wenn die Erstellung von Seite, integrierte Modus -Verzeichnissuche und vieles mehr.

Voraussetzungen

In diesem Artikel geht davon aus, dass die Leser grundlegende Kenntnisse über die Schnittstelle zwischen WordPress-Site-Wide Bearbeitungsbearbeitungsmittel (FSE) haben und Themen blockieren. Das Block-Bearbeitungshandbuch und die Website-weite Bearbeitungswebsite bieten die neuesten Tutorial-Guides für das Erlernen aller FSE-Funktionen, einschließlich der in diesem Artikel diskutierten Blockthemen und -muster.

Abschnitt 1: Evolutionsmethoden zum Erstellen von Blockmustern

Die anfängliche Methode zum Erstellen eines Blockmusters erfordert die Verwendung der Blockmuster -API, die als benutzerdefiniertes Plugin verwendet oder direkt in der Datei functions.php registriert ist, um das Blockthema zu bündeln. Der neu veröffentlichte WordPress 6.0 führt mehrere neue und erweiterte Funktionen für die Verwendung mit Mustern und Themen vor, einschließlich des Ordnerregistrierungsmodus /Musters -Ordnermodus und der Modalität des Seitenerstellungsmodus.

Beginnen wir als Hintergrund mit einem kurzen Überblick darüber, wie sich der Workflow der Schemaregistrierung aus der Verwendung der Register -Schema -API entwickelt hat, um direkt ohne Registrierung zu laden.

Anwendungsfall Beispiel 1: 20 einundzwanzig

Das standardmäßige zwanzigundzwanzig Thema (TT1) und TT1 blockiert Themen (TT1 Schwester), wie man den Blockmodus in den Funktionen des Themas registriert. Im TT1 Blocks experimentelles Thema wird eine einzelne Blockpattern.php-Datei mit acht Blockmustern zu Funktionen.php als Einschlussdatei hinzugefügt, wie unten gezeigt.

Sie müssen ein benutzerdefiniertes Blockmuster mit der Funktion "Register_Block_Pattern" registrieren, die zwei Parameter empfängt - den Titel (der Name des Musters) und das Attribut (das Array, das die Mustereigenschaften beschreibt).

Hier ist ein Beispiel für ein einfaches Absatzmuster "Hello World", das gemäß dem Artikel -Shaper -Artikel registriert ist:

 Register_Block_Pattern (
    'my-plugin/hello world',
    Array (
        'Titel' => __ ('Hallo Welt', 'my-plugin'),
        'Inhalt' => "\ n<p> Hallo Welt</p> \N",
    )
);
Nach dem Login kopieren

Nach der Registrierung sollte die Funktion "Register_Block_Pattern ()) vom unten beschriebenen Handler aufgerufen werden.

 Funktion my_plugin_register_my_patterns () {
    Register_Block_Pattern (...);
}

add_action ('init', 'my_plugin_register_my_patterns');
Nach dem Login kopieren

Nach der Registrierung von Blockmodi sind sie im Block -Editor sichtbar. Eine detailliertere Dokumentation finden Sie in der Registrierung des Blockmodus.

Blockmoduseigenschaften

Zusätzlich zu den erforderlichen Titel- und Inhaltseigenschaften listet das Block -Editor -Handbuch auch die folgenden optionalen Moduseigenschaften auf:

  • Titel (Erforderlich) : menschlich-lesbarer Titel für das Muster.
  • Inhalt (erforderlich) : HTML -Tag für das Muster blockieren.
  • Beschreibung (optional) : Visuell verborgener Text, der zur Beschreibung des Musters im Inserter verwendet wird. Die Beschreibung ist optional, wird jedoch dringend empfohlen, wenn der Titel die Funktionalität des Modus nicht vollständig beschreibt. Die Beschreibung hilft den Benutzern, beim Suchen Muster zu entdecken.
  • Kategorien (optional) : Eine Reihe registrierter Schema -Kategorien, die zum Gruppen von Blockschemata verwendet werden. Der Blockmodus kann in mehreren Kategorien angezeigt werden. Die Kategorie muss separat registriert werden, um hier zu verwenden.
  • Schlüsselwörter (optional) : Benutzern hilft den Benutzern dabei, Alias- oder Schlüsselwort -Arrays zu entdecken, die beim Suchen Muster entdecken.
  • ViewPortwidth (optional) : Gibt eine Ganzzahl der erwarteten Breite des Modus an, um den Modus proportional im Inserter anzusehen.
  • Blocktypen (optional) : Eine Array von Blocktypen, die das Muster verwendet. Jeder Wert muss der Name des deklarierten Blocks sein.
  • Inserter (optional) : Standardmäßig werden alle Modi im Inserter angezeigt. Um den Modus so zu verbergen, dass er programmatisch eingefügt werden kann, stellen Sie das Inserter auf False ein.

Hier ist ein Beispiel für einen Referenzmuster -Plugin -Code -Snippet aus dem WordPress -Blog.

 /*
Plugin Name: Angebotsmuster Beispiel Plugin
*/

Register_Block_Pattern (
    'my-plugin/my-quote pustern',
     Array (
      'Titel' => __ ('Zitat mit Avatar', 'my-plugin'),
      'Kategorien' => Array ('Text'),
      'Beschreibung' => _X ('Ein großes Zitat mit einem Avatar'. ',' Blockmuster Beschreibung ',' My-Plugin '),
      'Inhalt' => '' <div><div>
<hr>
<div><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174183133237166.jpg" class="lazy" alt=""    style="max-width:90%"  style="max-width:90%"></div>
<blockquote>
<p> "Mit Beitrag habe ich das Gefühl, für den Planeten nützlich zu sein."</p> <cite>- Anna Wong, <em>Freiwilliger</em></cite>
</blockquote>
<hr>
</div></div> ',
      )
);
Nach dem Login kopieren

Verwenden von Mustern in Vorlagendateien

Nach dem Erstellen des Musters können Sie sie in der Themenvorlagendatei mit den folgenden Block -Tags verwenden:

Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren

Ein Beispiel aus diesem Github-Repository zeigt die Verwendung des Muster-Slugs "Fußzeile-Background" mit dem Präfix "TT2Gopher" im TT2 Gopher-Block-Thema.

Frühe Anwender von Blockthemen und Gutenberg-Plug-Ins nutzten auch die Muster in klassischen Themen. Die Standard -zwanzig und mein Lieblings -Eksell -Thema (hier ist die Demo -Site) sind gute Beispiele, um zu zeigen, wie die Schema -Funktionalität einem klassischen Thema hinzugefügt werden kann.

Anwendungsfall Beispiel 2: 2222

Wenn das Thema nur eine kleine Anzahl von Mustern enthält, sind Entwicklung und Wartung ziemlich einfach zu verwalten. Wenn das Blockthema jedoch viele Muster enthält, z. B. das TT2 -Thema, wird die Datei muster.php sehr groß und schwer zu lesen. Das Standard -TT2 -Thema, das mit mehr als 60 Schemata gebündelt ist und eine neu reflektierte Schema -Registrierungs -Workflow -Struktur demonstriert, die leichter zu lesen und aufrechtzuerhalten ist.

Wenn Sie das TT2 -Thema als Beispiel aufnehmen, werden wir kurz diskutieren, wie dieser vereinfachte Workflow funktioniert.

2.1: Registrierungsmoduskategorie

Für Demonstrationszwecke habe ich einen TT2 -Subtopic erstellt und auf meiner lokalen Testseite mit einigen virtuellen Inhalten eingerichtet. Nach der Methode von TT2 habe ich Fußzeile mit dem Background in der Blockpaatens.php-Datei registriert und zu den folgenden Array von Schema-Kategorien hinzugefügt.

 /**
* Register blockieren Muster und Kategorien.
*/
Funktion TwentyTWentyTWentytwo_register_Block_Patterns () {
    $ block_pattern_categories = Array (Array (
        'footer' => array ('label' => __ ('footblech', 'TwentytWentytwo')),
        'Header' => Array ('Label' => __ ('Header', 'TwentytWentytwo')),
        'Seiten' => Array ('Label' => __ ('Seiten', 'TwentytWentytwo')),
                // ...
    );

    /**
     * Filtert die Kategorien des Themas -Blockmusters.
     */
    $ block_pattern_categories = apply_filters ('TwentyTWentytwo_Block_Pattern_Categories', $ block_pattern_categories);

    foreach ($ block_pattern_categories as $ name => $ properties) {
        if (!
            register_block_pattern_category ($ name, $ properties);
        }
    }

    $ block_patterns = array (
        "Fußzeile-Default",
        "Fußzeile Dark",
        "Fußzeile-Background",
        // ...
        "Header-Default",
        "Header-Large-Dark",
        "Header-Small-Dark",
        'versteckt-404',
        'versteckter Bird',
        // ...
    );

    /**
     * Filtert die Themenblockmuster.
     */
    $ block_patterns = apply_filters ('TwentytWentytwo_Block_Patterns', $ block_patterns);

    foreach ($ block_patterns als $ block_pattern) {
        $ muster_file = get_theme_file_path ('/inc/musters/'. $ block_pattern. '.php');

        Register_Block_Pattern (
            'TwentytWentytwo/'.
            erfordern $ muster_file
        );
    }
}
add_action ('init', 'TwentytWentytwo_register_Block_Patterns', 9);
Nach dem Login kopieren

In diesem Code -Beispiel wird jedes in $ block_patterns = array () aufgeführte Muster von der Funktion foreach () aufgerufen, für die eine Schema -Verzeichnisdatei erforderlich ist, die die im Array aufgeführten Schema -Namen enthält, die wir im nächsten Schritt hinzufügen werden.

2.2: Fügen Sie Musterdateien zum Ordner /Inc /Muster hinzu

Als nächstes sollten wir alle aufgelisteten Schema -Dateien in $ block_patterns = array () haben. Hier ist ein Beispiel für eine Schema-Datei-Fußzeile mit Background.php:

 /**
 * Dunkle Fußzeile WTIH -Titel und Zitat
 */
Rückgabearray (
    'Titel' => __ ('Fußzeile mit Hintergrund', 'TwentytWentytwo'),
    'Kategorien' => Array ('Fußzeile'),
    'blocktypes' => array ('core/template-part/fout coub'),
  'Inhalt' => ''
      <div style="padding-top:var(--wp--custom--spacing--small, 1.25rem);padding-bottom:var(--wp--custom--spacing--small, 1.25rem)">
      <p>'.
      Sprintf (
        / * Übersetzer: WordPress -Link.
        Esc_html __ ('stolz angetrieben von %s', 'TwentytWentytwo'),
        ' <a href="'%20.%20esc_url(%20__(%20'https://wordpress.org',%20'twentytwentytwo'%20)%20)%20.%20'" rel="nofollow">WordPress</a> |.
      ) '</p>
      </div>
          ',
);
Nach dem Login kopieren

Verweisen wir auf das Muster im Template -Teil der Fußzeile.

Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren

Dies ähnelt dem Hinzufügen eines Titels oder eines Fußzeilenteils zu einer Vorlagendatei.

In ähnlicher Weise können Sie das Muster der Teile/foot-coub.html-Vorlage hinzufügen, indem Sie es ändern, um die Schlupf der Themenmusterdatei (Fußzeile-Background) zu verweisen:

Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren

Wenn wir nun auf den Modus des Blockeditors zugreifen, können wir "Fußzeile mit Hintergrund" verwenden.

Der folgende Screenshot zeigt das neu erstellte Fußzeilenmuster mit Hintergrund am vorderen Ende.

Jetzt, da das Muster ein wesentlicher Bestandteil des Blockthemas geworden ist, von denen viele im Blockthema gebündelt sind - wie Quadrat, Seedlet, Mayland, Zoologe, Geologe - folgen dem obigen Workflow. Dies ist ein Beispiel für den Ordner Quadrat -Thema /Inc /Muster, der eine Blockmusterregistrierungsdatei und eine Reihe von Dateien enthält, die die Inhaltsquelle und den erforderlichen Mustertitel in der Funktion return array () enthalten.

Abschnitt 2: Erstellen und Laden von Mustern ohne Registrierung

Bitte beachten Sie, dass für diese Funktion WordPress 6.0 oder Gutenberg Plug-In 13.0 oder höher erforderlich ist, um auf Ihrer Website zu installieren.

Diese neue WordPress 6.0 -Funktion ermöglicht Standardmodus "Standarddatei- und Ordner", wodurch Konventionen ähnlich wie /Teile, Vorlagen und /Styles erhalten.

Dieser in diesem Artikel beschriebene Prozess umfasst die folgenden drei Schritte:

  • Erstellen Sie im Stammverzeichnis des Themas einen Musterordner
  • Fügen Sie Plugin Style Mustertitel hinzu
  • Modusquelle Inhalt

Die typischen Muster -Titel -Tags, die aus dem Artikel erhalten wurden, sind wie folgt:

 <php titel: ein mustertitel slug: namespace beschreibung: eine menschenfreundliche beschreibung. ansichtsfenster: kategorien: komma getrennt werte schl blocktypen: inserter: ja nein></php>
Nach dem Login kopieren

Wie im vorherigen Abschnitt erwähnt, sind nur die Titel- und Slugfelder erforderlich und andere Felder sind optional.

Unter Bezugnahme auf die Beispiele in einem kürzlich veröffentlichten Thema habe ich die Schema-Registrierung im TT2 GOPHER BLOCKS-Demo-Thema, das in einem früheren Artikel über CSS-Tricks erstellt wurde, neu übertroffen.

Lassen Sie uns in den folgenden Schritten untersuchen, wie Sie das mit PHP registrierte und in der footer.html-Vorlage verwendete Foot-with-background.php-Muster neu aufstellen.

2.1: Erstellen Sie den Ordner A /Muster im Stammverzeichnis des Themas

Der erste Schritt besteht darin, einen A /Mustern-Ordner im Stammverzeichnis des TT2-Gopher-Themas zu erstellen und die Foot-with-Background.php-Musterdatei in den Ordner /Muster zu verschieben und sie refactor.

2.2: Schemadaten zum Dateinitentitel hinzufügen

Erstellen Sie als nächstes das folgende Feld der folgenden Schema -Titelregistrierung.

 <php titel: fu mit hintergrund slug: tt2gopher kategorien: tt2gopher-footer ansichtsfenster: blocktypen: kern inserter: ja></php>
Nach dem Login kopieren

Die Schema -Datei enthält ein Top -Titelfeld als PHP -Kommentar. gefolgt von im HTML-Format geschriebener Block-Inhalt .

2.3: Fügen Sie der Datei Schema -Inhalte hinzu

Lassen Sie uns für den Inhaltsteil den Code-Snippet in einzelnen Zitaten (z. B. '...' kopieren), beginnen Sie mit dem Inhaltsteil von Fußzeilen-Background und ersetzen Sie:

    <div style="padding-top:35px;padding-bottom:30px">
    <p>Angetrieben von WordPress | TT2 Gopher, ein modifiziertes TT2 -Thema</p>
    </div>
Nach dem Login kopieren

Der vollständige Code-Ausschnitt der Muster/Fußzeile-mit-background.php-Datei kann auf GitHub angezeigt werden.

Beachten Sie, dass /Inc /Muster und Blockpatterns.php Extras sind, nicht in WordPress 6.0 erforderlich und nur zu Demonstrationszwecken enthalten sind.

2.4: Referenzmusterschnecken in der Vorlage

Das Hinzufügen des Footer-Background.Php-Musters der obigen neu refaktorierten Fußzeile-Background.php-Vorlage zur Fußzeile.

Wenn wir nun die Site im Fußzeilen Teil der Website im Blockeditor oder im Browser anzeigen, wird der Fußzeilenteil angezeigt.

Musterkategorie und Typ Registrierung (optional)

Um Blockmuster zu klassifizieren, sollten Sie die Schema -Kategorien und -Typen in der Datei functions.php des Themas registrieren.

Betrachten wir ein Beispiel für die Registrierung einer Blockmusterkategorie im TT2 Gopher -Thema.

Nach der Registrierung wird der Modus zusammen mit dem Core -Standardmodus im Moduseinsatz angezeigt. Um themenspezifische Kategorie-Tags im Mustereinsatz hinzuzufügen, sollten wir den vorherigen Code-Snippet ändern, indem wir den Themen-Namespace hinzufügen:

 /**
* Register blockieren Kategorien und Typ.
*/

Funktion tt2gopher_register_block_pattern_categories () {

$ block_pattern_categories = Array (Array (
  'Tt2Gopher -Header' => Array ('Label' => __ ('Tt2 Gopher - Header', 'Tt2Gopher'),
  'Tt2Gopher -Footer' => Array ('Label' => __ ('Tt2 Gopher - Fußzürger', 'Tt2Gopher'),
  'TT2Gopher -Page' => Array ('Label' => __ ('Tt2 Gopher - Page', 'Tt2Gopher'),
  // ...
);

/**
* Filtert die Kategorien des Themas -Blockmusters.
*/
$ block_pattern_categories = apply_filters ('tt2gopher_block_pattern_categories', $ block_pattern_categories);

foreach ($ block_pattern_categories as $ name => $ properties) {
  if (!
    register_block_pattern_category ($ name, $ properties);
  }
}
add_action ('init', 'tt2gopher_register_block_pattern_categories', 9);
Nach dem Login kopieren

Der Fußzeilen-Background-Modus wird in seiner Vorschau (falls ausgewählt) mit dem Modus Inserter angezeigt:

Dieser Prozess vereinfacht den Prozess des Erstellens und Anzeigens von Blockmustern in Blockthemen erheblich. Es ist in WordPress 6.0 erhältlich, ohne dass das Gutenberg-Plug-In erforderlich ist.

Beispielthemen ohne Modusregistrierung

Early Adopters haben diese Funktion in ihren Blockthemen verwendet. Einige der Themen Beispiele, die im Themenverzeichnis angegeben sind, das Muster ohne Registrierung laden kann, sind unten aufgeführt:

  • Archaeo - 12 Modi
  • Anhänger - 13 Modi
  • Fernbedienung - 11 Modi
  • Skatepark - 10 Modi
  • Stewart - 17 Modi
  • Livro - 16 Modi
  • Avantgarde-14 Modi

Abschnitt 3: Erstellen und Verwenden von Mustern mit niedrigem Code

Der offizielle Schemakatalog enthält kreative Designs, die von der Community beigetragen haben und nach Bedarf kopiert und angepasst werden können, um Inhalte zu erstellen. Die Verwendung von Mustern im Blockeditor war noch nie einfacher!

Jedes Muster aus wachsenden Verzeichnissen kann auch zum Blockthema hinzugefügt werden, indem sie einfach "kopieren und einfügen" oder in die Datei thema.json aufgenommen werden, indem er auf die Verzeichnismuster -Slug verweist. Als nächstes werde ich kurz erklären, wie ich dies einfach mit sehr begrenztem Code implementieren kann.

Fügen Sie Schemata aus Schemaverzeichnissen hinzu und passen Sie sie an

3.1: Kopieren Sie den Modus aus dem Verzeichnis auf die Seite

Hier verwende ich FirstWebgeek für das Fußzeile -Teilmuster aus dem Schemaverzeichnis. Kopieren Sie den Modus, indem Sie die Schaltfläche Kopierenmodus auswählen und direkt in die neue Seite einfügen.

3.2: Führen Sie die erforderliche Anpassung vor

Ich habe nur einige Änderungen an der Farbe des Hintergrunds der Schriftart und des Knopfes vorgenommen. Kopieren Sie dann den gesamten Code aus dem Code -Editor in die Zwischenablage.

Wenn Sie den Code -Editor neu verwenden, wechseln Sie zu den Optionen (mit drei Punkten, oben rechts), klicken Sie auf die Schaltfläche Code -Editor und kopieren Sie den gesamten Code von hier.

3.3: Erstellen Sie eine neue Datei im Ordner /musters

Erstellen wir zunächst eine neue /Patterns/foter-pattern-test.php-Datei und fügen Sie den erforderlichen Schema-Titelabschnitt hinzu. Fügen Sie dann den gesamten Code ein (Schritt 3, oben). Muster werden im Fußzeilenbereich (Zeile 5) klassifiziert, und wir können neu hinzugefügte Muster im Mustereinsatz anzeigen.

 <php titel: fu aus der musterbibliothek slug: tt2gopher kategorien: tt2gopher-footer ansichtsfenster: blocktypen: core inserter: ja><div style="padding-top:100px;padding-right:30px;padding-bottom:70px;padding-left:30px">
<div>
<div>
<h2 style="font-style:normal;font-weight:700;text-transform:uppercase">Lorem</h2>



<p style="font-size:16px">Einer der Hauptvorteile bei der Verwendung von Lorem Ipsum ist, dass es leicht generiert werden kann, und es wird der Druck aus den Designer, aussagekräftiger Text zu erstellen.</p>



<ul></ul>
</div>



<div>
<h4 style="font-size:30px;font-style:normal;font-weight:700;text-transform:capitalize">Kontaktieren Sie uns</h4>



<p style="font-size:16px;line-height:1.2">123 Bd Lorem, Ipsum<br><br> 123-456-7890</p>



<p style="font-size:16px;line-height:1">[E -Mail geschützt]</p>



<p style="font-size:16px;line-height:1">Öffnungszeiten: 10:00 - 18:00 Uhr</p>
</div>



<div>
<h4 style="font-size:30px;font-style:normal;font-weight:700;text-transform:capitalize">Newsletter</h4>



<p style="font-size:16px">Lorem ipsum dolor sitz amet</p>


</div>
</div>
</div></php>
Nach dem Login kopieren

3.4: Neuen Modus im Inserter anzeigen

Um den neu hinzugefügten Fußzeilenmodus aus der Musterbibliothek anzuzeigen, gehen Sie zu einem beliebigen Beitrag oder einer Seite und wählen Sie das Symbol Einfügen (das blaue Plus -Zeichen in der oberen linken Ecke) und wählen Sie die Kategorie TT2 Gopher -Fußzeile aus. Der neu hinzugefügte Modus wird im linken Bereich sowie andere Fußzeilenmodi und deren Vorschau nach rechts angezeigt (falls ausgewählt):

Registrieren Sie den Modus direkt in der Datei theme.json

In WordPress 6.0 können Sie die folgende Syntax verwenden, um alle erforderlichen Schema im Schema -Verzeichnis in der Datei theme.json zu registrieren. In der 6.0 -Entwicklungsnotiz steht "das Musterfeld ein Array von [ Schema -Slug ] im Schemaverzeichnis. Die Musterschnecke kann aus [URL] in einer einzelnen Schemaansicht im Schemaverzeichnis extrahiert werden."

 {
    "Version": 2,
    "Muster": ["Short-Text", "Musters-Slug"]
}
Nach dem Login kopieren

In diesem kurzen WordPress 6.0 -Feature -Video wird gezeigt, wie ein Muster im Ordner /musters (bei 3:53) registriert und das Muster im Modusverzeichnis in der Datei thema.json (um 3:13) registriert wird.

Der registrierte Modus kann dann im Modus-Einfügen-Suchfeld verwendet werden und dann wie die themengebundene Modus-Bibliothek verwendet werden.

 {
  "Version": 2,
  "Muster": ["Fußzeile-From-Verzeichnis", "Fußzeile-Abteilung-Design-with-3-Spalte-Beschreibung-sozial-media-kontakte und-newsletter"]
}
Nach dem Login kopieren

In diesem Beispiel wird das Muster-Slug-Fußzeilen-Abschnitt-Design-mit-3-Spalte-soziale Media-Contact-and-Newsletter aus dem vorherigen Beispiel über thema.json registriert.

Modell Erstellungsmustermodell

Im Rahmen des Builds mit dem Musterprogramm bietet WordPress 6.0 den Themenautoren eine modale Modaloption zum Hinzufügen von Seitenlayout -Modi zum Blockieren von Themen und ermöglicht es, Site -Benutzer beim Erstellen von Seiten Seitlayout -Modi (z. B. über Seiten, Kontaktseiten, Teamseiten usw.) auszuwählen. Hier ist ein Beispiel aus den Entwicklungsanweisungen:

 Register_Block_Pattern (
    'my-plugin/über die Seite', '
    Array (
        'Titel' => __ ('About Page', 'My-Plugin'),
        'blocktypes' => array ('core/post-content'),
        'Inhalt' => ''
        <p>Schreiben Sie Ihnen hier über Seite und können Sie jeden Block verwenden</p>
        ',
    )
);
Nach dem Login kopieren

Diese Funktion ist derzeit auf Seitenpostentypen beschränkt und ist nicht auf "Post -Post -Typen" anwendbar.

Sie können auch die Modalität des Seitenerstellungsmodus vollständig deaktivieren, indem Sie Blocktypen nach der Inkontent für alle Modi entfernen. Hier wird ein Beispielcode bereitgestellt.

Sie können die Diskussionen in GitHub folgen und an den Diskussionslinks teilnehmen, und die Diskussionslinks sind im Abschnitt Ressourcen unten aufgeführt.

Erstellen Sie eine Seite mit dem Schemaverzeichnis

Ähnlich wie beim Seitenbauer können Sie das Muster im Verzeichnis auch verwenden, um das gewünschte Beitrag oder das Seitenlayout zu erstellen. Das Gutenberghub -Team erstellte eine experimentelle Online -Page Builder -Anwendung (Einführungsvideo) unter Verwendung der Schemas im Schemaverzeichnis. Der Code aus der Anwendung kann dann kopiert und in die Website eingefügt werden, wodurch der Prozess des Erstellens komplexer Seitenlayouts ohne Codierung erheblich vereinfacht wird.

In diesem kurzen Video demonstriert Jamie Marsland (um 1:30 Uhr), wie die Anwendung mit dem erforderlichen Seitenabschnitt im Verzeichnis verwendet wird, um ein ganzes Seitenlayout zu erstellen, das dem Seitenbauer ähnelt.

Zusammenfassen

Mit dem Modus können Benutzer ihre häufig verwendeten Inhaltslayouts (z. B. Heldenseiten, Aufruf zum Handeln usw.) auf einer beliebigen Seite neu erstellen und die Hindernisse für die bisherige Unfähigkeit reduzieren, Stilinhalte ohne Codierungsfähigkeiten zu präsentieren. Genau wie Plugins- und Themenverzeichnisse bietet das neue Schema -Verzeichnis den Benutzern die Möglichkeit, verschiedene Schemas aus dem Schema -Verzeichnis auszuwählen und Inhalte im Stil zu schreiben und anzuzeigen.

Tatsächlich ändert der Blockmodus alles, was zweifellos ein transformatives Merkmal im Feld WordPress -Themen ist. Wenn das vollständige Potenzial der Arbeit "Muster Build" verfügbar ist, ändert sich die Art und Weise, wie wir Blockthemen entwerfen, und erstellen Sie auch mit nur Kenntnissen mit niedrigem Coden schöne Inhalte. Für viele kreative Designer kann der Musterkatalog auch eine geeignete Möglichkeit bieten, ihre Kreativität zu demonstrieren.

Ressource

WordPress 6.0

  • WordPress 6.0 -Domänenhandbuch (WordPress -Kern)
  • Erforschen Sie WordPress 6.0: Stilvariationen, Block-Sperren-Benutzeroberfläche, Verbesserungen schreiben-22-minütiges Video (Anne McCarthy)
  • WordPress 6.0 Merkmale in 4 Minuten (Dave Smith)
  • Neu in WordPress 6.0: Neue Blöcke, Stilwechsel, Vorlagenbearbeitung, Webfonts -API und mehr (Kinsta)

Erstellen Sie ein Muster

  • Einführung in den Blockmodus (auf der Website bearbeitet)
  • Blockmodus Einführung Video, 14 Minuten (Lernen Sie WordPress)
  • Blockmodus (Block -Editor -Handbuch)
  • Sie möchten also ein Blockmuster erstellen? (WordPress -Blog)
  • So erstellen und teilen Sie einen niedrigen Code -Block -Modus in WordPress (GoDaddy)

Modusverstärkung (GitHub)

  • Verwenden Sie Mustergebäude #38529
  • Muster als Abschnitt Element #39281
  • Hinzufügen: Option zum Auswählen des Modus, wenn die Seitenerstellung erstellt wird. #40034
  • Blockmodus für die Erstellung von Seiten. #38787
  • Hinzufügen: Seitenstartoptionen (Vorlagen und Muster) #39147

Blog -Beiträge

  • Gutenberg -Modus: Die Zukunft des Seitenaufbaus in WordPress (Rich Tabor)
  • Beschleunigen Sie die WordPress -Website mit dem Blockmodus (GoDaddy).
  • Der Blockmodus verändert alles (WP Tavern)

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

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage