Mengenal Shortcode WordPress, dari Menggunakan Hingga Membuatnya

Shortcode WordPress adalah salah satu kelebihan WordPress yang sering saya manfaatkan untuk memanipulasi output atau tampilan dari wordpress. Misalkan saja seperti membuat related post di dalam artikel. seperti gambar berikut.

contoh shortcode related posts didalam konten

atau ingin menampilakan postingan di elementor free seperti

Yang kebanyakkan dari pengguna wordpress lebih memilih menambahkan plugin untuk membuat fitur tersebut. tapi jika kamu tau shortcode wordpress, saya yakin kamu tidak perlu install plugin lagi, cukup menggunakan shortcode saja. nanti saya kasih kodenya, dan tinggal copas saja, lanjut baca saja ok.

Mengenal Shortcode WordPress

Shortcode merupakan sebuah kelebihan atau fitur yang ditawarkan oleh WordPress kepada kita dengan tujuan memanipulasi output, seperti contoh diatas.

Shortcode sendiri merupakan kumpulan code yang telah ditulis dan mempunyai tujuan misalkan saja menampilan relatedpost, relatedpage, dan lain-lain yang tidak mungkin kita tambahkan melalui editor, sebab shortcode ini sejatinya adalah sekumpulan code php yang diberi return alias tidak dicetak echo atau print sehingga tidak mungkin bisa diterjemahkan oleh wp editor. Kalopun dipaksa codenya tidak tereksekusi.

Dan sekumpulan kode php tersebut kemudian dibungkus agar lebih ringkas, ringkasan itu disebut shortcode.

Bentuk atau wujud dari shortcode ini adalah seperti ini

[nama_shortcode]
[nama_shortcode param="value" param2="value2"]

dua shortcode diatas disebut sebagai *Self-enclosed shortcode*, ya biasanya kalo ada tag pembuka pasti ada penutup, seperti <p> dan </p> , <div> dan </div> tapi self-enclosed ini tidak membutuhkan penutup, seperti hal , <hr/> atau <link rel=”….”/> yang secara otomatis menutup dirinya sendiri (bukan berarti mereka tidak laku ya).

[nama_shortcode] konten [/nama_shortcode]

yang kedua, *Enclosing shortcode* ini adalah shortcode yang butuh penutup agar fungsinya dapat berjalan dengan baik. shortcode yang ini pun bisa menggunakan param tapi hanya ditag pembuka, tag penutup tidak bisa.

Cara Menggunakan Shortcode WordPress

Cara menggunakan shortcode cukuplah mudah, apalagi editormu adalah gutenberg, kamu tinggal mengcopas aja shortcodenya kedalam artikel (iposisi yang kamu inginkan) dan secara otomatis akan terbaca.

Gutenberg Shortcode by wpbeginner.com

Selain Itu Ada 2 Cara Lagi Untuk Menggunakan Shortcode WordPress

1. Menggunakan Shortcode pada Classic Editor

baik, secara garis besar pemasangan atau penggunaan shortcode pada classic editor itu sama dengan gutenberg editor, namun dalam beberapa kasus shortcode tidak terbaca (bukannya keluar output code php malah yang tampil syntax shortcodenya).

use shortcode in classic editor wpbeginner.com

Kamu bisa mengubah mode Classic Editor dari Visual ke Text, kemudian paste/tulisakan shortcode pada posisi yang kamu inginkan lalu klik Update.

2. Menggunakan Shortcode Pada Template PHP

Jika sebelumnya kita menampilkan shortcode didalam artikel, dicara yang kedua kita akan menampilkan shortcode di file php dari tema wordpress.

untuk menampilkan kalian cukup gunakan fungsi / function do_shortcode()kemudian masukan shortcode dan argument dari shortcode ke dalam function do_shortcode seperti contoh berikut

 <?php echo do_shortcode("[nama_shortcode param='value']"); ?>

letakkan kode itu dimanapun yang kamu suka di file php tema wp yang sedang kamu gunakan.

harap hati hati dalam memilih ” dan ‘ jangan sampai sama, nanti error

Bonus : Menampilkan Shortcode Di Widget Text

Pada menu widget terdapat Widget Text yang mana isi dari widget tersebut ada text editor classic, kamu bisa memanfaatkan cara pertama untuk menggunakan shortcode pada widget.

adding shortcode in widget text by wpbeginner.com

Tapi jika dengan cara pertama tidak muncul juga kamu bisa tambahkan kode berikut ini kedalam file functions.php

 add_filter( 'widget_text', 'do_shortcode' );

Lalu Simpan.

Cara Membuat Shortcode WordPress

Bentuk shortcode udah, cara pakai shortcode udah, selanjutnya adalah cara membuat shortcode WordPress, disini kita akan buat shortcode simple yangself-enclosed shortcode dan disini akan saya kasih tau beberapa rule dalam membuat shortcode.

  1. Menentukan code name shortcode, usahakan unik agar tidak terjadi konflik ketika ada shortcode dengan nama yang sama.
  2. Agar unik sebaiknya gunakan prefix (awal), contoh [neon_related_posts], neon_ adalah prefix. diWordPress, prefix sangat penting sebab pengembangnya banyak dikhawatirkan terjadi konflik.
  3. WAJIB menggunakan return, jika terlalu banyak tag html, kamu bisa memanfaatkan ob_start() dan ob_get_clean()
  4. Biar lebih detail bacalah Shortcode API dan Shortcode Handbook

Membuat Shortcode WordPress

dalam membuat shortcode kita akan melalui beberapa tahap.

Pertama : mendaftarkan shortcode, contoh kita akan buat shortcode dengan nama [neon_related_posts] maka code daftarnya sebagai berikut:

 ....
 add_shortcode('neon_related_posts', 'related_posts_func');
 ...

Kedua : buat function dengan nama related_posts_func

 ...
 function related_posts_func() {
 ​
  return '<h1>hai aku shortcode</h1>';
 }
 ...

masukan kedua kode diatas di file functions.php, lalu masukan [neon_related_posts] di postinganmu, jika sudah muncul hai aku shortcode maka shortcode sudah berhasil dibuat.

Dan Terakhir Saatnya Bagi-bagi Code

Seperti yang telah saya janjikan diatas bahwa saya akan memberikan shortcode related post inner content.

https://github.com/wichaksono/wp-snippet/blob/main/shortcode-related-inner-post.php

Leave a Comment