register_block_pattern<\/code>kan du mycket snabbt skapa ett blockm\u00f6nster f\u00f6r dig eller dina kunder.<\/p>\nF\u00f6ruts\u00e4ttningar<\/h2>\n\n- WordPress installation<\/li>\n
- Kodredigerare<\/li>\n<\/ul>\n
Skapa ditt blockm\u00f6nster<\/h2>\n
Du bygger blockm\u00f6nster av de block du har registrerat p\u00e5 din sida. Dessa kan vara k\u00e4rnblock eller valfritt antal tredje part eller anpassade block.<\/p>\n
B\u00f6rja med att anv\u00e4nda WordPress-redigeraren f\u00f6r att bygga en blocklayout. Du kan anv\u00e4nda inst\u00e4llningarna f\u00f6r att g\u00f6ra detta s\u00e5 komplicerat eller s\u00e5 enkelt som du vill.<\/p>\n
I det h\u00e4r exemplet ska vi h\u00e5lla det enkelt och helt enkelt skapa ett blockm\u00f6nster som \u00e4r strukturerat enligt f\u00f6ljande:<\/p>\n
\n- Gruppblock\n
\n- Rubrik<\/li>\n
- Paragraf<\/li>\n
- Kolumner\n
\n- Kolumn 1\n
\n- Rubrik<\/li>\n
- Paragraf<\/li>\n<\/ul>\n<\/li>\n
- Kolumn 2\n
\n- Rubrik<\/li>\n
- Paragraf<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
N\u00e4r du har byggt ditt blockm\u00f6nster, kopiera helt enkelt koden som har genererats \u00e5t dig.<\/p>\n
Kopiera blockm\u00f6nsterkoden<\/p>\n
F\u00f6r att g\u00f6ra detta, g\u00e5 till de tre prickarna uppe till h\u00f6ger i editorn (m\u00e4rkta med Options) och v\u00e4lj ’Code Editor’. Detta kommer att visa HTML bakom blockm\u00f6nstret du just har skapat.<\/p>\n
Kopiera den h\u00e4r koden till ditt urklipp.<\/p>\n
Registrera blockm\u00f6nstret<\/h2>\n
Klistra in denna blockredigeringskod i din kodredigerare. Om du \u00e4r os\u00e4ker p\u00e5 var kan du anv\u00e4nda functions.php<\/code>ditt tema.<\/p>\nSe till att du skickar in den till en variabel genom att placera enstaka citattecken ('<\/code>) runt den inklistrade texten, s\u00e5 h\u00e4r:<\/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>\nDu kan beh\u00f6va g\u00f6ra lite flykt av karakt\u00e4rerna, beroende p\u00e5 komplexiteten i ditt blockm\u00f6nster.<\/p>\n
D\u00e4refter m\u00e5ste vi \u00f6verf\u00f6ra detta till register_block_pattern<\/code>funktionen:<\/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>\nDet \u00e4r allt, blockm\u00f6nstret registreras.<\/p>\n
Bryta nedregister_block_pattern<\/code><\/h3>\n\n- Namnutrymme<\/strong> \u2014 (
wholesomecode\/example-block-pattern<\/code>) \u00e4r namnutrymmet f\u00f6r blockm\u00f6nstret. Se till att detta \u00e4r unikt f\u00f6r ditt blockm\u00f6nster. Om vi \u200b\u200bn\u00e5gonsin beh\u00f6ver avregistrera blockm\u00f6nstret \u00e4r det h\u00e4r str\u00e4ngen vi kommer att beh\u00f6va.<\/li>\n- Kategorier<\/strong> \u2014 Det h\u00e4r \u00e4r blockm\u00f6nsterkategorin som blockm\u00f6nstret kommer att dyka upp i n\u00e4r vi infogar v\u00e5rt blockm\u00f6nster. Vi kan ocks\u00e5 l\u00e4gga till v\u00e5ra egna kategorier<\/a>.<\/li>\n
- Inneh\u00e5ll<\/strong> \u2014 Detta \u00e4r HTML som genererar blockm\u00f6nstret. Det h\u00e4r exemplet anv\u00e4nder variabeln som vi skapade fr\u00e5n editorn.<\/li>\n
- Beskrivning<\/strong> \u2014 En beskrivning av blockm\u00f6nstret.<\/li>\n
- Nyckelord<\/strong> \u2014 Nyckelord som kan anv\u00e4ndas f\u00f6r att s\u00f6ka efter blockm\u00f6nstret.<\/li>\n
- Titel<\/strong> \u2014 Titeln p\u00e5 blockm\u00f6nstret.<\/li>\n
- Viewport Width<\/strong> \u2014 Viewporten f\u00f6r blockm\u00f6nstret, som anv\u00e4nds f\u00f6r f\u00f6rhandsgranskningsomr\u00e5det.<\/li>\n<\/ul>\n
Infoga blockm\u00f6nstret<\/h2>\n
F\u00f6r att infoga blockm\u00f6nstret, anv\u00e4nd helt enkelt plustecknet l\u00e4ngst upp till v\u00e4nster i editorn och v\u00e4lj blockm\u00f6nster.<\/p>\n
V\u00e4lj kategorin du registrerade ditt m\u00f6nster i, s\u00e5 ska det visas.<\/p>\n
Infoga blockm\u00f6nstret<\/p>\n
Alternativt kan du s\u00f6ka p\u00e5 de nyckelord du registrerat.<\/p>\n
F\u00f6r att registrera en blockkategori, anv\u00e4nd bara register_block_pattern_category<\/code>funktionen.<\/p>\nregister_block_pattern_category(\n 'my-client',\n [\n 'label' => esc_html__( 'My Client Patterns', 'wholesome-plugin' ),\n ]\n);\n<\/code><\/pre>\nD\u00e5 kan du anv\u00e4nda kategorin du just har registrerat i din blockm\u00f6nsterkod, s\u00e5 h\u00e4r:<\/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>\nNu n\u00e4r du kommer f\u00f6r att hitta ditt blockm\u00f6nster, kommer det att finnas i din anpassade kategori:<\/p>\n
![\"Registrera](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168978-61e7f9e9b9076.png\")
Anpassad blockm\u00f6nsterkategori<\/p>\n
Nu kan du gruppera alla anpassade blockm\u00f6nster som du just gjort f\u00f6r din kund p\u00e5 ett st\u00e4lle.<\/p>\n