Home Arrow Icon Knowledge base Arrow Icon Global Arrow Icon Node.js ile WordPress için blok eklentileri oluşturma


Node.js ile WordPress için blok eklentileri oluşturma


Node.js kullanarak WordPress için blok eklentileri oluşturmak için şu adımları izleyin:

1. Node.js ve npm'yi yükleyin:
- Makinenizde Node.js'nin kurulu olduğundan emin olun. Değilse, resmi Node.js web sitesinden[1] indirip yükleyin.

2. Bir Başlangıç ​​Blok Eklentisi Kurun:
- Yerel geliştirme kurulumunuzun "wp-content/plugins" dizinine gidin. Ardından, bir blok eklentisini iskelelemek için 'npx @wordpress/create-block' komutunu çalıştırın. Bu komut, bir projeyi başlatmak için gerekli tüm kodu oluşturur ve hiçbir yapılandırma gerektirmeden modern bir JavaScript derleme kurulumunu entegre eder[3] [4].

3. Blok Eklentisini Yapılandırın:
- 'Create-block' komutu sizden adım adım giriş yapmanızı ister. Belirli seçenekleri doğrudan komut satırından iletmek için hızlı başlatma modunu da kullanabilirsiniz, böylece etkileşimli istemlere olan ihtiyacı ortadan kaldırabilirsiniz[4].

4. Blok Eklentisini Oluşturun ve Çalıştırın:
- Bir geliştirme sunucusunu başlatmak ve herhangi bir kod değişikliği algılandığında bloğu otomatik olarak yeniden oluşturmak için 'npm start'ı çalıştırın. Bloğunuzu dağıtmaya hazır olduğunuzda, kodunuzu optimize etmek ve üretime hazır hale getirmek için "npm run build"i kullanın[4].

5. WordPress ile entegrasyon:
- Oluşturulan eklentiyi WordPress'te etkinleştirin. Bu, bloğun Editörde[4] kullanılabilir olmasını sağlayacaktır.

6. Bloğu Özelleştirin ve Genişletin:
- Bloğu gerektiği gibi özelleştirmek ve genişletmek için standart kodu değiştirin. Bu, modern JavaScript'in (ESNext ve JSX) kullanılmasını ve derleme ve linting görevleri için "wp-scripts" paketinden yararlanmayı içerir[4].

Bu adımları izleyerek Node.js ve `@wordpress/create-block` paketini kullanarak WordPress için özel blok eklentileri oluşturabilir ve yönetebilirsiniz.

Alıntılar:
[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