Mangcoding

icon chat
Yayan Kurnia Akbar - Wednesday, 9 October 2024 - 1 months ago

Langkah Mempersiapkan Pengembangan Blok WordPress

single image

Blok WordPress merupakan editor bawaan situs WordPress untuk menyimpan dan merepresentasikan konten. Selanjutnya, pada artikel ini kita akan bahas langkah mempersiapkan pengembangan blok wordpress yang harus diketahui.

Mari kita lihat sekilas apa itu blok, bagaimana cara kerjanya, dan hal apa yang dibutuhkan untuk mulai mengembangkannya.

Link Mangcoding

Blok WordPress

Blok digunakan dalam Editor Postingan dan Halaman saat membuat dan mengedit konten, serta dalam Editor Situs saat membuat dan mengedit templat atau pola tema.

Secara mendasar, blok terdiri dari kombinasi komentar HTML dengan format spesifik yang mendefinisikan blok, dan jika diperlukan, entitas HTML untuk merepresentasikan konten blok.

Link Mangcoding

Struktur sebuah blok

Mari kita lihat contoh blok dalam sebuah postingan. Pada instalasi WordPress lokal, silahkan kamu membuat postingan baru, kemudian beri judul, dan isi konten dengan beberapa teks di Editor Postingan.

Kemudian, klik ikon opsi di kanan atas postingan, dan pilih tampilan kode.

This is some content in a paragraph block.

Seperti yang dapat kamu lihat, tag paragraf HTML dibungkus dalam komentar HTML dengan nama wp:paragraph. Komentar wp:paragraph adalah cara WordPress mengetahui bahwa ini adalah blok paragraf.

Konten blok yang sebenarnya adalah semua yang ada di dalam tag wp:paragraph, dalam hal ini, tag paragraf HTML, dan konten di dalam tag tersebut.

Sekarang klik “Exit code editor”. Kemudian, pada sidebar, terapkan warna latar belakang ke blok.

Sekarang beralih kembali ke tampilan kode, dan perhatikan bagaimana tag wp:paragraph tersebut berisi beberapa data tambahan, perhatikan kode dibawah !

This is some content in a paragraph block.

Properti tersebut background Color ditambahkan ke pembungkus blok dalam format khusus yang disebut JSON. Saat postingan ini ditampilkan di front end, WordPress mengubahnya menjadi kelas CSS untuk diterapkan ke blok.

Link Mangcoding

Persiapan Yang Dilakukan

Selain instalasi WordPress pada server lokal dan editor kode, ada beberapa alat tambahan yang diperlukan untuk mengembangkan blok wordpress ini.

Kamu memerlukan terminal untuk menjalankan perintah. Selanjutnya, kamu memerlukan instalasi Node.js dan npm.

Link Mangcoding

Semua tentang terminal

Hal pertama yang diperlukan adalah akses ke terminal untuk menjalankan perintah.

Terminal adalah alat yang memungkinkan kamu berinteraksi dengan komputer menggunakan perintah teks. Terminal juga dikenal sebagai baris perintah, atau prompt perintah. Sistem operasi akan menentukan seperti apa tampilan terminal, dan perintah apa yang tersedia.

Pada macOS, terminal default disebut Terminal, dan terletak di folder Applications -> Utilities . Selain itu, kamu juga dapat meluncurkannya dengan mengeklik aplikasi Launchpad dan mencari Terminal.

Pada sebagian besar distribusi Linux, terminal default juga disebut Terminal, dan biasanya terletak di menu Aplikasi.

Selanjutnya, pada Windows, terminal default disebut Command Prompt, dan terletak di menu Start.

Namun, kami menyarankan penggunaan aplikasi terminal untuk Windows yang disebut PowerShell, karena PowerShell dapat dikonfigurasikan agar berfungsi serupa dengan terminal di MacOS dan Linux.

Beberapa versi Windows dilengkapi dengan versi Powershell yang terinstal, tetapi sebaiknya instal versi tersebut dari situs Microsoft. Untuk mengunduh PowerShell, klik https://learn.microsoft.com/en-gb/powershell/tombol Unduh Powershell , lalu instal file yang sudah kamu unduh.

Setelah terinstal, kamu dapat meluncurkannya dengan mencari PowerShell di menu Start.

Setelah kamu memiliki terminal yang berfungsi, kamu dapat menginstal perangkat lunak yang diperlukan untuk mulai mengembangkan blok.

Link Mangcoding

Node.js dan npm

Pengembangan blok bergantung pada penggunaan kerangka kerja JavaScript yang disebut React. Selanjutnya, untuk menggunakan React, kamu perlu menginstal Node.js dan npm di komputer lokal kamu.

Memasang Node.js.

Karena npm dibundel dengan Node.js, kamu hanya perlu menginstal Node.js untuk memulai dan menjalankannya.

Meskipun ada sejumlah cara untuk menginstal Node.js dengan npm, kami sarankan untuk menggunakan alat yang disebut nvm, yang merupakan singkatan dari Node Version Manager. Kamu dapat menemukan detail tentang nvm di github.com/nvm-sh.

Hal ini akan memungkinkan kamu untuk menginstal dan menggunakan berbagai versi Node.js, tergantung pada persyaratan perangkat lunak yang digunakan.

Menginstal NVM di MacOS dan Linux

Jika kamu menggunakan MacOS atau Linux, kamu dapat membuka aplikasi terminal default yang digunakan, dan menginstal nvm dengan menjalankan skrip instalasi nvm, yang dapat kamu salin dari dokumentasi nvm.

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

Setelah terinstal, kamu dapat menggunakan nvm install perintah untuk menginstal versi Node.js dan npm yang kamu perlukan.

Menginstal NVM di Windows

Jika kamu menggunakan komputer Windows, kamu dapat menginstal nvm melalui manajer paket Chocolatey untuk Windows, khususnya Chocolatey CLI.

Langkah pertama, buka Powershell dengan izin administrator dengan mengklik kanan item menu Powershell dan memilih Jalankan sebagai administrator.

Kemudian, telusuri dokumentasi pengaturan Chocolatey CLI, dan gulir ke bawah ke Petunjuk Instal dengan PowerShell .

Salin instruksi dan klik kanan di jendela Powershell untuk menempelkannya.

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))

Tekan tombol Enter untuk menjalankan perintah. Selanjutnya, setelah Chocolatey CLI, juga dikenal sebagai choco, terinstal, gunakan perintah berikut untuk menginstal nvm.

choco install -y nvm

Setelah nvm terinstal, gunakan nvm install perintah untuk menginstal versi Node.js dan npm yang diperlukan.

Penggunaan NVM

Pada saat artikel ini dibuat, versi LTS (dukungan jangka panjang) Node.js yang stabil saat ini adalah versi 20, tetapi periksa situs web Node.js untuk melihat apakah ada versi yang lebih baru saat kamu menginstal Node.js.

Untuk menginstal Node.js dan npm, gunakan nvm install perintah dengan nomor versi yang ingin kamu instal.

nvm install 20

Kamu juga dapat menginstal versi LTS terbaru dengan menjalankan perintah berikut.

nvm install --lts

Kemudian kamu dapat menjalankannya nvm list untuk melihat versi Node.js mana yang terinstal.

nvm list

Karena nvm memungkinkan kamu menjalankan beberapa versi Node.js, kamu perlu memberi tahu nvm versi mana yang ingin digunakan. Kamu dapat melakukannya dengan menjalankan nvm use perintah, diikuti dengan nomor versinya.

nvm use 20

Hal ini akan menetapkan versi Node.js untuk terminal saat ini ke versi 20. Selain itu, dimungkinkan untuk menjalankan npm use perintah dengan opsi LTS.

nvm use --lts

Terakhir, jika kamu memiliki lebih dari satu versi Node.js dan npm yang terinstal, kamu dapat mengatur versi default yang akan digunakan dengan menjalankan nvm atau default perintah.

nvm alias default 20

Dan kemudian periksa versi Node.js dan npm mana yang diaktifkan dengan menjalankan perintah berikut

node -v
npm -v

Ini sangat berguna jika kamu mengerjakan beberapa proyek yang memerlukan versi Node.js dan npm yang berbeda.

Sekarang setelah kamu memiliki semua alat yang diperlukan, Kamu dapat memulai perjalanan pengembangan blok WordPress.

Link Mangcoding

Sumber daya tambahan

Dokumentasi pengembang WordPress memiliki seluruh bagian yang didedikasikan untuk Editor Blok, yang berisi banyak informasi tentang blok, pengembangan blok, serta berbagai paket yang tersedia untuk pengembang blok.

Ada baiknya juga membaca bagian Dasar-Dasar Pengembangan Blok untuk mendapatkan pemahaman lebih baik tentang prosesnya.

Itulah artikel Langkah Mempersiapkan Pengembangan Blok WordPress yang dapat Mangcoding sharing. Mudah-mudahan artikel ini bisa bermanfaat dan dapat memberikan pengetahuan baru untuk Anda. Jika ada kritik serta saran yang dapat membangun, silahkan komentar atau kirim melalui Email dan Media sosial Mangcoding.

Sumber : Langkah Mempersiapkan Pengembangan Blok WordPress

Link Copied to Clipboard