Ploki mustri registreerimine WordPressi plokiredaktoris (Gutenberg)

Plokimustrid WordPressi plokiredaktoris (Gutenberg) on ​​võimas funktsioon, mis võimaldab teil väga vähese vaevaga luua erinevaid paigutusi.

Kasutades register_block_patternsaate väga kiiresti luua endale või oma klientidele ploki mustri.

Eeldused

• WordPressi installimine
• Koodiredaktor

Looge oma ploki muster

Loote oma saidil registreeritud plokkidest plokimustrid. Need võivad olla põhiplokid või suvaline arv kolmanda osapoole või kohandatud plokke.

Alustuseks kasutage plokipaigutuse loomiseks WordPressi redaktorit. Saate kasutada seadeid, et muuta see nii keeruliseks või lihtsaks, kui soovite.

Selles näites jätame selle lihtsaks ja loome lihtsalt plokimustri, mis koosneb järgmistest struktuuridest:

• Grupiplokk
  • Pealkiri
  • Lõik
  • Veerud
    • 1 veerg
      • Pealkiri
      • Lõik
    • 2 veerg
      • Pealkiri
      • Lõik

Kui olete oma plokimustri koostanud, kopeerige lihtsalt teie jaoks loodud kood.

Kopeerige blokeerimismustri kood

Selleks minge redaktori paremas ülanurgas kolmele punktile (sildiga Valikud) ja valige "Koodiredaktor". See näitab äsja loodud plokimustri taga olevat HTML-i.

Kopeerige see kood oma lõikepuhvrisse.

Registreerige ploki muster

Kleepige see plokiredaktori kood oma koodiredaktorisse. Kui te pole kindel, kus, võite kasutada functions.phpoma teemat.

Sisestage see kindlasti muutujasse, pannes 'kleebitud teksti ümber jutumärgid (), näiteks järgmiselt:

$block_pattern_content = '
<div class="wp-block-group"><div class="wp-block-group__inner-container">
<h2>Example Block Pattern</h2>

<p>Lorem ipsum dolor sit amet labore cras venenatis.</p>

<div class="wp-block-columns">
<div class="wp-block-column">
<h3>Sub Heading 1</h3>

<p>Lorem ipsum dolor sit amet id erat aliquet diam ullamcorper tempus massa eleifend vivamus.</p>
</div>

<div class="wp-block-column">
<h3>Sub Heading 2</h3>

<p>Morbi augue cursus quam pulvinar eget volutpat suspendisse dictumst mattis id.</p>
</div>
</div>
</div></div>
';

Sõltuvalt ploki mustri keerukusest võib tekkida vajadus märkide eest põgeneda.

Järgmisena peame selle üle kandma register_block_patternfunktsiooni:

register_block_pattern(
    'wholesomecode/example-block-pattern',
    [
        'categories'    => [
            'text',
        ],
        'content'       => $block_pattern_content,
        'description'   => 'An example block pattern',
        'keywords'      => 'example',
        'title'         => 'Example Block Pattern',
        'viewportWidth' => 800,
    ],
);

See on kõik, ploki muster on registreeritud.

Lagunemineregister_block_pattern

• Nimeruum — (wholesomecode/example-block-pattern) on plokimustri nimeruum. Veenduge, et see oleks teie ploki mustrile ainulaadne. Kui meil on kunagi vaja plokimustri registreerimine tühistada, vajame seda stringi.
• Kategooriad – see on plokimustri kategooria, milles plokimuster kuvatakse, kui sisestame oma plokimustri. Saame lisada ka oma kategooriaid.
• Sisu – see on HTML, mis genereerib plokimustri. See näide kasutab muutujat, mille lõime redaktorist.
• Kirjeldus – ploki mustri kirjeldus.
• Märksõnad – Märksõnad, mida saab kasutada plokimustri otsimiseks.
• Pealkiri – ploki mustri pealkiri.
• Vaateava laius – ploki mustri vaateava, mida kasutatakse eelvaateala jaoks.

Sisestage ploki muster

Plokimustri sisestamiseks kasutage lihtsalt redaktori vasakus ülanurgas olevat plussmärki ja valige plokimustrid.

Valige kategooria, kuhu mustri registreerisite, ja see peaks ilmuma.

Ploki mustri sisestamine

Teise võimalusena saate otsida registreeritud märksõnade järgi.

Plokikategooria registreerimiseks kasutage lihtsalt register_block_pattern_categoryfunktsiooni.

register_block_pattern_category(
    'my-client',
    [
        'label' => esc_html__( 'My Client Patterns', 'wholesome-plugin' ),
    ]
);

Seejärel saate kasutada äsja registreeritud kategooriat oma plokimustri koodis, näiteks:

register_block_pattern(
    'wholesomecode/example-block-pattern',
    [
        'categories'    => [
            'my-client',
        ],
        'content'       => $block_pattern_content,
        'description'   => 'An example block pattern',
        'keywords'      => 'example',
        'title'         => 'Example Block Pattern',
        'viewportWidth' => 800,
    ],
);

Nüüd, kui leiate oma plokimustri, asub see teie kohandatud kategoorias:

Kohandatud ploki mustri kategooria

Nüüd saate rühmitada kõik kohandatud plokimustrid, mille olete just oma kliendi jaoks teinud, ühte kohta.

• Kas vajate midagi staatilisemat? Proovige selle asemel registreerida blokeerimismall
• Kas vajate midagi, mis kehtiks lapseplokkide kohta? Proovige registreerida InnerBlocksi mall