{"id":228948,"date":"2022-10-19T14:07:00","date_gmt":"2022-10-19T11:07:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228948"},"modified":"2022-11-09T04:55:16","modified_gmt":"2022-11-09T01:55:16","slug":"luo-mukautettu-sivupalkki-pluginsidebarilla","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/luo-mukautettu-sivupalkki-pluginsidebarilla\/","title":{"rendered":"Luo mukautettu sivupalkki PluginSidebarilla"},"content":{"rendered":"\n<p><a href=\"https:\/\/hashnode.com\/@wholesomecode\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><\/a><\/p>\n<p>Olemme tarkastelleet mukautettuja <a href=\"https:\/\/wholesomecode.ltd\/guides\/sidebar-control-wordpress-block-inspectorcontrols\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">lohkosivupalkkeja<\/a>, <a href=\"https:\/\/wholesomecode.ltd\/guides\/block-sidebar-filters-higher-order-components\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">kolmannen osapuolen lohkosivupalkkeja<\/a> InspectorControlsin kautta ja ohjaimien lis\u00e4\u00e4mist\u00e4 <a href=\"https:\/\/wholesomecode.ltd\/guides\/controls-post-sidebar-plugindocumentsettingpanel\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">viestien sivupalkkiin<\/a>. T\u00e4ss\u00e4 oppaassa tarkastelemme s\u00e4\u00e4timien sijoittamista heid\u00e4n omaan mukautuneeseen sivupalkkiin.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168447-61e7cd4993d41.png\" alt=\"Luo mukautettu sivupalkki PluginSidebarilla\" \/>Mukautettu sivupalkkimme<\/p>\n<p>Yll\u00e4 oleva kuvakaappaus n\u00e4ytt\u00e4\u00e4, mit\u00e4 aiomme rakentaa. Suurimmaksi osaksi aiomme vain muuttaa hieman <a href=\"https:\/\/wholesomecode.ltd\/guides\/controls-post-sidebar-plugindocumentsettingpanel\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Post Sidebar -oppaassa luomaamme<\/a> koodia, joten varmista, ett\u00e4 olet t\u00e4ytt\u00e4nyt oppaan ensin.<\/p>\n<h2>Edellytykset<\/h2>\n<ul>\n<li>Olet noudattanut <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Pluginin luominen WordPress Block Editor (Gutenberg)<\/a> -opasta<\/li>\n<li>Lue edelliset sivupalkkioppaat (<a href=\"https:\/\/wholesomecode.ltd\/guides\/sidebar-control-wordpress-block-inspectorcontrols\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">sivupalkki mukautetulle lohkolle<\/a> ja <a href=\"https:\/\/wholesomecode.ltd\/guides\/block-sidebar-filters-higher-order-components\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">sivupalkki olemassa olevalle lohkolle<\/a> )<\/li>\n<li><a href=\"https:\/\/wholesomecode.ltd\/guides\/controls-post-sidebar-plugindocumentsettingpanel\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Olet noudattanut Ohjainten lis\u00e4\u00e4minen viestien sivupalkkiin PluginDocumentSettingPanel-<\/a> oppaan avulla<\/li>\n<\/ul>\n<p>K\u00e4yt\u00e4mme koodia <a href=\"https:\/\/wholesomecode.ltd\/guides\/controls-post-sidebar-plugindocumentsettingpanel\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Viestin sivupalkin oppaasta<\/a>, joten jos et ole t\u00e4ytt\u00e4nyt opasta, tee se. Ei h\u00e4t\u00e4\u00e4, odotan.<\/p>\n<p>Avaa <code>\/components\/Sidebar.js<\/code>edellisess\u00e4 oppaassa luomasi tiedosto. Aiomme korvata rivin, joka tuo <code>PluginDocumentSettingPanel<\/code>koodin, seuraavalla koodilla:<\/p>\n<pre><code>import { PluginSidebar, PluginSidebarMoreMenuItem } from '@wordpress\/edit-post';\n<\/code><\/pre>\n<p>Vaihda nyt merkint\u00e4 <code>&lt;PluginDocumentSettingPanel...<\/code>ja <code>&lt;PluginSidebar...<\/code>ty\u00f6 tehty! Eik\u00f6?<\/p>\n<p>No kyll\u00e4 \u200b\u200bja ei. Se antaa meille sivupalkin, mutta se on ruma! Tarvitsemme joitain paneeleja, jotta s\u00e4\u00e4timet muotoillaan oikein.<\/p>\n<p>My\u00f6s sivupalkki puuttuu &quot;Asetukset&quot;-valikosta. T\u00e4m\u00e4n ratkaisemiseksi meid\u00e4n on toteutettava <code>PluginSidebarMoreMenuItem<\/code>.<\/p>\n<p>Muokkaa <code>\/components\/Sidebar.js<\/code>uudelleen ja liit\u00e4 seuraava koodi:<\/p>\n<pre><code>import { Panel, PanelBody, ToggleControl } from '@wordpress\/components';\nimport { dispatch, select } from '@wordpress\/data';\nimport { PluginSidebar, PluginSidebarMoreMenuItem } from '@wordpress\/edit-post';\nimport { Component, Fragment } from '@wordpress\/element';\nimport { __ } from '@wordpress\/i18n';\n\nexport default class Sidebar extends Component {\n    render() {\n        const meta = select( 'core\/editor' ).getEditedPostAttribute( 'meta' );\n        const exampleToggle = meta['_wholesomecode_wholesome_plugin_require_login'];\n\n        return (&lt;Fragment&gt;\n                &lt;PluginSidebarMoreMenuItem target=\"wholesomecode-wholesome-plugin-sidebar\"&gt;\n                { __( 'Display Settings', 'wholesome-plugin') }\n                &lt;\/PluginSidebarMoreMenuItem&gt;\n                &lt;PluginSidebar\n                    name=\"wholesomecode-wholesome-plugin-sidebar\"\n                    title={ __( 'Display Settings', 'wholesome-plugin') }\n                &gt;\n                    &lt;Panel&gt;\n                        &lt;PanelBody\n                            title={ __( 'Display Settings', 'wholesome-plugin') }\n                            icon=\"visibility\"\n                        &gt;\n                            &lt;ToggleControl\n                                checked={ exampleToggle }\n                                help={ __( 'User must be logged-in in to view this post.', 'wholesome-plugin') }\n                                label={ __( 'Require Login', 'wholesome-plugin') }\n                                onChange={ (value) =&gt; {\n                                    dispatch( 'core\/editor' ).editPost( {\n                                        meta: {\n                                            '_wholesomecode_wholesome_plugin_require_login': value,\n                                        },\n                                    } );\n                                    this.setState( { exampleToggle: value } );\n                                } }\n                            \/&gt;\n                        &lt;\/PanelBody&gt;\n                    &lt;\/Panel&gt;\n                &lt;\/PluginSidebar&gt;\n            &lt;\/Fragment&gt;\n        );\n    }\n}\n<\/code><\/pre>\n<p>Se on parempi, olemme k\u00e4ytt\u00e4neet t\u00e4sm\u00e4lleen samaa koodia kuin edellisess\u00e4 viestisivupalkin esimerkiss\u00e4, mutta nyt se n\u00e4ytt\u00e4\u00e4 silt\u00e4.<\/p>\n<p>Nyt kun meill\u00e4 on koodimme paikallaan, \u00e4l\u00e4 unohda suorittaa <code>npm start<\/code>sen k\u00e4\u00e4nt\u00e4mist\u00e4, ja sen pit\u00e4isi nyt n\u00e4ytt\u00e4\u00e4 seuraavalta:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168447-61e7cd4bd2a51.gif\" alt=\"Luo mukautettu sivupalkki PluginSidebarilla\" \/>Mukautettu sivupalkkimme toiminnassa<\/p>\n<p>Kuten liit\u00e4nn\u00e4isen sivupalkin oppaassamme, vaihdamme sis\u00e4\u00e4nkirjautumisen vaatimuksen kytkint\u00e4, p\u00e4ivit\u00e4mme uloskirjautuneen viestin, poistamme sen k\u00e4yt\u00f6st\u00e4 ja p\u00e4ivit\u00e4mme viestin uudelleen. Kun se on p\u00e4\u00e4ll\u00e4, emme voi k\u00e4ytt\u00e4\u00e4 viesti\u00e4.<\/p>\n<p>Sivupalkin nimi on <code>wholesomecode-wholesome-plugin-sidebar'<\/code>. Halutessasi voimme avata ja sulkea t\u00e4m\u00e4n sivupalkin automaattisesti muualta editorissa. Oletetaan, ett\u00e4 meill\u00e4 on napsautustoiminnolla varustettu painike, joka tekee t\u00e4m\u00e4n.<\/p>\n<p>Koodi sivupalkin dynaamiseen avaamiseen on seuraava:<\/p>\n<pre><code>wp.data.dispatch('core\/edit-post').openGeneralSidebar( 'wholesomecode-wholesome-plugin-sidebar\/wholesomecode-wholesome-plugin-sidebar' );\n<\/code><\/pre>\n<p>Samoin voimme sulkea sivupalkin dynaamisesti seuraavasti:<\/p>\n<pre><code>wp.data.dispatch('core\/edit-post').closeGeneralSidebar( 'wholesomecode-wholesome-plugin-sidebar\/wholesomecode-wholesome-plugin-sidebar' );\n<\/code><\/pre>\n<ul>\n<li>Tutustu <a href=\"https:\/\/wholesomecode.ltd\/guides\/template-innerblocks-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">sis\u00e4kk\u00e4isten alilohkojen luomiseen <code>InnerBlocks<\/code>komponentin avulla<\/a><\/li>\n<li>Tutustu <a href=\"https:\/\/wholesomecode.ltd\/guides\/post-meta-fields-store-attributes-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">post-metakenttien k\u00e4ytt\u00f6\u00f6n Gutenberg-lohkoissa<\/a> (jos et jo ole) ja <a href=\"https:\/\/wholesomecode.ltd\/guides\/custom-meta-boxes-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Gutenbergin komponenttiohjatuissa mukautetuissa metalaatikoissa<\/a><\/li>\n<li>Tutustu <a href=\"https:\/\/wholesomecode.ltd\/guides\/create-settings-page-wordpress-gutenberg-components\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">asetussivun luomiseen Gutenberg Componentsilla<\/a><\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wholesomecode.ltd\" class=\"external external_icon\">wholesomecode.ltd<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Olemme tarkastelleet mukautettuja lohkosivupalkkeja, kolmannen osapuolen lohkosivupalkkeja InspectorControlsin kautta ja kuinka voit lis\u00e4t\u00e4 ohjaimia viestisivupalkkiin. T\u00e4ss\u00e4 oppaassa tarkastelemme&#8230;<\/p>\n","protected":false},"author":1,"featured_media":221001,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[938,719,895,843,803,864],"tags":[1166],"class_list":["post-228948","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-gutenberg-5","category-kehittaejae","category-koodi","category-opetusohjelmia","category-php-5","category-wordpress-5","tag-affiai-fi"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/228948","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/comments?post=228948"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/228948\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media\/221001"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media?parent=228948"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/categories?post=228948"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/tags?post=228948"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}