Home Arrow Icon Knowledge base Arrow Icon Global Arrow Icon Membuat plugin blok untuk WordPress dengan Node.js


Membuat plugin blok untuk WordPress dengan Node.js


Untuk membuat plugin blok untuk WordPress menggunakan Node.js, ikuti langkah-langkah berikut:

1. Instal Node.js dan npm:
- Pastikan Anda telah menginstal Node.js di mesin Anda. Jika belum, unduh dan instal dari situs resmi Node.js[1][2].

2. Siapkan Plugin Blok Pemula:
- Navigasikan ke direktori `wp-content/plugins` dari instalasi pengembangan lokal Anda. Kemudian, jalankan perintah `npx @wordpress/create-block` untuk merancang plugin blok. Perintah ini menghasilkan semua kode yang diperlukan untuk memulai proyek dan mengintegrasikan pengaturan build JavaScript modern tanpa memerlukan konfigurasi[3][4].

3. Konfigurasi Plugin Blok:
- Perintah `buat-blok` meminta Anda memasukkan masukan langkah demi langkah. Anda juga dapat menggunakan mode mulai cepat untuk meneruskan opsi tertentu secara langsung di baris perintah, sehingga menghilangkan kebutuhan akan perintah interaktif[4].

4. Membangun dan Menjalankan Plugin Blok:
- Jalankan `npm start` untuk memulai server pengembangan dan secara otomatis membangun kembali blok setiap kali ada perubahan kode yang terdeteksi. Saat Anda siap menerapkan blok Anda, gunakan `npm run build` untuk mengoptimalkan kode Anda dan membuatnya siap produksi[4].

5. Integrasi dengan WordPress:
- Aktifkan plugin yang dihasilkan di WordPress. Ini akan membuat blok tersedia di Editor[4].

6. Sesuaikan dan Perluas Blok:
- Ubah kode boilerplate untuk menyesuaikan dan memperluas blok sesuai kebutuhan. Hal ini melibatkan penggunaan JavaScript modern (ESNext dan JSX) dan memanfaatkan paket `wp-scripts` untuk tugas build dan linting[4].

Dengan mengikuti langkah-langkah ini, Anda dapat membuat dan mengelola plugin blok khusus untuk WordPress menggunakan Node.js dan paket `@wordpress/create-block`.

Kutipan:
[1] https://wpdevelopment.courses/articles/wordpress-create-block/
[2] https://kinsta.com/courses/gutenberg-block-development/setting-up-a-block-plugin/
[3] https://www.npmjs.com/package/%40wordpress/create-block
[4] https://developer.wordpress.org/block-editor/getting-started/devenv/get-started-with-create-block/
[5] https://www.youtube.com/watch?v=-aa4F4Dn9GY