{"id":228448,"date":"2022-10-19T11:06:00","date_gmt":"2022-10-19T08:06:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228448"},"modified":"2022-11-09T02:29:11","modified_gmt":"2022-11-08T23:29:11","slug":"lisage-juhtelemendid-postituse-kuelgribale-plugindocumentsettingpaneli-abil","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/et\/lisage-juhtelemendid-postituse-kuelgribale-plugindocumentsettingpaneli-abil\/","title":{"rendered":"Lisage juhtelemendid postituse k\u00fclgribale PluginDocumentSettingPaneli abil"},"content":{"rendered":"\n<p>Siiani oleme vaadanud ploki k\u00fclgriba, <a href=\"https:\/\/wholesomecode.ltd\/guides\/sidebar-control-wordpress-block-inspectorcontrols\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">lisades <code>InspectorControls<\/code>oma kohandatud plokkidele<\/a> ja <a href=\"https:\/\/wholesomecode.ltd\/guides\/block-sidebar-filters-higher-order-components\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">lisades juhtelemendid p\u00f5hi- ja kolmanda osapoole ploki k\u00fclgribale koos filtrite ja k\u00f5rgema j\u00e4rgu komponentidega<\/a>. Selles juhendis vaatleme postituste k\u00fclgribale juhtelementide lisamist.<\/p>\n<p>Kuva s\u00e4tted postituse k\u00fclgribal<\/p>\n<p>Selles juhendis loome juhtelemendi &quot;Kuvaseaded&quot;, mis v\u00f5imaldab sisseloginud kasutajatel postitust vaadata ainult siis, kui see on sisse l\u00fclitatud.<\/p>\n<h2>Eeldused<\/h2>\n<ul>\n<li>Olete j\u00e4rginud <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">WordPressi plokiredaktori (Gutenbergi) pistikprogrammi loomise<\/a> juhendit<\/li>\n<li>Lugege eelmisi k\u00fclgriba juhendeid (<a href=\"https:\/\/wholesomecode.ltd\/guides\/sidebar-control-wordpress-block-inspectorcontrols\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">kohandatud ploki<\/a> jaoks <a href=\"https:\/\/wholesomecode.ltd\/guides\/block-sidebar-filters-higher-order-components\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">k\u00fclgriba ja olemasoleva ploki jaoks k\u00fclgriba<\/a> )<\/li>\n<li>Lugege WordPressi plokiredaktori (Gutenbergi) juhendist <a href=\"https:\/\/wholesomecode.ltd\/guides\/post-meta-fields-store-attributes-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Postituse metav\u00e4ljade kasutamine atribuutide salvestamiseks<\/a><\/li>\n<\/ul>\n<h2>Postituse meta registreerimine PHP-s<\/h2>\n<p>Esialgse pistikprogrammi andmiseks t\u00e4itke <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">pistikprogrammi loomise juhendi juhised<\/a>, me laiendame seda oma juhendis.<\/p>\n<p>Kui olete seda teinud, seadistame postituse meta, mida vajame oma lubade l\u00fcliti juhtimiseks. Avage pistikprogrammi juurfail (meie puhul <code>wholesome-plugin.php<\/code>) ja lisage j\u00e4rgmine kood:<\/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>Kui olete heitnud pilgu <a href=\"https:\/\/wholesomecode.ltd\/guides\/post-meta-fields-store-attributes-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">postituse metav\u00e4ljade juhendile<\/a>, peaks see pisut tuttav v\u00e4lja n\u00e4gema. See v\u00f5imaldab ainult meie postituse metale juurdep\u00e4\u00e4su plokiredaktorist (Gutenberg).<\/p>\n<p>Looge oma pistikprogrammis uus kaust nimega <code>components<\/code>ja looge j\u00e4rgmine fail <code>\/components\/Sidebar.js<\/code>. Sellesse faili kleepige j\u00e4rgmine kood:<\/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>Seda <code>ToggleControl<\/code>, mida oleme varem n\u00e4inud oma eelmistes k\u00fclgriba juhendites, kuid kasutatav paneel on veidi uus. Kasutame <code>PluginDocumentSettingPanel<\/code>tuvastamaks, et see juhtelement peaks ilmuma postituse k\u00fclgribal.<\/p>\n<p>Pange t\u00e4hele ka seda, et atribuutide t\u00f5mbamise asemel saame oma metaandmed j\u00e4rgmise koodiga:<\/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 salvestame selle oma <code>onChange<\/code>meetodi abil, kasutades seda koodi:<\/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>See v\u00e4rskendab praeguse postituse meta. Seda ei salvestata enne, kui oleme oma postituse salvestanud, nii et kogu salvestamine toimub meie eest.<\/p>\n<p>\u00dcks viimane asi, mida peame oma postituse k\u00fclgribaga tegema, on see registreerida. Faili \u00fclaossa <code>\/src\/index.js<\/code>lisage j\u00e4rgmine tekst:<\/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>Peaksime t\u00f5esti m\u00f5tlema oma pistikprogrammi struktuuri muutmisele nii, et ploki registreeriv kood imporditaks teisest failist, kuid lihtsuse huvides kasutame sama faili.<\/p>\n<p>Siin kasutame <code>registerPlugin<\/code>k\u00fclgriba registreerimiseks. Edastame &#8216;renderdus&#8217; meetodina loodud k\u00fclgriba komponendi koos ikooniga.<\/p>\n<h2>Lisage loogika Peida, kui olete v\u00e4lja logitud<\/h2>\n<p>Avage veel kord pistikprogrammi juurfail (meie puhul <code>wholesome-plugin.php<\/code>) ja sisestage j\u00e4rgmine kood. Selleks on palju paremaid viise, kuid ma teen selle n\u00e4iteks l\u00fchidalt:<\/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>See kood tagastab lihtsalt meie 404 malli ja oleku 401 (volitamata), kui l\u00fcliti on seatud v\u00e4\u00e4rtusele T\u00f5ene.<\/p>\n<p>Vaatame postituse k\u00fclgriba juhtnuppe t\u00f6\u00f6s.<\/p>\n<p>Lubade juhtimine postituse k\u00fclgriba kaudu<\/p>\n<p>Selles n\u00e4ites l\u00fclitame l\u00fcliti asendisse T\u00f5ene, vaatame oma lehte uues (v\u00e4lja logitud) brauseriaknas ja p\u00e4rast v\u00e4rskendamist n\u00e4eme, et see tagastab 404 lehe, seej\u00e4rel l\u00fclitame selle valesse, v\u00e4rskendame ja voil\u00e0, postitus on j\u00e4lle n\u00e4htav. Gutenbergi maagia!<\/p>\n<ul>\n<li>Heitke pilk eraldiseisva <a href=\"https:\/\/wholesomecode.ltd\/guides\/custom-sidebar-pluginsidebar\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">kohandatud k\u00fclgriba loomisele<\/a><\/li>\n<li>Vaadake <a href=\"https:\/\/wholesomecode.ltd\/guides\/template-innerblocks-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">komponendiga<\/a> <a href=\"https:\/\/wholesomecode.ltd\/guides\/template-innerblocks-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">pesastatud alamplokkide loomist<code>InnerBlocks<\/code><\/a><\/li>\n<li>Vaadake <a href=\"https:\/\/wholesomecode.ltd\/guides\/post-meta-fields-store-attributes-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">post-meta v\u00e4ljade kasutamist Gutenbergi plokkides<\/a> (kui te pole seda veel teinud) ja <a href=\"https:\/\/wholesomecode.ltd\/guides\/custom-meta-boxes-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Gutenbergi komponendip\u00f5histes kohandatud metakastides<\/a><\/li>\n<li>Vaadake <a href=\"https:\/\/wholesomecode.ltd\/guides\/create-settings-page-wordpress-gutenberg-components\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Gutenbergi komponentidega seadete lehe loomist<\/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>Siiani oleme vaadanud ploki k\u00fclgriba, lisades oma kohandatud plokkidele InspectorControls ja lisades juhtelemendid p\u00f5hi- ja kolmanda osapoole ploki k\u00fclgribale koos filtrite ja k\u00f5rgemate &#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":[718,937,894,916,863],"tags":[1165],"class_list":["post-228448","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-arendaja","category-gutenberg-4","category-kood","category-muud","category-wordpress-4","tag-affiai-et"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/228448","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/comments?post=228448"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/228448\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media\/221243"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media?parent=228448"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/categories?post=228448"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/tags?post=228448"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}