Shortcode di WordPress adalah salah satu fitur powerful yang sering dianggap sepele, padahal punya peran besar dalam mempercepat proses development. Kalau sering utak-atik WordPress, pasti pernah lihat kode seperti [ gallery ] atau [ contact-form ] di dalam editor. Nah, itulah yang disebut shortcode. Dengan satu baris kode sederhana, kamu bisa menjalankan fungsi kompleks tanpa harus menulis ulang script panjang setiap kali dibutuhkan.
Buat programmer, mahasiswa IT, atau siapa pun yang sering bermain dengan WordPress, memahami shortcode itu seperti punya “jalan pintas” dalam coding. Bayangkan kamu bisa membuat komponen reusable hanya dengan satu keyword. Selain hemat waktu, pendekatan ini juga membuat kode lebih rapi dan mudah dikelola. Di artikel ini, pembahasan akan fokus mulai dari konsep dasar hingga implementasi shortcode yanglengkap dengan contoh.
Apa Itu Shortcode WordPress?
Shortcode adalah fitur bawaan WordPress yang memungkinkan kamu menjalankan fungsi tertentu hanya dengan menuliskan tag sederhana di dalam konten. Formatnya biasanya diapit oleh tanda kurung siku seperti [nama_shortcode]. Di balik tampilan sederhana itu, sebenarnya WordPress menjalankan fungsi PHP yang sudah didaftarkan sebelumnya.
Secara teknis, shortcode bekerja sebagai “placeholder” yang akan diproses oleh WordPress saat halaman dimuat. Ketika WordPress menemukan shortcode, sistem akan menggantinya dengan output dari fungsi yang terkait. Jadi, yang tampil ke user bukan kode shortcode-nya, tapi hasil dari eksekusi fungsi tersebut.
Selain itu, shortcode juga sering digunakan oleh plugin. Banyak plugin populer seperti Elementor, Contact Form 7, atau WooCommerce memanfaatkan shortcode untuk menampilkan fitur mereka. Ini membuat shortcode menjadi salah satu elemen penting dalam ekosistem WordPress modern, terutama bagi developer yang ingin membuat sistem yang fleksibel dan scalable.
Baca Juga: Apa Itu WordPress dan Cara Kerjanya untuk Pemula
Fungsi dan Manfaat Shortcode WordPress
Beberapa manfaat utama yang membuat shortcode sangat penting, terutama untuk workflow development yang cepat dan terstruktur.
- Menyederhanakan Fungsi Kompleks
Shortcode memungkinkan kamu menyembunyikan logika kompleks di balik satu baris kode sederhana. Misalnya, menampilkan data API atau membuat komponen UI bisa dilakukan hanya dengan satu shortcode. - Reusable Code (Kode yang Bisa Digunakan Ulang)
Salah satu prinsip penting dalam programming adalah DRY (Don’t Repeat Yourself). Dengan shortcode, kamu cukup membuat fungsi sekali, lalu bisa digunakan di berbagai halaman tanpa perlu copy-paste kode. - Efisiensi Waktu Development
Dibandingkan harus menulis ulang kode HTML atau PHP setiap kali dibutuhkan, shortcode jelas lebih cepat. Ini sangat membantu terutama saat mengerjakan proyek dengan deadline ketat. - Mempermudah Non-Technical User
Meskipun target utama artikel ini adalah programmer, shortcode juga memudahkan user non-teknis. Mereka cukup memasukkan shortcode tanpa harus memahami kode di baliknya.
Jenis-Jenis Shortcode WordPress
Beberapa tipe yang perlu kamu pahami agar bisa memilih pendekatan yang tepat sesuai kebutuhan.
- Self-Closing Shortcode
Jenis ini adalah yang paling sederhana. Tidak memiliki konten di dalamnya dan biasanya hanya menjalankan fungsi tertentu. Contohnya seperti[tanggal]yang menampilkan tanggal hari ini. - Enclosing Shortcode
Berbeda dengan self-closing, jenis ini memiliki pembuka dan penutup, seperti[bold]teks[/bold]. Konten di dalam shortcode akan diproses oleh fungsi yang dibuat. - Shortcode dengan Parameter (Attributes)
Ini adalah jenis yang paling fleksibel. Kamu bisa menambahkan parameter untuk membuat output lebih dinamis. Contohnya:[button color="red"]Klik[/button].
Baca Juga: Mengenal Jenis Halaman pada WordPress untuk Pemula
Struktur Dasar Shortcode
Secara umum, struktur shortcode terdiri dari tiga bagian utama:
- Nama shortcode.
- Atribut (opsional).
- Konten (opsional).
Format dasarnya terlihat seperti ini:
[nama_shortcode atribut="nilai"]konten[/nama_shortcode]Bagian pertama adalah nama shortcode, yang menjadi identifier utama. Ini harus unik agar tidak bentrok dengan shortcode lain, terutama dari plugin. Bagian kedua adalah atribut, yang digunakan untuk mengirim parameter ke fungsi. Bagian ini bersifat opsional, tapi sangat penting untuk membuat shortcode dinamis.
Konten di dalam shortcode biasanya digunakan pada enclosing shortcode. Fungsi PHP yang kamu buat nantinya akan menerima konten ini sebagai parameter dan memprosesnya sesuai kebutuhan.
Struktur ini sebenarnya sederhana, tapi fleksibel. Dengan kombinasi atribut dan konten, kamu bisa membuat berbagai macam fitur, mulai dari tampilan UI sederhana hingga integrasi data yang kompleks. Kuncinya ada pada bagaimana kamu merancang fungsi PHP yang menangani shortcode tersebut.
Baca Juga: Mematikan Link Aktif Komentar WordPress untuk Cegah Spam
Cara Kerja Shortcode di WordPress
Di balik kemudahan penggunaan shortcode, ada mekanisme yang cukup menarik di dalam WordPress. Ketika halaman dimuat, WordPress akan melakukan parsing terhadap konten untuk mencari pola shortcode. Proses ini dilakukan menggunakan fungsi internal seperti do_shortcode().
Ketika shortcode ditemukan, WordPress akan mencocokkan nama shortcode tersebut dengan fungsi yang telah didaftarkan menggunakan add_shortcode(). Setelah itu, fungsi tersebut akan dieksekusi, dan hasilnya akan menggantikan shortcode di halaman.
Proses ini terjadi secara real-time saat halaman dirender. Artinya, output shortcode bisa bersifat dinamis tergantung parameter yang diberikan atau kondisi tertentu. Misalnya, kamu bisa menampilkan data berbeda berdasarkan user login atau waktu tertentu.
Hal lain yang perlu diperhatikan adalah shortcode bisa dipanggil di berbagai tempat, tidak hanya di post atau page, tapi juga di widget, theme, bahkan custom template. Ini membuat shortcode sangat fleksibel dan powerful dalam berbagai skenario pengembangan WordPress.
Baca Juga: Cara Optimasi Lazy Load Gambar Website Tanpa JS
Cara Membuat Shortcode WordPress (Dasar)
Untuk membuat shortcode, kamu perlu menambahkan kode PHP ke dalam file functions.php atau plugin custom. Konsep dasarnya cukup sederhana: buat fungsi, lalu daftarkan dengan add_shortcode().
Contoh sederhana:
function hello_shortcode() {
return "Hello, World!";
}
add_shortcode('hello', 'hello_shortcode');Setelah itu, kamu bisa menggunakan [hello] di dalam konten, dan WordPress akan menampilkan “Hello, World!”.
Yang perlu diperhatikan adalah fungsi harus mengembalikan nilai menggunakan return, bukan echo. Ini penting karena WordPress membutuhkan output dalam bentuk string agar bisa menggantikan shortcode dengan benar.
Pendekatan ini sangat cocok untuk fitur sederhana. Tapi ketika kebutuhan mulai kompleks, kamu bisa mengembangkan fungsi tersebut dengan parameter, logic tambahan, bahkan integrasi database atau API.
Cara Membuat Shortcode dengan Parameter
Setelah memahami dasar shortcode, langkah berikutnya adalah membuat shortcode yang lebih dinamis menggunakan parameter atau atribut. Dengan parameter, kamu bisa mengontrol output shortcode tanpa harus mengubah fungsi PHP-nya. Ini sangat penting dalam pengembangan yang scalable karena satu shortcode bisa digunakan untuk berbagai kebutuhan hanya dengan mengganti nilai atribut.
Dalam WordPress, parameter dikirim dalam bentuk array ke fungsi shortcode. Untuk mengelolanya, biasanya digunakan fungsi shortcode_atts() agar lebih aman dan terstruktur. Contoh implementasi sederhana:
function button_shortcode($atts) {
$atts = shortcode_atts(
array(
'color' => 'blue',
'text' => 'Klik Saya'
),
$atts
); return '<button style="background-color:' . $atts['color'] . ';">' . $atts['text'] . '</button>';
}
add_shortcode('button', 'button_shortcode');Dengan kode di atas, kamu bisa menggunakan shortcode seperti ini:
[button color="red" text="Daftar Sekarang"]Hasilnya akan berupa tombol dengan warna merah dan teks sesuai parameter. Pendekatan ini memberikan fleksibilitas tinggi karena kamu tidak perlu membuat banyak shortcode untuk fungsi yang mirip.
Selain itu, penting untuk melakukan sanitasi data pada parameter, terutama jika menerima input dari user. Ini untuk menghindari potensi keamanan seperti XSS. Biasanya, fungsi seperti esc_attr() atau esc_html() digunakan untuk membersihkan data sebelum ditampilkan.
Baca Juga: Cara Meningkatkan Keamanan Website WordPress
Cara Membuat Enclosing Shortcode
Enclosing shortcode memungkinkan kamu memproses konten yang berada di antara tag pembuka dan penutup shortcode. Ini sangat berguna untuk membuat komponen seperti wrapper HTML, formatting teks, atau bahkan mini-template.
Contoh sederhana enclosing shortcode:
function highlight_shortcode($atts, $content = null) {
return '<div style="background:yellow; padding:10px;">' . $content . '</div>';
}
add_shortcode('highlight', 'highlight_shortcode');Penggunaannya di dalam editor:
[highlight]Ini adalah teks penting[/highlight]Hasilnya, teks tersebut akan dibungkus dalam elemen dengan background kuning. Konsep ini mirip seperti membuat custom HTML tag, tapi dengan fleksibilitas PHP di belakangnya.
Hal penting yang perlu diperhatikan adalah parameter $content harus dideklarasikan dalam fungsi. Jika tidak, konten di dalam shortcode tidak akan terbaca. Selain itu, jika kamu ingin mendukung nested shortcode (shortcode di dalam shortcode), kamu bisa menggunakan do_shortcode($content) agar WordPress tetap memproses shortcode di dalamnya.
Enclosing shortcode sering digunakan untuk membuat UI component seperti alert box, card, atau custom layout. Dengan pendekatan ini, kamu bisa membuat sistem komponen yang reusable tanpa harus menyentuh HTML secara langsung setiap kali dibutuhkan.
Baca Juga: Cara Optimasi Query SQL untuk Performa Website
Contoh Penggunaan Shortcode dalam Website
Shortcode sering digunakan dalam berbagai skenario nyata di website WordPress. Berikut beberapa contoh implementasi yang umum dan relevan:
- Menampilkan Button Custom
Shortcode bisa digunakan untuk membuat tombol dengan berbagai variasi warna, ukuran, dan link. Ini sangat berguna untuk CTA (Call to Action) seperti tombol “Beli Sekarang” atau “Daftar”. - Menampilkan Teks Dinamis
Kamu bisa membuat shortcode untuk menampilkan teks tertentu berdasarkan kondisi, misalnya nama user yang sedang login atau tanggal hari ini. - Menampilkan Data dari Database
Shortcode juga bisa digunakan untuk mengambil data dari database WordPress, seperti menampilkan daftar post terbaru atau custom post type.
Studi Kasus: Shortcode untuk Menampilkan Data API
Salah satu penggunaan menarik dari shortcode adalah untuk menampilkan data dari API eksternal. Misalnya, kamu ingin menampilkan data cuaca atau kurs mata uang secara real-time di website.
Contoh sederhana:
function api_shortcode() {
$response = wp_remote_get('https://api.exchangerate-api.com/v4/latest/USD');
$body = wp_remote_retrieve_body($response);
$data = json_decode($body, true); return 'Kurs USD ke IDR: ' . $data['rates']['IDR'];
}
add_shortcode('kurs', 'api_shortcode');Dengan shortcode [kurs], website akan menampilkan nilai tukar terbaru. Ini menunjukkan bahwa shortcode tidak hanya untuk tampilan statis, tapi juga bisa digunakan untuk integrasi data real-time.
Perbandingan Shortcode vs Gutenberg Block
Sejak hadirnya Gutenberg, banyak developer mulai beralih ke block editor. Tapi shortcode masih tetap relevan. Berikut perbandingannya:
| Aspek | Shortcode | Gutenberg Block |
|---|---|---|
| Kemudahan penggunaan | Perlu hafal syntax | Lebih visual |
| Fleksibilitas | Sangat fleksibel | Terbatas pada block |
| Reusability | Tinggi | Tinggi |
| Learning curve | Rendah untuk dev | Lebih kompleks |
| Integrasi kode | Mudah | Lebih kompleks |
Shortcode lebih cocok untuk developer yang nyaman dengan coding, sedangkan Gutenberg lebih ramah untuk user non-teknis. Dalam banyak kasus, keduanya bisa digunakan bersamaan.
Baca Juga: Cara Mengoptimasi Database WordPress dengan Mudah
Kelebihan Shortcode
- Fleksibel dan mudah dikembangkan
- Bisa digunakan ulang di berbagai tempat
- Mendukung integrasi dengan PHP dan API
- Ringan dan tidak membutuhkan UI kompleks
Shortcode sangat cocok untuk developer karena memberikan kontrol penuh terhadap output dan logika program.
Kekurangan Shortcode
- Tidak user-friendly untuk pemula
- Sulit dibaca jika terlalu banyak digunakan
- Bergantung pada fungsi PHP (jika hilang, shortcode error)
- Kurang visual dibanding Gutenberg
Kekurangan ini membuat shortcode perlu digunakan dengan bijak, terutama dalam proyek besar.
Kesimpulan
Pada pembahasan kita di atas dapat kita simpulkan bahwa Shortcode WordPress adalah solusi sederhana tapi sangat powerful untuk membangun fitur yang modular dan reusable. Dengan memahami konsep dasar hingga implementasi lanjutan seperti parameter dan API, kamu bisa membuat sistem yang fleksibel dan efisien.
Meski saat ini Gutenberg semakin populer, shortcode tetap memiliki tempatnya sendiri. Kombinasi keduanya justru bisa menghasilkan workflow yang lebih optimal. Kuncinya adalah memahami kapan harus menggunakan shortcode dan kapan menggunakan block editor, sehingga hasil akhir tetap efisien, scalable, dan mudah dikelola.
Artikel ini merupakan bagian dari seri WordPress KantinIT.com. Jika artikel ini bermanfaat, jangan lupa bagikan ke media sosial atau ke teman kamu.
