Embedding p5.js ke Dalam Block pada Post WordPress 5.0

Tertarik posting generative art berbasis p5.js untuk hari-hari ke depan, saya berusaha mencari cara untuk memamerkan (masa iya, ya? harus pakai lema asing showcasing untuk menghindari penggunaan kata peyorasi ‘memamerkan’ 😏).

Setelah mencoba berbagai macam tools, salah satu editor “resmi” p5.js daring favorit saya adalah p5js.org web editor. Namun, untuk konsumsi publik yang termuat di dalam blog post, saya perlu menggunakan fitur share embed yang tersedia pada web editor tersebut.

Untuk mencoba cara paling tepat, maka saya ambil salah satu contoh program p5.js bernama Flocking yang merupakan salah satu contoh program dari “Nature of Code”-nya Daniel Shiffman. Test yang saya lakukan menggunakan kode embed html di bawah ini dan hasilnya dapat kita lihat bersama.

<iframe style="width: 640px; height: 360px; overflow: hidden;"  scrolling="no" frameborder="0" src="https://editor.p5js.org/embed/B1j5yC2vQ">
</iframe>
  • Dimasukkan ke dalam block “Preformatted” :
Wordpress Block Preformatted Button
  • Dimasukkan ke dalam block “Custom HTML” :

Kedua cara di atas adalah cara yang telah saya coba untuk melekatkan output laman internet p5.js pranala luar ke dalam halaman wordpress. Saya juga telah mencoba untuk menyunting block Paragraph dalam mode HTML langsung, namun hasil yang terjadi sama dengan Custom HTML di atas.

Tahu cara lain yang lebih joss atau lebih efisien? jangan segan segera tambahkan informasinya di kolom komentar di bawah ini.

Leave a Reply

Your email address will not be published. Required fields are marked *