WordPress Shortcode untuk Publisher: Cara Membuat, Memakai, dan Mengelola Shortcode untuk Iklan, Konten Berulang, dan Tampilan Situs

WordPress Shortcode untuk Publisher: Cara Membuat, Memakai, dan Mengelola Shortcode untuk Iklan, Konten Berulang, dan Tampilan Situs

Shortcode adalah salah satu fitur tertua WordPress yang sampai hari ini masih dipakai jutaan situs, termasuk situs berita dan media. Dengan satu tag pendek di dalam kurung siku, seperti [gallery] atau [audio], WordPress bisa menampilkan galeri foto, pemutar audio, formulir, tombol, sampai kotak informasi — tanpa Anda mengetik satu baris HTML pun di dalam artikel. Bagi publisher, shortcode adalah alat kerja sehari-hari: ia membuat konten berulang konsisten di ratusan artikel, menempatkan elemen promosi dan iklan di titik yang sama, dan menghemat waktu redaksi karena satu perubahan kode langsung terasa di semua artikel yang memakai tag tersebut. Artikel ini menjelaskan apa itu shortcode, enam shortcode bawaan WordPress yang langsung bisa dipakai, cara memakainya di editor blok maupun editor klasik, cara membuat shortcode sendiri dengan fungsi add_shortcode, sampai kesalahan umum dan aturan keamanannya — semuanya dengan contoh kode yang bisa langsung dicoba di situs WordPress Anda.

Daftar Isi
  1. Poin Kunci
  2. Daftar Isi
  3. Apa Itu Shortcode WordPress dan Mengapa Publisher Masih Membutuhkannya
  4. Cara kerja shortcode dalam satu kalimat
  5. Shortcode bukan pengganti blok, melainkan pelengkapnya
  6. 6 Shortcode Bawaan WordPress yang Langsung Bisa Dipakai
  7. [gallery]: galeri tanpa plugin
  8. [audio] dan [video]: pemutar media bawaan
  9. [playlist]: kumpulan audio atau video dalam satu pemutar
  10. [caption]] dan [embed]: detail kecil yang sering terlewat
  11. Cara Memakai Shortcode di Editor Blok WordPress
  12. Memakai blok Shortcode khusus
  13. Memakai shortcode di editor klasik
  14. Shortcode di widget dan area lain
  15. Menampilkan shortcode sebagai teks: trik kurung siku ganda
  16. Cara Membuat Shortcode Sendiri: Langkah demi Langkah
  17. Di mana menaruh kode shortcode
  18. Shortcode paling sederhana
  19. Aturan emas: return, bukan echo
  20. Shortcode dengan Atribut: Satu Shortcode untuk Banyak Keperluan
  21. Aturan penulisan atribut yang perlu diingat
  22. Shortcode Enclosing: Membungkus Konten di Dalam Tag
  23. Menampilkan Shortcode di Template Tema dengan do_shortcode()
  24. 5 Contoh Shortcode Praktis untuk Publisher
  25. 1. Kotak disclaimer dan informasi redaksi
  26. 2. Tombol ajakan (call to action) yang konsisten
  27. 3. Daftar artikel terkait yang dipilih redaksi
  28. 4. Penanda slot iklan di tengah artikel
  29. 5. Kotak pembaruan artikel (update box)
  30. Shortcode vs Blok Gutenberg: Kapan Memakai yang Mana
  31. Shortcode dari Plugin: Manfaat dan Risiko yang Perlu Dicatat
  32. Kesalahan Umum Shortcode dan Cara Memperbaikinya
  33. Keamanan Shortcode: Aturan yang Tidak Boleh Dilewatkan
  34. FAQ
  35. Apakah shortcode masih relevan di WordPress modern yang sudah memakai editor blok?
  36. Mengapa shortcode saya tampil sebagai teks [[nama]] di halaman depan?
  37. Di mana sebaiknya menaruh kode shortcode kustom: functions.php atau plugin?
  38. Apakah shortcode memperlambat situs?
  39. Bisakah shortcode dipakai di dalam judul artikel atau excerpt?
  40. Apa bedanya shortcode dengan blok yang bisa dipakai ulang (reusable block)?
  41. Kesimpulan
  42. Sumber Resmi yang Dirujuk

Poin Kunci

  • Shortcode adalah makro berupa tag dalam kurung siku yang diganti WordPress dengan konten dinamis saat halaman ditampilkan; fiturnya diperkenalkan lewat Shortcode API sejak WordPress 2.5.
  • WordPress menyertakan enam shortcode bawaan: caption, gallery, audio, video, playlist, dan embed — semuanya untuk media dan penyematan konten.
  • Di editor blok, shortcode dimasukkan lewat blok Shortcode khusus; di editor klasik, shortcode diketik langsung di dalam isi; di template tema, shortcode dijalankan dengan fungsi do_shortcode().
  • Shortcode kustom dibuat dengan add_shortcode(), memakai shortcode_atts() untuk atribut, dan fungsi handler-nya wajib mengembalikan (return) hasil, bukan mencetaknya (echo).
  • Shortcode dari plugin hanya tampil selama pluginnya aktif; menonaktifkan plugin membuat tag mentah terlihat oleh pengunjung, jadi catat semua shortcode plugin yang dipakai situs Anda.
  • Atribut shortcode adalah input yang tidak tepercaya: selalu bersihkan dengan esc_html(), esc_attr(), atau esc_url() sebelum ditampilkan.

Daftar Isi

  1. Apa Itu Shortcode WordPress dan Mengapa Publisher Masih Membutuhkannya
  2. 6 Shortcode Bawaan WordPress yang Langsung Bisa Dipakai
  3. Cara Memakai Shortcode di Editor Blok WordPress
  4. Cara Membuat Shortcode Sendiri: Langkah demi Langkah
  5. Shortcode dengan Atribut: Satu Shortcode untuk Banyak Keperluan
  6. Shortcode Enclosing: Membungkus Konten di Dalam Tag
  7. Menampilkan Shortcode di Template Tema dengan do_shortcode()
  8. 5 Contoh Shortcode Praktis untuk Publisher
  9. Shortcode vs Blok Gutenberg: Kapan Memakai yang Mana
  10. Shortcode dari Plugin: Manfaat dan Risiko yang Perlu Dicatat
  11. Kesalahan Umum Shortcode dan Cara Memperbaikinya
  12. Keamanan Shortcode: Aturan yang Tidak Boleh Dilewatkan
  13. FAQ
  14. Kesimpulan
  15. Sumber Resmi yang Dirujuk

Apa Itu Shortcode WordPress dan Mengapa Publisher Masih Membutuhkannya

Shortcode adalah potongan kode pendek yang ditulis di antara kurung siku dan disisipkan ke dalam isi postingan atau halaman. Saat pengunjung membuka halaman, WordPress menemukan tag itu, menjalankan fungsi yang terdaftar untuknya, lalu mengganti tag tersebut dengan hasil fungsi itu — sebuah galeri, pemutar video, formulir, atau potongan HTML apa pun. Dokumentasi resmi WordPress menyebut shortcode sebagai makro untuk interaksi dinamis dengan konten, dan menjelaskan alasan kelahirannya dengan jelas: sebagai langkah keamanan, WordPress melarang menjalankan kode PHP langsung di dalam isi konten, sehingga shortcode dihadirkan sebagai jalan yang aman untuk menampilkan konten dinamis tanpa membuka celah eksekusi PHP di editor.

Bagi publisher, manfaatnya terasa pada tiga hal. Pertama, konsistensi. Kotak disclaimer, ajakan berlangganan, atau tombol menuju artikel terkait bisa tampil persis sama di ratusan artikel karena semuanya berasal dari satu fungsi yang sama. Kedua, efisiensi pemeliharaan. Ketika teks disclaimer berubah, Anda cukup mengubah satu fungsi, bukan membuka dan menyunting ratusan artikel satu per satu. Ketiga, pemisahan tugas. Redaksi cukup mengingat tag pendek seperti [[kotak_info]], sementara pengembang yang menulis fungsi di baliknya. Inilah alasan shortcode tetap relevan meski editor blok sudah menyediakan banyak blok siap pakai: blok bagus untuk menyusun tampilan, shortcode bagus untuk konten dinamis yang dipakai berulang kali di banyak tempat.

Cara kerja shortcode dalam satu kalimat

Setiap shortcode terdiri dari dua sisi: tag yang ditulis redaksi di dalam artikel, dan fungsi handler yang didaftarkan pengembang lewat add_shortcode(). WordPress memproses shortcode setelah pemformatan paragraf otomatis (wpautop) dan pemformatan teks (wptexturize) diterapkan, dan fungsi do_shortcode() terdaftar sebagai filter bawaan pada the_content dengan prioritas 11. Artinya, shortcode diproses pada saat konten ditampilkan, bukan pada saat artikel disimpan — sehingga perubahan pada fungsi handler langsung terlihat di semua artikel lama tanpa perlu menyunting ulang artikelnya.

Shortcode bukan pengganti blok, melainkan pelengkapnya

Banyak blok Gutenberg modern sebenarnya memakai shortcode di balik layar, dan banyak plugin populer — formulir kontak, galeri lanjutan, sampai tabel harga — masih menyediakan shortcode sebagai cara utama untuk menempatkan fiturnya tepat di posisi yang diinginkan penulis. Jadi memahami shortcode bukan soal nostalgia: ini soal bisa memakai seluruh ekosistem plugin WordPress dengan benar, termasuk plugin yang sudah dipakai situs Anda hari ini.

6 Shortcode Bawaan WordPress yang Langsung Bisa Dipakai

WordPress menyertakan enam shortcode bawaan yang bekerja tanpa plugin tambahan. Semuanya berkaitan dengan media dan penyematan konten, dan semuanya sudah stabil selama bertahun-tahun — daftar ini tidak berubah sejak WordPress 3.6 kecuali perbaikan kecil pada atribut HTML di versi 6.8.

ShortcodeFungsiContoh pemakaian
[[caption]]Membungkus caption di sekitar konten, biasanya gambar atau video[[caption id="attachment_1" align="aligncenter" width="600"]]Gambar dan keterangan[[/caption]
[gallery]Menampilkan galeri dari gambar yang dilampirkan pada postingan[gallery ids="1,2,3" columns="3" size="medium"]
[audio]Menyematkan dan memutar berkas audio[audio src="https://contoh.com/audio.mp3"]
[video]Menyematkan dan memutar berkas video[video src="https://contoh.com/video.mp4" poster="https://contoh.com/poster.jpg"]
[playlist]Menampilkan kumpulan berkas audio atau video[playlist ids="1,2,3" type="audio"]

Shortcode [gallery] menampilkan galeri dari gambar-gambar yang dilampirkan pada postingan. Ditulis sendirian, ia memakai semua gambar lampiran postingan tersebut; dengan atribut ids, Anda memilih gambar tertentu berdasarkan ID medianya, dan dengan atribut columns serta size, Anda mengatur jumlah kolom dan ukuran gambar. Untuk situs berita yang sering mempublikasikan liputan foto, [gallery] adalah cara tercepat membuat galeri tanpa memasang plugin galeri apa pun — dan karena ini fitur inti WordPress, galerinya tidak akan rusak ketika Anda berganti tema atau menonaktifkan plugin.

[audio] dan [video]: pemutar media bawaan

Kedua shortcode ini menampilkan pemutar media HTML5 bawaan WordPress. Shortcode [audio] menerima atribut src yang menunjuk ke berkas audio, serta atribut pendukung seperti loop dan preload; bila ditulis tanpa atribut, ia memutar berkas audio pertama yang dilampirkan pada postingan. Shortcode [video] bekerja dengan cara yang sama, ditambah atribut poster untuk gambar yang tampil sebelum video diputar. Untuk publisher yang menerbitkan podcast atau klip video pendek sebagai pelengkap artikel, kedua shortcode ini cukup tanpa perlu menyematkan pemutar dari layanan pihak ketiga.

[playlist]: kumpulan audio atau video dalam satu pemutar

Shortcode [playlist] menampilkan daftar berkas audio atau video dalam satu pemutar yang sama, dan sudah tersedia sejak WordPress 3.9. Atribut type menerima nilai audio atau video, sedangkan atribut ids memilih berkas tertentu dari Media Library. Ini berguna untuk halaman arsip episode podcast atau kumpulan rekaman — satu shortcode, satu pemutar, dan pembaca bisa berpindah antar berkas tanpa membuka halaman baru.

[caption] dan : detail kecil yang sering terlewat

Shortcode [caption] adalah shortcode enclosing: ia membungkus konten dan membutuhkan tag penutup. Atribut align mengatur perataan dan width mengatur lebar caption. Sementara itu, membungkus item yang disematkan — misalnya URL video YouTube — dan memungkinkan Anda mengatur lebar serta tinggi hasil sematannya. Keduanya jarang dipakai secara manual di era editor blok, tetapi tetap penting dipahami karena blok Gambar dan blok Sematan di Gutenberg pada dasarnya menghasilkan struktur yang setara dengan kedua shortcode ini.

Cara Memakai Shortcode di Editor Blok WordPress

Cara memakai shortcode bergantung pada editor yang Anda gunakan. Di situs WordPress modern, editor bawaan adalah editor blok (Gutenberg), dan di sanalah kebanyakan publisher menulis artikel hari ini.

Memakai blok Shortcode khusus

Editor blok menyediakan blok Shortcode khusus untuk keperluan ini. Caranya: klik tombol tambah (+) untuk membuka penyisip blok, ketik “Shortcode” di kolom pencarian, pilih blok Shortcode, lalu tempelkan shortcode Anda beserta kurung sikunya ke dalam kolom yang tersedia. Blok ini menampilkan teks shortcode di dalam editor, dan hasilnya baru terlihat saat Anda memakai pratinjau atau membuka halaman di depan (front end). Karena itu, biasakan memeriksa hasil lewat tombol Pratinjau sebelum menerbitkan artikel yang memakai shortcode.

Satu hal yang perlu diperhatikan: shortcode sebaiknya tidak diketik langsung di dalam blok Paragraf. Editor blok mengharapkan shortcode berada di bloknya sendiri, bukan tercampur dengan teks paragraf, dan shortcode yang diketik di dalam blok Paragraf bisa tampil sebagai teks biasa di halaman depan. Jadi aturannya sederhana — satu shortcode, satu blok Shortcode.

Memakai shortcode di editor klasik

Jika situs Anda masih memakai editor klasik (Classic Editor), caranya lebih langsung: ketik shortcode di posisi yang diinginkan di dalam isi, persis seperti mengetik teks. Editor klasik tidak mengubah shortcode menjadi blok, sehingga tagnya tetap terlihat sebagai teks berkode kurung siku di dalam editor dan berubah menjadi hasil akhirnya di halaman depan. Cara ini masih dipakai banyak redaksi yang menulis artikel panjang dengan pola penempatan elemen yang berulang, misalnya kotak info yang selalu muncul setelah paragraf ketiga.

Shortcode di widget dan area lain

Shortcode juga bekerja di area widget dan di banyak tempat lain yang memproses konten WordPress, misalnya di widget Teks atau di deskripsi kategori, tergantung tema dan plugin yang dipakai. Prinsipnya sama: selama area tersebut menjalankan filter the_content atau memanggil do_shortcode(), tag akan diproses. Bila shortcode tampil sebagai teks mentah di suatu area, kemungkinan besar area itu tidak memproses shortcode — solusinya adalah memakai do_shortcode() di template, yang dibahas pada bagian ketujuh artikel ini.

Menampilkan shortcode sebagai teks: trik kurung siku ganda

Kadang Anda justru ingin menampilkan shortcode sebagai contoh — seperti yang dilakukan artikel ini di banyak tempat. WordPress menyediakan cara escape: tulis shortcode dengan kurung siku ganda, misalnya [gallery], maka yang tampil di halaman depan adalah [gallery] dengan kurung siku tunggal. Teknik ini berguna saat Anda menulis tutorial, dokumentasi internal redaksi, atau artikel panduan seperti artikel ini, dan ia menjadi bukti bahwa parser shortcode WordPress bekerja dalam satu kali proses (single pass).

Cara Membuat Shortcode Sendiri: Langkah demi Langkah

Membuat shortcode sendiri terdengar seperti pekerjaan pengembang, tetapi polanya sangat sederhana dan bisa diikuti siapa pun yang pernah melihat kode PHP. Anda hanya perlu tiga hal: sebuah fungsi yang menghasilkan keluaran, satu baris add_shortcode() untuk mendaftarkannya, dan tempat yang tepat untuk menaruh kode tersebut.

Di mana menaruh kode shortcode

Ada dua tempat yang benar. Pilihan pertama adalah berkas functions.php pada child theme — bukan pada tema utama, karena perubahan di tema utama akan hilang saat tema diperbarui. Pilihan kedua, yang lebih dianjurkan untuk situs publisher dengan beberapa pengelola, adalah plugin kustom kecil yang hanya berisi shortcode-shortcode situs Anda. Keuntungan plugin kustom: shortcode tetap hidup meski Anda berganti tema. Apa pun pilihannya, jangan menaruh kode PHP shortcode di dalam isi artikel — WordPress memang sengaja melarang PHP di dalam konten, dan itulah alasan shortcode diciptakan.

Shortcode paling sederhana

Contoh berikut membuat shortcode [[info_box]] yang menampilkan sebuah kotak informasi dengan teks yang sama di setiap artikel yang memakainya:

function bangeko_info_box_shortcode() {
    return '<div class="info-box">Artikel ini diperbarui secara berkala. Periksa tanggal di atas judul untuk versi terbaru.</div>';
}
add_shortcode( 'info_box', 'bangeko_info_box_shortcode' );

Fungsi add_shortcode() menerima dua parameter: nama tag (string yang ditulis redaksi di dalam artikel, tanpa kurung siku) dan nama fungsi callback yang akan dijalankan. Setelah kode ini aktif, menulis [[info_box]] di dalam artikel akan menampilkan kotak informasi tersebut. Perhatikan bahwa fungsi handler menerima tiga parameter yang bisa dipakai sesuai kebutuhan: $atts (array atribut), $content (konten yang dibungkus, bila shortcode dipakai dalam bentuk enclosing), dan $tag (nama tag, berguna bila satu fungsi dipakai untuk beberapa shortcode).

Aturan emas: return, bukan echo

Ini adalah kesalahan paling umum dalam pembuatan shortcode, dan dokumentasi resmi WordPress menekankannya secara eksplisit: fungsi handler shortcode harus mengembalikan (return) teks pengganti, bukan mencetaknya langsung (echo). Bila fungsi memakai echo, keluarannya akan muncul di posisi yang salah — biasanya di atas konten artikel, bukan di posisi shortcode ditulis. Alasannya sederhana: WordPress menyusun seluruh isi halaman sebagai string, lalu mengganti tag shortcode dengan nilai yang dikembalikan fungsi. Nilai yang di-echo tidak masuk ke string itu, melainkan langsung terkirim ke browser lebih awal. Jadi, bila shortcode Anda menghasilkan keluaran dari beberapa baris echo, bungkus dengan output buffering (ob_start() dan ob_get_clean()) lalu kembalikan hasilnya — atau, lebih sederhana, susun keluarannya dalam satu variabel string lalu kembalikan variabel itu.

Shortcode dengan Atribut: Satu Shortcode untuk Banyak Keperluan

Shortcode menjadi jauh lebih berguna ketika ia menerima atribut — pasangan kunci dan nilai yang mengubah perilakunya di setiap pemakaian. Contoh klasiknya adalah shortcode tombol: satu shortcode [[tombol]] bisa menampilkan tombol dengan teks dan tautan yang berbeda-beda di setiap artikel.

Atribut ditulis seperti ini di dalam artikel: [[tombol teks=”Unduh Panduan” tautan=”https://bangekomedia.com/panduan/”]]. WordPress mengubah atribut tersebut menjadi array asosiatif dan meneruskannya ke fungsi handler sebagai parameter $atts. Untuk menetapkan nilai default dan membuang atribut yang tidak dikenal, dokumentasi resmi menyediakan fungsi shortcode_atts(), yang menerima array default, array atribut mentah, dan nama tag. Berikut contoh lengkapnya:

function bangeko_tombol_shortcode( $atts ) {
    $atts = shortcode_atts(
        array(
            'teks'   => 'Baca Selengkapnya',
            'tautan' => '#',
        ),
        $atts,
        'tombol'
    );
    return '<a class="tombol-cta" href="' . esc_url( $atts['tautan'] ) . '">' . esc_html( $atts['teks'] ) . '</a>';
}
add_shortcode( 'tombol', 'bangeko_tombol_shortcode' );

Perhatikan dua hal dalam contoh ini. Pertama, shortcode_atts() memastikan hasil akhirnya selalu berisi semua kunci yang dikenali, lengkap dengan nilai default bila penulis tidak mengisinya — sehingga fungsi tidak pernah gagal karena atribut yang hilang. Kedua, nilai atribut dibersihkan sebelum ditampilkan: esc_url() untuk tautan dan esc_html() untuk teks. Ini bukan hiasan, melainkan kewajiban keamanan, dan akan dibahas tuntas pada bagian keamanan di akhir artikel.

Aturan penulisan atribut yang perlu diingat

Nama atribut diubah menjadi huruf kecil oleh WordPress, jadi pakai huruf kecil sejak awal dan hindari spasi. Nilai atribut yang mengandung spasi wajib diapit tanda kutip — [[tombol teks=Unduh Panduan]] tanpa kutip akan gagal dibaca dengan benar, sedangkan [[tombol teks=”Unduh Panduan”]] dibaca sebagai satu nilai. Terakhir, hindari memakai tanda hubung (hyphen) pada nama tag shortcode bila tidak perlu: dokumentasi resmi mencatat bahwa tanda hubung bisa menimbulkan perilaku yang tidak terduga, terutama bila ada shortcode lain dengan nama yang mirip. Pakai garis bawah (underscore) sebagai pemisah kata pada nama tag.

Shortcode Enclosing: Membungkus Konten di Dalam Tag

Selain shortcode yang berdiri sendiri (self-closing) seperti [gallery], WordPress mendukung shortcode enclosing — shortcode yang membungkus konten dan membutuhkan tag penutup. Bentuknya seperti ini: [[kotak]]Isi yang dibungkus[[/kotak]]. Konten di antara kedua tag diteruskan ke fungsi handler sebagai parameter $content.

Contoh berikut membuat shortcode [[kotak]] yang membungkus konten apa pun di dalam sebuah div ber-class kotak-penting:

function bangeko_kotak_shortcode( $atts, $content = null ) {
    return '<div class="kotak-penting">' . do_shortcode( $content ) . '</div>';
}
add_shortcode( 'kotak', 'bangeko_kotak_shortcode' );

Ada dua detail penting di sini. Pertama, $content perlu diproses dengan do_shortcode() di dalam handler bila Anda ingin shortcode lain yang ditulis di dalam konten tersebut ikut diproses — misalnya tombol [[tombol]] di dalam kotak. Tanpa pemanggilan itu, shortcode di dalam konten akan tampil sebagai teks mentah. Kedua, ada satu keterbatasan yang didokumentasikan resmi: parser shortcode bekerja dalam satu kali proses, sehingga shortcode enclosing dengan nama yang sama tidak bisa bersarang di dalam dirinya sendiri. Menulis [[kotak]]…[[kotak]]…[[/kotak]]…[[/kotak]] akan menghasilkan keluaran yang salah. Untuk kebutuhan bersarang, pakai dua nama tag yang berbeda.

Menampilkan Shortcode di Template Tema dengan do_shortcode()

Shortcode tidak hanya hidup di dalam isi artikel. Pengembang tema bisa menjalankan shortcode apa pun dari dalam berkas template PHP — misalnya menampilkan formulir langganan di bawah setiap artikel, atau menampilkan kotak promosi di sidebar — dengan fungsi do_shortcode(). Fungsi ini menerima string berisi shortcode, memprosesnya, dan mengembalikan hasil akhirnya sebagai string.

echo do_shortcode( '[[info_box]]' );

Baris di atas menampilkan hasil shortcode [[info_box]] di posisi template tempat baris itu ditulis. Pola yang sama berlaku untuk shortcode ber-atribut:

echo do_shortcode( '[[tombol teks="Berlangganan" tautan="https://bangekomedia.com/berlangganan/"]]' );

Fungsi do_shortcode() juga menjadi solusi ketika shortcode tampil sebagai teks mentah di area yang tidak memprosesnya secara otomatis, seperti widget kustom atau bagian template tertentu. Selama shortcode-nya terdaftar — entah oleh inti WordPress, tema, atau plugin yang aktif — do_shortcode() akan menjalankannya di mana pun Anda memanggilnya. Perlu dicatat bahwa do_shortcode() terdaftar sebagai filter bawaan pada the_content dengan prioritas 11, sehingga konten artikel biasa sebenarnya sudah diproses otomatis; pemanggilan manual hanya diperlukan di luar alur konten normal.

5 Contoh Shortcode Praktis untuk Publisher

Teori di atas menjadi nyata ketika diterapkan pada kebutuhan redaksi sehari-hari. Berikut lima contoh shortcode yang langsung berguna untuk situs berita dan media, dari yang paling sederhana sampai yang menyentuh monetisasi.

1. Kotak disclaimer dan informasi redaksi

Setiap artikel keuangan atau kesehatan membutuhkan disclaimer yang konsisten. Shortcode [[info_box]] pada contoh sebelumnya menyelesaikan ini: satu fungsi, satu teks, dipakai di ratusan artikel. Ketika tim legal meminta perubahan redaksi pada disclaimer, Anda mengubah satu fungsi dan seluruh artikel ikut berubah — tanpa menyentuh satu pun artikel lama. Untuk artikel yang memakai beberapa jenis disclaimer, buat beberapa shortcode dengan nama yang jelas, misalnya [[disclaimer_keuangan]] dan [[disclaimer_kesehatan]], agar redaksi tidak salah pilih.

2. Tombol ajakan (call to action) yang konsisten

Shortcode [[tombol]] dengan atribut teks dan tautan membuat semua tombol di situs tampil seragam karena semuanya memakai class CSS yang sama. Redaksi cukup menulis [[tombol teks=”Baca Panduan Lengkap” tautan=”https://bangekomedia.com/panduan/”]] di akhir artikel, dan tombol yang tampil akan mengikuti gaya situs. Bila suatu hari desain tombol diubah, perubahan dilakukan sekali di fungsi handler dan di stylesheet — bukan di ratusan artikel.

3. Daftar artikel terkait yang dipilih redaksi

Blok artikel terkait otomatis memang ada, tetapi kadang redaksi ingin memilih sendiri artikel mana yang ditautkan — misalnya artikel pilar yang sedang didorong peringkatnya. Shortcode dengan atribut ids bisa menampilkan daftar tautan ke artikel pilihan:

function bangeko_baca_juga_shortcode( $atts ) {
    $atts = shortcode_atts(
        array( 'ids' => '' ),
        $atts,
        'baca_juga'
    );
    $ids = array_filter( array_map( 'absint', explode( ',', $atts['ids'] ) ) );
    if ( empty( $ids ) ) {
        return '';
    }
    $output = '<div class="baca-juga"><strong>Baca juga:</strong><ul>';
    foreach ( $ids as $id ) {
        $output .= '<li><a href="' . esc_url( get_permalink( $id ) ) . '">' . esc_html( get_the_title( $id ) ) . '</a></li>';
    }
    $output .= '</ul></div>';
    return $output;
}
add_shortcode( 'baca_juga', 'bangeko_baca_juga_shortcode' );

Dipakai sebagai [[baca_juga ids=”837,819,542″]], shortcode ini menampilkan daftar tautan ke tiga artikel yang dipilih redaksi. Judul dan tautan diambil langsung dari database WordPress lewat get_the_title() dan get_permalink(), sehingga daftar tetap akurat meski judul artikel diubah belakangan. Teknik ini melengkapi strategi internal linking situs: tautan yang dipilih manusia cenderung lebih relevan bagi pembaca dibanding tautan yang dipilih semata-mata oleh algoritma.

4. Penanda slot iklan di tengah artikel

Publisher yang memakai plugin manajemen iklan seperti Ad Inserter sering menempatkan iklan secara otomatis berdasarkan posisi paragraf. Namun untuk penempatan yang membutuhkan keputusan redaksi — misalnya iklan in-article tepat setelah bagian yang paling banyak dibaca — shortcode penanda bisa menjadi solusinya. Shortcode [[slot_iklan]] dapat dibuat untuk menampilkan unit iklan tertentu, atau sekadar menampilkan penanda komentar HTML yang kemudian diganti oleh plugin iklan. Pendekatan ini memberi redaksi kendali penuh atas posisi iklan di artikel-artikel unggulan, tanpa mengubah aturan otomatis yang berlaku untuk artikel biasa. Catatan penting: penempatan iklan tetap harus mematuhi kebijakan AdSense — jangan menempatkan iklan dengan cara yang mendorong klik tidak sengaja atau menyamarkan iklan sebagai konten.

5. Kotak pembaruan artikel (update box)

Artikel yang diperbarui secara berkala — seperti panduan harga, syarat layanan, atau daftar regulasi — membutuhkan penanda yang jelas bagi pembaca. Shortcode [[update]] dengan atribut tanggal dan catatan bisa menampilkan kotak “Diperbarui pada …” secara konsisten. Karena tanggalnya ditulis sebagai atribut, redaksi bisa memperbarui tanggalnya dari dalam artikel tanpa menyentuh kode, sementara tampilannya tetap seragam di seluruh situs. Ini juga membantu dari sisi E-E-A-T: pembaca dan Google sama-sama bisa melihat bahwa konten dipelihara, bukan ditinggalkan begitu saja setelah terbit.

Shortcode vs Blok Gutenberg: Kapan Memakai yang Mana

Pertanyaan yang wajar setelah memahami shortcode adalah: bukankah semua ini sudah bisa dilakukan blok Gutenberg? Jawabannya: sebagian bisa, tetapi keduanya punya keunggulan di situasi yang berbeda. Tabel berikut merangkum perbandingannya.

AspekShortcodeBlok Gutenberg
Cara memakaiMengetik tag pendek di blok ShortcodeMemilih blok dari penyisip blok, mengatur lewat panel
Konten dinamis berulangSangat kuat — satu fungsi dipakai di ratusan tempatPerlu pola blok (patterns) atau blok yang bisa dipakai ulang
Penempatan di dalam teksBisa disisipkan di tengah kalimat atau paragrafBlok berdiri sendiri; tidak bisa berada di tengah paragraf
Pemakaian di template temaMudah lewat do_shortcode()Membutuhkan render block atau pola blok
KetergantunganBergantung pada tema/plugin yang mendaftarkannyaBagian dari editor inti WordPress
Kemudahan untuk non-teknisPerlu menghafal nama tag dan atributVisual, bisa diklik dan diatur lewat antarmuka

Aturan praktisnya: pakai blok untuk menyusun tampilan artikel — judul, paragraf, gambar, daftar, kutipan. Pakai shortcode untuk elemen dinamis yang dipakai berulang kali di banyak artikel dan halaman, terutama yang berasal dari plugin atau fungsi kustom. Keduanya bisa hidup berdampingan dalam satu artikel yang sama tanpa konflik.

Shortcode dari Plugin: Manfaat dan Risiko yang Perlu Dicatat

Sebagian besar shortcode yang dipakai publisher sehari-hari bukan berasal dari inti WordPress, melainkan dari plugin. Plugin formulir seperti Contact Form 7 dan WPForms menyediakan shortcode untuk menampilkan formulir; plugin galeri menyediakan shortcode galeri lanjutan; plugin seperti Shortcodes Ultimate menyediakan puluhan shortcode siap pakai untuk tab, akordeon, tombol, kolom, slider, dan daftar postingan; dan banyak plugin monetisasi serta keanggotaan menyediakan shortcode untuk menampilkan konten khusus anggota atau unit iklan.

Manfaatnya jelas: Anda mendapat fitur kompleks tanpa menulis kode. Risikonya juga jelas dan perlu dicatat dalam dokumentasi internal situs Anda. Pertama, shortcode plugin hanya tampil selama pluginnya aktif. Menonaktifkan atau menghapus plugin membuat WordPress tidak lagi mengenali tag tersebut, sehingga pengunjung melihat teks mentah seperti [[contact-form-7 id=”123″]] di tengah artikel. Kedua, setiap plugin memakai nama tag dan atributnya sendiri, jadi selalu salin sintaks dari dokumentasi plugin tersebut — jangan menebak. Ketiga, sebelum menghapus plugin apa pun, cari dulu semua artikel yang memakai shortcode-nya; pencarian di database atau plugin pencarian konten bisa membantu. Kegagalan melakukan ini adalah penyebab umum artikel lama tiba-tiba menampilkan kode mentah setelah bersih-bersih plugin.

Kesalahan Umum Shortcode dan Cara Memperbaikinya

Hampir semua masalah shortcode berasal dari segelintir penyebab yang sama. Tabel berikut merangkum gejala yang paling sering ditemui redaksi dan cara mengatasinya.

GejalaKemungkinan penyebabCara memperbaiki
Shortcode tampil sebagai teks mentah [[nama]]Plugin/tema pendaftar tidak aktif, atau shortcode diketik di blok ParagrafAktifkan plugin pendaftar; pindahkan ke blok Shortcode khusus
Shortcode tampil sebagai teks mentah di widgetArea widget tidak memproses shortcodeTambahkan do_shortcode() pada template area tersebut
Keluaran muncul di atas artikel, bukan di posisi shortcodeFungsi handler memakai echo, bukan returnUbah fungsi agar mengembalikan string; pakai output buffering bila perlu
Atribut tidak berpengaruhNilai atribut mengandung spasi tanpa tanda kutip, atau nama atribut salahApit nilai dengan tanda kutip; periksa nama atribut di dokumentasi
Shortcode bersarang tidak tampil benarShortcode enclosing dengan nama yang sama bersarangPakai dua nama tag yang berbeda untuk lapisan luar dan dalam
Galeri atau pemutar tidak munculID media salah, atau berkas media sudah dihapusPeriksa ID di Media Library; perbarui atribut ids atau src
Artikel lama tiba-tiba menampilkan kode mentahPlugin pendaftar shortcode dihapus saat bersih-bersih pluginPasang kembali pluginnya, atau ganti shortcode di artikel yang terdampak

Satu kebiasaan yang menghemat banyak waktu: sebelum menerbitkan artikel yang memakai shortcode baru, selalu periksa lewat Pratinjau. Blok Shortcode memang tidak menampilkan hasil akhir di dalam editor, jadi pratinjau adalah satu-satunya cara memastikan keluaran tampil sebagaimana mestinya sebelum artikel dibaca publik.

Keamanan Shortcode: Aturan yang Tidak Boleh Dilewatkan

Shortcode diciptakan justru sebagai jawaban atas masalah keamanan — WordPress melarang PHP di dalam konten agar penulis tanpa hak akses pengembang tidak bisa menjalankan kode sembarangan. Karena itu, aturan keamanannya berpusat pada satu prinsip: semua yang masuk lewat shortcode harus diperlakukan sebagai input yang tidak tepercaya.

Pertama, bersihkan (escape) semua nilai atribut sebelum ditampilkan. Pakai esc_html() untuk teks biasa, esc_attr() untuk nilai di dalam atribut HTML, esc_url() untuk tautan, dan wp_kses_post() untuk potongan HTML yang memang diizinkan. Dokumentasi resmi menegaskan bahwa atribut shortcode adalah input pengguna mentah dan penulis callback bertanggung jawab atas penanganannya. Mengabaikan ini membuka celah injeksi HTML dan skrip, terutama di situs multi-penulis tempat tidak semua penulis bisa dipercaya sepenuhnya.

Kedua, jangan pernah membuat shortcode yang menjalankan PHP dari isi artikel atau yang mengeksekusi kode dari input pengguna. Itu sama saja membuka kembali pintu yang sengaja ditutup WordPress sejak versi 2.5.

Ketiga, batasi siapa yang bisa memakai shortcode berbahaya. Shortcode yang mengubah data, menghapus konten, atau menampilkan informasi sensitif sebaiknya memeriksa hak akses pengguna dengan current_user_can() sebelum melakukan apa pun. Shortcode untuk pembaca umum seharusnya hanya membaca dan menampilkan — tidak pernah mengubah.

Keempat, waspadai shortcode dari plugin yang tidak lagi dipelihara. Plugin yang ditinggalkan pengembangnya bisa mengandung fungsi shortcode yang tidak membersihkan input dengan benar. Periksa tanggal pembaruan terakhir plugin di direktori WordPress.org sebelum memasangnya, dan hapus plugin yang sudah tidak dipakai beserta shortcode-shortcode yang ditinggalkan di artikel lama.

FAQ

Apakah shortcode masih relevan di WordPress modern yang sudah memakai editor blok?

Ya. Editor blok menyediakan blok Shortcode khusus, banyak plugin populer masih memakai shortcode sebagai cara utama menempatkan fiturnya, dan banyak blok Gutenberg sendiri memakai shortcode di balik layar. Shortcode dan blok saling melengkapi: blok untuk menyusun tampilan, shortcode untuk konten dinamis yang dipakai berulang kali.

Mengapa shortcode saya tampil sebagai teks [[nama]] di halaman depan?

Penyebab paling umum adalah plugin atau tema yang mendaftarkan shortcode tersebut sedang tidak aktif, atau shortcode diketik di dalam blok Paragraf dan bukan di blok Shortcode khusus. Periksa dulu apakah plugin pendaftarnya masih aktif, lalu pindahkan shortcode ke blok Shortcode. Bila shortcode berasal dari tema lama yang sudah diganti, Anda perlu mendaftarkannya kembali atau mengganti tag tersebut di artikel yang terdampak.

Di mana sebaiknya menaruh kode shortcode kustom: functions.php atau plugin?

Untuk situs yang dikelola satu orang dan jarang ganti tema, functions.php pada child theme sudah cukup. Untuk situs publisher dengan tim dan kemungkinan ganti tema, plugin kustom kecil lebih baik karena shortcode tetap hidup meski tema diganti. Yang tidak boleh dilakukan adalah menaruh kode PHP shortcode di dalam isi artikel.

Apakah shortcode memperlambat situs?

Shortcode sendiri ringan: ia hanya menjalankan satu fungsi PHP saat halaman ditampilkan. Yang bisa memperlambat adalah apa yang dilakukan fungsi di baliknya — misalnya query database yang berat di setiap pemanggilan, atau memuat banyak aset JavaScript dan CSS. Shortcode yang hanya menampilkan HTML statis atau mengambil beberapa postingan hampir tidak berpengaruh pada kecepatan. Bila shortcode dipakai di ratusan artikel, pastikan fungsinya memakai caching, misalnya transient, untuk query yang mahal.

Bisakah shortcode dipakai di dalam judul artikel atau excerpt?

Tidak secara bawaan. Judul dan excerpt tidak melewati filter the_content, sehingga shortcode di sana tidak diproses dan akan tampil sebagai teks mentah. Bila memang dibutuhkan, pengembang bisa menerapkan do_shortcode() secara manual pada judul atau excerpt melalui filter, tetapi praktik ini jarang diperlukan dan sebaiknya dihindari untuk judul — judul sebaiknya tetap teks biasa demi SEO dan tampilan di hasil pencarian.

Apa bedanya shortcode dengan blok yang bisa dipakai ulang (reusable block)?

Keduanya menyelesaikan masalah konten berulang, tetapi dengan cara berbeda. Blok yang bisa dipakai ulang menyimpan satu salinan konten yang disisipkan di banyak tempat; mengubahnya mengubah semua tempat sekaligus, tetapi isinya statis. Shortcode menjalankan fungsi setiap kali halaman ditampilkan, sehingga hasilnya bisa dinamis — berbeda-beda tergantung atribut, tanggal, atau data terbaru. Untuk teks statis seperti alamat redaksi, blok yang bisa dipakai ulang cukup; untuk daftar artikel terbaru atau tombol dengan tautan berbeda, shortcode lebih tepat.

Kesimpulan

Shortcode adalah fitur kecil dengan dampak besar bagi publisher WordPress. Enam shortcode bawaan — caption, gallery, audio, video, playlist, dan embed — sudah cukup untuk kebutuhan media sehari-hari tanpa plugin tambahan. Blok Shortcode di editor blok membuat pemakaiannya mudah bagi redaksi, sementara fungsi add_shortcode(), shortcode_atts(), dan do_shortcode() memberi pengembang kendali penuh untuk membuat elemen dinamis sendiri: kotak disclaimer yang konsisten, tombol ajakan yang seragam, daftar artikel terkait pilihan redaksi, sampai penanda slot iklan. Kuncinya ada pada tiga aturan sederhana: fungsi handler harus mengembalikan hasil, bukan mencetaknya; semua atribut harus dibersihkan sebelum ditampilkan; dan setiap shortcode plugin harus dicatat agar tidak tertinggal sebagai teks mentah saat plugin dihapus. Kuasai tiga aturan itu, dan shortcode akan menjadi salah satu alat paling hemat waktu di situs WordPress Anda — hari ini, dan di ratusan artikel berikutnya.

Sumber Resmi yang Dirujuk

  • WordPress Developer — Shortcode API (Common APIs Handbook): https://developer.wordpress.org/apis/handbook/shortcode/
  • WordPress Developer — Shortcodes (Plugin Handbook): https://developer.wordpress.org/plugins/shortcodes/
  • WordPress Codex — Playlist Shortcode: http://codex.wordpress.org/Playlist_Shortcode
  • Rank Math — How to Add a Shortcode in WordPress (panduan pemakaian blok Shortcode di editor blok): https://rankmath.com/blog/how-to-add-shortcode-in-wordpress/
  • WordPress Developer — Referensi fungsi do_shortcode(): https://developer.wordpress.org/reference/functions/do_shortcode/

Lukman

Penulis dan kontributor redaksi di Bangeko Media (bangekomedia.com). Berkomitmen menghadirkan informasi yang akurat dan berimbang.

← Artikel Sebelumnya KPR Syariah untuk Rumah Pertama: Skema Akad, Cara Menghitung Angsuran, dan Syarat Mengajukan di 2026 Artikel Selanjutnya → Memasak Bersama Anak di Rumah: Cara Mengenalkan Anak pada Dapur dengan Aman, Menyenangkan, dan Tanpa Ribet

Tinggalkan Tanggapan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *