Apa itu Shortcode WordPress? Panduan Langkah demi Langkah Komprehensif

Ingin membuat postingan dan halaman WordPress Anda lebih interaktif dan menarik secara visual? Kode Pendek WordPress ada di sini untuk membuat hidup Anda lebih mudah. Cuplikan kode praktis ini memungkinkan Anda untuk menambahkan berbagai fungsi dan elemen desain tanpa memerlukan keterampilan pengkodean tingkat lanjut.

Dalam posting blog ini, saya akan membahas semua yang perlu Anda ketahui tentang shortcode WordPress. Pertama, kita akan mulai dengan menjelajahi shortcode default WordPress dan cara menambahkannya. Selanjutnya, kita akan mempelajari cara menggunakan shortcode di berbagai bagian situs web Anda, termasuk postingan, halaman, widget, dan bahkan file tema.

Selain itu, saya akan memandu Anda membuat shortcode kustom Anda sendiri di WordPress, memungkinkan Anda menyesuaikan desain dan fungsionalitas situs web sesuai kebutuhan Anda. Terakhir, kami akan membandingkan kode pendek dengan blok Gutenberg, cara populer lainnya untuk menambahkan elemen khusus ke situs web Anda.

Jadi, mari selami!

Shortcode WordPress: Gambaran Umum

Kode pendek WordPress adalah fitur yang kuat dan serbaguna yang memungkinkan Anda menambahkan konten dan fungsionalitas dinamis ke situs web Anda tanpa memerlukan keterampilan pengkodean apa pun. Kode pendek pada dasarnya adalah cuplikan kode kecil yang dapat Anda sisipkan ke dalam posting, halaman, widget, atau file tema untuk menampilkan fungsi atau konten tertentu.

Menggunakan kode pendek sangat meningkatkan pengalaman pengguna dengan menyediakan fitur yang mudah digunakan seperti tombol, formulir, galeri, dan banyak lagi. Selain itu, mereka juga dapat meningkatkan SEO situs web Anda dengan membuat konten Anda lebih interaktif dan menarik bagi pengunjung Anda.

Kode Pendek WordPress: Pro & Kontra

Sekarang setelah Anda memiliki ide tentang kode pendek WordPress, mari kita cepat membahas pro dan kontranya sebelum masuk ke bagian bagaimana caranya.

Kelebihan dari Shortcode WordPress

• Hemat waktu : Mereka membantu Anda menambahkan fungsionalitas kompleks tanpa pengkodean manual.
• Dapat disesuaikan : Kode pendek dapat disesuaikan agar sesuai dengan kebutuhan spesifik.
• User-friendly : Mereka mudah digunakan dan dapat ditambahkan ke setiap posting atau halaman WordPress tanpa memerlukan keterampilan pengkodean lanjutan.
• Kompatibilitas : Mereka kompatibel dengan berbagai macam plugin dan tema.Jadi, dalam sebagian besar kasus, Anda bebas memilih tema atau plugin WordPress apa pun.

Kontra dari Kode Pendek WordPress

• Ketergantungan : Terlalu mengandalkan shortcode dapat menyebabkan masalah jika plugin atau tema tidak diperbarui.
• Masalah kompatibilitas : Beberapa shortcode mungkin tidak kompatibel dengan semua tema dan plugin WordPress.
• Kurva pembelajaran : Diperlukan pemahaman dasar tentang cara menggunakan dan menyesuaikan kode pendek.
• Keamanan : Kode pendek harus dibersihkan dan divalidasi dengan benar untuk menghindari kerentanan keamanan.

Kode pendek WordPress memberikan solusi mudah untuk meningkatkan fungsionalitas dan desain situs Anda.

Namun, penting untuk menggunakannya dengan bijaksana untuk menghindari masalah ketergantungan, masalah kompatibilitas, dan potensi kerentanan keamanan.

Mari pelajari lebih lanjut tentang shortcode default WordPress di judul berikutnya.

Kode Pendek WordPress Default

WordPress menyertakan enam shortcode bawaan bawaan yang memudahkan penambahan fungsionalitas ke halaman dan postingan Anda:

• [ audio]: Menambahkan file audio ke halaman atau postingan Anda.
• [ caption]: Menambahkan keterangan ke gambar atau video.
• [ embed]: Mengatur lebar dan tinggi item yang disematkan.
• [ galeri]: Buat galeri foto menggunakan gambar.
• [ video]: Menambahkan video ke halaman atau postingan Anda.
• [p laylist]: Menampilkan file audio atau video dalam sebuah postingan.

Daftar Beberapa Shortcode Berguna Dengan Fungsi (Tabel)

Di bawah ini adalah daftar beberapa shortcode yang berguna di WordPress beserta fungsinya:

Cara Menambahkan Shortcode WordPress (5 Metode Mudah)

Menambahkan kode pendek WordPress itu mudah dan dapat dilakukan dengan menggunakan lima metode berbeda. Metode ini termasuk menambahkan shortcode ke postingan atau halaman secara langsung, menggunakan widget teks, membuat plugin shortcode, menambahkan shortcode ke file functions.php tema Anda, dan menggunakan plugin shortcode builder.

Cara Menambahkan Kode Pendek di Posting & Halaman WordPress

Inilah cara Anda dapat dengan mudah menambahkan kode pendek di posting & halaman WordPress:

• Buka editor posting/halaman Anda dan cari “Shortcode .”

• Jika Anda menggunakan Gutenberg, cari shortcode di bagian blokir dan tambahkan ke halaman atau postingAnda.

• Rekatkan kode pendek di bidang masing-masing tempat Anda ingin menampilkannya.
• Saya telah menambahkan Kode Pendek Formulir WP untuk menambahkan formulir kontak.

• Pratinjau posting atau halaman Anda untuk memeriksa apakah kode pendek berfungsi.

• Anda dapat mengikuti langkah serupa untuk semua pembuat halaman. Misalnya, di Elementor, cari Shortcode di bagian Element dan drag & drop ke lipatan yang Anda inginkan.

Cara Menambahkan Shortcode di Widget WordPress

Berikut langkah-langkah untuk menambahkan shortcode WordPress di widget:

• BukaDashboard WordPress Anda dan arahkan ke Appearance > Widgets.
• Klik ikon “+ ” untuk menelusuri semua opsi widget yang tersedia dan mencari widget Shortcode.

• Tambahkan kode pendek Anda ke bidang dan Perbaruibagian widget Anda. Untuk tujuan tutorial ini, saya menambahkanshortcode WP Forms .

• Pratinjau situs Anda untuk memastikan kode pendek ditampilkan dengan benar di area widget.

Cara Menambahkan Kode Pendek di Editor Klasik WordPress

WordPress Classic Editor masih banyak digunakan untuk mengedit posting dan halaman di WordPress. Dan menambahkan shortcode di Classic Editor cukup mudah dan bisa dilakukan dengan mengikuti langkah-langkah mudah berikut ini:

• Buka Editor Klasik WordPress dengan menavigasi ke posting/halaman yang ingin Anda edit dan pilih "Editor Klasik " dari opsi pengeditan.
• Buat posting/halaman baru atau edit yang sudah adadi mana Anda inginmenambahkan kode pendek.
• Temukan area di mana Anda ingin menambahkan kode pendek cukup ketikkan di sana.

• Simpan perubahan yang Anda buat pada posting/halaman dan kemudian pratinjauuntuk melihat apakah kode pendek berfungsi dengan benar.

Cara Menambahkan Shortcode di File Tema WordPress

Berikut langkah-langkah untuk menambahkan shortcode di file tema WordPress:

• Cadangkan file Anda atau gunakan situs pementasan untuk menghindari kerusakan pada situs produksi Anda.

Misalnya, saya ingin menambahkan Kode Pendek untuk semua 404 halaman (ketika seseorang mencoba mengakses halaman yang tidak ada).

• BukaDasbor WordPress > Tampilan>Editor File Tema.

• Pilih bagian file tempat Anda ingin menambahkan kode pendek. Misalnya, 404.php untuk semua 404 halaman kesalahan.
• Rekatkan kode pendek di dalam file yang dipilih.Misalnya:

 <?php echo do_shortcode("[wpforms]"); ?> 

• Simpan perubahan dan pratinjau hasil keluaran.
• Inilah hasil keluaran yang akan Anda dapatkan ketika seseorang mencoba mengakses halaman yang tidak ada.

Cara Membuat Kode Pendek Kustom Anda Sendiri di WordPress

Membuat kode pendek khusus di WordPress bisa tampak seperti tugas yang menakutkan, karena biasanya melibatkan pembuatan plugin baru. Namun, dengan persiapan dan perawatan yang tepat, prosesnya dapat dipersingkat dan relatif tidak menimbulkan rasa sakit.

Saya akan merekomendasikan untuk membuat cadangan atau bekerja di situs pementasan untuk dengan mudah kembali ke versi sebelumnya jika terjadi kesalahan selama proses pembuatan kode pendek.

Buat Plugin Kustom

Berikut adalah langkah-langkah untuk membuat kode pendek khusus di WordPress:

• Buat plugin khusus untuk kode pendek Anda dengan mengakses server/situs Anda melalui Klien FTPseperti FileZilla.
• Arahkan kewp-content Folder > plugins > dan buat direktori baru.
• Beri nama direktori setelah plugin Anda, misalnya:subscribe-shortcode .

• Buka folder plugin Anda danbuat file PHP baru dengan nama pilihan Anda, seperti my-shortcode.php.

• Kliklihat/edit file PHP dan buka file lokal.
• Rekatkan kode tajuk plugin dan simpan dengan menekan " ctrl+s". Kode akan terlihat seperti berikut:

 <?php

/*

 * Nama Plugin: Berlangganan Shosrtcode

 * Plugin URI: https://cloudways.com/en/

 * Deskripsi: Plugin ini untuk tujuan pengujian.

 * Versi: 1.0.0

 * Membutuhkan setidaknya: 5.3

 * Membutuhkan PHP: 7.4

 * Penulis : Farhan Ayub

 * Penulis URI: https://profiles.wordpress.org/farhanayub/

 * Lisensi: GPL v2 atau lebih baru

 * URI Lisensi: https://www.gnu.org/licenses/gpl-2.0.html

 * Perbarui URI: https://cloudways.com/en/

 * Domain Teks: plugin-dasar-saya

 * Jalur Domain: / bahasa

 */

?>

• Saat Anda menyimpan perubahan, munculan"File telah berubah" akan muncul di alat FileZilla Anda.
• Pilih “Selesai mengedit dan hapus file lokal ” dan klik Ya.

• Setelah file diperbarui, bukaWordPress Dashboard > Installed Plugin dan Aktifkanplugin baru Anda.
• Detail plugin harus menampilkan bidang tajuk, seperti versi, nama pembuat, dll.

Buat Kode Pendek WordPress Kustom

Anda juga dapat membuat kode pendek WordPress khusus setelah mengaktifkan plugin Anda. Di bagian ini, saya akan membuat kode pendek yang memungkinkan pengguna berlangganan Saluran YouTube Cloudways.

Berikut adalah langkah-langkah untuk membuat kode pendek WordPress khusus:

• Buka file PHP Anda (dalam hal ini: my-shortcode.php) dan rekatkan kode berikut:

 add_shortcode( 'berlangganan', 'cloudways_link' );

fungsi cloudways_link(){

    kembalikan 'Berlangganan Cloudways <a href="https://www.youtube.com/@Cloudways/featured?sub_confirmation=1">Saluran YouTube</a>';

    }

add_action('init', 'cloudways_link'); 

• Mari gunakan kode pendek khusus di pos Anda. Karena kami menetapkan nama shortcode kami sebagai "subscribe ", beri nama dengan tanda kurung seperti ini: [subscribe].

• Perbarui perubahan dan periksakeluaran kode pendek .

• Jika output muncul di postingan, itu berarti shortcode kustom WordPress berfungsi.

Kode pendek vs. Blok Gutenberg

Kode pendek dan blok Gutenberg keduanya digunakan di WordPress untuk meningkatkan fungsionalitas situs Anda. Bagian ini akan membandingkan keduanya untuk menyoroti perbedaan utama.

Kode pendek:

• Mengizinkan memasukkan konten dinamis ke dalam halaman dan postingan WordPress
• Dibuat menggunakan tanda kurung siku dengan kata kunci atau fungsi di dalamnya
• Membutuhkan pengetahuan pengkodean dasar
• Dapat ditambahkan ke halaman atau posting apa pun di editor WordPress
• Dapat digunakan kembali di beberapa halaman atau posting

Blok Gutenberg:

• Memungkinkan pembuatan konten dinamis dengan antarmuka drag-and-drop
• Tawarkan lebih banyak opsi dan mudah digunakan daripada kode pendek
• Dapat membuat tata letak yang rumit dengan mudah
• Dapat diperpanjang dengan blok atau plugin khusus
• Membutuhkan lebih sedikit pengetahuan teknis daripada kode pendek

Kode pendek mungkin memerlukan pengetahuan pengkodean dasar dan menawarkan penyesuaian visual yang terbatas. Di sisi lain, Blok Gutenberg memberikan pendekatan yang lebih ramah pengguna dengan opsi tambahan untuk membuat konten dinamis.

Untuk menambahkan kode pendek menggunakan blok Gutenberg, cukup pilih opsi "Kode pendek" dan isi nama kode pendek di bidang yang ditentukan. Ini dapat dilakukan dengan mudah tanpa pengetahuan pengkodean apa pun, menjadikannya pilihan yang nyaman bagi pengguna yang lebih menyukai pendekatan visual untuk pembuatan konten.

Ringkasan

Kode pendek WordPress adalah alat canggih yang memungkinkan Anda membuat konten dinamis dengan mudah dan cepat. Apakah Anda seorang pemula atau pengguna berpengalaman, ada beberapa cara untuk menambahkannya ke situs WordPress Anda. Saya telah membahas 5 metode mudah di blog ini. Dengan hosting WordPress terkelola Cloudways, Anda dapat dengan mudah membuat dan mengelola kode pendek untuk situs web WordPress Anda.

Meskipun mereka mungkin memiliki beberapa keterbatasan, keuntungannya lebih besar daripada kerugiannya, terutama jika digabungkan dengan kemudahan penggunaan blok Gutenberg.

Jadi, apakah Anda ingin menampilkan tombol sederhana atau konten yang rumit, shortcode adalah cara yang bagus untuk menyempurnakan situs WordPress Anda.

Cobalah mereka dan lihat bagaimana mereka dapat membawa konten Anda ke level selanjutnya!

FAQ

T. Apakah WordPress memiliki shortcode bawaan?

Ya, WordPress hadir dengan 6 kode pendek bawaan yang tercantum di bawah ini:

• [ audio]
• [ keterangan]
• [ sematkan]
• [ galeri]
• [ video]
• [p daftar putar]

T. Di mana shortcode saya di WordPress?

Anda dapat menemukan shortcode plugin WordPress dengan memeriksa dokumentasi plugin di dashboard WordPress.

Q. Bagaimana cara menggunakan shortcode default di WordPress?

Anda dapat menggunakan shortcode default di WordPress dengan tiga cara: melalui blok Gutenberg, editor Klasik, atau dengan kode.

T. Apa kegunaan shortcode di WordPress?

Tujuan shortcode di WordPress adalah untuk menambahkan konten dan fungsi dinamis ke halaman dan posting Anda.