Shortcodes Ultimate: Plugin Buat Layout & Format Khusus di WordPress

Pernahkah Anda mengalami kebingungan atau kesulitan saat membuat artikel (posts/pages) di WordPress tentang bagaimana cara membuat konten dengan layout atau format khusus seperti:

• Layout Multi kolom (dua, tiga atau bahkan lebih). Itupun inginnya lebar masing-masing kolom berbeda.
• Tombol / button dengan warna menonjol.
• Teks di dalam sebuah box/kotak dengan background warna tertentu.
• Membuat judul sub konten atau teks heading yang unik dan berbeda dari normalnya.
• Memasukkan video YouTube atau video yang responsive (otomatis menyesuaikan ukuran saat dilihat di smartphone)
• Dan masih banyak lagi.

Jika selama ini Anda tidak bisa menemukan cara membuat konten spesifik seperti diatas, itu bukan salah Anda tapi salah WordPress he..he… 🙂

Karena memang editor standar di WordPress (seperti yang tampak berikut ini) memiliki keterbatasan hanya bisa membuat konten, format dan layout standard saja.

Terus Bagaimana Caranya?

Saat Anda ingin membuat konten dengan layout atau formatting non standard agar tampilan artikel atau halaman Anda lebih bagus, profesional dan lebih menarik maka Anda membutuhkan theme khusus atau plugin tambahan.

Di artikel tutorial kali ini, saya membahas cara membuat konten dengan layout dan format spesial atau non standard dengan plugin WordPress GRATIS yang populer yaitu Shortcodes Ultimate.

Jika Anda belum tahu apa itu plugin, cara mencari dan instalasi plugin wordpress, silakan baca artikel kami sebelumnya berjudul “Pengenalan Dasar WordPress: Apa Itu WordPress Plugins“

Karena ini adalah sebuah plugin maka tidak jadi masalah theme wordpress apa yang Anda gunakan, Anda tetap bisa menggunakannya.

Tetapi sebelum saya menjelaskan mengenai plugin ini, bagi yang masih awam dengan WordPress, Anda perlu mengerti dulu apa itu shortcode, sebuah istilah yang digunakan saat Anda menggunakan WordPress.

Apa itu Shortcode?

Shortcode singkatnya adalah sebuah kode spesifik yang diketikkan di editor WordPress untuk melakukan sebuah fungsi atau tugas tertentu.

Shortcode atau kode spesifik ini diketikkan di editor wordpress dalam bentuk kurung siku buka dan kurung siku tutup seperti [xxxxx] dimana xxxxx itu adalah keyword/tag untuk memanggil shortcode tertentu.

Ada berbagai model atau cara memanggil sebuah shortcode di WordPress seperti:

• Berupa single shortcode seperti : [tag]
• Berupa shortcode buka dan shortcode tutup seperti: [tag]content[/tag]
• Berupa single shortcode tapi ada attribut/parameter seperti: [tag param1=”abc”]
• Berupa nested/struktur shortcode parent-child seperti:
  [tag-parent]
     [tag-child]
  [/tag-parent]

Shortcode sangat membantu kita sebagai orang awam (non programmer) untuk bisa melakukan sesuatu di WordPress yang sebetulnya membutuhkan programming yang kompleks, sehingga cukup panggil shortcode sederhana, fungsi yang diinginkan sudah berjalan.

Jadi shortcode = shortcut atau jalan pintas.

Nah shortcode apa saja yang tersedia dan bisa digunakan, itu bergantung pada WordPress Theme yang Anda gunakan dan plugin yang Anda aktifkan di WordPress Anda.

Jadi sebenarnya, di wordpress standard hampir tidak ada shortcode yang bisa Anda gunakan. Itu sebabnya untuk keperluan layout dan formatting teks yang lebih banyak, salah satu plugin populer yang bisa Anda gunakan adalah Shortcodes Ultimate.

Cara Menggunakan Shortcodes Ultimate

Plugin Shortcodes Ultimate menyediakan lebih dari 50 shortcode yang bisa Anda gunakan untuk membuat atau memasukkan konten non standard (audio/video), custom layout dan formatting dimana setiap shortcode punya keyword/tag sendiri-sendiri.

Hah???  50 shortcode berarti ada 50 keyword/tag yang perlu dihapal dong???

Tentu saja kalau kita harus menghapal 50 keyword/tag shortcode, belum pakai saja sudah pusing duluan 🙂

Nah pembuat plugin atau theme biasanya memberikan sarana untuk menggunakan shortcode mereka tanpa harus menghapalnya tetapi bisa diakses melalui menu atau button di editor WordPress.

Sebagai contoh di Shortcode Ultimate (setelah plugin diaktifkan) maka akan muncul sebuah tombol Insert Shortcode di samping tombol Add Media seperti yang tampak di screenshot berikut:

Begitu Anda klik tombol tersebut maka akan muncul daftar semua shortcode yang disediakan Shortcode Ultimate berupa daftar icon seperti berikut:

Anda tinggal klik icon / shortcode mana yang mau Anda gunakan dan Anda tinggal mengikuti petunjuk yang diberikan untuk memasukkan data/informasi yang dibutuhkan.

Mudah kan? 🙂

Untuk lebih jelasnya saya akan membahas secara spesifik beberapa contoh shortcode di Shortcode Ultimate yang umumnya saya gunakan.

Contoh 1: Buat Boxes dan Notes

Untuk membuat tampilan yang lebih menarik dan lebih menonjolkan teks tertentu, saya sering membuat teks di dalam box seperti berikut ini:

Di Shortcodes Ultimates istilahnya Anda membuat Box (dua yang pertama diatas) atau Note (yang terakhir).

Misal untuk buat Note, Anda klik icon Note di daftar icon Shortcodes Ultimate seperti yang tampak di screenshot berikut ini.

Setelah klik icon Note, akan muncul sebuah box memanjang ke bawah dimana Anda bisa memilih warna dan mengisikan data/informasi yang diperlukan.

Apa yang perlu diisikan untuk setiap shortcode tentu berbeda-beda tergantung fungsi shortcode.

Setelah memilih opsi dan mengisikan data dan informasi yang dibutuhkan (tidak setiap opsi harus diubah, seringkali saya pakai opsi standar saja).

Di shortcode Note, saya biasa cuma menentukan:

• Warna background
• Warna teks
• Isi konten/teks

Anda lalu bisa klik tombol Live Preview di bawah, untuk memastikan apakah sudah sesuai dengan yang Anda mau.

Setelah semua ok, klik tombol Insert Shortcode maka shortcode akan dimasukkan ke editor WordPress Anda seperti berikut ini:

Tentu teks diantara shortcode bisa Anda edit langsung di editor WordPress, tidak harus melewati proses diatas lagi.

Mudah bukan? 🙂

Contoh 2: Buat Layout Multi Kolom

Kadang-kala saat membuat konten, Anda perlu membuat layout multi kolom, mungkin 2 kolom, 3 kolom atau lebih. Membuat layout seperti itu sangatlah tidak mungkin dilakukan di editor wordpress standard.

Sebagai contoh, saya seringkali perlu membuat tampilan produk di website toko online kami yang membutuhkan 2 kolom seperti berikut ini.

Untuk membuatnya, saya menggunakan shortcode Row dan Column di Shortcodes Ultimate. Cara penggunaannya agak beda dalam hal ini karena ini merupakan nested-shortcode.

Jadi Anda perlu memasang shortcode row/baris terlebih dahulu yaitu:

Lalu didalamnya ada shortcode untuk column (ada attribut ukuran yang bisa ditentukan) yaitu:

Jadi kurang lebih kalau digabung akan seperti ini format shortcode nya:

Contoh 3: Buat Button / Tombol

Salah satu hal yang juga sering ditanyakan ke kami adalah cara membuat button / tombol yang menarik di halaman wordpress. Button / tombol yang menarik dan menonjol akan lebih kelihatan oleh visitor/pembaca sehingga akan lebih tinggi kemungkinan di klik.

Shortcodes Ultimate menyediakan shortcode untuk membuat button/tombol dalam berbagai bentuk seperti yang bisa dilihat berikut ini. Silakan pilih icon Button, nanti ada banyak pilihan yang bisa Anda pilih.

Itulah beberapa contoh cara penggunaan shortcode di Shortcodes Ultimate. Tentu tidaklah mungkin membahas semua jenis shortcode yang disediakan di tutorial singkat ini.

Paling mudah menurut saya untuk mengerti shortcode yang disediakan adalah dengan langsung praktek, coba satu per satu icon yang disediakan oleh plugin ini.

Anda juga bisa pelajari beberapa video tutorial yang linknya bisa Anda dapatkan di halaman plugin Shortcodes Ultimate.

BONUS PDF Cheat Sheet Shortcodes Ultimate

Nah tapi ada satu cara lagi untuk memudahkan dalam menggunakan Shortcodes Ultimate ini yaitu dengan memiliki daftar contekan atau cheat sheet.

Dari dokumentasi plugin yang ada, saya jadikan sebuah PDF berisi daftar seluruh shortcode yang ada di Shortcodes Ultimate, lengkap attribut di setiap shortcode dan contoh/example-nya.

Anda bisa download PDF Cheat Sheet ini dengan klik tombol berikut ini.

Semoga tutorial singkat tentang plugin Shortcodes Ultimate ini bisa bermanfaat untuk Anda yang ingin membuat custom layout dan format konten yang khusus di WordPress.

Sukses Besar untuk Anda,
Sukarto Sudjono