Cara membuat Shortcode pada WordPress

Kali ini kita akan membahas shortcode pada WordPress termasuk bagaimana cara membuatnya. Shortcode pertamakali di kenalkan pada WordPress versi 2.5. Shortcode itu sendiri banyak digunakan oleh plugin dan theme, karena dengan adanya shortcode, pengguna bisa menambahkan konten mereka sendiri kedalam WordPress.

Shortcode sendiri biasanya adalah fungsi khusus yang akan sering kita gunakan pada WordPress kita, sehingga kita tidak perlu mengulang-ulang proses nya setiap kali kita membutuhkan nya. Shortcode API memungkinkan Anda membuat shortcode Anda sendiri pada file functions.php theme Anda.

Contoh dasar :

Untuk memberikan sedikit pemahaman tentang cara membuat shortcode, mari kita lihat contoh dasar cara membuat shortcode. Contoh kali ini kita akan membuat shortcode yang berfungsi menampilkan text static pada posting kita, copy dan paste kode berikut ini pada file functions.php theme Anda :

// Function to add subscribe text to posts and pages function subscribe_link_shortcode() { return '<blockquote>Halo, saya Zea. Terimakasih sudah membaca artikel ini.</blockquote>.'; } add_shortcode('subscribe', 'subscribe_link_shortcode');

Lalu ketikan [subscribe] pada postingan :

Ketikan shortcodenya pada halaman post

Lalu save. Setelah itu cek postingan Anda, nanti akan muncul shortcode nya seperti berikut ini :

Hasil shortcode

Saya akan coba menjelaskan secara singkat bagian-bagian dari potongan kode di atas :

// Function to add subscribe text to posts and pages

Ini adalah komentar. Dalam PHP di awali dengan double slash (//). Komentar sangat penting agar orang lain bisa mengetahui untuk apa kode tsb. Juga sebagai pengingat bagi Anda sendiri.

function subscribe_link_shortcode() { }

Selanjutnya kita mendefinisikan function yang akan kita gunakan. Gunakan penamaan yang mudah di mengerti.

return '<blockquote>Halo, saya Zea. Terimakasih sudah membaca artikel ini.</blockquote>.';

Kali ini kita mendefinisikan isi pesan static yang akan kita panggil dan tampilkan di halaman post.

add_shortcode('subscribe', 'subscribe_link_shortcode');

Selanjutnya kita definisikan shortcode itu sendiri menggunakan add_shortcode function. Variabel pertama men-definisikan nama shortcode yang akan kita panggil dalam post, dan variabel kedua memanggil fucntion shortocode yang sudah kita buat sebelum nya.

Contoh yang lebih kompleks :

Pada tutorial singkat kali ini, kita akan sama-sama belajar bagaimana cara membuat shortcode pada WordPress. Contoh studi kasus yang akan kita gunakan adalah, membuat shortcode custom button pada post/page. Oke langsung aja :

Dengan cara yang sama, kita buat kode yang lebih kompleks :

// BUTTON SHORTCODE function download_button($atts, $content = null) { extract( shortcode_atts( array( 'url' => '#' ), $atts ) ); return '<a href="'.$url.'" class="btn btn-lg btn-download"><i class="ion-android-download"></i> ' . do_shortcode($content) . '</a>'; } add_shortcode('download', 'download_button'); function github_button($atts, $content = null) { extract( shortcode_atts( array( 'url' => '#' ), $atts ) ); return '<a href="'.$url.'" class="btn btn-lg btn-github"><i class="ion-social-octocat"></i> ' . do_shortcode($content) . '</a>'; } add_shortcode('github', 'github_button');

$atts adalah nama dari atribut array saat kita menggunakan fungsi extract untuk meng-import variabel dari array kita (via shortcode_atts WordPress function).

Kali inipun kita masih menampilkan data static pada wordpress kita, yaitu dua buah button. Hanya saja URL button nya bisa kita isi secara dinamis pada halaman posting.

Sekarang coba kita panggil shortcode tsb pada halaman posting :

Panggil shortcode yang lebih kompleks

Nanti pada halaman post akan tampil seperti di bawah ini :

Hasil shortcode yang di tampilkan

Jika Anda mengikuti tutorial ini dengan seksama, seharusnya Anda sudah bisa membuat shortcode sederhana Anda sendiri. Dan sudah memiliki pemahaman dasar tentang cara membuat shortcode, dan bagaimana cara menggunakan nya untuk kebutuhan Anda sendiri.

Referensi : https://codex.wordpress.org/Function_Reference/add_shortcode

Last Updated on April 29, 2016 by zea