فهرست مطالب (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.
درخواست بررسی فنی
## دیدگاهها