Obvladovanje dinamičnih blokov WordPress: Povezovanje PHP in JavaScript za interaktivne vsebine

Povzetek

Dinamični bloki WordPress ponujajo zmogljiv način za ustvarjanje vsebin, ki presegajo statični HTML, saj omogočajo integracijo podatkov v realnem času in interaktivne elemente. Za razliko od statičnih blokov, dinamični bloki izvedejo svojo izhodno kodo na strani strežnika z uporabo PHP, kar jim omogoča pridobivanje in prikazovanje najnovejših informacij. Ta članek ponuja praktični vodnik za razvoj lastnih dinamičnih blokov, ki zajema bistvene koncepte registracije blokov, povratnih klicev za upodabljanje na strani strežnika in obravnavo atributov na strani odjemalca. Popeljali vas bomo skozi primer korak za korakom, ki prikazuje, kako ustvariti dinamični blok, ki prikazuje nedavne objave, kar ponuja temelj za bolj zapletene interaktivne komponente.

Obvladovanje dinamičnih blokov WordPress: Povezovanje PHP in JavaScript za interaktivne vsebine

WordPress je v svojem bistvu robusten sistem za upravljanje vsebin (CMS), zgrajen na modularni PHP arhitekturi in podatkovni bazi MySQL. Njegova razširljivost je ključna prednost, ki se dosega predvsem s temami in vtičniki. Prihod Gutenbergovega urejevalnika blokov je revolucioniral ustvarjanje vsebin z uvedbo modularnega vmesnika, ki temelji na JavaScriptu. Medtem ko so statični Gutenbergovi bloki odlični za strukturirane, nespremenljive vsebine, mnogi scenariji iz resničnega sveta zahtevajo vsebine, ki so dinamične, interaktivne in podatkovno vodene. Tu nastopijo dinamični bloki, ki ponujajo zmogljiv most med logiko na strani strežnika v PHP in interaktivnostjo na strani odjemalca v JavaScriptu.

Razumevanje moči dinamičnih blokov

Statični bloki, ki so privzeti v Gutenbergovem urejevalniku, ustvarijo HTML na strani odjemalca ob shranjevanju. Ta HTML se nato shrani neposredno v vsebino objave. Medtem ko je to učinkovito za statične vsebine, ima ta pristop omejitve pri podatkih, ki se pogosto spreminjajo ali zahtevajo obdelavo na strani strežnika. Dinamični bloki pa rešujejo to težavo z izvajanjem svoje izhodne kode na strani strežnika z uporabo PHP. Ko uporabnik prikaže stran, ki vsebuje dinamični blok, WordPress izvede PHP funkcijo (render_callback), da dinamično ustvari HTML bloka. To omogoča bloku, da pridobi podatke v realnem času iz podatkovne baze, komunicira z drugimi funkcionalnostmi WordPressa in predstavi vedno ažurne informacije.

To upodabljanje na strani strežnika je ključnega pomena iz več razlogov:

• Podatki v realnem času: Prikazovanje najnovejših objav, prihajajočih dogodkov, cen delnic ali katerih koli drugih podatkov, ki se pogosto spreminjajo.
• Zapletena logika: Izvajanje izračunov, poizvedovanje po vrstah po meri ali integracija z zunanjimi API-ji pred upodabljanjem izhodne kode.
• Varnost: Čiščenje in preverjanje podatkov, preden se prikažejo, zlasti pri obravnavanju vsebin, ki jih ustvarijo uporabniki, ali zunanjih virov.
• Učinkovitost: Prenos zapletenih nalog upodabljanja na strežnik lahko včasih izboljša učinkovitost na strani odjemalca.

Anatomija dinamičnega bloka

Dinamični blok, kot kateri koli drug Gutenbergov blok, je opredeljen s svojimi metapodatki in registracijo v JavaScriptu. Njegova edinstvena značilnost pa je atribut render_callback, določen med registracijo. Ta povratni klic je odgovoren za ustvarjanje izhodne kode HTML bloka na strežniku.

Tu je pregled ključnih komponent:

1. Registracija bloka (JavaScript): Blok še vedno morate registrirati z uporabo registerBlockType() v vaši JavaScript datoteki. To pove Gutenbergovemu urejevalniku, da vaš blok obstaja in kako obravnavati njegove atribute in vmesnik urejevalnika.
2. Atributi: To so podatkovna polja, povezana z vašim blokom, shranjena v vsebini objave. Za dinamične bloke se atributi predvsem uporabljajo za konfiguracijo vedenja in nastavitev bloka v urejevalniku. Dejansko vsebino, ki se prikaže, ustvari render_callback.
3. render_callback (PHP): To je srce dinamičnega bloka. To je PHP funkcija, ki prejme atribute bloka kot argument in vrne niz HTML, ki ga je treba upodobiti na sprednjem delu spletne strani.
4. Vmesnik urejevalnika (JavaScript): Vmesnik bloka boste še vedno gradili znotraj Gutenbergovega urejevalnika z uporabo komponent React. Ta vmesnik omogoča uporabnikom, da konfigurirajo atribute bloka in vidijo predogled (pogosto poenostavljeno predstavitev) tega, kako bo dinamična vsebina videti.

Korak za korakom: Ustvarjanje dinamičnega bloka "Nedavne objave"

Ustvarimo praktičen primer: dinamični blok, ki prikaže seznam najnovejših objav z vašega spletnega mesta WordPress.

Predpogoji:

• Lokalno razvojno okolje WordPress.
• Osnovno razumevanje PHP in JavaScript.
• Vtičnik ali tema, kamor boste dodali kodo bloka.

1. korak: Nastavitev vtičnika/teme za blok

Če nimate vtičnika ali teme po meri, ustvarite preprostega. Za ta primer bomo predpostavili, da ga dodajate v vtičnik.

2. korak: Registracija bloka (JavaScript)

V vaši JavaScript datoteki vtičnika (npr. src/index.js) boste registrirali blok. Uporabili bomo @wordpress/blocks in @wordpress/i18n za internacionalizacijo.

// src/index.js

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

// Uvozite komponento za urejanje vašega bloka
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,
    // Funkcija save() NI potrebna za dinamične bloke
    // Povratni klic render_callback na strani strežnika bo poskrbel za izhodno kodo
} );

3. korak: Ustvarjanje komponente za urejanje (JavaScript)

Zdaj ustvarite datoteko src/edit.js. Ta komponenta bo določila, kako blok izgleda in se obnaša znotraj Gutenbergovega urejevalnika.

// 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>
            {
                // Uporabite ServerSideRender za prikaz predogleda dinamičnega bloka
                <ServerSideRender
                    block="my-dynamic-blocks/recent-posts"
                    attributes={ attributes }
                />
            }
        </div>
    );
}

Opazite, da ne definiramo funkcije save(). To je ključna razlika za dinamične bloke. Komponenta ServerSideRender se uporablja za prikaz predogleda izhodne kode bloka neposredno v urejevalniku z zahtevo po strežniku.

4. korak: Vključitev skriptov in registracija upodabljanja na strani strežnika (PHP)

V glavni PHP datoteki vašega vtičnika (npr. my-dynamic-blocks.php) morate vključiti svojo JavaScript datoteko in registrirati vrsto bloka, vključno z 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() {
    // Registriraj vrsto bloka
    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__ ), // Predpostavljamo, da imate proces gradnje
        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' );

/**
 * Povratni klic za upodabljanje dinamičnega bloka Recent Posts.
 *
 * @param array $attributes Atributi bloka.
 * @return string Izhodna koda HTML.
 */
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">'; // Uporabite razred za stiliziranje
        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(); // Pomembno: Ponastavite podatke objave po zanki po meri
    } else {
        $output = '<p>' . __( 'No posts found.', 'my-dynamic-blocks' ) . '</p>';
    }

    return $output;
}

Razlaga PHP kode:

• my_dynamic_blocks_register_block(): Ta funkcija se poveže z init, da registrira našo vrsto bloka. Ključno je, da definira render_callback kot my_dynamic_blocks_render_recent_posts in prav tako posreduje atribute bloka, kar odraža tisto, kar je definirano v JavaScriptu.
• my_dynamic_blocks_enqueue_editor_scripts(): Ta funkcija se poveže z enqueue_block_editor_assets, da naloži našo JavaScript datoteko posebej za urejevalnik. Vključuje wp-server-side-render kot odvisnost.
• my_dynamic_blocks_render_recent_posts(): To je naš render_callback. Prejme array $attributes, jih očisti in pretvori v pravilne tipe, nato pa uporabi WP_Query za pridobitev nedavnih objav. Ustvari HTML seznam <ul> in ga vrne. wp_reset_postdata() je bistvenega pomena po zanki WP_Query po meri, da se preprečijo konflikti z glavno poizvedbo WordPressa.

5. korak: Zgradite svoj JavaScript

Če uporabljate sodoben proces gradnje JavaScript (kot je @wordpress/scripts), boste morali zgraditi svoje vire. V imeniku vašega vtičnika zaženite npm run build (ali yarn build).

6. korak: Aktivirajte in preizkusite

Aktivirajte svoj vtičnik. Zdaj, ko dodate blok 'Recent Posts' v objavo ali stran, boste videli vmesnik urejevalnika. Območje predogleda bo prikazalo izhodno kodo, ki jo je izvedel vaš PHP povratni klic. Ko objavite ali posodobite objavo, se bo isti PHP povratni klic izvedel na sprednjem delu spletne strani za prikaz dinamične vsebine.

Najboljše prakse in opozorila

• Varnost na prvem mestu: Vedno očistite in preverite vse podatke, ki prihajajo iz atributov ali zunanjih virov, preden jih uporabite v svojem render_callback. Uporabite WordPress funkcije, kot so esc_html(), esc_url(), sanitize_text_field() itd.
• wp_reset_postdata(): Če vaš render_callback uporablja WP_Query ali spreminja globalni objekt $post, vedno pokličite wp_reset_postdata() za povrnitev prvotne poizvedbe in podatkov objave.
• Premisleki glede učinkovitosti: Medtem ko so dinamični bloki zmogljivi, lahko prekomerno ali zapleteno upodabljanje na strani strežnika vpliva na čase nalaganja strani. Optimizirajte svoje poizvedbe in logiko upodabljanja. Razmislite o mehanizmih predpomnjenja, če postane učinkovitost težava.
• Predogled v urejevalniku: Komponenta ServerSideRender zagotavlja dober predogled, vendar se zanaša na zahtevo po strežniku. Za zelo zapletene bloke to morda ne bo trenutno. Zagotovite, da je vaš render_callback učinkovit.
• Obravnavanje atributov: Atributi so predvsem za konfiguracijo bloka v urejevalniku. render_callback je odgovoren za pridobivanje in prikazovanje dejanske dinamične vsebine. Izogibajte se shranjevanju velikih količin dinamičnih podatkov neposredno v atribute.
• Konvencije poimenovanja: Uporabite edinstvene predpone za imena svojih blokov (npr. my-plugin-slug/block-name) in imena PHP funkcij, da se izognete konfliktom z drugimi vtičniki ali temami.
• Internacionalizacija: Uporabite __() in _n() za prevodljive nize v vaši JavaScript in PHP kodi.

Poleg nedavnih objav: Razširjanje zmožnosti dinamičnih blokov

Primer "Nedavne objave" je le vrh ledene gore. Dinamične bloke lahko uporabite za:

• Prikazovanje vrst po meri: Predstavitev izdelkov, portfeljev ali dogodkov.
• Vsebine, specifične za uporabnika: Prikazovanje vsebin, ki so pomembne za prijavljenega uporabnika.
• Interaktivni obrazci: Medtem ko lahko zapleteni obrazci še vedno koristijo namenskim vtičnikom, je mogoče ustvariti preproste dinamične obrazce.
• Vizualizacija podatkov: Pridobivanje podatkov iz API-ja in upodabljanje grafikonov ali diagramov (čeprav to pogosto vključuje naprednejše knjižnice JavaScript).
• Integracija z drugimi vtičniki: Dinamično prikazovanje podatkov, ki jih upravljajo drugi vtičniki.

Zaključek

Dinamični bloki WordPress so nepogrešljivo orodje za razvijalce, ki želijo ustvariti resnično interaktivne in podatkovno vodene izkušnje znotraj Gutenbergovega urejevalnika. Z razumevanjem, kako registrirati bloke s funkcijami render_callback in učinkovito upravljati atribute, lahko ustvarite zmogljive komponente, ki pridobivajo in prikazujejo informacije v realnem času. Medtem ko statični bloki služijo svojemu namenu za strukturirane vsebine, dinamični bloki odklenejo novo raven funkcionalnosti, kar vam omogoča, da premostite vrzel med logiko na strani strežnika in predstavitvijo na sprednjem delu. Z upoštevanjem najboljših praks za varnost, učinkovitost in organizacijo kode lahko samozavestno razvijate robustne in uporabne dinamične bloke, ki izboljšujejo vaša spletna mesta WordPress.