Perbedaan Shortcode vs Gutenberg + Tips Menggabungkannya

Shortcode vs Gutenberg sering dianggap dua kubu berbeda dalam ekosistem WordPress. Nyatanya, keduanya punya fungsi unik yang saling melengkapi. Di artikel ini, kamu akan memahami perbedaan keduanya, kapan harus memakai masing-masing, serta bagaimana menggabungkannya agar workflow pembuatan konten jadi jauh lebih efisien.

Perbedaan Shortcode vs Gutenberg

Kalau kamu sudah cukup lama membangun website WordPress, mungkin kamu pernah merasakan fase di mana hampir semua elemen menggunakan shortcode. Tinggal tulis kode pendek di dalam tanda kurung siku, dan selesai. 

Namun setelah Gutenberg WordPress hadir, pengalaman editing jadi lebih visual, intuitif, dan tidak perlu lagi mengingat kode.

Baca Juga: Kuasai Shortcode WordPress: Belajar dari Dasar hingga Kustom

Lihat tabel perbedaaan shortcode vs Gutenberg berikut ini:

Mari kita pecah satu per satu perbedaannya agar lebih jelas.

Interface dan Cara Menggunakan

Shortcodes bekerja dalam bentuk teks. Kamu menuliskan sintaks di dalam editor, misalnya: [contact_form]. Tidak ada tampilan langsung di layar sampai kamu mem-preview halaman. Itu sebabnya, pengguna harus hafal kode dan parameternya.

Sedangkan Gutenberg bekerja sebaliknya. Dengan sistem drag-and-drop, kamu bisa memasukkan elemen visual langsung dari editor. Kamu melihat bentuk finalnya secara real-time, what you see is what you get.

Baca Juga: Kamu Tim Gutenberg atau Elementor? Yuk Cari Tahu Jawabannya!

Pengalaman Editing

Penggunaan shortcode cenderung lebih teknis. Bagi pemula, bentuknya tampak seperti kode yang sulit dipahami, padahal hasil akhirnya bisa berupa tombol, slider, hingga form. 

Sementara Gutenberg block tampil jelas lengkap dengan struktur layout, tombol pengaturan, dan tampilan yang sama dengan versi live.

Kustomisasi

Shortcode menggunakan atribut teks seperti . Ada batasan tertentu karena semua pengaturan dilakukan manual. Jika kamu ingin variasi tampilan atau layout khusus, kemungkinan perlu CSS tambahan atau plugin tertentu.

Gutenberg block jauh lebih fleksibel. Kamu cukup klik blok → buka sidebar inspector → atur warna, jarak, tipografi, ukuran, semuanya visual tanpa kode. Cocok untuk kamu yang ingin membangun tampilan halaman lebih cepat.

Teknologi di Baliknya

Shortcode berjalan melalui Shortcode API, diproses di server lalu dikonversi menjadi HTML. Sementara Gutenberg WordPress dibangun dengan JavaScript modern dan React, sehingga pengalaman editing terasa lebih cepat dan responsif.

Portabilitas & Keberlanjutan

Jika plugin penyedia shortcode mati atau hilang, yang muncul hanya kode teks mentah. Tidak terlihat estetik, bahkan bisa merusak tampilan halaman.

Berbeda dengan Gutenberg. Ketika blok dari plugin hilang, konten HTML yang sudah pernah kamu simpan biasanya tetap tampil. Kamu hanya tidak bisa mengeditnya dengan UI blok asli.

Kesimpulan singkatnya:
Gutenberg memang bentuk evolusi shortcode, dia lebih modern, intuitif, dan visual. 

Bisakah Shortcode dan Gutenberg Digabung?

Jawabannya: bisa, dan justru sangat ideal.

WordPress sejatinya mendesain Gutenberg agar kompatibel dengan shortcode, sehingga pengguna lama tidak perlu memigrasi ulang konten yang sudah ada. Kamu bisa tetap menggunakan shortcode di dalam blok khusus Shortcode sambil memanfaatkan fleksibilitas visual dari Gutenberg.

Menggabungkan shortcode dan Gutenberg menghadirkan beberapa keuntungan nyata:

• Transisi website lebih mulus
  Tidak perlu langsung mengubah semua halaman lama ke blok Gutenberg. Shortcode lama tetap berjalan, kamu tinggal menambahkannya melalui Shortcode Block.
• Mempertahankan plugin lama yang masih powerful
  Beberapa plugin lawas mungkin belum punya blok, tapi fiturnya sangat kamu butuhkan. Dengan shortcode, kamu tetap bisa menggunakannya tanpa merusak layout Gutenberg.
• Developer bisa fleksibel, editor tetap nyaman
  Developer bisa membuat fitur kompleks melalui kode PHP dan membungkusnya dalam shortcode. Sementara editor konten hanya tinggal copy–paste shortcode tadi ke Gutenberg.
• Konten tetap portable
  Shortcode disimpan sebagai teks biasa dalam database, sehingga lebih mudah berpindah hosting, backup, atau ekspor ke sistem lain.

Dengan kata lain, shortcode dan Gutenberg bukanlah pesaing, tetapi duet yang saling melengkapi. Inilah kamu perlu belajar cara memaksimalkan dua alat ini agar workflow WordPres-mu lebih efektif. 

Kapan Harus Memakai Shortcode dan Gutenberg?

Keduanya kuat, namun tidak selalu cocok dalam semua situasi. Mari lihat kapan shortcode atau Gutenberg bekerja paling optimal.

Gunakan Gutenberg Blocks Saat:

Kamu ingin membuat layout dari nol dan butuh tampilan langsung tanpa proses preview. Blok sangat cocok untuk membangun struktur konten, menata kolom, mengatur warna, atau memasukkan elemen teks-gambar dengan cepat. 

Selain itu, banyak plugin modern sudah menyediakan blok siap pakai lengkap dengan pengaturan visual di sidebar. 

Jadi jika plugin yang kamu pakai sudah mendukung Gutenberg WordPress, menggunakan blok adalah pilihan paling efisien.

Gunakan Shortcode Saat:

Plugin yang kamu gunakan masih berbasis shortcode dan belum memiliki versi blok. Selain itu, shortcode unggul untuk elemen kecil yang sifatnya repetitif dan dinamis, misalnya memasukkan tanggal otomatis atau menampilkan daftar event tertentu. 

Karena tersimpan dalam bentuk teks, shortcode juga lebih mudah dibawa ketika kamu migrasi website WordPress ke server lain.

Gunakan Keduanya Bersamaan Saat:

Kamu sedang dalam masa transisi, beberapa konten dibuat dengan blok, sementara bagian lain masih mengandalkan shortcode. 

Kamu bisa memanfaatkan Gutenberg untuk elemen layout dan shortcode khusus untuk fungsi plugin seperti form, tabel dinamis, atau embed script. Pendekatan hybrid ini memberi kamu fleksibilitas terbaik.

3 Plugin Shortcode Gratis untuk Website Gutenberg

Berikut tiga plugin yang bisa kamu coba jika ingin memasukkan lebih banyak shortcode di Gutenberg WordPress:

#1. Meks Flexible Shortcodes by Meks

Plugin ini cocok untuk kamu yang ingin menambahkan komponen visual seperti tombol, kolom, alert box, dan elemen menarik lainnya. Tersedia banyak opsi desain dan bisa dipadukan dengan tema apa pun. Kamu juga bisa override styling lewat CSS agar tampilan sepenuhnya sesuai identitas brand.

#2. Shortcodes Ultimate by Vladimir Anokhin

Kalau kamu butuh banyak opsi shortcode dalam satu wadah, plugin ini hampir selalu jadi rekomendasi utama. Ia menyediakan lebih dari 50 shortcode, mulai dari slider, tabel, carousel, accordion, hingga daftar konten.

Fitur dan pilihannya lengkap, user interface-nya mudah, serta kompatibel dengan Gutenberg,  kamu hanya tinggal memilih shortcode yang diinginkan, atur parameternya, lalu sisipkan ke dalam konten.

#3. Shortcoder by Aakash Chakravarthy

Plugin ini memungkinkan kamu membuat shortcode sendiri dengan HTML, CSS, atau JavaScript. Cocok untuk embed video, ads, banner, atau script kustom lain yang ingin sering digunakan. Kamu bahkan bisa membatasi shortcode tampil hanya di desktop atau mobile.

Langkah-langkah Menggunakan Shortcode di Gutenberg 

Berikut langkah-langkah umum menggunakan shortcode di Gutenberg website, agar kamu bisa menyisipkan fungsi plugin dengan mudah dan tetap terstruktur.

1. Masuk ke Dashboard WordPress
   Kamu bisa mulai dengan login ke akun admin website WordPress milikmu.
2. Buka halaman/post baru atau edit konten yang sudah ada
   Fleksibel dipakai untuk konten baru atau halaman yang ingin kamu update.
3. Klik tombol + untuk menambah blok
   Tombol ini biasanya ada di bagian kiri atas atau di area paragraf baru.
4. Ketik “Shortcode” pada kolom pencarian blok
   Lebih cepat dibanding scroll blok satu per satu.
5. Pilih blok Shortcode
   Blok khusus ini disediakan agar shortcode tetap kompatibel di Gutenberg.
6. Tempel shortcode yang ingin kamu gunakan, contoh:
   
   [contact_form id="123"]

7. Preview → Publish → selesai
   Kamu bisa cek tampilan akhirnya dulu sebelum dipublikasikan ke pengunjung.
   

Begitu dipublish, shortcode otomatis berubah menjadi output visual yang seharusnya.

Kesimpulan

Shortcode vs Gutenberg bukan tentang siapa yang menang atau kalah. Gutenberg menawarkan pengalaman editing visual yang lebih modern dan cepat, sementara shortcode tetap relevan untuk fungsi spesifik yang belum tersedia dalam bentuk block. 

Menggabungkan shortcode dan Gutenberg justru memberi kamu fleksibilitas terbaik dalam membangun website WordPress.

Dan jika kamu ingin hasil editing maksimal, performa cepat, dan pengalaman WordPress yang lebih stabil, IDwebhost menyediakan hosting yang sudah dioptimalkan untuk WordPress. Cocok untuk kamu yang ingin website lebih ringan, aman, dan siap berkembang.

Siap membuat konten WordPress lebih rapi dan mudah dikelola?
Kamu tinggal menentukan mau mulai dengan Gutenberg, shortcode, atau dua-duanya.