Cara membuat Shortcode pada WordPress

zea 26 Apr 2016 2 Menit 3

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

Ketikan shortcodenya pada halaman post

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

Hasil shortcode

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

Panggil shortcode yang lebih kompleks

Nanti pada halaman post akan tampil seperti di bawah ini :

Hasil shortcode yang di tampilkan

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

Bagikan ke:
zea
Ditulis oleh

zea

Web Developer, Technical Writter and WordPress enthusiast, currently working at well-known Yogyakarta based startup company, called Tonjoo Corp. See my Github for project portfolio.

Post comment

3 Comments

  • kuswandi says:

    Februari 1, 2019 at 17:03

    Terimakasih kang

  • Rizal hamdani says:

    Maret 21, 2020 at 11:09

    assalamualaikum kang, kalau membuat sortcodes untuk menampilkan data dari database bagai mana ya ? ,

Leave a Reply

Alamat email Anda tidak akan dipublikasikan.

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.