إتقان كتل ووردبريس الديناميكية: الربط بين PHP وجافاسكريبت للمحتوى التفاعلي

ملخص

توفر كتل ووردبريس الديناميكية طريقة قوية لإنشاء محتوى يتجاوز HTML الثابت، مما يسمح بالتكامل مع البيانات في الوقت الفعلي والعناصر التفاعلية. على عكس الكتل الثابتة، تقوم الكتل الديناميكية بعرض مخرجاتها على جانب الخادم باستخدام PHP، مما يمكنها من جلب وعرض معلومات محدثة. تقدم هذه المقالة دليلاً عمليًا لتطوير الكتل الديناميكية الخاصة بك، وتغطي المفاهيم الأساسية لتسجيل الكتلة، ودوال الاستدعاء للعرض من جانب الخادم، ومعالجة السمات من جانب العميل. سنتجول عبر مثال خطوة بخطوة، موضحين كيفية بناء كتلة ديناميكية تعرض أحدث المقالات، مما يوفر أساسًا للمكونات التفاعلية الأكثر تعقيدًا.

إتقان كتل ووردبريس الديناميكية: الربط بين PHP وجافاسكريبت للمحتوى التفاعلي

يعتبر ووردبريس، في جوهره، نظام إدارة محتوى (CMS) قوي مبني على بنية PHP معيارية وقاعدة بيانات MySQL. إن قابليته للتوسيع هي نقطة قوته الرئيسية، والتي يتم تحقيقها بشكل أساسي من خلال السمات والإضافات. لقد أحدث ظهور Gutenberg، محرر الكتل، ثورة في إنشاء المحتوى من خلال تقديم واجهة معيارية مدفوعة بجافاسكريبت. في حين أن كتل Gutenberg الثابتة ممتازة للمحتوى المنظم وغير المتغير، فإن العديد من السيناريوهات الواقعية تتطلب محتوى ديناميكيًا وتفاعليًا ومدفوعًا بالبيانات. هذا هو المكان الذي تأتي فيه الكتل الديناميكية، حيث توفر جسرًا قويًا بين منطق جانب الخادم لـ PHP والتفاعلية من جانب العميل لجافاسكريبت.

فهم قوة الكتل الديناميكية

تقوم الكتل الثابتة، وهي الافتراضية في Gutenberg، بإنشاء HTML على جانب العميل عند حفظها. يتم تخزين هذا HTML مباشرة في محتوى المنشور. في حين أن هذا فعال للمحتوى الثابت، فإن هذا النهج له قيود عند التعامل مع البيانات التي تتغير بشكل متكرر أو تتطلب معالجة من جانب الخادم. من ناحية أخرى، تحل الكتل الديناميكية هذه المشكلة عن طريق عرض مخرجاتها على جانب الخادم باستخدام PHP. عندما يعرض المستخدم صفحة تحتوي على كتلة ديناميكية، يقوم ووردبريس بتنفيذ دالة PHP (دالة render_callback) لإنشاء HTML الخاص بالكتلة في الوقت الفعلي. يتيح ذلك للكتلة جلب بيانات في الوقت الفعلي من قاعدة البيانات، والتفاعل مع وظائف ووردبريس الأخرى، وتقديم معلومات محدثة دائمًا.

هذا العرض من جانب الخادم ضروري لعدة أسباب:

• بيانات في الوقت الفعلي: عرض أحدث المقالات، أو الأحداث القادمة، أو أسعار الأسهم، أو أي بيانات أخرى تتغير بشكل متكرر.
• منطق معقد: إجراء حسابات، أو الاستعلام عن أنواع منشورات مخصصة، أو التكامل مع واجهات برمجة التطبيقات الخارجية قبل عرض المخرجات.
• الأمان: تنقية والتحقق من صحة البيانات قبل عرضها، خاصة عند التعامل مع المحتوى الذي ينشئه المستخدمون أو المصادر الخارجية.
• الأداء: قد يؤدي تفريغ مهام العرض المعقدة إلى الخادم أحيانًا إلى تحسين أداء جانب العميل.

تشريح الكتلة الديناميكية

تُعرّف الكتلة الديناميكية، مثل أي كتلة Gutenberg أخرى، من خلال بياناتها الوصفية وتسجيلها في جافاسكريبت. ومع ذلك، تكمن ميزتها الفريدة في سمة render_callback المحددة أثناء التسجيل. تكون دالة الاستدعاء هذه مسؤولة عن إنشاء مخرجات HTML الخاصة بالكتلة على الخادم.

إليك تفصيل للمكونات الرئيسية:

1. تسجيل الكتلة (جافاسكريبت): لا تزال بحاجة إلى تسجيل الكتلة الخاصة بك باستخدام registerBlockType() في ملف جافاسكريبت الخاص بك. هذا يخبر Gutenberg بوجود الكتلة الخاصة بك وكيفية التعامل مع سماتها وواجهة المحرر.
2. السمات: هذه هي حقول البيانات المرتبطة بالكتلة الخاصة بك، والمخزنة في محتوى المنشور. بالنسبة للكتل الديناميكية، تُستخدم السمات بشكل أساسي لتكوين سلوك الكتلة وإعداداتها في المحرر. يتم إنشاء المحتوى الفعلي المعروض بواسطة render_callback.
3. render_callback (PHP): هذا هو قلب الكتلة الديناميكية. إنها دالة PHP تتلقى سمات الكتلة كوسيطة وتعيد سلسلة HTML ليتم عرضها على الواجهة الأمامية.
4. واجهة المحرر (جافاسكريبت): لا تزال ستقوم ببناء واجهة الكتلة داخل محرر Gutenberg باستخدام مكونات React. تتيح هذه الواجهة للمستخدمين تكوين سمات الكتلة ورؤية معاينة (غالبًا تمثيل مبسط) لما سيبدو عليه المحتوى الديناميكي.

خطوة بخطوة: إنشاء كتلة "أحدث المقالات" ديناميكية

لنقم بإنشاء مثال عملي: كتلة ديناميكية تعرض قائمة بأحدث المقالات من موقع ووردبريس الخاص بك.

المتطلبات الأساسية:

• بيئة تطوير ووردبريس محلية.
• فهم أساسي لـ PHP وجافاسكريبت.
• إضافة أو سمة حيث ستضيف كود الكتلة الخاص بك.

الخطوة 1: إعداد إضافة/سمة الكتلة الخاصة بك

إذا لم يكن لديك إضافة أو سمة مخصصة، فقم بإنشاء واحدة بسيطة. لهذا المثال، سنفترض أنك تضيف هذا إلى إضافة.

الخطوة 2: تسجيل الكتلة (جافاسكريبت)

في ملف جافاسكريبت الخاص بإضافتك (مثل src/index.js)، ستقوم بتسجيل الكتلة. سنستخدم @wordpress/blocks و @wordpress/i18n للتدويل.

// src/index.js

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

// استيراد مكون التحرير الخاص بالكتلة
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() ليست مطلوبة للكتل الديناميكية
    // دالة render_callback من جانب الخادم ستتعامل مع المخرجات
} );

الخطوة 3: إنشاء مكون المحرر (جافاسكريبت)

الآن، قم بإنشاء ملف src/edit.js. سيحدد هذا المكون كيف تبدو الكتلة وتتصرف داخل محرر Gutenberg.

// 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>
            {
                // استخدم ServerSideRender لعرض معاينة للكتلة الديناميكية
                <ServerSideRender
                    block="my-dynamic-blocks/recent-posts"
                    attributes={ attributes }
                />
            }
        </div>
    );
}

لاحظ أننا لا نحدد دالة save(). هذا هو الفرق الرئيسي للكتل الديناميكية. يتم استخدام مكون ServerSideRender لعرض معاينة لمخرجات الكتلة مباشرة في المحرر، عن طريق إجراء طلب إلى الخادم.

الخطوة 4: تحميل البرامج النصية وتسجيل العرض من جانب الخادم (PHP)

في ملف PHP الرئيسي لإضافتك (مثل my-dynamic-blocks.php)، تحتاج إلى تحميل ملف جافاسكريبت الخاص بك وتسجيل نوع الكتلة، بما في ذلك 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_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__ ), // بافتراض أن لديك عملية بناء
        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' );

/**
 * دالة الاستدعاء للعرض لكتلة "أحدث المقالات" الديناميكية.
 *
 * @param array $attributes سمات الكتلة.
 * @return string مخرجات 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">'; // استخدم فئة للتصميم
        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(); // مهم: إعادة تعيين بيانات المنشور بعد حلقة مخصصة
    } else {
        $output = '<p>' . __( 'No posts found.', 'my-dynamic-blocks' ) . '</p>';
    }

    return $output;
}

شرح كود PHP:

• my_dynamic_blocks_register_block(): تقوم هذه الدالة بالربط بـ init لتسجيل نوع الكتلة الخاص بنا. والأهم من ذلك، أنها تحدد render_callback كـ my_dynamic_blocks_render_recent_posts وتمرر أيضًا سمات الكتلة، مما يعكس ما هو محدد في جافاسكريبت.
• my_dynamic_blocks_enqueue_editor_scripts(): تقوم هذه الدالة بالربط بـ enqueue_block_editor_assets لتحميل ملف جافاسكريبت الخاص بنا خصيصًا للمحرر. يتضمن wp-server-side-render كاعتمادية.
• my_dynamic_blocks_render_recent_posts(): هذه هي render_callback الخاصة بنا. تتلقى مصفوفة $attributes، وتقوم بتنقيتها وتحويلها إلى الأنواع الصحيحة، ثم تستخدم WP_Query لجلب أحدث المقالات. تقوم ببناء قائمة HTML <ul> وتعيدها. wp_reset_postdata() ضروري بعد حلقة WP_Query مخصصة لمنع التعارض مع استعلام ووردبريس الرئيسي.

الخطوة 5: بناء جافاسكريبت الخاص بك

إذا كنت تستخدم عملية بناء جافاسكريبت حديثة (مثل @wordpress/scripts)، فستحتاج إلى بناء الأصول الخاصة بك. قم بتشغيل npm run build (أو yarn build) في دليل الإضافة الخاص بك.

الخطوة 6: التفعيل والاختبار

قم بتفعيل الإضافة الخاصة بك. الآن، عندما تضيف كتلة "أحدث المقالات" إلى منشور أو صفحة، سترى واجهة المحرر. ستعرض منطقة المعاينة المخرجات التي تم عرضها بواسطة دالة PHP الخاصة بك. عند نشر المنشور أو تحديثه، سيتم تشغيل نفس دالة PHP على الواجهة الأمامية لعرض المحتوى الديناميكي.

أفضل الممارسات والمحاذير

• الأمان أولاً: قم دائمًا بتنقية والتحقق من صحة أي بيانات تأتي من السمات أو المصادر الخارجية قبل استخدامها في render_callback الخاص بك. استخدم دوال ووردبريس مثل esc_html() و esc_url() و sanitize_text_field() وما إلى ذلك.
• wp_reset_postdata(): إذا كانت render_callback الخاصة بك تستخدم WP_Query أو تعدل الكائن العام $post، فقم دائمًا باستدعاء wp_reset_postdata() بعد ذلك لاستعادة الاستعلام الأصلي وبيانات المنشور.
• اعتبارات الأداء: في حين أن الكتل الديناميكية قوية، فإن العرض المفرط أو المعقد من جانب الخادم يمكن أن يؤثر على أوقات تحميل الصفحة. قم بتحسين استعلاماتك ومنطق العرض. ضع في اعتبارك آليات التخزين المؤقت إذا أصبح الأداء مشكلة.
• معاينة المحرر: يوفر مكون ServerSideRender معاينة جيدة، ولكنه يعتمد على إجراء طلب خادم. بالنسبة للكتل المعقدة جدًا، قد لا يكون هذا فوريًا. تأكد من أن render_callback الخاص بك فعال.
• معالجة السمات: تُستخدم السمات بشكل أساسي لتكوين الكتلة في المحرر. render_callback مسؤولة عن جلب وعرض المحتوى الديناميكي الفعلي. تجنب تخزين كميات كبيرة من البيانات الديناميكية مباشرة في السمات.
• اصطلاحات التسمية: استخدم بادئات فريدة لأسماء الكتل الخاصة بك (مثل my-plugin-slug/block-name) وأسماء دوال PHP لتجنب التعارضات مع الإضافات أو السمات الأخرى.
• التدويل: استخدم __() و _n() للسلاسل القابلة للترجمة في كل من كود جافاسكريبت و PHP الخاص بك.

ما وراء أحدث المقالات: توسيع إمكانيات الكتل الديناميكية

مثال "أحدث المقالات" هو مجرد غيض من فيض. يمكنك الاستفادة من الكتل الديناميكية لـ:

• عرض أنواع المنشورات المخصصة: عرض المنتجات، أو عناصر المحفظة، أو الأحداث.
• محتوى خاص بالمستخدم: عرض محتوى ذي صلة بالمستخدم المسجل دخوله.
• نماذج تفاعلية: في حين أن النماذج المعقدة قد لا تزال تستفيد من الإضافات المخصصة، يمكن بناء نماذج ديناميكية بسيطة.
• تصور البيانات: جلب البيانات من واجهة برمجة تطبيقات وعرض الرسوم البيانية أو المخططات (على الرغم من أن هذا غالبًا ما يتضمن مكتبات جافاسكريبت أكثر تقدمًا).
• التكامل مع الإضافات الأخرى: عرض ديناميكي للبيانات التي تديرها إضافات أخرى.

خاتمة

تعد كتل ووردبريس الديناميكية أداة لا غنى عنها للمطورين الذين يتطلعون إلى إنشاء تجارب تفاعلية ومدفوعة بالبيانات حقًا داخل محرر Gutenberg. من خلال فهم كيفية تسجيل الكتل باستخدام دوال render_callback وإدارة السمات بفعالية، يمكنك بناء مكونات قوية تجلب وتعرض معلومات في الوقت الفعلي. في حين أن الكتل الثابتة تخدم غرضها للمحتوى المنظم، فإن الكتل الديناميكية تفتح مستوى جديدًا من الوظائف، مما يسمح لك بسد الفجوة بين منطق جانب الخادم وعرض الواجهة الأمامية. من خلال اتباع أفضل الممارسات للأمان والأداء وتنظيم الكود، يمكنك بثقة تطوير كتل ديناميكية قوية ومفيدة تعزز مواقع ووردبريس الخاصة بك.