Panduan Lengkap: Cara Menambahkan Shortcode di WordPress

Diterbitkan: 2017-11-07

Shortcode adalah kode khusus WordPress yang memungkinkan Anda melakukan hal-hal bagus dengan sedikit usaha. Kode pendek dapat menyematkan file atau membuat objek yang biasanya membutuhkan banyak baris kode yang rumit. Secara sederhana, Shortcode adalah jalan pintas ke suatu fungsi.

Dengan kata lain, Shortcode adalah bentuk ringkas dari potongan kode yang lebih besar dan seringkali kompleks. Ini memungkinkan Anda untuk memasukkan skrip ke bagian konten halaman Anda, yang nantinya akan dieksekusi oleh WordPress.

Shortcode diperkenalkan di WordPress 2.5 dan sejak itu telah banyak berkontribusi dalam melakukan tugas yang kompleks dengan cara yang jauh lebih mudah. Penggunaan kode pendek menghemat waktu dan memungkinkan kita melakukan berbagai hal dengan cara yang lebih sederhana yang membutuhkan banyak pengetahuan teknis dan pengkodean.

Isi

  • 1 Manfaat Kode Pendek
  • 2 Cara menggunakan Shortcode di WordPress
    • 2.1 Video Shortcode
    • 2.2 Audio
    • 2.3 Gambar dan Dokumen
    • 2.4 Lain-lain
  • 3 Shortcode Plugin Ultimate
  • 4 Fitur Utama dari Shortcodes Ultimate Plugin
  • 5 Memasang Shortcode Ultimate
  • 6 Menjelajahi Shortcode Ultimate
  • 7 Membuat Shortcode menggunakan Shortcodes Ultimate Plugin
  • 8 Kode pendek untuk membagi konten halaman kami menjadi beberapa kolom
    • 8.1 Posting Terkait

Manfaat Shortcode

  • Meningkatkan Efisiensi dan menghemat waktu – Kode pendek mencegah redundansi. Ini membantu pengguna untuk mengimplementasikan fungsionalitas tertentu dengan menulis kode sekali dan menggunakan kembali kode pendek kapan pun fungsionalitas itu diperlukan.
  • Selektif Kustom Markup – Tergantung pada tema Anda, situs WordPress Anda akan memiliki tata letak dan desain tertentu. Tetapi bagaimana jika Anda ingin beberapa posting, halaman, atau bagian dalam halaman Anda terlihat berbeda dari template gaya umum, Shortcode membuat tugas ini mudah dicapai.
  • Akses ke Area Konten yang Tidak Dapat Dijangkau – Tugas tertentu seperti memasukkan widget teks ke header Anda, atau menambahkan konten khusus ke sidebar Anda tidaklah mudah. Tetapi dengan kode pendek, tugas seperti itu dapat dilakukan dengan sangat mudah dan fleksibel.
  • Bantuan Buat tata letak yang lebih baik dan unik – Semua situs WordPress dibangun di atas tata letak standar yang terdiri dari header, footer, sidebar, dan bagian konten utama. Kode pendek memungkinkan kami untuk menyimpang dari tata letak standar dan membuat tata letak yang berbeda untuk situs Anda, yang terdiri dari elemen atau komponen Anda sendiri.

Cara menggunakan Shortcode di WordPress

Untuk menggunakan kode pendek, cukup masukkan ke halaman atau posting WordPress.

Shortcode terlihat seperti ini – [Shortcode-name],

Dengan asumsi Kode Pendek seperti itu sudah ditentukan, ketika digunakan di situs web menampilkan daftar posting terbaru penulis di mana saja di dalam situs.

Berikut adalah contoh lain dari sintaks kode pendek, menggunakan objek kode pendek hipotetis, "shortcode_ex".

[shortcode_ex] Di sinilah konten Anda muncul[/shortcode_ex]

WordPress hadir dengan shortcode berikut secara default:

Video Shortcode

  • [dailymotion] menyematkan video DailyMotion.
  • [hulu] menyematkan video Hulu.
  • [ted] menyematkan video TED Talks.
  • [vimeo] menyematkan video Vimeo
  • [youtube] menyematkan video YouTube.

audio

  • [audio] menampilkan file audio yang diunggah sebagai pemutar audio
  • [spotify] menyematkan musik dari Spotify.

Gambar dan Dokumen

  • menyisipkan galeri gambar ke dalam posting atau halaman.
  • [instagram] menyematkan gambar dari Instagram.
  • [slideshare] menyematkan tayangan slide dari Slideshare.net.
  • [slideshow] menyematkan slideshow foto yang diunggah.
  • [googleapps] menyematkan dokumen dari Google Documents.

Aneka ragam

Kode pendek yang berguna untuk menambahkan indeks arsip blog, formulir kontak, jajak pendapat, dan banyak lagi.

  • [blog_subscription_form] menyematkan formulir berlangganan yang memungkinkan orang mendaftar untuk pembaruan email

Dalam posting hari ini kita akan membahas cara mudah menambahkan shortcode ke situs WordPress Anda menggunakan Shortcodes Ultimate Plugin. Jadi mari kita mulai.

Plugin Ultimate Shortcode

Plugin shortcode memungkinkan kita untuk membuat shortcode dengan mudah dan fleksibel, tanpa coding. Ini berisi satu set kode pendek yang telah ditentukan yang dapat Anda salin dan tempel di halaman/posting Anda. Ada banyak plugin shortcode yang tersedia di pasaran. Pada artikel ini, kita akan fokus pada plugin Shortcodes Ultimate oleh Vladimir Anokhin.

Panduan Plugin Utama Shortcode

Shortcodes Ultimate adalah plugin WordPress populer yang dapat digunakan untuk membuat tab, tombol, kotak, video responsif, dan banyak lagi. Muncul dengan 50+ kode pendek yang luar biasa, bersama dengan generator kode pendek untuk membuat kode pendek khusus.

Untuk menggunakan plugin, cukup instal dan klik tombol "Kode Pendek" di halaman/posting Anda. Itu dapat diintegrasikan dengan add-on premium untuk lebih meningkatkan fungsinya.

Plugin ini sangat populer di komunitas WordPress, terbukti dari fakta bahwa plugin ini memiliki lebih dari 700.000+ instalasi aktif dan hampir 4000 peringkat bintang 5.

Fitur Utama dari Shortcodes Ultimate Plugin

  • 50+ Kode Pendek yang terlihat profesional
  • Sepenuhnya responsif
  • Sorot teks, kotak tampilan, gambar, Google Maps, dll.
  • Editor CSS khusus
  • Penyisipan kode pendek 1-klik dengan pratinjau langsung
  • Dukungan RTL dan bekerja dengan baik dengan sumber multibahasa
  • API yang kuat

Menginstal Shortcode Ultimate

Memasang plugin itu mudah dan melibatkan beberapa langkah yang dijelaskan di bawah ini.

  • Masuk ke Dasbor Admin WordPress Anda.
  • Klik opsi Plugin di menu bilah sisi kiri
  • Klik tombol Tambah Baru dari Plugin
  • Sebuah jendela baru akan muncul, ketik " Shortcodes Ultimate " di menu pencarian di sudut kiri atas jendela dan tekan Enter.
  • Daftar plugin akan muncul. Dari sini, pilih plugin dan klik tombol Instal Sekarang.

Plugin Kode Pendek, Plugin Utama

Setelah instalasi selesai, klik tombol Activate

Plugin Kode Pendek, Plugin Utama

Setelah aktivasi, Anda akan diarahkan ke halaman Plugin Anda dan di sana Anda dapat menemukan plugin Shortcodes Ultimate bersama dengan yang lain. Itu saja, Anda sekarang siap untuk menggunakan plugin dan membuat kode pendek di situs WordPress Anda

Menjelajahi Shortcode Ultimate

Setelah menginstal Shortcodes Ultimate, menu Shortcodes akan muncul di dasbor Anda. Klik Menu Shortcode dan kemudian pada Contoh Menu. Ini akan memunculkan halaman Contoh. Halaman ini memiliki daftar pra-kompilasi dari Kode Pendek yang paling umum digunakan yang dapat Anda gunakan.

Plugin Kode Pendek, Plugin Utama

Akordeon, Spoiler, Gaya, dan Jangkar – Ini memungkinkan kita untuk menambahkan hal-hal seperti akordeon dan jangkar. Akordeon digunakan jika Anda ingin menyembunyikan beberapa konten di balik tanda "+" , yang meluas untuk mengungkapkan konten Anda, saat diklik. Ada juga beberapa gaya berbeda yang tersedia dan ikon yang dapat Anda tambahkan ke depan.

Plugin Kode Pendek, Plugin Utama

Tab & jangkar tab

Ini memungkinkan untuk menambahkan tab yang berbeda ke halaman Anda dengan beberapa opsi gaya.

Plugin Kode Pendek, Plugin Utama

Tata Letak Kolom

Kode pendek ini dapat digunakan untuk memecah konten halaman kita menjadi beberapa kolom.

Plugin Kode Pendek, Plugin Utama

Elemen Media

Tambahkan file media seperti YouTube, file video Vimeo ke postingan/halaman Anda menggunakan kode pendek ini.

Plugin Kode Pendek, Plugin Utama

animasi

Kode pendek ini memungkinkan kita untuk menambahkan animasi seperti teks terbang dari arah yang berbeda, warna yang berbeda, kolom animasi, tombol dan banyak lagi. Animasi menyempurnakan konten Anda dan berguna untuk menyoroti konten tertentu kepada pengguna Anda.

Plugin Kode Pendek, Plugin Utama

Selain shortcode dasar, ada juga beberapa shortcode lanjutan lainnya yang tersedia.

Membuat Shortcode menggunakan Shortcodes Ultimate Plugin

Setelah menginstal, kami dapat menemukan bahwa plugin ini hadir dengan 50+ Kode Pendek, dikategorikan pada gaya, penulisan konten, pembagian konten.

Untuk menambahkan kode pendek ke halaman Anda, buka dasbor admin Anda lalu klik Halaman lalu pilih halaman tempat Anda ingin menambahkan kode pendek.

Di layar editor pos, Anda sekarang akan melihat bahwa tombol baru telah ditambahkan ke menu editor, berjudul Sisipkan Kode Pendek.

Plugin Kode Pendek, Plugin Utama

Klik tombol ini dan Anda akan disajikan halaman berikut. Di sini Anda dapat memilih kode pendek yang sesuai tergantung pada kebutuhan Anda. Kode pendek juga dapat difilter berdasarkan Konten, Kotak, Media, Galeri, Data, dan

Plugin Kode Pendek, Plugin Utama

Setelah menentukan pilihan, Anda dapat menyesuaikan elemen tersebut untuk mengubah tampilannya atau cukup menyisipkannya apa adanya.

Sekarang klik tombol Insert Shortcode untuk memasukkannya ke halaman/postingan Anda.

Plugin Kode Pendek, Plugin Utama

Dan hanya itu, kode pendek Anda sekarang dimasukkan ke halaman/postingan Anda.

Seperti inilah tampilan tombolnya

Plugin Kode Pendek, Plugin Utama

Kode pendek untuk membagi konten halaman kami menjadi beberapa kolom

Buka dasbor Anda dan kemudian halaman. Buat halaman baru atau pilih yang sudah ada dan klik Sisipkan Kode Pendek seperti di atas.

Dalam contoh kita akan membagi konten menggunakan kolom. Kolom, namun berada di dalam baris. Jadi kita akan mulai dengan menambahkan kode pendek Baris dengan mengklik opsi "Baris".

Plugin Kode Pendek, Plugin Utama

Ini akan menampilkan dialog "Tambah Baris". Karena kami ingin membuat tata letak 3 kolom, kami tidak akan membuat perubahan apa pun dan mengklik Instal Kode Pendek

Plugin Kode Pendek, Plugin Utama

Kode pendek baris sekarang harus dimasukkan ke dalam posting Anda. Masukkan konten Anda di antara [su_row] dan [/su_row].

Plugin Kode Pendek, Plugin Utama

Sekarang Anda dapat memasukkan kode pendek Kolom di dalam kode pendek baris untuk membuat tata letak multi-kolom Anda.

Tempatkan kursor Anda pada kode pendek baris yang diminta dan Sekali lagi klik tombol Sisipkan Kode Pendek dan pilih Kolom dari opsi kode pendek.

Sesuaikan pengaturan Anda untuk menu opsi kode pendek Kolom Anda dan klik tombol Sisipkan Kode Pendek setelah Anda selesai.

Plugin Kode Pendek, Plugin Utama

Kode pendek sekarang akan ditampilkan di editor posting Anda.

Plugin Kode Pendek, Plugin Utama

Anda dapat menambahkan lebih banyak kolom dengan mengulangi langkah-langkah di atas atau hanya dengan menyalin-menempelkan kode pendek yang ada.

Plugin Kode Pendek, Plugin Utama

Terakhir isi ruang di antara kode pendek dengan konten Anda. Setelah selesai, klik tombol Perbarui/Publikasikan untuk menyelesaikan proses.

Outputnya akan muncul seperti ini tergantung pada jumlah kolom yang ditambahkan dan ukuran setiap kolom.

Plugin Kode Pendek, Plugin Utama