Shortcodes Ultimate: Plugin Buat Layout & Format Khusus di WordPress

By Sukarto Sudjono

shortcodes ultimate banner

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.

wordpress-editor-standard

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?

shortcodes

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:

shortcode-ultimate-button

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

shortcodes-ultimate-icon

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:

boxes-notes

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.

icon-box

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

shortcode-ultimate-notes

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:

[su_note note_color=”#fef8ca”]

Testing teks notes…. Testing teks notes…. Testing teks notes…. Testing teks notes…. Testing teks notes…. Testing teks notes…. Testing teks notes…. Testing teks notes…. Testing teks notes….

[/su_note]

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.

layout-2-kolomUntuk 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:

[su_row] …. [/su_row]

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

[su_column] …. [/su_column]

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

[su_row]

[su_column size=”1/3″] Isi konten kolom 1  [/su_column]

[su_column size=”2/3″] Isi konten kolom 2 [/su_column]

[/su_row]

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.

shortcodes-button

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.

shortcodes-ultimate-icon

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.

Download PDF Cheat Sheet Shortcodes Ultimate

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

 

PS: Jika Anda suka atau merasa artikel ini bermanfaat, tolong SHARE melalui tombol Social Media (Facebook, Twitter, Google+ atau Linkedin) yang kami sediakan. Terimakasih 🙂

Anda juga bisa memberikan komentar atau pertanyaan tentang artikel diatas. Saya berusaha membaca setiap komentar dan  menjawab pertanyaan yang masuk. 

  • PERTAMAX terimakasih pak Sukarto, sangat bermanfaat pluginnya.

    • Wah Andray jadi Pertamax ternyata 🙂 Thx u sama-sama 🙂

  • Andi Isyanto

    Wah…ini mantap banget nih. Very useful Tutorial and Plugin..Thx bgt pak Sukarto 🙂

  • Terima kash tutorialnya pak. berarti plugin ini bisa kita pakai untuk membuat home page ya pak? Pertanyaan tambahan pak, ada ga batasan berapa plugin yg bisa kita install agar tidak membebani loading website kita?

    Mungkin bisa dishare plugin apa saja yang wajib di install di dalam sebuah website agar bisa memaksimalkan mulai dari keamanan, tampilan, maupun SEOnya sendiri.

    Terima kasih
    adhy

    • Tentu bisa dipakai untuk buat homepage, walaupun jelas ada keterbatasannya. Untuk buat tampilan layout yg kompleks, kita biasa pakai Thrive Content Builder (lihat di halaman Tools & Resources di http://belajarbisnisinternet.com/tools-resources)

      Untuk batasan jumlah plugin dalam sebuah website, tidak ada ukuran yang pasti krn itu bergantung pada faktor hosting juga tapi pada prinsipnya saya ingin menggunakan lebih sedikit plugin kalau bisa.

      Itu sebabnya kalau ada 1 plugin yg bisa melakukan fungsi bbrp plugin, saya biasa ya pakai 1 plugin itu saja. thx

      • wah terima kasih penjelasannya pak. Juga atas tutorial ultimate shotcodes nya.
        Salam sukses

  • Panji Jaya Karta

    saya menggunakan plugin ultimate shorcodes.

    terus saya buat post yg menggunakan shorcodes (a) misal post 1» shortcodes (a) di post 1 berjalan baik.

    terus post 1 ini rencana mau saya jadikan shotcodes (b) di Post 2. »
    maksudnya biar gak nulis hal yg sudah ditulis di post 1, tinggal manggil
    post 1 aja» tapi shorcodes (a) yg sudah saya pasang di post 1 jadi gak
    jalan.

    solusinya bagaimana ya mas?

    • Saya kurang ngerti maksud pertanyaannya, apakah yang Anda maksud itu menggunakan plugin Shortcoder?

      Kalau yg digunakan memang ultimate shortcodes, apa spesifik shortcode yg Anda gunakan?

      thx

  • Ahmad Amarta

    Pak mau tanya kalau mau masukkan dan berfungsi salah satu shortcode affiliasi di contact form7 bagaimana cara nya Pak..? Tks

  • sinigera dotkom

    Terima Kasih tips nya Juragan, semoga makin sukses