✅ WEB ja WordPressi uudised, teemad, pistikprogrammid. Siin jagame näpunäiteid ja parimaid veebisaidi lahendusi.

Lisage juhtelemendid postituse külgribale PluginDocumentSettingPaneli abil

19

Siiani oleme vaadanud ploki külgriba, lisades InspectorControlsoma kohandatud plokkidele ja lisades juhtelemendid põhi- ja kolmanda osapoole ploki külgribale koos filtrite ja kõrgema järgu komponentidega. Selles juhendis vaatleme postituste külgribale juhtelementide lisamist.

Kuva sätted postituse külgribal

Selles juhendis loome juhtelemendi "Kuvaseaded", mis võimaldab sisseloginud kasutajatel postitust vaadata ainult siis, kui see on sisse lülitatud.

Eeldused

Postituse meta registreerimine PHP-s

Esialgse pistikprogrammi andmiseks täitke pistikprogrammi loomise juhendi juhised, me laiendame seda oma juhendis.

Kui olete seda teinud, seadistame postituse meta, mida vajame oma lubade lüliti juhtimiseks. Avage pistikprogrammi juurfail (meie puhul wholesome-plugin.php) ja lisage järgmine kood:

function wholesomecode_wholesome_plugin_register_post_meta() {
    register_meta(
        'post',
        '_wholesomecode_wholesome_plugin_require_login',
        [
            'auth_callback' => '__return_true',
            'default'       => false,
            'show_in_rest'  => true,
            'single'        => true,
            'type'          => 'boolean',
        ]
    );
}
add_action( 'init', 'wholesomecode_wholesome_plugin_register_post_meta' );

Kui olete heitnud pilgu postituse metaväljade juhendile, peaks see pisut tuttav välja nägema. See võimaldab ainult meie postituse metale juurdepääsu plokiredaktorist (Gutenberg).

Looge oma pistikprogrammis uus kaust nimega componentsja looge järgmine fail /components/Sidebar.js. Sellesse faili kleepige järgmine kood:

import { ToggleControl } from '@wordpress/components';
import { dispatch, select } from '@wordpress/data';
import { PluginDocumentSettingPanel } from '@wordpress/edit-post';
import { Component } from '@wordpress/element';
import { __ } from '@wordpress/i18n';

export default class Sidebar extends Component { 
    render() {
        const meta = select( 'core/editor' ).getEditedPostAttribute( 'meta' );
        const exampleToggle = meta['_wholesomecode_wholesome_plugin_require_login'];

        return (<PluginDocumentSettingPanel
            name="wholesomecode-wholesome-plugin-sidebar"
            title={ __( 'Display Settings', 'wholesome-plugin') }
            >
            <ToggleControl
              checked={ exampleToggle }
              help={ __( 'User must be logged-in in to view this post.', 'wholesome-plugin') }
              label={ __( 'Require Login', 'wholesome-plugin') }
              onChange={ (value) => {
                dispatch( 'core/editor' ).editPost( {
                  meta: {
                    '_wholesomecode_wholesome_plugin_require_login': value,
                  },
                } );
              } }
              />
          </PluginDocumentSettingPanel>
        );
    }
}

Seda ToggleControl, mida oleme varem näinud oma eelmistes külgriba juhendites, kuid kasutatav paneel on veidi uus. Kasutame PluginDocumentSettingPaneltuvastamaks, et see juhtelement peaks ilmuma postituse külgribal.

Pange tähele ka seda, et atribuutide tõmbamise asemel saame oma metaandmed järgmise koodiga:

const meta = select( 'core/editor' ).getEditedPostAttribute( 'meta' );
const exampleToggle = meta['_wholesomecode_wholesome_plugin_require_login'];

ja salvestame selle oma onChangemeetodi abil, kasutades seda koodi:

onChange={ (value) => {
  dispatch( 'core/editor' ).editPost( {
    meta: {
      '_wholesomecode_wholesome_plugin_require_login': value,
    },
  } );
} }

See värskendab praeguse postituse meta. Seda ei salvestata enne, kui oleme oma postituse salvestanud, nii et kogu salvestamine toimub meie eest.

Üks viimane asi, mida peame oma postituse külgribaga tegema, on see registreerida. Faili ülaossa /src/index.jslisage järgmine tekst:

import { registerPlugin } from '@wordpress/plugins';
import render from './components/Sidebar';

registerPlugin(
    'wholesomecode-wholesome-plugin-sidebar',
    {
        icon: 'visibility',
        render,
    }
);

Peaksime tõesti mõtlema oma pistikprogrammi struktuuri muutmisele nii, et ploki registreeriv kood imporditaks teisest failist, kuid lihtsuse huvides kasutame sama faili.

Siin kasutame registerPluginkülgriba registreerimiseks. Edastame ‘renderdus’ meetodina loodud külgriba komponendi koos ikooniga.

Lisage loogika Peida, kui olete välja logitud

Avage veel kord pistikprogrammi juurfail (meie puhul wholesome-plugin.php) ja sisestage järgmine kood. Selleks on palju paremaid viise, kuid ma teen selle näiteks lühidalt:

function wholesomecode_wholesome_plugin_require_login() {
    global $post, $wp_query;

    if (is_admin() ||! is_singular() ||! $post) {
        return;
    }

    if (is_user_logged_in()) {
        return;
    }

    $login_required = get_post_meta( $post->ID, '_wholesomecode_wholesome_plugin_require_login', true );

    if (! $login_required) {
        return;
    }

    $wp_query->set_404();
    status_header( 401 );
}
add_action( 'wp', 'wholesomecode_wholesome_plugin_require_login' );

See kood tagastab lihtsalt meie 404 malli ja oleku 401 (volitamata), kui lüliti on seatud väärtusele Tõene.

Vaatame postituse külgriba juhtnuppe töös.

Lubade juhtimine postituse külgriba kaudu

Selles näites lülitame lüliti asendisse Tõene, vaatame oma lehte uues (välja logitud) brauseriaknas ja pärast värskendamist näeme, et see tagastab 404 lehe, seejärel lülitame selle valesse, värskendame ja voilà, postitus on jälle nähtav. Gutenbergi maagia!

See veebisait kasutab teie kasutuskogemuse parandamiseks küpsiseid. Eeldame, et olete sellega rahul, kuid saate soovi korral loobuda. Nõustu Loe rohkem