Panduan Shortcode WordPress: Kustomisasi Situs Lebih Mudah

WordPress adalah CMS yang terkenal dengan berbagai fasilitas yang memudahkan penggunanya. Shortcode WordPress adalah salah satunya.Berkat fitur ini, Anda tidak perlu menuliskan kode-kode HTML yang rumit untuk melakukan kustomisasi pada halaman situs dan konten blog.

Jika Anda ingin mempelajari shortcode WordPress, artikel ini adalah tempat yang tepat. Di sini, Anda akan dipandu secara lengkap, mulai dari pengenalan hingga cara membuat shortcode custom. Selamat membaca!

Apa Itu Shortcode WordPress?

Shortcode WordPress adalah kode-kode pendek yang digunakan untuk merubah format konten atau menambahkan fitur di halaman situs.

Pada dasarnya, ia memiliki fungsi yang sama dengan kode HTML dan embed. Hanya saja, bentuknya sangat ringkas.

Shortcode ditandai dengan tag. Karena itu, ia diawali dengan tanda [ dan diakhiri dengan tanda ]. Selain itu, shortcode dibagi menjadi dua jenis:

• Self-enclosed shortcode — Jenis shortcode ini hanya memiliki tag pembuka. Untuk memasukkan galeri gambar di konten atau sidebar, misalnya, Anda hanya memerlukan shortcode gallery.
• Enclosing shortcode — Jenis shortcode ini terdiri dari tag pembuka dan penutup. Tipe ini digunakan untuk memanipulasi konten yang ada di antara tag pembuka dan penutup, seperti [shortcode]KONTEN[/shortcode]. Contohnya adalah shortcode yang digunakan untuk memberi keterangan pada gambar.

Baik self-enclosed shortcode dan enclosing shortcode dapat diikuti dengan attribute dan value untuk kustomisasi lebih lanjut. Contohnya seperti demikian:

[shortcode attr=”xyz”]KONTEN[/shortcode]

Cara Menggunakan Shortcode WordPress

Apa saja shortcode yang bisa digunakan? WordPress memiliki enam shortcode bawaan, yaitu audio, playlist, gallery, video, caption, dan embed.

Selain itu, masih ada banyak shortcode lainnya yang tersedia jika Anda memasang plugin dan tema tertentu. Bahkan, Anda bisa membuat shortcode custom yang caranya akan kami jelaskan nanti.

Sekarang Anda belajar untuk menggunakan shortcode WordPress di editor halaman dan post terlebih dahulu. 

Cara Menggunakan Shortcode WordPress di Halaman dan Post

Di panduan ini, kami akan mencontohkan penggunaan shortcode di blog post. Pertama, klik Posts > Add New di Dashboard WordPress. Kemudian klik ikon + untuk menambahkan blok baru. Pilih blok Shortcode.

Jika susah untuk menemukannya, ketikkan saja nama blok tersebut pada search bar yang ada di atas daftar blok.

Setelah blok shortcode muncul, masukkan kode dari formatting atau fitur yang ingin digunakan pada kolom yang tersedia. Sebagai contoh, kami memasukkan shortcode galeri beserta attribute dan value-nya:

• ids — ID dari gambar yang sudah diunggah
• columns — jumlah kolom yang diinginkan
• size — ukuran gambar yang ditampilkan.

Bagaimana cara mengetahui ID gambar yang telah diunggah? Sebenarnya mudah, tetapi ID ini cukup tersembunyi.

Untuk mengetahuinya, akses Media Library dan arahkan kursor Anda ke salah satu judul gambar. Kemudian, perhatikan URL yang muncul di pojok kiri bawah halaman.

Di setiap URL gambar, Anda akan menemukan “post=” yang diikuti oleh angka. Nah, angka tersebut adalah ID-nya. Agar lebih jelas, Anda dapat melihat contohnya di bawah ini.

Artinya, ID dari gambar tersebut adalah 8.

Nah, hasil dari shortcode tadi seperti demikian di dalam post:

Langkah-langkah di atas dilakukan jika Anda menggunakan editor Gutenberg bawaan WordPress. Bagi yang lebih suka dengan editor klasik, Anda tinggal mengetikkan shortcode tanpa klik tombol apapun.

Baca Juga : Kesalahan WordPress yang Perlu Anda Hindari

Cara Menggunakan Shortcode WordPress di Sidebar

Selain untuk konten halaman dan blog post, shortcode WordPress juga bisa Anda gunakan di sidebar sebagai widget.

Namun, perlu diketahui bahwa tidak semua tema WordPress mendukung sidebar. Tema bawaan WordPress, misalnya, hanya mendukung widget di area footer. Apabila Anda memang menginginkan sidebar untuk widget, carilah tema yang mendukungnya.

Tidak perlu repot-repot. Klik Appearance > Themes > Add New. Di halaman tema klik Feature Filter dan centang checkbox Left Sidebar atau Right Sidebar. Kemudian, klik Apply Filters untuk menampilkan hasil pencarian tema.

Jika sudah meng-install tema yang bisa menggunakan sidebar, klik Appearance > Widgets di Dashboard. Pada halaman selanjutnya Anda dapat menemukan daftar berbagai jenis widgets. Klik Text dan geser ke daftar widget sidebar.

Klik Text lagi untuk membuka pengaturan widget-nya, kemudian beri judul, ketikkan shortcode, dan klik Save.

Mari kita cek hasilnya:

Cara Menggunakan Shortcode WordPress di Tema

Anda dapat menampilkan berbagai elemen atau fitur di sidebar atau footer dengan bantuan shortcode.

Namun, fungsi shortcode sebenarnya lebih dari itu. Anda juga bisa meletakkannya di mana saja pada halaman website. Misalnya, Anda ingin meletakkan formulir sederhana di akhir setiap blog post.

Untuk melakukannya, Anda perlu menggunakan fungsi do_shortcode. Ini adalah sebuah baris kode yang ditambahkan dalam file tema WordPress, seperti header.php atau footer.php. Contoh kodenya seperti demikian:

<?php echo do_shortcode("[shortcode_anda]"); ?>

Pada kode tersebut, [shortocde_anda] adalah tempat di mana Anda meletakkan shortcode dari elemen yang diinginkan.

Ingin mengetahui caranya lebih lanjut? Anda bisa membaca panduan kami tentang fungsi do_shortcode.

Cara Membuat Shortcode WordPress Custom

WordPress menyediakan ribuan tema dan plugin yang memudahkan pengguna untuk membuat website sesuai keinginan. Namun, bagaimana jika Anda tidak menemukan fitur atau fungsi yang dikehendaki? Atau mungkin Anda ingin membuat fitur tersendiri?

Anda bisa melakukannya dengan membuat shortcode WordPress sendiri. Caranya tidak semudah langkah-langkah yang telah kami bahas sebelumnya karena membutuhkan pemahaman dasar tentang bahasa pemrograman PHP. Akan tetapi, akan sangat memudahkan Anda dalam melakukan kustomisasi jika dapat melakukannya.

Sebelum mulai mempelajari cara membuat shortcode WordPress, Anda perlu memahami shortcode API terlebih dahulu yang akan kami jelaskan pada bagian ini.

Apa Itu Shortcode API?

Shortcode API milik WordPress adalah protokol yang menjadi dasar pembuatan dan penggunaan shortcode. Tanpanya, shortcode tidak dapat berfungsi.

Pada dasarnya, API tersebut bertugas untuk melakukan parsing terhadap kode-kode yang telah ditetapkan untuk sebuah shortcode dan attribute-nya. Dengan demikian, Anda tidak perlu mengetikkan baris kode yang rumit setiap kali ingin menambahkan sebuah elemen atau fitur pada halaman.

Tugas tersebut dilakukan setiap kali halaman website Anda diakses. Saat proses halaman dimuat, shortcode API mencari shortcode-shortcode yang terdaftar di dalamnya.

Jika menemukan shortcode yang terdaftar, protokol tersebut menampilkan elemen yang sesuai pada letak yang ditentukan.

Cara Mendaftarkan Shortcode WordPress

Nah, bagaimana cara mendaftarkan shortcode yang Anda buat? Untuk melakukannya, Anda perlu memasukkan fungsi add_shortcode() di dalam file functions.php milik tema atau plugin yang digunakan. Di bawah ini adalah format kodenya:

add_shortcode( 'shortcode_name', 'shortcode_handler_function' );

Kode tersebut diikuti oleh dua hal:

• Shortcode_name — Ini adalah nama shortcode yang Anda buat. Karakter yang diperbolehkan untuk nama shortcode hanyalah huruf kecil dan angka. Untuk spasi, gunakan underscore.
• Shortcode_handler_function — Ini adalah fungsi yang akan dijalankan shortcode API setelah menemukan shortcode yang terdaftar. Seperti nama shortcode, Anda bebas menamainya.

Berikut adalah format kode handler function:

function shortcode_handler_function( $atts, $content, $tag ){ }

Pada kode tersebut terdapat tiga bagian, yaitu:

• $atts — Attribute yang digunakan untuk sebuah shortcode. Jika tidak memerlukan attribute apapun, Anda tidak perlu memasukkannya
• $content — Konten yang diapit oleh tag pembuka dan penutup jika Anda membuat enclosing shortcode
• $tag — Tag milik sebuah shortcode. Ini digunakan untuk membedakan beberapa shortcode dengan nama yang sama

Cara Menggunakan Fungsi add_shortcode()

Tadi sudah kami sebutkan bahwa fungsi add_shortcode() dimasukkan ke dalam file functions.php tema atau plugin. Akan tetapi, penanganan keduanya sedikit berbeda.

Untuk tema, Anda tinggal menambahkan kode fungsi add_shortcode() beserta nama shortcode dan handler function-nya.

Untuk plugin, Anda dianjurkan untuk memastikan bahwa shortcode custom dijalankan hanya setelah halaman website selesai dimuat. Ini diperlukan Agar plugin terkait tidak mengalami error.

Anda dapat memastikannya dengan fungsi shortcodes_init. Kodenya seperti di bawah ini:

function shortcodes_init(){

 add_shortcode( 'shortcode_name', 'shortcode_handler_function' );

}

add_action('init', 'shortcodes_init');

Contoh Shortcode WordPress Custom

Tiba bagian yang Anda tunggu, yaitu membuat shortcode WordPress custom. Untuk mempraktikkan cara yang telah dibahas pada bagian sebelumnya, kami akan memberikan dua contoh shortcode beserta langkah pembuatannya.

Sebagai catatan, pastikan Anda telah melakukan backup WordPress sebelum mengubah file tema maupun plugin. Ini diperlukan agar Anda bisa restore website jika terjadi kesalahan dalam mengedit file tersebut. 

Contoh 1: Tombol CTA

Tombol CTA atau call-to-action umumnya digunakan untuk mengajak pengunjung situs atau blog agar melakukan hal yang dikehendaki pemilik website. Misalnya mendaftar ke sebuah layanan, mengisi formulir, dan subscribe konten blog.

Apabila ingin menyisipkan tombol serupa, Anda dapat menggunakan template kode di bawah ini. Attribute-nya juga dapat disesuaikan dengan keinginan Anda, tentunya.

add_shortcode( 'tombol_cta', 'contoh_cta' );

function contoh_cta( $atts ) {

 $a = shortcode_atts( array(

 'link' => '#',

 'id' => 'cta',

 'color' => 'blue',

 'size' => '',

 'label' => 'Button',

 'target' => '_self'

 ), $atts );

 $output = '<p><a href="' . esc_url( $a['link'] ) . '" id="' . esc_attr( $a['id'] ) . '" class="button ' . esc_attr( $a['color'] ) . ' ' . esc_attr( $a['size'] ) . '" target="' . esc_attr($a['target']) . '">' . esc_attr( $a['label'] ) . '</a></p>';

 return $output;

}

Agar mudah dipahami kami akan menjelaskan bagian-bagian dari kode di atas:

• Contoh shortcode tersebut kami namakan tombol_cta dengan shortcode handler contoh_cta
• shortcode_atts() adalah function WordPress yang digunakan untuk mengelola attribute sebuah shortcode
• $output digunakan untuk membawa kode HTML dari elemen yang dihasilkan oleh shortcode

Contoh 2: Kotak Teks

Pada contoh yang kedua ini kami akan membuat sebuah shortcode untuk menampilkan kotak teks. Elemen ini dapat digunakan jika Anda ingin meletakkan tulisan penting dalam sebuah kotak.

add_shortcode( 'kotak_teks', 'contoh_kotak_teks' );

function contoh_kotak_teks( $atts, $content = null ) {

 $a = shortcode_atts( array(

 'title' => 'Title',

 'title_color' => 'white',

 'color' => 'blue',

 ), $atts );

 $output = '<div class="contoh_kotak_teks" style="border:2px solid ' . esc_attr( $a['color'] ) . ';">'.'<div class="judul_contoh_kotak_teks" style="background-color:' . esc_attr( $a['color'] ) . ';"><h3 style="color:' . esc_attr( $a['title_color'] ) . ';">' . esc_attr( $a['title'] ) . '</h3></div>'.'<div class="isi_contoh_kotak_teks"><p>' . esc_attr( $content ) . '</p></div>'.'</div>';

 return $output;

}

Karena shortcode  ini digunakan untuk mengubah format teks, Anda perlu memberitahu WordPress bahwa ia merupakan enclosing shortcode. Maka dari itu, $content = null harus ditambahkan ke dalam shortcode handler.

Kelebihan dan Kekurangan Penggunaan Shortcode WordPress

Seperti yang telah dipelajari dari artikel ini, shortcode WordPress memudahkan kustomisasi website. Namun, penggunaannya tidak selalu berimbas baik untuk situs Anda. Di bawah ini kami jelaskan kelebihan dan kekurangan yang perlu Anda waspadai ketika menggunakan shortcode.

Kelebihan Penggunaan Shortcode WordPress

Berikut adalah manfaat yang Anda dapatkan dengan adanya shortcode:

• Menambahkan fitur pada halaman jadi mudah — Tanpa harus mengetikkan kode HTML atau PHP secara penuh, Anda sudah dapat memasukkan script PHP ke WordPress dengan mudah. Oleh karena itu, shortcode WordPress mempermudah dan mempercepat pembuatan website.
• Memungkinkan fitur untuk dikustomisasi lebih lanjut — Seperti yang telah dijelaskan di awal, shortcode tertentu dapat dimanipulasi dengan attribute. Ini memungkinkan Anda untuk mengatur outputnya sesuai keinginan.
• Tidak dipengaruhi tema — Fungsi shortcode sebuah plugin maupun yang Anda buat sendiri tidak akan terpengaruh tema WordPress.

Kekurangan Penggunaan Shortcode WordPress

Berikut adalah kekurangan yang harus Anda ketahui sebelum menggunakan shortcode:

• Tidak mudah digunakan oleh pengguna baru — Meskipun shortcode memudahkan kustomisasi website, tidak semua pengguna baru WordPress dapat mempelajari penggunaannya dengan cepat.
• Shortcode dapat berselisih dengan kode HTML — Shortcode bisa berselisih dengan kode HTML tertentu dan merusak fungsinya. Untuk menghindari ini, sebaiknya Anda membaca dokumentasi shortcode yang ingin digunakan terlebih dahulu.
• Shortcode bisa memperlambat website — Shortcode memang praktis, tetapi dapat memperlambat kecepatan loading website jika jumlahnya terlalu banyak. Maka dari itu, gunakanlah shortcode seperlunya.
• Shortcode sebuah tema tidak dapat digunakan di tema lain — Banyak tema WordPress yang mudah dikustomisasi karena shortcode-shortcode-nya. Akan tetapi, kode-kode tersebut tidak dapat dijalankan jika Anda mengganti tema. Alih-alih menampilkan sebuah elemen, shortcode tersebut akan muncul sebagai teks di halaman website.

Sudah Siap untuk Membuat Shortcode WordPress?

Bagi Anda yang sedang belajar membuat situs dengan WordPress, shortcode adalah fitur yang sangat membantu. Dengannya, Anda dapat menambahkan berbagai elemen pada halaman website maupun konten blog.

Dengan mempelajari panduan ini, Anda tidak hanya memahami cara menggunakannya, tetapi juga cara membuat shortcode WordPress custom.

Jika memiliki pertanyaan, jangan sungkan untuk meninggalkan komentar Anda pada kolom yang tersedia di bawah.