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.
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 :
- Berupa shortcode buka dan shortcode tutup seperti: content
- Berupa single shortcode tapi ada attribut/parameter seperti:
- Berupa nested/struktur shortcode parent-child seperti: [/tag-parent]
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
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:
Isi konten kolom 1
Isi konten kolom 2
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.