{"id":228925,"date":"2022-10-19T10:28:00","date_gmt":"2022-10-19T07:28:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228925"},"modified":"2022-11-09T04:50:00","modified_gmt":"2022-11-09T01:50:00","slug":"lisaeae-saeaetimet-viestin-sivupalkkiin-plugindocumentsettingpanelilla","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/lisaeae-saeaetimet-viestin-sivupalkkiin-plugindocumentsettingpanelilla\/","title":{"rendered":"Lis\u00e4\u00e4 s\u00e4\u00e4timet Viestin sivupalkkiin PluginDocumentSettingPanelilla"},"content":{"rendered":"\n<p>Toistaiseksi olemme tarkastelleet lohkosivupalkkia <a href=\"https:\/\/wholesomecode.ltd\/guides\/sidebar-control-wordpress-block-inspectorcontrols\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">lis\u00e4\u00e4m\u00e4ll\u00e4 <code>InspectorControls<\/code>mukautettuja lohkojamme<\/a> ja <a href=\"https:\/\/wholesomecode.ltd\/guides\/block-sidebar-filters-higher-order-components\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">lis\u00e4\u00e4m\u00e4ll\u00e4 ohjaimia ydin- ja kolmannen osapuolen lohkosivupalkkiin suodattimilla ja korkeamman j\u00e4rjestyksen komponenteilla<\/a>. T\u00e4ss\u00e4 oppaassa aiomme tarkastella s\u00e4\u00e4timien lis\u00e4\u00e4mist\u00e4 viestien sivupalkkiin.<\/p>\n<p>N\u00e4ytt\u00f6asetukset Viestin sivupalkissa<\/p>\n<p>T\u00e4ss\u00e4 oppaassa aiomme luoda &quot;N\u00e4ytt\u00f6asetukset&quot;-s\u00e4\u00e4timen, joka sallii vain kirjautuneiden k\u00e4ytt\u00e4jien tarkastella viesti\u00e4, kun se on kytketty p\u00e4\u00e4lle.<\/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>Lue <a href=\"https:\/\/wholesomecode.ltd\/guides\/post-meta-fields-store-attributes-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">WordPressin lohkoeditorin (Gutenberg)<\/a> oppaan artikkeli Meta-kenttien k\u00e4ytt\u00e4minen attribuuttien tallentamiseen<\/li>\n<\/ul>\n<h2>Post Metan rekister\u00f6inti PHP:ss\u00e4<\/h2>\n<p><a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Suorita laajennuksen luontioppaan<\/a> vaiheet antaaksesi meille ensimm\u00e4inen laajennus. Laajennamme t\u00e4t\u00e4 oppaassamme.<\/p>\n<p>Kun olet tehnyt t\u00e4m\u00e4n, m\u00e4\u00e4ritet\u00e4\u00e4n julkaisun meta, jota tarvitsemme k\u00e4ytt\u00f6oikeuksien vaihtohallintaan. Avaa laajennuksen juuritiedosto (tapauksessamme <code>wholesome-plugin.php<\/code>) ja lis\u00e4\u00e4 seuraava koodi:<\/p>\n<pre><code>function wholesomecode_wholesome_plugin_register_post_meta() {\n    register_meta(\n        'post',\n        '_wholesomecode_wholesome_plugin_require_login',\n        [\n            'auth_callback' =&gt; '__return_true',\n            'default'       =&gt; false,\n            'show_in_rest'  =&gt; true,\n            'single'        =&gt; true,\n            'type'          =&gt; 'boolean',\n        ]\n    );\n}\nadd_action( 'init', 'wholesomecode_wholesome_plugin_register_post_meta' );\n<\/code><\/pre>\n<p>Jos olet katsonut <a href=\"https:\/\/wholesomecode.ltd\/guides\/post-meta-fields-store-attributes-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">postin metakenttien opasta<\/a>, t\u00e4m\u00e4n pit\u00e4isi n\u00e4ytt\u00e4\u00e4 hieman tutulta. Se vain mahdollistaa viestimetaamme p\u00e4\u00e4syn lohkoeditorista (Gutenberg).<\/p>\n<p>Luo laajennuksessasi uusi kansio nimelt\u00e4 <code>components<\/code>ja luo seuraava tiedosto <code>\/components\/Sidebar.js<\/code>. Liit\u00e4 tiedostoon seuraava koodi:<\/p>\n<pre><code>import { ToggleControl } from '@wordpress\/components';\nimport { dispatch, select } from '@wordpress\/data';\nimport { PluginDocumentSettingPanel } from '@wordpress\/edit-post';\nimport { Component } 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;PluginDocumentSettingPanel\n            name=\"wholesomecode-wholesome-plugin-sidebar\"\n            title={ __( 'Display Settings', 'wholesome-plugin') }\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              } }\n              \/&gt;\n          &lt;\/PluginDocumentSettingPanel&gt;\n        );\n    }\n}\n<\/code><\/pre>\n<p>Olemme <code>ToggleControl<\/code>n\u00e4hneet aiemmin aiemmissa sivupalkkioppaissamme, mutta k\u00e4ytt\u00e4m\u00e4mme paneeli on hieman uusi. K\u00e4yt\u00e4mme <code>PluginDocumentSettingPanel<\/code>tunnistamaan, ett\u00e4 t\u00e4m\u00e4n ohjausobjektin pit\u00e4isi n\u00e4ky\u00e4 viestin sivupalkissa.<\/p>\n<p>Huomaa my\u00f6s, ett\u00e4 m\u00e4\u00e4ritteiden hakemisen sijaan saamme metatietomme seuraavalla koodilla:<\/p>\n<pre><code>const meta = select( 'core\/editor' ).getEditedPostAttribute( 'meta' );\nconst exampleToggle = meta['_wholesomecode_wholesome_plugin_require_login'];\n<\/code><\/pre>\n<p>ja tallennamme sen <code>onChange<\/code>menetelm\u00e4ll\u00e4mme k\u00e4ytt\u00e4m\u00e4ll\u00e4 t\u00e4t\u00e4 koodia:<\/p>\n<pre><code>onChange={ (value) =&gt; {\n  dispatch( 'core\/editor' ).editPost( {\n    meta: {\n      '_wholesomecode_wholesome_plugin_require_login': value,\n    },\n  } );\n} }\n<\/code><\/pre>\n<p>T\u00e4m\u00e4 p\u00e4ivitt\u00e4\u00e4 nykyisen viestin metasis\u00e4ll\u00f6n. Se ei itse asiassa tallennu ennen kuin tallennamme viestimme, joten kaikki tallentaminen hoidetaan puolestamme.<\/p>\n<p>Viimeinen asia, joka meid\u00e4n on teht\u00e4v\u00e4 viestisivupalkin kanssa, on rekister\u00f6inti se. Lis\u00e4\u00e4 tiedoston yl\u00e4osaan <code>\/src\/index.js<\/code>seuraava:<\/p>\n<pre><code>import { registerPlugin } from '@wordpress\/plugins';\nimport render from '.\/components\/Sidebar';\n\nregisterPlugin(\n    'wholesomecode-wholesome-plugin-sidebar',\n    {\n        icon: 'visibility',\n        render,\n    }\n);\n<\/code><\/pre>\n<p>Meid\u00e4n pit\u00e4isi todellakin harkita liit\u00e4nn\u00e4israkenteen muuttamista niin, ett\u00e4 lohkon rekister\u00f6iv\u00e4 koodi tuodaan toisesta tiedostosta, mutta yksinkertaisuuden vuoksi k\u00e4yt\u00e4mme samaa tiedostoa.<\/p>\n<p>T\u00e4\u00e4ll\u00e4 k\u00e4yt\u00e4mme <code>registerPlugin<\/code>sivupalkin rekister\u00f6inti\u00e4. Ohjaamme sivupalkkikomponentin, jonka loimme &quot;render\u00f6inti&quot; -menetelm\u00e4n\u00e4, yhdess\u00e4 kuvakkeen kanssa.<\/p>\n<h2>Lis\u00e4\u00e4 Piilota uloskirjautuneena -logiikka<\/h2>\n<p>Avaa viel\u00e4 kerran laajennuksen juuritiedosto (tapauksessamme <code>wholesome-plugin.php<\/code>) ja pudota seuraava koodi. On olemassa paljon parempia tapoja tehd\u00e4 t\u00e4m\u00e4, mutta kirjoitan sen lyhyesti esimerkiksi tarkoituksia varten:<\/p>\n<pre><code>function wholesomecode_wholesome_plugin_require_login() {\n    global $post, $wp_query;\n\n    if (is_admin() ||! is_singular() ||! $post) {\n        return;\n    }\n\n    if (is_user_logged_in()) {\n        return;\n    }\n\n    $login_required = get_post_meta( $post-&gt;ID, '_wholesomecode_wholesome_plugin_require_login', true );\n\n    if (! $login_required) {\n        return;\n    }\n\n    $wp_query-&gt;set_404();\n    status_header( 401 );\n}\nadd_action( 'wp', 'wholesomecode_wholesome_plugin_require_login' );\n<\/code><\/pre>\n<p>T\u00e4m\u00e4 koodi yksinkertaisesti palauttaa 404-mallimme ja tilan 401 (luvaton), jos Toggle-asetus on tosi.<\/p>\n<p>Katsotaanpa viestien sivupalkin s\u00e4\u00e4timi\u00e4 toiminnassa.<\/p>\n<p>K\u00e4ytt\u00f6oikeuksien hallinta Viestin sivupalkin kautta<\/p>\n<p>T\u00e4ss\u00e4 esimerkiss\u00e4 vaihdamme kytkimen tosi, katsomme sivuamme uudessa (uloskirjautuneena) selainikkunassa ja n\u00e4emme p\u00e4ivityksen j\u00e4lkeen, ett\u00e4 se palauttaa 404-sivun, sitten vaihdamme sen ep\u00e4tosi-tilaan, p\u00e4ivit\u00e4 ja voil\u00e0, viesti on taas n\u00e4kyviss\u00e4. Gutenbergin taikuutta!<\/p>\n<ul>\n<li>Tutustu itsen\u00e4isen <a href=\"https:\/\/wholesomecode.ltd\/guides\/custom-sidebar-pluginsidebar\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">mukautetun sivupalkin luomiseen<\/a><\/li>\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>Toistaiseksi olemme tarkastelleet lohkon sivupalkkia lis\u00e4\u00e4m\u00e4ll\u00e4 InspectorControls-ominaisuuden mukautettuihin lohkoihimme ja lis\u00e4\u00e4m\u00e4ll\u00e4 ohjaimia ydin- ja kolmannen osapuolen lohkosivupalkkiin suodattimilla ja korkeammilla &#8230;<\/p>\n","protected":false},"author":1,"featured_media":221243,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[938,719,895,917,864],"tags":[1166],"class_list":["post-228925","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-gutenberg-5","category-kehittaejae","category-koodi","category-muut","category-wordpress-5","tag-affiai-fi"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/228925","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=228925"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/228925\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media\/221243"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media?parent=228925"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/categories?post=228925"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/tags?post=228925"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}