Tag Archive Development

Byphunsanit

WordPress: Gutenberg Block Development

การสร้างเวิร์ดเพรสกูเทนเบิร์กบล๊อกไว้สร้างเนื้อหาง่าย ๆ

  1. เตรียมตัวโดยเซ็ตสภาพแวดล้อมให้ครบก่อน ( editor, NodeJs, npm, npx, servers )
  2. ติดตั้ง package เพิ่ม
    npm -g install @wordpress/env
  3. เปิด command ที่ WordPress plugins เช่น
    cd /var/www/WordPress/wp-content/plugins
  4. สร้างปลั๊กอินโดยคำสั่ง
    npx @wordpress/create-block@latest { plugin name }
    เช่น
    npx @wordpress/create-block@latest rm-link
    หรือ
    npx @wordpress/create-block@latest rm-link --variant="dynamic"
  5. เปลี่ยน command ไปที่ปลั๊กอินที่สร้าง เช่น
    cd rm-link
  6. แก้ package.json ใน folder เช่น ชื่อปล๊กอิน
  7. ใช้คำสั่ง
    npm run start
  8. เข้าไปที่ http://localhost/WordPress/wp-admin/plugins.php แล้ว Activate plugin ของเรา
  9. สร้าง post ใหม่ตัวปลั๊กอินจะอยู่ในกลุ่ม Blocks > Widgets
  10. แก้ตัว plugin ให้สมบูรณ์

อ่านเพิ่มเติม