register_block_pattern<\/code>pouvez tr\u00e8s rapidement cr\u00e9er un mod\u00e8le de bloc pour vous ou vos clients.<\/p>\nConditions pr\u00e9alables<\/h2>\n\n- Installer WordPress<\/li>\n
- \u00c9diteur de codes<\/li>\n<\/ul>\n
Cr\u00e9ez votre mod\u00e8le de bloc<\/h2>\n
Vous construisez des mod\u00e8les de blocs \u00e0 partir des blocs que vous avez enregistr\u00e9s sur votre site. Il peut s’agir de blocs de base ou de n’importe quel nombre de blocs tiers ou personnalis\u00e9s.<\/p>\n
Commencez par utiliser l’\u00e9diteur WordPress pour cr\u00e9er une disposition de bloc. Vous pouvez utiliser les param\u00e8tres pour rendre cela aussi complexe ou aussi simple que vous le souhaitez.<\/p>\n
Dans cet exemple, nous allons rester simple et cr\u00e9er simplement un motif de bloc qui se structure comme suit :<\/p>\n
\n- Blocage de groupe\n
\n- Titre<\/li>\n
- Paragraphe<\/li>\n
- Colonnes\n
\n- Colonne 1\n
\n- Titre<\/li>\n
- Paragraphe<\/li>\n<\/ul>\n<\/li>\n
- Colonne 2\n
\n- Titre<\/li>\n
- Paragraphe<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
Une fois que vous avez construit votre mod\u00e8le de bloc, copiez simplement le code qui a \u00e9t\u00e9 g\u00e9n\u00e9r\u00e9 pour vous.<\/p>\n
Copiez le code de mod\u00e8le de bloc<\/p>\n
Pour ce faire, acc\u00e9dez aux trois points en haut \u00e0 droite de l’\u00e9diteur (\u00e9tiquet\u00e9s Options) et s\u00e9lectionnez "\u00c9diteur de code". Cela affichera le code HTML derri\u00e8re le mod\u00e8le de bloc que vous venez de cr\u00e9er.<\/p>\n
Copiez ce code dans votre presse-papiers.<\/p>\n
Enregistrez le mod\u00e8le de bloc<\/h2>\n
Collez ce code d’\u00e9diteur de blocs dans votre \u00e9diteur de code. Si vous ne savez pas o\u00f9, vous pouvez utiliser le functions.php<\/code>de votre th\u00e8me.<\/p>\nAssurez-vous de le passer dans une variable en pla\u00e7ant des guillemets simples ('<\/code>) autour du texte coll\u00e9, comme ceci\u00a0:<\/p>\n$block_pattern_content = '\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container\">\n<h2>Example Block Pattern<\/h2>\n\n<p>Lorem ipsum dolor sit amet labore cras venenatis.<\/p>\n\n<div class=\"wp-block-columns\">\n<div class=\"wp-block-column\">\n<h3>Sub Heading 1<\/h3>\n\n<p>Lorem ipsum dolor sit amet id erat aliquet diam ullamcorper tempus massa eleifend vivamus.<\/p>\n<\/div>\n\n<div class=\"wp-block-column\">\n<h3>Sub Heading 2<\/h3>\n\n<p>Morbi augue cursus quam pulvinar eget volutpat suspendisse dictumst mattis id.<\/p>\n<\/div>\n<\/div>\n<\/div><\/div>\n';\n<\/code><\/pre>\nVous devrez peut-\u00eatre \u00e9chapper les caract\u00e8res, en fonction de la complexit\u00e9 de votre mod\u00e8le de bloc.<\/p>\n
Ensuite, nous devons passer ceci dans la register_block_pattern<\/code>fonction\u00a0:<\/p>\nregister_block_pattern(\n 'wholesomecode\/example-block-pattern',\n [\n 'categories' => [\n 'text',\n ],\n 'content' => $block_pattern_content,\n 'description' => 'An example block pattern',\n 'keywords' => 'example',\n 'title' => 'Example Block Pattern',\n 'viewportWidth' => 800,\n ],\n);\n<\/code><\/pre>\nVoil\u00e0, le motif de bloc est enregistr\u00e9.<\/p>\n
D\u00e9compositionregister_block_pattern<\/code><\/h3>\n\n- Espace de noms<\/strong> \u2014 (
wholesomecode\/example-block-pattern<\/code>) est l’espace de noms du mod\u00e8le de bloc. Assurez-vous que cela est unique \u00e0 votre mod\u00e8le de bloc. Si jamais nous avons besoin de d\u00e9senregistrer le mod\u00e8le de bloc, c’est la cha\u00eene dont nous aurons besoin.<\/li>\n- Cat\u00e9gories<\/strong> – Il s’agit de la cat\u00e9gorie de mod\u00e8le de bloc dans laquelle le mod\u00e8le de bloc appara\u00eetra lorsque nous ins\u00e9rons notre mod\u00e8le de bloc. Nous pouvons \u00e9galement ajouter nos propres cat\u00e9gories<\/a>.<\/li>\n
- Contenu<\/strong> \u2014 C’est le HTML qui g\u00e9n\u00e8re le mod\u00e8le de bloc. Cet exemple utilise la variable que nous avons cr\u00e9\u00e9e \u00e0 partir de l’\u00e9diteur.<\/li>\n
- Description<\/strong> \u2014 Une description du mod\u00e8le de bloc.<\/li>\n
- Mots<\/strong> -cl\u00e9s \u2014 Mots-cl\u00e9s pouvant \u00eatre utilis\u00e9s pour rechercher le mod\u00e8le de bloc.<\/li>\n
- Titre<\/strong> \u2014 Le titre du motif de bloc.<\/li>\n
- Largeur<\/strong> de la fen\u00eatre \u2014 La fen\u00eatre du motif de bloc, utilis\u00e9e pour la zone d’aper\u00e7u.<\/li>\n<\/ul>\n
Ins\u00e9rer le motif de bloc<\/h2>\n
Pour ins\u00e9rer le motif de bloc, utilisez simplement le signe plus en haut \u00e0 gauche de l’\u00e9diteur et s\u00e9lectionnez les motifs de bloc.<\/p>\n
S\u00e9lectionnez la cat\u00e9gorie dans laquelle vous avez enregistr\u00e9 votre motif et il devrait appara\u00eetre.<\/p>\n
Insertion du motif de bloc<\/p>\n
Alternativement, vous pouvez rechercher par les mots-cl\u00e9s que vous avez enregistr\u00e9s.<\/p>\n
Pour enregistrer une cat\u00e9gorie de bloc, utilisez simplement la register_block_pattern_category<\/code>fonction.<\/p>\nregister_block_pattern_category(\n 'my-client',\n [\n 'label' => esc_html__( 'My Client Patterns', 'wholesome-plugin' ),\n ]\n);\n<\/code><\/pre>\nEnsuite, vous pouvez utiliser la cat\u00e9gorie que vous venez d’enregistrer dans votre code de mod\u00e8le de bloc, comme ceci\u00a0:<\/p>\n
register_block_pattern(\n 'wholesomecode\/example-block-pattern',\n [\n 'categories' => [\n 'my-client',\n ],\n 'content' => $block_pattern_content,\n 'description' => 'An example block pattern',\n 'keywords' => 'example',\n 'title' => 'Example Block Pattern',\n 'viewportWidth' => 800,\n ],\n);\n<\/code><\/pre>\nD\u00e9sormais, lorsque vous trouverez votre mod\u00e8le de bloc, il se trouvera dans votre cat\u00e9gorie personnalis\u00e9e\u00a0:<\/p>\n
![\"Enregistrer](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168978-61e7f9e9b9076.png\")
Cat\u00e9gorie de mod\u00e8le de bloc personnalis\u00e9<\/p>\n
Vous pouvez maintenant regrouper tous les mod\u00e8les de blocs personnalis\u00e9s que vous venez de cr\u00e9er pour votre client en un seul endroit.<\/p>\n