Rekisteröi lohkokuvio WordPressin lohkoeditorissa (Gutenberg)

Lohkokuviot WordPressin lohkoeditorissa (Gutenberg) ovat tehokas ominaisuus, jonka avulla voit luoda erilaisia ​​asetteluja hyvin pienellä vaivalla.

Käyttämällä register_block_patternvoit luoda nopeasti lohkokuvion sinulle tai asiakkaillesi.

Edellytykset

• WordPressin asennus
• Koodieditori

Luo lohkokuviosi

Rakennat lohkokuvioita sivustollesi rekisteröimistäsi lohkoista. Nämä voivat olla ydinlohkoja tai mikä tahansa määrä kolmannen osapuolen tai mukautettuja lohkoja.

Aloita luomalla lohkoasettelu WordPress-editorilla. Asetusten avulla voit tehdä siitä niin monimutkaisen tai yksinkertaisen kuin haluat.

Tässä esimerkissä pidämme sen yksinkertaisena ja luomme yksinkertaisesti lohkokuvion, joka rakentuu seuraavasti:

• Ryhmän esto
  • Otsikko
  • Kohta
  • Sarakkeet
    • Sarake 1
      • Otsikko
      • Kohta
    • Sarake 2
      • Otsikko
      • Kohta

Kun olet rakentanut lohkokuvion, kopioi vain sinulle luotu koodi.

Kopioi lohkomallikoodi

Voit tehdä tämän siirtymällä kolmeen pisteeseen editorin oikeassa yläkulmassa (merkitty Asetukset) ja valitsemalla "Koodieditori". Tämä näyttää HTML-koodin juuri luomasi lohkomallin takana.

Kopioi tämä koodi leikepöydällesi.

Rekisteröi lohkokuvio

Liitä tämä lohkoeditorin koodi koodieditoriin. Jos et ole varma missä, voit käyttää functions.phpteemasi.

Varmista, että välität sen muuttujaksi laittamalla yksittäisiä lainausmerkkejä (') liitetyn tekstin ympärille, kuten näin:

$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>
';

Saatat joutua pakottamaan merkkejä lohkokuvion monimutkaisuudesta riippuen.

Seuraavaksi meidän on siirrettävä tämä register_block_patternfunktioon:

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,
    ],
);

Siinä kaikki, lohkokuvio on rekisteröity.

Hajoaminenregister_block_pattern

• Nimiavaruus — (wholesomecode/example-block-pattern) on lohkokuvion nimiavaruus. Varmista, että tämä on ainutlaatuinen lohkokuviollesi. Jos joudumme joskus poistamaan lohkokuvion rekisteröinnin, tarvitsemme tämän merkkijonon.
• Kategoriat — Tämä on lohkokuvioluokka, jossa lohkokuvio näkyy, kun lisäämme lohkokuviomme. Voimme myös lisätä omia luokkiamme.
• Sisältö – Tämä on HTML-koodi, joka luo lohkokuvion. Tämä esimerkki käyttää muuttujaa, jonka loimme editorista.
• Kuvaus — Kuvaus lohkokuviosta.
• Avainsanat — Avainsanat, joita voidaan käyttää lohkomallin etsimiseen.
• Otsikko — lohkokuvion otsikko.
• Näkymäportin leveys — Esikatselualueella käytettävä lohkokuvion näkymä.

Lisää lohkokuvio

Lisää lohkokuvio käyttämällä editorin vasemmassa yläkulmassa olevaa plusmerkkiä ja valitsemalla lohkokuviot.

Valitse luokka, johon rekisteröit kuviosi, ja sen pitäisi tulla näkyviin.

Lohkokuvion lisääminen

Vaihtoehtoisesti voit hakea rekisteröimälläsi avainsanalla.

Voit rekisteröidä lohkoluokan käyttämällä register_block_pattern_categorytoimintoa.

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

Sitten voit käyttää juuri rekisteröimääsi luokkaa lohkomallikoodissasi, kuten:

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,
    ],
);

Nyt kun tulet löytämään lohkokuviosi, se sijaitsee mukautetussa kategoriassasi:

Mukautettu lohkokuvioluokka

Nyt voit ryhmitellä kaikki asiakkaallesi juuri tekemäsi mukautetut lohkomallit yhteen paikkaan.

• Tarvitsetko jotain staattisempaa? Yritä sen sijaan rekisteröidä estomalli
• Tarvitsetko jotain, joka koskee lapsilohkoja? Yritä rekisteröidä InnerBlocks-malli