Mempercantik Postingan WordPress dengan Shortcode

Mempercantik Postingan WordPress dengan ShortcodeShortcode adalah perintah singkat yang memudahkan pengguna WordPress untuk menghadirkan berbagai macam kebutuhan seperti menampilkan daftar postingan terbaru, daftar isi, menciptakan box dengan warna khusus, menghidupkan smiley dan lain-lain. Shortcode ini bisa kita manfaatkan untuk mempercantik postingan blog maupun tampilan keseluruhan pada blog kita.

Contoh nya pada postingan ini, saya menggunakan shortcode “Dropcap” yang menampilkan huruf besar biru pada awal kalimat. Pada keseluruhan blog ini, saya juga memasang shortcode Daftar isi ke samping header. Semua itu hanya dengan beberapa kata saja, namun hasil yang kita dapatkan sangat baik.

Pada posting kali ini kita akan menggunakan salah satu plugin wordpress yang bernama “Shortcode Ultimate” karena plugin ini memiliki hampir 50 shortcode yang sangat bagus.

Shortcode Ultimate adalah plugin yang bisa menghadirkan banyak sekali tampilan visual hanya dengan memanfaatkan berbagai jenis perintah singkat dan mudah dimengerti.

Cara Menginstal Shortcode Ultimate

Berikut ini cara menginstall plugin Shortcode Ultimate :

  • Pada Dashboard WordPress, Pilih menu Plugins > Add New
  • Pada kotak pencarian, ketikkan “Shortcode Ultimate

Wordpress shortcode install

  • Klik tombol install now. Setelah itu klik Activate.
  • Selesai.

Beberapa Contoh Shortcode Untuk Mempercantik Posting

  • Drop Cap

Dropcap adalah huruf pertama yang dibuat lebih besar dan unik untuk menunjukkan awal paragraf. Untuk membuat dropcap sangat mudah. Berikut langkah-langkahnya :

  1. Buat Artikel Seperti biasa
  2. Tekan tombol Insert Shortcode
  3. Pilih Dropcap
  4. Atur model yang kamu mau pada menu style, size.
  5. Pada menu Content, pilih hurup apa yang kamu mau buat Dropcap.
  6. Tekan tombol Insert Shortcode. Nanti huruf tersebut akan diapit oleh [su_drop*cap]
  • QR Codes

QR Codes adalah barcode dua dimensi yang umumnya dibaca menggunakan smartphone yang terinstal aplikasi khusus seperti QR Codes Reader. Nah, didalam QR Codes kamu bisa menulis informasi “rahasia” yang hanya bisa dibaca menggunakan aplikasi smartphone. Kamu bisa memberi pengunjung informasi penting seperti password, kata kunci, nomor PIN BB, Line, Alamat dan lain-lain. Caranya adalah sebagai berikut :

  1. Tekan tombol Insert Shortcode
  2. Pilih QR Code
  3. Isi berbagai macam paramater. Yaitu : Data ( tulis teks yang akan dimunculkan saat QR Code dibaca menggunkan smartphone ), Title ( Judul ) dan lain lain.
  4. Tekan tombol Insert shortcode.

Berikut tampilan QR Code yang diciptakan secara otomatis dan dapat diletakkan ditampat yang kamu inginkan.

Dunia-komputer.com
  • Scheduler

Scheduler merupakan shortcode yang menampilkan artikel hanya pada hari-hari  atau jam-jam tertentu saja.

 

  • Animation

Bayangkan kalau artikel pada blog kita bisa loncat-loncat. Pasti blog kita jadi keliatan rame… 🙂 . Untuk menganimasikan teks, tinggal pilih opsi “Animation” pada Insert shortcode.

  • Spoiler dan Quote

Pernah bermain ke kaskus ? pastinya pernah dong… Disitu ada banyak post yang mengandung banyak spoiler. Spoiler sendiri adalah teks yang disembunyikan untuk alasan tertentu, seperti menghemat tempat, menciptakan efek kejutan, ataupun membocorkan ending suatu file ( ini yang paling ngeselin.. 🙂 ). Jika kita ingin menampilkan pesan itu, kita harus menekan tombol khusus yang telah disediakan.

Untuk membuat Spoiler atau Quote bisa menggunakan cara sama yang ada diatas. yaitu pada item Spoiler dan Quotes

Mengedit Tampilan Shortcode dengan CSS

Jika kamu melihat tampilan Dropcap post ini diatas, pastinya warnanya berbeda dengan warna bawaan dari plugin. Untuk mengedit tampilan tersebut, kita bisa menambahkan CSS kedalam tempat yang telah disediakan oleh Shortcode Ultimate. Berikut cara-caranya :

  • Pada menu Shortcode, klik Settings.

Wordpress shortcode Settings

  • Pindah ke tab Costum CSS
  • Untuk melihat setting CSS default dari plugin, silahkan klik Content-shortcodes.css
  • Pada contoh kali ini, saya akan mengedit tampilan Dropcap.
  • Scrool halaman kebawah sampat menemukan label   /*   Dropcap  */
  • Tinggal copy style yang mau diubah. Contoh :  .su-dropcap-style-default
  • Kembali ke Costum CSS, Masukkan kode CSS baru yang kamu mau. Contoh lihat kode dibawah.

.su-dropcap-style-default {background: linear-gradient(to bottom, rgb(53, 120, 237) 0%, rgb(24, 80, 177) 100%);}

  • Klik tombol Save Changes.
  • Selesai.

Demikianlah Beberapa tips Mempercantik Postingan WordPress dengan Shortcode. Semoga Bermanfaat.

Terimakasih.

Tinggalkan Komentar

Your email address will not be published.