بلوک تعاملی با Interactivity API، بدون فریم‌ورک اضافه

رابط Interactivity وردپرس برای تعامل‌های سبک داخل بلوک‌ها ساخته شده؛ یک نمونهٔ واقعی از سرور تا کلاینت.

حمید اعراب توسعه‌دهنده ارشد بک‌اند وردپرس و ووکامرس
انتشار
زمان مطالعه
۱ دقیقه مطالعه

حمید اعراب ۱۹ فروردین ۱۴۰۵ ۱ دقیقه مطالعه

تصویر پیکسلی یک دکمه و پاسخ تعاملی آن
فهرست مطالب (3)

Interactivity API از وردپرس ۶٫۵ در هسته است و برای تعامل‌هایی مثل باز و بسته کردن، فیلتر و شمارنده طراحی شده؛ رندر اولیه در سرور انجام می‌شود و جاوااسکریپت فقط حالت را مدیریت می‌کند.

نشانه‌گذاری در render.php

<div data-wp-interactive="hamidarab/faq" <?php echo wp_interactivity_data_wp_context( [ 'open' => false ] ); ?>>
  <button data-wp-on--click="actions.toggle" data-wp-bind--aria-expanded="context.open">
    <?php echo esc_html( $attributes['question'] ); ?>
  </button>
  <div data-wp-bind--hidden="!context.open"><?php echo wp_kses_post( $content ); ?></div>
</div>

منطق در view.js

import { store, getContext } from '@wordpress/interactivity';

store( 'hamidarab/faq', {
  actions: {
    toggle() {
      const context = getContext();
      context.open = ! context.open;
    },
  },
} );

چون محتوا در سرور رندر می‌شود، بدون جاوااسکریپت هم قابل خواندن است و برای سئو مشکلی ندارد.

کجا مناسب نیست

برای اپلیکیشن‌های پیچیده با مسیریابی و حالت سراسری بزرگ، یک فریم‌ورک کامل منطقی‌تر است. Interactivity API برای تعامل‌های محدود داخل صفحه‌های وردپرسی بهترین انتخاب است.

$ ./request_review

همین مشکل را در فروشگاه خودتان دارید؟

توسعه‌دهنده ارشد WordPress و WooCommerce برای معماری، اتصال سیستم‌ها و حل مسائل پیچیده production.

درخواست بررسی فنی

دیدگاه‌ها

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *