WordPress, Elrolumnews — Anda ingin menampilkan tombol CTA, kotak info, atau daftar produk di dalam artikel—tapi tidak mau menulis HTML setiap kali? Atau Anda ingin menyisipkan form kontak atau elementor ke dalam konten tanpa membuka editor khusus?
Artikel ini cocok untuk: Anda yang sudah familiar dengan WordPress dan ingin naik level dengan shortcode kustom—cara efisien untuk menyisipkan elemen dinamis ke dalam konten.
Shortcode adalah “kode pendek” dalam tanda kurung siku—seperti [tombol]—yang WordPress ganti dengan konten yang lebih kompleks saat halaman ditampilkan . Ini adalah cara WordPress untuk memungkinkan Anda menyisipkan elemen dinamis tanpa menulis HTML setiap kali.
Di artikel ini, kita akan bahas dari nol: apa itu shortcode, cara membuatnya, parameter, konten bersarang, hingga contoh praktis yang bisa langsung dipakai.
Apa Itu Shortcode dan Mengapa Penting?
Shortcode adalah kode pendek dalam tanda kurung siku yang diganti dengan konten lain saat halaman dirender. Contoh paling sederhana:
yang menampilkan galeri gambar .
Mengapa Shortcode Berguna?
| Manfaat | Penjelasan |
|---|---|
| Efisien | Tulis [tombol] daripada HTML panjang |
| Konsisten | Semua tombol tampil sama |
| Fleksibel | Bisa diubah kapan saja di functions.php |
| User-friendly | Klien bisa pakai tanpa tahu coding |
Shortcode Bawaan WordPress
| Shortcode | Fungsi |
|---|---|
| Menampilkan galeri gambar |
| Memutar file audio |
| Memutar file video |
| Menambahkan caption ke gambar |
| Menyisipkan konten dari URL |
💡 Tips Pro: Shortcode tidak hanya untuk konten. Plugin seperti Contact Form 7, WooCommerce, dan Elementor menggunakan shortcode untuk menyisipkan fitur mereka ke halaman.
Langkah 1: Membuat Shortcode Paling Sederhana
Mari mulai dari yang paling dasar: shortcode yang menampilkan teks.
Kode di functions.php
function elrolum_sapaan() { return 'Halo, selamat datang di Elrolum!'; } add_shortcode( 'sapaan', 'elrolum_sapaan' );
Cara Pakai
Di editor WordPress, tulis:
[sapaan]
Hasil: “Halo, selamat datang di Elrolum!”
Penjelasan
| Bagian | Fungsi |
|---|---|
elrolum_sapaan() | Nama fungsi—bebas, tapi beri prefix unik |
return | Wajib return, bukan echo |
add_shortcode() | Mendaftarkan shortcode |
'sapaan' | Nama shortcode yang dipakai di editor |
⚠️ Peringatan: Gunakan
return, bukanecho. Jika pakaiecho, output akan muncul di tempat yang salah .
Langkah 2: Shortcode dengan Parameter
Shortcode menjadi jauh lebih powerful saat menerima parameter.
Kode dengan Parameter
function elrolum_tombol( $atts ) { // Atribut default $atts = shortcode_atts( array( 'teks' => 'Klik Di Sini', 'url' => '#', 'warna' => 'biru', 'target' => '_self', ), $atts ); // Output return '<a href="' . esc_url( $atts['url'] ) . '" class="tombol tombol-' . esc_attr( $atts['warna'] ) . '" target="' . esc_attr( $atts['target'] ) . '">' . esc_html( $atts['teks'] ) . '</a>'; } add_shortcode( 'tombol', 'elrolum_tombol' );
Cara Pakai
[tombol teks="Beli Sekarang" url="https://elrolum.com/produk" warna="hijau"]
Hasil: Tombol hijau dengan teks “Beli Sekarang”.
Penjelasan
| Bagian | Fungsi |
|---|---|
$atts | Array parameter dari shortcode |
shortcode_atts() | Menggabungkan parameter user dengan default |
esc_url(), esc_attr(), esc_html() | Sanitasi—wajib untuk keamanan |
💡 Tips Pro: Selalu sanitasi output shortcode. Ini mencegah XSS (Cross-Site Scripting)—serangan yang menyisipkan kode jahat via parameter .
Langkah 3: Shortcode dengan Konten di Dalamnya
Anda bisa membuat shortcode yang membungkus konten—seperti kotak info.
Kode dengan Konten
function elrolum_kotak_info( $atts, $content = null ) { $atts = shortcode_atts( array( 'warna' => 'biru', ), $atts ); return '<div class="kotak-info kotak-' . esc_attr( $atts['warna'] ) . '">' . do_shortcode( $content ) . '</div>'; } add_shortcode( 'info', 'elrolum_kotak_info' );
Cara Pakai
[info warna="kuning"] Ini adalah **informasi penting** yang perlu Anda ketahui. [/info]
Hasil: Kotak kuning dengan teks di dalamnya.
Penjelasan
| Bagian | Fungsi |
|---|---|
$content | Konten di antara tag buka dan tutup |
do_shortcode() | Memproses shortcode di dalam konten |
💡 Tips Pro: Gunakan
do_shortcode($content)agar shortcode lain di dalamnya tetap diproses. Tanpa ini, shortcode bersarang tidak akan berfungsi .
Langkah 4: Shortcode Bersarang (Nested)
Shortcode bersarang adalah shortcode di dalam shortcode lain.
Contoh
[info warna="biru"] Lihat produk kami: [tombol teks="Lihat" url="/produk"] [/info]
Agar berfungsi, shortcode induk harus memanggil do_shortcode() pada $content .
Cara Memastikan Berfungsi
function elrolum_kotak_info( $atts, $content = null ) { // ... return '<div class="kotak-info">' . do_shortcode( $content ) . '</div>'; }
Tanpa do_shortcode(): Shortcode [tombol] akan muncul sebagai teks mentah.
Langkah 5: Shortcode untuk Menampilkan Post/CPT
Ini contoh praktis: shortcode untuk menampilkan daftar artikel terbaru.
Kode
function elrolum_daftar_artikel( $atts ) { $atts = shortcode_atts( array( 'jumlah' => 3, 'kategori' => '', ), $atts ); $args = array( 'post_type' => 'post', 'posts_per_page' => intval( $atts['jumlah'] ), 'category_name' => sanitize_text_field( $atts['kategori'] ), ); $query = new WP_Query( $args ); $output = '<ul class="daftar-artikel">'; if ( $query->have_posts() ) { while ( $query->have_posts() ) { $query->the_post(); $output .= '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>'; } wp_reset_postdata(); } $output .= '</ul>'; return $output; } add_shortcode( 'daftar_artikel', 'elrolum_daftar_artikel' );
Cara Pakai
[daftar_artikel jumlah="5" kategori="tutorial"]
Hasil: Daftar 5 artikel terbaru dari kategori “tutorial”.
Langkah 6: Shortcode untuk Custom Post Type
Jika Anda punya CPT, Anda bisa membuat shortcode untuk menampilkannya.
Kode
function elrolum_daftar_portofolio( $atts ) { $atts = shortcode_atts( array( 'jumlah' => 6, ), $atts ); $query = new WP_Query( array( 'post_type' => 'portofolio', 'posts_per_page' => intval( $atts['jumlah'] ), ) ); $output = '<div class="grid-portofolio">'; if ( $query->have_posts() ) { while ( $query->have_posts() ) { $query->the_post(); $output .= '<div class="item-portofolio">'; $output .= '<a href="' . get_permalink() . '">'; $output .= get_the_post_thumbnail( get_the_ID(), 'medium' ); $output .= '<h3>' . get_the_title() . '</h3>'; $output .= '</a></div>'; } wp_reset_postdata(); } $output .= '</div>'; return $output; } add_shortcode( 'portofolio', 'elrolum_daftar_portofolio' );
Langkah 7: Shortcode untuk Tombol CTA (Contoh Lengkap)
Ini contoh lengkap yang bisa langsung dipakai.
Kode
function elrolum_cta_button( $atts ) { $atts = shortcode_atts( array( 'teks' => 'Klik Di Sini', 'url' => '#', 'warna' => 'biru', 'ukuran' => 'sedang', ), $atts ); $classes = 'cta-button cta-' . esc_attr( $atts['warna'] ) . ' cta-' . esc_attr( $atts['ukuran'] ); return '<a href="' . esc_url( $atts['url'] ) . '" class="' . esc_attr( $classes ) . '">' . esc_html( $atts['teks'] ) . '</a>'; } add_shortcode( 'cta', 'elrolum_cta_button' );
CSS (di style.css)
.cta-button { display: inline-block; padding: 12px 24px; border-radius: 6px; text-decoration: none; font-weight: 600; transition: all 0.3s ease; } .cta-biru { background: #0073aa; color: white; } .cta-hijau { background: #46b450; color: white; } .cta-besar { padding: 18px 36px; font-size: 18px; } .cta-kecil { padding: 8px 16px; font-size: 14px; }
Cara Pakai
[cta teks="Mulai Sekarang" url="/daftar" warna="hijau" ukuran="besar"]
Tips Lanjutan untuk Level Expert
1. Shortcode dengan Atribut Boolean
Untuk atribut seperti “tampilkan gambar ya/tidak”, gunakan nilai true/false atau 1/0.
$atts = shortcode_atts( array( 'tampilkan_gambar' => 'false', ), $atts ); $show_image = filter_var( $atts['tampilkan_gambar'], FILTER_VALIDATE_BOOLEAN );
2. Shortcode dengan Enqueue Script
Jika shortcode butuh CSS/JS, enqueue hanya saat shortcode digunakan:
function elrolum_shortcode_scripts() { global $post; if ( is_a( $post, 'WP_Post' ) && has_shortcode( $post->post_content, 'tombol' ) ) { wp_enqueue_style( 'elrolum-tombol', get_stylesheet_directory_uri() . '/css/tombol.css' ); } } add_action( 'wp_enqueue_scripts', 'elrolum_shortcode_scripts' );
3. Shortcode di Widget
Secara default, shortcode tidak berfungsi di widget. Tambahkan:
add_filter( 'widget_text', 'do_shortcode' );
4. Shortcode di Excerpt
add_filter( 'the_excerpt', 'do_shortcode' );
Kesalahan Umum dan Cara Menghindarinya
| Kesalahan | Akibat | Solusi |
|---|---|---|
Pakai echo bukan return | Output di tempat salah | Gunakan return |
| Tidak sanitasi output | Rentan XSS | Gunakan esc_*() |
Lupa do_shortcode() untuk nested | Shortcode dalam tidak jalan | Panggil do_shortcode($content) |
| Shortcode di widget tidak jalan | Tidak muncul | Tambahkan filter widget_text |
| Edit tema induk | Hilang saat update | Gunakan child theme |
Shortcode kustom adalah cara WordPress untuk menyisipkan elemen dinamis ke dalam konten—tanpa harus menulis HTML setiap kali. Kuncinya:
Mulai dari sederhana — shortcode yang menampilkan teks
Tambahkan parameter — dengan
shortcode_atts()Dukung konten — dengan
$contentdando_shortcode()Sanitasi output —
esc_url(),esc_attr(),esc_html()Gunakan untuk CPT — tampilkan portofolio, produk, dll
Enqueue script — hanya saat shortcode digunakan
Gunakan child theme — agar kode tidak hilang saat update
Dengan shortcode kustom, Anda bisa membuat konten yang lebih kaya, konsisten, dan mudah dikelola—tanpa harus menjadi developer front-end.
Ingat: Shortcode adalah alat. Konten yang hebat tetap butuh ide dan pesan yang jelas. Shortcode membantu Anda menyampaikannya lebih efisien.
Sudah siap membuat shortcode kustom pertama Anda?
💬 Punya pengalaman dengan shortcode? Bagikan di kolom komentar!
(el)
