WordPressi dünaamiliste plokkide meisterdamine: PHP ja JavaScripti ühendamine interaktiivse sisu jaoks

Kokkuvõte

WordPressi dünaamilised plokid pakuvad võimsat viisi sisu loomiseks, mis ületab staatilise HTML-i, võimaldades reaalajas andmete integreerimist ja interaktiivseid elemente. Erinevalt staatilistest plokkidest renderdavad dünaamilised plokid oma väljundi serveripoolt PHP abil, mis võimaldab neil hankida ja kuvada ajakohast teavet. See artikkel pakub praktilist juhendit oma dünaamiliste plokkide arendamiseks, hõlmates plokkide registreerimise, serveripoolsete renderdusfunktsioonide ja kliendipoolsete atribuutide käsitsemise põhjalikke kontseptsioone. Vaatame samm-sammult läbi näite, mis demonstreerib, kuidas luua dünaamilist plokki, mis kuvab hiljutisi postitusi, pakkudes alust keerukamate interaktiivsete komponentide jaoks.

WordPressi dünaamiliste plokkide meisterdamine: PHP ja JavaScripti ühendamine interaktiivse sisu jaoks

WordPress on oma olemuselt robustne sisuhaldussüsteem (CMS), mis on ehitatud modulaarsele PHP-arhitektuurile ja MySQL-andmebaasile. Selle laiendatavus on peamine tugevus, mida saavutatakse peamiselt teemade ja pistikprogrammide kaudu. Gutenberg, plokkide redigeerija, on muutnud sisu loomise revolutsiooniliseks, tutvustades modulaarset, JavaScripti-põhist liidest. Kuigi staatilised Gutenbergi plokid on suurepärased struktureeritud, muutumatu sisu jaoks, nõuavad paljud reaalsed stsenaariumid dünaamilist, interaktiivset ja andmepõhist sisu. Siin tulevadki mängu dünaamilised plokid, mis pakuvad võimsat silda PHP serveripoolse loogika ja JavaScripti kliendipoolse interaktiivsuse vahel.

Dünaamiliste plokkide jõu mõistmine

Staatilised plokid, mis on Gutenbergi vaikimisi, genereerivad salvestamisel HTML-i kliendipoolt. See HTML salvestatakse seejärel otse postituse sisusse. Kuigi see on staatilise sisu jaoks tõhus, on sellel lähenemisel piiranguid sageli muutuva või serveripoolset töötlemist nõudva andmetega tegelemisel. Dünaamilised plokid seevastu lahendavad selle probleemi, renderdades oma väljundi serveripoolt PHP abil. Kui kasutaja vaatab dünaamilist plokki sisaldavat lehte, täidab WordPress ploki HTML-i kohapeal genereerimiseks PHP-funktsiooni (render_callback). See võimaldab plokil hankida reaalajas andmeid andmebaasist, suhelda teiste WordPressi funktsioonidega ja esitada alati ajakohast teavet.

See serveripoolne renderdus on mitmel põhjusel ülioluline:

• Reaalajas andmed: Viimaste postituste, eelseisvate sündmuste, aktsiahindade või muu sageli muutuva andmete kuvamine.
• Keeruline loogika: Väljundi renderdamisele eelnevate arvutuste tegemine, kohandatud postituste tüüpide päringute tegemine või väliste API-dega integreerimine.
• Turvalisus: Andmete puhastamine ja valideerimine enne nende kuvamist, eriti kasutajate loodud sisu või väliste allikatega tegelemisel.
• Toimivus: Keeruliste renderdusülesannete serverisse ülekandmine võib mõnikord parandada kliendipoolset jõudlust.

Dünaamilise ploki anatoomia

Dünaamiline plokk, nagu iga teine Gutenbergi plokk, on määratletud selle metaandmete ja JavaScripti registreerimisega. Selle unikaalne omadus seisneb aga registreerimise ajal määratletud render_callback atribuudis. See tagasikutsefunktsioon vastutab ploki HTML-väljundi genereerimise eest serveris.

Siin on peamiste komponentide jaotus:

1. Ploki registreerimine (JavaScript): Peate oma ploki ikkagi registreerima, kasutades oma JavaScript-failis funktsiooni registerBlockType(). See ütleb Gutenbergile, et teie plokk eksisteerib ja kuidas selle atribuute ja redigeerija liidest käsitleda.
2. Atribuudid: Need on teie plokiga seotud andmeväljad, mis salvestatakse postituse sisusse. Dünaamiliste plokkide puhul kasutatakse atribuute peamiselt ploki käitumise ja sätete konfigureerimiseks redigeerijas. Tegelik kuvatav sisu genereeritakse render_callback-i poolt.
3. render_callback (PHP): See on dünaamilise ploki süda. See on PHP-funktsioon, mis saab ploki atribuudid argumendina ja tagastab HTML-stringi, mida renderdatakse esiosas.
4. Redigeerija liides (JavaScript): Ehitate ploki liidese ikkagi Gutenbergi redigeerijas, kasutades Reacti komponente. See liides võimaldab kasutajatel konfigureerida ploki atribuute ja näha eelvaadet (sageli lihtsustatud esitust) sellest, kuidas dünaamiline sisu välja näeb.

Samm-sammult: Dünaamilise "Hiljutiste postituste" ploki loomine

Loome praktilise näite: dünaamilise ploki, mis kuvab loendi teie WordPressi saidi hiljutistest postitustest.

Eeldused:

• Kohalik WordPressi arenduskeskkond.
• PHP ja JavaScripti põhiteadmised.
• Pistikprogramm või teema, kuhu lisate oma ploki koodi.

1. samm: Ploki pistikprogrammi/teema seadistamine

Kui teil pole kohandatud pistikprogrammi või teemat, looge lihtne. Selles näites eeldame, et lisate selle pistikprogrammi.

2. samm: Ploki registreerimine (JavaScript)

Oma pistikprogrammi JavaScript-failis (nt src/index.js) registreerite ploki. Kasutame rahvusvaheliseks muutmiseks @wordpress/blocks ja @wordpress/i18n.

// src/index.js

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

// Importeerige oma ploki redigeerimiskomponent
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() funktsiooni EI OLE vaja dünaamiliste plokkide jaoks
    // Serveripoolne render_callback vastutab väljundi eest
} );

3. samm: Redigeerimiskomponendi loomine (JavaScript)

Nüüd looge fail src/edit.js. See komponent määratleb, kuidas plokk Gutenbergi redigeerijas välja näeb ja käitub.

// 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>
            {
                // Kasutage ServerSideRenderit dünaamilise ploki eelvaate kuvamiseks
                <ServerSideRender
                    block="my-dynamic-blocks/recent-posts"
                    attributes={ attributes }
                />
            }
        </div>
    );
}

Pange tähele, et me EI määra save() funktsiooni. See on dünaamiliste plokkide peamine erinevus. ServerSideRender komponenti kasutatakse ploki väljundi eelvaate kuvamiseks otse redigeerijas, tehes serverile päringu.

4. samm: Skriptide järjekorda lisamine ja serveripoolse renderduse registreerimine (PHP)

Oma pistikprogrammi peamises PHP-failis (nt my-dynamic-blocks.php) peate oma JavaScript-faili järjekorda lisama ja plokitüübi registreerima, sealhulgas 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() {
    // Registreerige plokitüüp
    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__ ), // Eeldades, et teil on ehitusprotsess
        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' );

/**
 * Hiljutiste postituste dünaamilise ploki renderdusfunktsioon.
 *
 * @param array $attributes Ploki atribuudid.
 * @return string HTML-väljund.
 */
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">'; // Kasutage stiilimiseks klassi
        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(); // Oluline: lähtestage postituse andmed pärast kohandatud tsüklit
    } else {
        $output = '<p>' . __( 'No posts found.', 'my-dynamic-blocks' ) . '</p>';
    }

    return $output;
}

PHP-koodi selgitus:

• my_dynamic_blocks_register_block(): See funktsioon haakub init-i külge, et registreerida meie plokitüüp. Oluliselt määratleb see render_callback-i kui my_dynamic_blocks_render_recent_posts ja edastab ka ploki atribuudid, peegeldades JavaScriptis määratletut.
• my_dynamic_blocks_enqueue_editor_scripts(): See funktsioon haakub enqueue_block_editor_assets-i külge, et laadida meie JavaScript-fail spetsiaalselt redigeerija jaoks. See sisaldab sõltuvusena wp-server-side-render.
• my_dynamic_blocks_render_recent_posts(): See on meie render_callback. See saab $attributes massiivi, puhastab ja teisendab need õigeteks tüüpideks ning kasutab seejärel WP_Query-t hiljutiste postituste hankimiseks. See koostab HTML-i <ul> loendi ja tagastab selle. wp_reset_postdata() on pärast kohandatud WP_Query tsüklit hädavajalik, et vältida konflikte peamise WordPressi päringuga.

5. samm: JavaScripti koostamine

Kui kasutate kaasaegset JavaScripti ehitusprotsessi (nagu @wordpress/scripts), peate oma varad koostama. Käivitage oma pistikprogrammi kataloogis npm run build (või yarn build).

6. samm: Aktiveerimine ja testimine

Aktiveerige oma pistikprogramm. Nüüd, kui lisate postitusele või lehele "Hiljutised postitused" ploki, näete redigeerija liidest. Eelvaate ala kuvab teie PHP-funktsiooni poolt renderdatud väljundi. Kui postitus avaldate või värskendate, käivitatakse sama PHP-funktsioon esiosas dünaamilise sisu kuvamiseks.

Parimad tavad ja hoiatused

• Turvalisus ennekõike: Puhastage ja valideerige alati kõik atribuutidest või välistest allikatest pärinevad andmed enne nende kasutamist oma render_callback-is. Kasutage WordPressi funktsioone nagu esc_html(), esc_url(), sanitize_text_field() jne.
• wp_reset_postdata(): Kui teie render_callback kasutab WP_Query-t või muudab globaalset $post objekti, kutsuge alati pärast seda wp_reset_postdata(), et taastada algne päring ja postituse andmed.
• Toimivuse kaalutlused: Kuigi dünaamilised plokid on võimsad, võivad liigne või keeruline serveripoolne renderdus mõjutada lehe laadimisaega. Optimeerige oma päringud ja renderdusloogika. Kaaluge vahemälumehhanisme, kui toimivus muutub probleemiks.
• Redigeerija eelvaade: ServerSideRender komponent pakub head eelvaadet, kuid see sõltub serveripäringu tegemisest. Väga keeruliste plokkide puhul ei pruugi see olla kohene. Veenduge, et teie render_callback oleks tõhus.
• Atribuutide käsitsemine: Atribuudid on peamiselt ploki konfigureerimiseks redigeerijas. render_callback vastutab tegeliku dünaamilise sisu hankimise ja kuvamise eest. Vältige suure hulga dünaamiliste andmete salvestamist otse atribuutidesse.
• Nimetamisreeglid: Kasutage oma ploki nimede (nt my-plugin-slug/block-name) ja PHP-funktsioonide nimede jaoks unikaalseid eesliiteid, et vältida konflikte teiste pistikprogrammide või teemadega.
• Rahvusvaheliseks muutmine: Kasutage __() ja _n() funktsioone nii JavaScripti kui ka PHP koodis tõlgitavate stringide jaoks.

Peale hiljutiste postituste: Dünaamiliste plokkide võimaluste laiendamine

"Hiljutiste postituste" näide on vaid jäämäe tipp. Saate dünaamilisi plokke kasutada järgmiseks:

• Kohandatud postituste tüüpide kuvamine: Toodete, portfoolioelementide või sündmuste esitlemine.
• Kasutajaspetsiifiline sisu: Sisu kuvamine, mis on seotud sisselogitud kasutajaga.
• Interaktiivsed vormid: Kuigi keerukad vormid võivad endiselt kasu saada spetsiaalsetest pistikprogrammidest, saab luua lihtsaid dünaamilisi vorme.
• Andmete visualiseerimine: API-st andmete hankimine ja graafikute või diagrammide renderdamine (kuigi see hõlmab sageli täpsemaid JavaScripti teeke).
• Integratsioon teiste pistikprogrammidega: Teiste pistikprogrammide hallatavate andmete dünaamiline kuvamine.

Järeldus

WordPressi dünaamilised plokid on asendamatu tööriist arendajatele, kes soovivad luua tõeliselt interaktiivseid ja andmepõhiseid kogemusi Gutenbergi redigeerijas. Mõistes, kuidas plokke render_callback funktsioonidega registreerida ja atribuute tõhusalt hallata, saate luua võimsaid komponente, mis hangivad ja kuvavad reaalajas teavet. Kuigi staatilised plokid teenivad oma eesmärki struktureeritud sisu jaoks, avavad dünaamilised plokid uue funktsionaalsuse taseme, võimaldades teil ühendada serveripoolse loogika ja esiosa esituse vahelise lõhe. Järgides parimaid turvalisuse, toimivuse ja koodikorralduse tavasid, saate enesekindlalt arendada robustseid ja kasulikke dünaamilisi plokke, mis täiustavad teie WordPressi veebisaite.