Tạo giao diện WordPress siêu nhẹ không dùng jQuery, chỉ với Alpine.js

Vì sao nên loại bỏ jQuery?

• Giảm 80-90KB (minified + gzipped) khỏi mỗi lần tải trang.
• Loại bỏ dependency rối rắm với các plugin cũ.
• Dễ dàng áp dụng lazy load, preload, deferred script.
• Tiếp cận gần hơn với các chuẩn JS hiện đại (ES6+, declarative).

Cài Alpine.js trong theme

Bạn có thể nhúng Alpine trực tiếp trong functions.php như sau:

function theme_enqueue_scripts() {
    wp_enqueue_script('alpinejs', 'https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js', [], null, true);
    // wp_deregister_script('jquery'); // Có thể bỏ nếu jQuery không cần
}
add_action('wp_enqueue_scripts', 'theme_enqueue_scripts');

Lưu ý: Alpine nên luôn để ở footer (true) để tối ưu tải trang.

Ví dụ thay thế jQuery bằng Alpine.js

Menu toggle:

<div x-data="{ open: false }">
  <button @click="open = !open">Menu</button>
  <ul x-show="open" x-transition>
    <li><a href="#">Trang chủ</a></li>
    <li><a href="#">Giới thiệu</a></li>
    <li><a href="#">Liên hệ</a></li>
  </ul>
</div>

Accordion đơn giản:

<div x-data="{ open: null }">
  <template x-for="(item, index) in ['Một', 'Hai', 'Ba']" :key="index">
    <div>
      <button @click="open = open === index ? null : index">
        Xem mục <span x-text="item"></span>
      </button>
      <div x-show="open === index" x-transition>
        <p>Nội dung của <span x-text="item"></span></p>
      </div>
    </div>
  </template>
</div>

Gợi ý cấu trúc theme đơn giản

theme/
├── header.php       → Không load jQuery
├── footer.php       → Load Alpine cuối trang
├── template-parts/
│   └── component.php → Tách hiệu ứng Alpine
├── assets/
│   ├── style.css
│   └── js/
│       └── custom.js (chỉ dùng cho logic phức tạp)

Những điều cần tránh

• Không mix Alpine và jQuery cùng lúc trên cùng component.
• Không sử dụng Alpine cho tác vụ phức tạp như drag/drop – hãy dùng library chuyên biệt.
• Tránh gọi Alpine nhiều lần nếu bạn dùng SPA hoặc AJAX pushState.

Tổng kết

Alpine.js là lựa chọn lý tưởng nếu bạn muốn một theme WordPress gọn nhẹ, hiện đại và dễ maintain mà vẫn giữ lại sự tương tác linh hoạt như jQuery. Kết hợp cùng các kỹ thuật preload, async/defer script và layout không phụ thuộc JS, bạn sẽ có một website WordPress bay như tên lửa.