WordPress dinamisko bloku apguve: PHP un JavaScript savienošana interaktīvam saturam

Kopsavilkums

WordPress dinamiskie bloki piedāvā jaudīgu veidu, kā izveidot saturu, kas pārsniedz statisku HTML, ļaujot integrēt datus reāllaikā un izmantot interaktīvus elementus. Atšķirībā no statiskajiem blokiem, dinamiskie bloki renderē savu izvadi servera pusē, izmantojot PHP, ļaujot tiem iegūt un parādīt jaunāko informāciju. Šis raksts sniedz praktisku ceļvedi savu dinamisko bloku izstrādei, aptverot bloku reģistrācijas, servera puses renderēšanas atzvanu un klienta puses atribūtu apstrādes būtiskos jēdzienus. Mēs iziesim cauri soli pa solim piemēram, demonstrējot, kā izveidot dinamisku bloku, kas parāda jaunākos ierakstus, piedāvājot pamatu sarežģītākiem interaktīviem komponentiem.

WordPress dinamisko bloku apguve: PHP un JavaScript savienošana interaktīvam saturam

WordPress, pēc būtības, ir stabila satura pārvaldības sistēma (CMS), kas veidota uz modulāras PHP arhitektūras un MySQL datubāzes. Tās paplašināmība ir galvenais spēks, ko galvenokārt nodrošina tēmas un spraudņi. Gutenberg, bloku redaktora, parādīšanās ir revolucionizējusi satura izveidi, ieviešot modulāru, JavaScript vadītu saskarni. Lai gan statiskie Gutenberg bloki ir lieliski piemēroti strukturētam, nemainīgam saturam, daudzas reālās situācijas prasa dinamisku, interaktīvu un uz datiem balstītu saturu. Šeit dinamiskie bloki ieņem savu vietu, piedāvājot jaudīgu saikni starp PHP servera puses loģiku un JavaScript klienta puses interaktivitāti.

Dinamisko bloku jaudas izpratne

Statiski bloki, kas ir noklusējuma Gutenbergā, renderē HTML klienta pusē, kad tie tiek saglabāti. Šis HTML pēc tam tiek tieši saglabāts ieraksta saturā. Lai gan efektīvi statiskam saturam, šai pieejai ir ierobežojumi, kad tiek apstrādāti dati, kas bieži mainās vai prasa servera puses apstrādi. Dinamiskie bloki, no otras puses, atrisina šo problēmu, renderējot savu izvadi servera pusē, izmantojot PHP. Kad lietotājs skata lapu, kas satur dinamisku bloku, WordPress izpilda PHP funkciju (render_callback), lai dinamiski ģenerētu bloka HTML. Tas ļauj blokam iegūt datus reāllaikā no datubāzes, mijiedarboties ar citām WordPress funkcijām un prezentēt vienmēr aktuālu informāciju.

Šī servera puses renderēšana ir būtiska vairāku iemeslu dēļ:

• Dati reāllaikā: Jaunāko ierakstu, gaidāmo notikumu, akciju cenu vai jebkuru citu bieži mainīgu datu parādīšana.
• Sarežģīta loģika: Aprēķinu veikšana, pielāgotu ierakstu tipu vaicāšana vai integrācija ar ārējām API pirms izvades renderēšanas.
• Drošība: Datu sanitizācija un validēšana pirms to parādīšanas, īpaši apstrādājot lietotāju ģenerētu saturu vai ārējus avotus.
• Veiktspēja: Sarežģītu renderēšanas uzdevumu novirzīšana uz serveri dažkārt var uzlabot klienta puses veiktspēju.

Dinamiskā bloka anatomija

Dinamiskais bloks, tāpat kā jebkurš cits Gutenberg bloks, tiek definēts ar savu metadatu un JavaScript reģistrāciju. Tomēr tā unikālā īpašība ir reģistrācijas laikā norādītais render_callback atribūts. Šī atzvanu funkcija ir atbildīga par bloka HTML izvades ģenerēšanu serverī.

Šeit ir galveno komponentu sadalījums:

1. Bloka reģistrācija (JavaScript): Jums joprojām ir jāreģistrē savs bloks, izmantojot registerBlockType() savā JavaScript failā. Tas informē Gutenberg, ka jūsu bloks pastāv un kā apstrādāt tā atribūtus un redaktora saskarni.
2. Atribūti: Tās ir ar jūsu bloku saistītās datu lauki, kas tiek glabāti ieraksta saturā. Dinamiskajiem blokiem atribūti galvenokārt tiek izmantoti, lai konfigurētu bloka darbību un iestatījumus redaktorā. Faktisko parādīto saturu ģenerē render_callback.
3. render_callback (PHP): Šī ir dinamiskā bloka būtība. Tā ir PHP funkcija, kas saņem bloka atribūtus kā argumentu un atgriež HTML virkni, kas tiks renderēta priekšgalā.
4. Redaktora saskarne (JavaScript): Jūs joprojām veidosiet bloka saskarni Gutenberg redaktorā, izmantojot React komponentus. Šī saskarne ļauj lietotājiem konfigurēt bloka atribūtus un redzēt priekšskatījumu (bieži vien vienkāršotu attēlojumu) par to, kā izskatīsies dinamiskais saturs.

Soli pa solim: Dinamiska "Jaunāko ierakstu" bloka izveide

Izveidosim praktisku piemēru: dinamisku bloku, kas parāda jaunāko ierakstu sarakstu no jūsu WordPress vietnes.

Priekšnoteikumi:

• Vietēja WordPress izstrādes vide.
• Pamata izpratne par PHP un JavaScript.
• Spraudnis vai tēma, kurā pievienosiet sava bloka kodu.

1. darbība: Iestatiet sava bloka spraudni/tēmu

Ja jums nav pielāgota spraudņa vai tēmas, izveidojiet vienkāršu. Šajā piemērā mēs pieņemsim, ka pievienojat to spraudnim.

2. darbība: Reģistrējiet bloku (JavaScript)

Savas spraudņa JavaScript failā (piemēram, src/index.js) reģistrēsiet bloku. Starptautiskai lokalizācijai izmantosim @wordpress/blocks un @wordpress/i18n.

// src/index.js

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

// Importējiet sava bloka rediģēšanas komponenti
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 NAV nepieciešama dinamiskajiem blokiem
    // Servera puses render_callback apstrādās izvadi
} );

3. darbība: Izveidojiet redaktora komponentu (JavaScript)

Tagad izveidojiet failu src/edit.js. Šis komponents definēs, kā bloks izskatās un darbojas Gutenberg redaktorā.

// 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>
            {
                // Izmantojiet ServerSideRender, lai parādītu dinamiskā bloka priekšskatījumu
                <ServerSideRender
                    block="my-dynamic-blocks/recent-posts"
                    attributes={ attributes }
                />
            }
        </div>
    );
}

Ievērojiet, ka mēs ne definējam save() funkciju. Šī ir galvenā atšķirība dinamiskajiem blokiem. ServerSideRender komponents tiek izmantots, lai parādītu bloka izvades priekšskatījumu tieši redaktorā, veicot pieprasījumu uz serveri.

4. darbība: Iekļaujiet skriptus un reģistrējiet servera puses renderēšanu (PHP)

Savas spraudņa galvenajā PHP failā (piemēram, my-dynamic-blocks.php) jums ir jāiekļauj savs JavaScript fails un jāreģistrē bloka tips, ieskaitot 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() {
    // Reģistrēt bloka tipu
    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__ ), // Pieņemot, ka jums ir būvēšanas 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">'; // Izmantojiet klasi stilizēšanai
        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(); // Svarīgi: atiestatiet ierakstu datus pēc pielāgotā cikla
    } else {
        $output = '<p>' . __( 'No posts found.', 'my-dynamic-blocks' ) . '</p>';
    }

    return $output;
}

PHP koda skaidrojums:

• my_dynamic_blocks_register_block(): Šī funkcija izmanto init āķi, lai reģistrētu mūsu bloka tipu. Būtiski, tā definē render_callback kā my_dynamic_blocks_render_recent_posts un arī nodod bloka atribūtus, atspoguļojot JavaScript definēto.
• my_dynamic_blocks_enqueue_editor_scripts(): Šī funkcija izmanto enqueue_block_editor_assets āķi, lai ielādētu mūsu JavaScript failu īpaši redaktoram. Tā ietver wp-server-side-render kā atkarību.
• my_dynamic_blocks_render_recent_posts(): Šis ir mūsu render_callback. Tā saņem $attributes masīvu, sanitizē un pārveido tos pareizajos tipos, pēc tam izmanto WP_Query, lai iegūtu jaunākos ierakstus. Tā konstruē HTML <ul> sarakstu un atgriež to. wp_reset_postdata() ir ļoti svarīgi pēc pielāgotā WP_Query cikla, lai novērstu konfliktus ar galveno WordPress vaicājumu.

5. darbība: Izveidojiet savu JavaScript

Ja izmantojat modernu JavaScript būvēšanas procesu (piemēram, @wordpress/scripts), jums būs jāizveido savi resursi. Savā spraudņa direktorijā palaidiet npm run build (vai yarn build).

6. darbība: Aktivizējiet un testējiet

Aktivizējiet savu spraudni. Tagad, kad pievienosiet 'Recent Posts' bloku ierakstam vai lapai, redzēsiet redaktora saskarni. Priekšskatījuma apgabalā tiks parādīta jūsu PHP atzvana renderētā izvade. Kad publicēsit vai atjaunināsit ierakstu, tas pats PHP atzvans darbosies priekšgalā, lai parādītu dinamisko saturu.

Labākā prakse un brīdinājumi

• Drošība pirmajā vietā: Vienmēr sanitizējiet un validējiet visus datus, kas nāk no atribūtiem vai ārējiem avotiem, pirms tos izmantojat savā render_callback. Izmantojiet WordPress funkcijas, piemēram, esc_html(), esc_url(), sanitize_text_field() utt.
• wp_reset_postdata(): Ja jūsu render_callback izmanto WP_Query vai modificē globālo $post objektu, vienmēr pēc tam izsauciet wp_reset_postdata(), lai atjaunotu sākotnējo vaicājumu un ierakstu datus.
• Veiktspējas apsvērumi: Lai gan dinamiskie bloki ir jaudīgi, pārmērīga vai sarežģīta servera puses renderēšana var ietekmēt lapu ielādes laiku. Optimizējiet savus vaicājumus un renderēšanas loģiku. Apsveriet kešošanas mehānismus, ja rodas veiktspējas problēmas.
• Redaktora priekšskatījums: ServerSideRender komponents nodrošina labu priekšskatījumu, taču tas paļaujas uz servera pieprasījumu. Ļoti sarežģītiem blokiem tas var nebūt tūlītējs. Nodrošiniet, lai jūsu render_callback būtu efektīvs.
• Atribūtu apstrāde: Atribūti galvenokārt ir paredzēti bloka konfigurēšanai redaktorā. render_callback ir atbildīgs par faktiskā dinamiskā satura iegūšanu un parādīšanu. Izvairieties glabāt lielu daudzumu dinamisko datu tieši atribūtos.
• Nosaukumu konvencijas: Izmantojiet unikālus prefiksus saviem bloku nosaukumiem (piemēram, my-plugin-slug/block-name) un PHP funkciju nosaukumiem, lai izvairītos no konfliktiem ar citiem spraudņiem vai tēmām.
• Starptautiskā lokalizācija: Izmantojiet __() un _n() tulkojamiem virkņiem gan JavaScript, gan PHP kodā.

Tālāk par jaunākajiem ierakstiem: Dinamisko bloku iespēju paplašināšana

"Jaunāko ierakstu" piemērs ir tikai aisberga gals. Jūs varat izmantot dinamiskos blokus šādiem mērķiem:

• Pielāgotu ierakstu tipu parādīšana: Produktu, portfolio vienumu vai notikumu demonstrēšana.
• Lietotājam specifisks saturs: Satura parādīšana, kas ir attiecīga pieteiktajam lietotājam.
• Interaktīvas veidlapas: Lai gan sarežģītām veidlapām joprojām varētu būt nepieciešami īpaši spraudņi, var izveidot vienkāršas dinamiskas veidlapas.
• Datu vizualizācija: Datu iegūšana no API un diagrammu vai grafiku renderēšana (lai gan tas bieži vien ietver progresīvākas JavaScript bibliotēkas).
• Integrācija ar citiem spraudņiem: Datu, ko pārvalda citi spraudņi, dinamiska parādīšana.

Secinājums

Dinamiskie WordPress bloki ir neaizstājams rīks izstrādātājiem, kuri vēlas radīt patiesi interaktīvas un uz datiem balstītas pieredzes Gutenberg redaktorā. Izprotot, kā reģistrēt blokus ar render_callback funkcijām un efektīvi pārvaldīt atribūtus, jūs varat izveidot jaudīgus komponentus, kas iegūst un parāda informāciju reāllaikā. Lai gan statiskie bloki kalpo savam nolūkam strukturētam saturam, dinamiskie bloki atver jaunu funkcionalitātes līmeni, ļaujot jums savienot servera puses loģiku un priekšgala prezentāciju. Ievērojot labāko praksi drošības, veiktspējas un koda organizācijas jomā, jūs varat pārliecinoši izstrādāt stabilus un noderīgus dinamiskos blokus, kas uzlabo jūsu WordPress vietnes.