Valdykite „WordPress“ dinamines blokas: „PHP“ ir „JavaScript“ sujungimas interaktyviam turiniui

Santrauka

„WordPress“ dinaminiai blokai siūlo galingą būdą kurti turinį, kuris peržengia statinį HTML, leidžiantis realiuoju laiku integruoti duomenis ir interaktyvius elementus. Skirtingai nei statiniai blokai, dinaminiai blokai savo rezultatą pateikia serverio pusėje naudodami „PHP“, todėl jie gali gauti ir rodyti naujausią informaciją. Šiame straipsnyje pateikiamas praktinis vadovas, kaip kurti savo dinaminius blokus, apimantis esminius bloko registracijos, serverio pusės pateikimo atgalinių funkcijų ir kliento pusės atributų tvarkymo koncepcijas. Peržvelgsime žingsnis po žingsnio pavyzdį, demonstruodami, kaip sukurti dinaminį bloką, rodantį naujausius įrašus, suteikiant pagrindą sudėtingesniems interaktyviems komponentams.

Valdykite „WordPress“ dinamines blokas: „PHP“ ir „JavaScript“ sujungimas interaktyviam turiniui

„WordPress“, iš esmės, yra tvirta turinio valdymo sistema (TVS), sukurta ant modulinės „PHP“ architektūros ir „MySQL“ duomenų bazės. Jo išplėtimas yra pagrindinis privalumas, daugiausia pasiekiamas per temas ir papildinius. „Gutenberg“, bloko redaktoriaus, atsiradimas pakeitė turinio kūrimą, pristatydamas modulinę, „JavaScript“ valdomą sąsają. Nors statiniai „Gutenberg“ blokai puikiai tinka struktūrizuotam, nekintančiam turiniui, daugeliu realaus pasaulio scenarijų reikia turinio, kuris būtų dinamiškas, interaktyvus ir duomenimis pagrįstas. Čia dinaminiai blokai atlieka svarbų vaidmenį, siūlydami galingą tiltą tarp serverio pusės „PHP“ logikos ir kliento pusės „JavaScript“ interaktyvumo.

Dinaminių blokų galios supratimas

Statiniai blokai, numatytieji „Gutenberg“, generuoja HTML kliento pusėje, kai jie išsaugomi. Šis HTML tada tiesiogiai saugomas įrašo turinyje. Nors efektyvus statiniam turiniui, šis metodas turi apribojimų, kai susiduriama su dažnai besikeičiančiais duomenimis arba reikalaujančiais serverio pusės apdorojimo. Dinaminiai blokai, kita vertus, sprendžia šią problemą, pateikdami savo rezultatą serverio pusėje naudodami „PHP“. Kai vartotojas peržiūri puslapį su dinaminiu bloku, „WordPress“ vykdo „PHP“ funkciją (render_callback), kad dinamiškai generuotų bloko HTML. Tai leidžia blokui gauti realaus laiko duomenis iš duomenų bazės, sąveikauti su kitomis „WordPress“ funkcijomis ir pateikti visada naujausią informaciją.

Šis serverio pusės pateikimas yra svarbus dėl kelių priežasčių:

• Realaus laiko duomenys: Naujausių įrašų, artėjančių renginių, akcijų kainų ar bet kokių kitų dažnai besikeičiančių duomenų rodymas.
• Sudėtinga logika: Atliekant skaičiavimus, užklausas pagal pasirinktinius įrašų tipus arba integravimą su išorinėmis API prieš pateikiant rezultatą.
• Sauga: Valant ir tikrinant duomenis prieš juos rodant, ypač kai dirbama su vartotojo sukurtu turiniu ar išoriniais šaltiniais.
• Našumas: Sudėtingų pateikimo užduočių perkėlimas į serverį kartais gali pagerinti kliento pusės našumą.

Dinaminio bloko anatomija

Dinaminis blokas, kaip ir bet kuris kitas „Gutenberg“ blokas, apibrėžiamas jo metaduomenimis ir „JavaScript“ registracija. Tačiau jo unikali savybė yra registracijos metu nurodytas render_callback atributas. Ši atgalinė funkcija yra atsakinga už bloko HTML rezultato generavimą serveryje.

Štai pagrindinių komponentų apžvalga:

1. Bloko registracija („JavaScript“): Jūs vis tiek turite užregistruoti savo bloką naudodami registerBlockType() savo „JavaScript“ faile. Tai praneša „Gutenberg“, kad jūsų blokas egzistuoja ir kaip tvarkyti jo atributus bei redaktoriaus sąsają.
2. Atributai: Tai yra su bloku susiję duomenų laukai, saugomi įrašo turinyje. Dinaminiams blokams atributai daugiausia naudojami bloko elgsenai ir nustatymams redaktoriuje konfigūruoti. Faktinis rodomas turinys generuojamas render_callback.
3. render_callback („PHP“): Tai dinaminio bloko širdis. Tai yra „PHP“ funkcija, kuri gauna bloko atributus kaip argumentą ir grąžina HTML eilutę, kuri bus pateikta priekinėje dalyje.
4. Redaktoriaus sąsaja („JavaScript“): Jūs vis tiek sukursite bloko sąsają „Gutenberg“ redaktoriuje naudodami „React“ komponentus. Ši sąsaja leidžia vartotojams konfigūruoti bloko atributus ir matyti dinaminio turinio peržiūrą (dažnai supaprastintą vaizdavimą).

Žingsnis po žingsnio: dinaminio „Naujausių įrašų“ bloko kūrimas

Sukursime praktinį pavyzdį: dinaminį bloką, rodantį naujausių įrašų sąrašą iš jūsų „WordPress“ svetainės.

Būtinos sąlygos:

• Vietinė „WordPress“ kūrimo aplinka.
• Pagrindinis „PHP“ ir „JavaScript“ supratimas.
• Papildinys arba tema, kurioje pridėsite savo bloko kodą.

1 žingsnis: nustatykite savo bloko papildinį/temą

Jei neturite pasirinktinio papildinio ar temos, sukurkite paprastą. Šiam pavyzdžiui darysime prielaidą, kad pridedate tai prie papildinio.

2 žingsnis: bloko registracija („JavaScript“)

Savo papildinio „JavaScript“ faile (pvz., src/index.js) užregistruosite bloką. Naudosime @wordpress/blocks ir @wordpress/i18n tarptautinimui.

// src/index.js

import { registerBlockType } from '@wordpress/blocks';
import { __ } from '@wordpress/i18n';

// Importuokite savo bloko redagavimo komponentą
import Edit from './edit';

registerBlockType( 'my-dynamic-blocks/recent-posts', {
    title: __( 'Recent Posts', 'my-dynamic-blocks' ),
    icon: 'list-view',
    category: 'widgets',
    attributes: {
        numberOfPosts: {
            type: 'number',
            default: 5,
        },
        showExcerpt: {
            type: 'boolean',
            default: true,
        },
    },
    edit: Edit,
    // save() funkcija NĖRA reikalinga dinaminėms blokams
    // Serverio pusės render_callback tvarkys rezultatą
} );

3 žingsnis: sukurkite redaktoriaus komponentą („JavaScript“)

Dabar sukurkite src/edit.js failą. Šis komponentas apibrėš, kaip blokas atrodo ir veikia „Gutenberg“ redaktoriuje.

// src/edit.js

import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
import { PanelBody, RangeControl, ToggleControl } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import ServerSideRender from '@wordpress/server-side-render';

export default function Edit( { attributes, setAttributes } ) {
    const blockProps = useBlockProps();
    const { numberOfPosts, showExcerpt } = attributes;

    return (
        <div { ...blockProps }>
            <InspectorControls>
                <PanelBody title={ __( 'Post Settings', 'my-dynamic-blocks' ) }>
                    <RangeControl
                        label={ __( 'Number of Posts', 'my-dynamic-blocks' ) }
                        value={ numberOfPosts }
                        onChange={ ( value ) => setAttributes( { numberOfPosts: value } ) }
                        min={ 1 }
                        max={ 10 }
                    />
                    <ToggleControl
                        label={ __( 'Show Excerpt', 'my-dynamic-blocks' ) }
                        checked={ showExcerpt }
                        onChange={ ( value ) => setAttributes( { showExcerpt: value } ) }
                    />
                </PanelBody>
            </InspectorControls>
            {
                // Naudokite ServerSideRender, kad parodytumėte dinaminio bloko peržiūrą
                <ServerSideRender
                    block="my-dynamic-blocks/recent-posts"
                    attributes={ attributes }
                />
            }
        </div>
    );
}

Atkreipkite dėmesį, kad mes nenustatome save() funkcijos. Tai yra pagrindinis skirtumas dinaminėms blokams. ServerSideRender komponentas naudojamas bloko rezultato peržiūrai parodyti tiesiai redaktoriuje, atliekant užklausą į serverį.

4 žingsnis: įkelkite scenarijus ir užregistruokite serverio pusės pateikimą („PHP“)

Savo papildinio pagrindiniame „PHP“ faile (pvz., my-dynamic-blocks.php) turite įkelti savo „JavaScript“ failą ir užregistruoti bloko tipą, įskaitant render_callback.

<?php
/**
 * Plugin Name: My Dynamic Blocks
 * Description: A simple plugin for dynamic Gutenberg blocks.
 * Version: 1.0
 * Author: Your Name
 */

function my_dynamic_blocks_register_block() {
    // Register the block type
    register_block_type( 'my-dynamic-blocks/recent-posts', array(
        'editor_script' => 'my-dynamic-blocks-editor-script',
        'render_callback' => 'my_dynamic_blocks_render_recent_posts',
        'attributes' => array(
            'numberOfPosts' => array(
                'type' => 'number',
                'default' => 5,
            ),
            'showExcerpt' => array(
                'type' => 'boolean',
                'default' => true,
            ),
        ),
    ) );
}
add_action( 'init', 'my_dynamic_blocks_register_block' );

function my_dynamic_blocks_enqueue_editor_scripts() {
    wp_enqueue_script(
        'my-dynamic-blocks-editor-script',
        plugins_url( 'build/index.js', __FILE__ ), // Assuming you have a build process
        array( 'wp-blocks', 'wp-element', 'wp-editor', 'wp-components', 'wp-i18n', 'wp-server-side-render' ),
        filemtime( plugin_dir_path( __FILE__ ) . 'build/index.js' )
    );
}
add_action( 'enqueue_block_editor_assets', 'my_dynamic_blocks_enqueue_editor_scripts' );

/**
 * Render callback for the Recent Posts dynamic block.
 *
 * @param array $attributes Block attributes.
 * @return string HTML output.
 */
function my_dynamic_blocks_render_recent_posts( $attributes ) {
    $number_of_posts = isset( $attributes['numberOfPosts'] ) ? (int) $attributes['numberOfPosts'] : 5;
    $show_excerpt    = isset( $attributes['showExcerpt'] ) ? (bool) $attributes['showExcerpt'] : true;

    $args = array(
        'posts_per_page' => $number_of_posts,
        'post_status'    => 'publish',
        'orderby'        => 'date',
        'order'          => 'DESC',
        'ignore_sticky_posts' => true,
    );

    $recent_posts_query = new WP_Query( $args );

    $output = '';

    if ( $recent_posts_query->have_posts() ) {
        $output .= '<ul class="wp-block-my-dynamic-blocks-recent-posts">'; // Use a class for styling
        while ( $recent_posts_query->have_posts() ) {
            $recent_posts_query->the_post();
            $output .= '<li>';
            $output .= '<a href="' . esc_url( get_permalink() ) . '">' . esc_html( get_the_title() ) . '</a>';
            if ( $show_excerpt ) {
                $output .= '<p>' . get_the_excerpt() . '</p>';
            }
            $output .= '</li>';
        }
        $output .= '</ul>';
        wp_reset_postdata(); // Important: Reset post data after custom loop
    } else {
        $output = '<p>' . __( 'No posts found.', 'my-dynamic-blocks' ) . '</p>';
    }

    return $output;
}

PHP kodo paaiškinimas:

• my_dynamic_blocks_register_block(): Ši funkcija jungiasi prie init, kad užregistruotų mūsų bloko tipą. Svarbiausia, kad ji apibrėžia render_callback kaip my_dynamic_blocks_render_recent_posts ir taip pat perduoda bloko atributus, atspindėdama tai, kas apibrėžta „JavaScript“.
• my_dynamic_blocks_enqueue_editor_scripts(): Ši funkcija jungiasi prie enqueue_block_editor_assets, kad įkeltų mūsų „JavaScript“ failą specialiai redaktoriui. Ji apima wp-server-side-render kaip priklausomybę.
• my_dynamic_blocks_render_recent_posts(): Tai mūsų render_callback. Ji gauna $attributes masyvą, valo ir konvertuoja juos į tinkamus tipus, tada naudoja WP_Query naujausiems įrašams gauti. Ji sukuria HTML <ul> sąrašą ir jį grąžina. wp_reset_postdata() yra gyvybiškai svarbus po pasirinktinės WP_Query kilpos, kad būtų išvengta konfliktų su pagrindine „WordPress“ užklausa.

5 žingsnis: sukurkite savo „JavaScript“

Jei naudojate modernų „JavaScript“ kūrimo procesą (pvz., @wordpress/scripts), turėsite sukurti savo išteklius. Paleiskite npm run build (arba yarn build) savo papildinio kataloge.

6 žingsnis: suaktyvinkite ir išbandykite

Suaktyvinkite savo papildinį. Dabar, kai pridėsite „Naujausių įrašų“ bloką prie įrašo ar puslapio, pamatysite redaktoriaus sąsają. Peržiūros srityje bus rodomas jūsų „PHP“ atgalinės funkcijos pateiktas rezultatas. Kai paskelbsite arba atnaujinsite įrašą, ta pati „PHP“ atgalinė funkcija veiks priekinėje dalyje, kad būtų rodomas dinaminis turinys.

Geriausios praktikos ir pastabos

• Visų pirma saugumas: Visada valykite ir tikrinkite visus duomenis, gaunamus iš atributų ar išorinių šaltinių, prieš naudodami juos savo render_callback. Naudokite „WordPress“ funkcijas, tokias kaip esc_html(), esc_url(), sanitize_text_field() ir pan.
• wp_reset_postdata(): Jei jūsų render_callback naudoja WP_Query arba keičia globalųjį $post objektą, visada iškvieskite wp_reset_postdata() po to, kad atkurtumėte originalią užklausą ir įrašo duomenis.
• Našumo svarstymai: Nors dinaminiai blokai yra galingi, per didelis ar sudėtingas serverio pusės pateikimas gali turėti įtakos puslapio įkėlimo laikui. Optimizuokite savo užklausas ir pateikimo logiką. Apsvarstykite talpinimo mechanizmus, jei našumas tampa problema.
• Redaktoriaus peržiūra: ServerSideRender komponentas suteikia gerą peržiūrą, tačiau jis priklauso nuo serverio užklausos. Labai sudėtingiems blokams tai gali būti ne akimirksniu. Užtikrinkite, kad jūsų render_callback būtų efektyvus.
• Atributų tvarkymas: Atributai daugiausia skirti blokui redaktoriuje konfigūruoti. render_callback yra atsakingas už faktinio dinaminio turinio gavimą ir rodymą. Venkite saugoti didelius kiekius dinamiškų duomenų tiesiogiai atributuose.
• Pavadinimų konvencijos: Naudokite unikalius prefiksus savo bloko pavadinimams (pvz., my-plugin-slug/block-name) ir „PHP“ funkcijų pavadinimams, kad išvengtumėte konfliktų su kitais papildiniais ar temomis.
• Tarptautinimas: Naudokite __() ir _n() išverčiamoms eilutėms tiek „JavaScript“, tiek „PHP“ koduose.

Už „Naujausių įrašų“ ribų: dinaminio bloko galimybių plėtimas

„Naujausių įrašų“ pavyzdys yra tik ledkalnio viršūnė. Dinaminius blokus galite naudoti:

• Pasirinktinių įrašų tipų rodymas: Produktų, portfolio elementų ar renginių demonstravimas.
• Vartotojui specifinis turinys: Rodomas turinys, aktualus prisijungusiam vartotojui.
• Interaktyvios formos: Nors sudėtingos formos vis tiek gali būti naudingos specializuotiems papildiniams, galima sukurti paprastas dinamines formas.
• Duomenų vizualizavimas: Duomenų gavimas iš API ir diagramų ar grafikų pateikimas (nors tai dažnai apima pažangesnes „JavaScript“ bibliotekas).
• Integracija su kitais papildiniais: Dinamiškas kitų papildinių valdomų duomenų rodymas.

Išvada

„WordPress“ dinaminiai blokai yra nepakeičiama priemonė kūrėjams, norintiems sukurti tikrai interaktyvią ir duomenimis pagrįstą patirtį „Gutenberg“ redaktoriuje. Suprasdami, kaip registruoti blokus su render_callback funkcijomis ir efektyviai tvarkyti atributus, galite kurti galingus komponentus, kurie gauna ir rodo realaus laiko informaciją. Nors statiniai blokai tarnauja savo tikslui struktūrizuotam turiniui, dinaminiai blokai atveria naują funkcionalumo lygį, leidžiantį sujungti serverio pusės logiką ir priekinės dalies pateikimą. Laikydamiesi geriausių saugumo, našumo ir kodo organizavimo praktikų, galite užtikrintai kurti tvirtus ir naudingus dinaminius blokus, kurie pagerina jūsų „WordPress“ svetaines.