Cara Membuat Shortcode WordPress: Panduan Lengkap

Mengelola situs WordPress jadi lebih mudah dengan shortcode—solusi untuk menyisipkan fitur seperti formulir, galeri, atau widget tanpa kode rumit. Pelajari cara membuat, menggunakan, dan menyesuaikan shortcode WordPress untuk mempermudah alur kerja dan meningkatkan situs Anda.
Lihat pendapat ChatGPT Buka Editor Plugin Langsung
How to Create WordPress Shortcodes: A Complete Guide

Apa itu Shortcode di WordPress?

AShortcode WordPressShortcode adalah alat yang kuat dan mudah digunakan yang menyederhanakan pelaksanaan tugas-tugas kompleks di situs Anda. Ini adalah potongan kode kecil yang dikelilingi dalam tanda kurung siku, seperti

, yang menjalankan fungsi tertentu. Alih-alih menulis HTML, CSS, atau PHP yang panjang secara manual, shortcode memungkinkan Anda memicu fitur dengan cepat dan mudah.

Saat Anda memasukkan shortcode ke pos, halaman, atau widget, WordPress memprosesnya dan menggantinya dengan keluaran fungsi yang sesuai, seperti menampilkan galeri gambar, formulir, atau video yang disematkan.

Bagaimana widget Elfsight terintegrasi dengan shortcode WordPress?

shortcode. Anda dapat menentukan gambar mana yang ditampilkan dengan menggunakan atribut ids.

Tombol adalah bagian penting dari keterlibatan pengguna, baik itu untuk ajakan bertindak (CTA) maupun navigasi. Mari kita lihat contoh membuat shortcode Tombol WordPress.

[custom_button text="Sign Up" url="https://yourlink.com"] Pelajari cara membuat dan menggunakan shortcode di WordPress. Temukan contoh shortcode yang berguna, kustomisasi, dan cara menambahkan widget Elfsight ke situs Anda. Pelajari cara membuat dan menggunakan shortcode di WordPress. Temukan contoh shortcode yang berguna, kustomisasi, dan cara menambahkan widget Elfsight ke situs Anda.

Cara Mempermudah Alur Kerja Anda dengan Generator Shortcode WordPress

Mengelola situs WordPress jadi lebih mudah dengan shortcode—solusi untuk menyisipkan fitur seperti formulir, galeri, atau widget tanpa kode rumit. Pelajari cara membuat, menggunakan, dan menyesuaikan shortcode WordPress untuk mempermudah alur kerja dan meningkatkan situs Anda.
<img src="image.jpg" alt="Sample"/> Caption Text

Apakah ada generator shortcode untuk WordPress?

Contoh:

Efisiensi. Kerjakan tugas tingkat lanjut dengan kode minimal.

Plugin dan Alat Generator Shortcode WordPress yang Populer:

Sementara shortcode memudahkan penambahan konten dinamis ke situs Anda, ada beberapa praktik terbaik yang bisa membantu Anda mengoptimalkan penggunaannya. Berikut beberapa tips untuk memastikan Anda memanfaatkan shortcode seoptimal mungkin:

Ini akan menghasilkan tombol yang dapat diklik dengan teks “Learn More” yang mengarah ke URL yang disediakan.

Beberapa karakteristik utama shortcode meliputi:

Efisiensi. Kerjakan tugas tingkat lanjut dengan kode minimal.

Fleksibilitas. Tambahkan konten atau fitur di mana saja – baik di pos, halaman, maupun widget.

Ramah pemula. Tak perlu keahlian teknis. Siapa saja bisa menggunakan shortcode.

Dapat Digunakan Kembali. Setelah dibuat, shortcode dapat digunakan berulang kali di berbagai bagian situs Anda.

Manajemen Konten yang Bersih. Jaga pos dan halaman Anda tetap rapi dengan menghindari kode inline.

Misalnya, jika Anda ingin menambahkan galeri atau formulir kontak, cukup masukkan shortcode WordPress yang relevan, dan WordPress menanganinya di balik layar. Shortcode sangat berharga bagi pemula maupun pengembang berpengalaman, memperlancar pembuatan konten dan mengaktifkan fungsionalitas dinamis tanpa mengorbankan kemudahan penggunaan. Dengan shortcode, Anda bisa mengintegrasikan segala hal mulai dari tombol hingga widget kustom, sambil menjaga konten tetap rapi dan mudah dikelola.

Cara Membuat Shortcode di WordPress

Membuat shortcode di WordPress adalah cara yang sederhana namun ampuh untuk menambahkan fitur dinamis ke situs Anda. Baik untuk merampingkan konten maupun mengembangkan fungsionalitas kustom, shortcode memungkinkan Anda dengan mudah menyisipkan kode ke dalam pos dan halaman. Berikut langkah-langkah membuat shortcode WordPress dari nol.

Petunjuk Langkah-demi-Langkah untuk Membuat Shortcode Dasar

  1. Akses file functions.php tema Anda. Untuk memulai, buka dasbor WordPress Anda dan pergi ke Tampilan > Editor Tema. Buka berkas functions.php tema Anda. Di sinilah Anda akan menuliskan shortcode khusus Anda.
function hello_world_shortcode() {
    return 'Hello, World!';
}
  1. Tambahkan shortcode ke WordPress. Setelah mendefinisikan fungsi, gunakan fungsi add_shortcode() untuk mendaftarkan shortcode Anda. Ini memberi tahu WordPress teks apa yang harus dicari dalam konten Anda dan fungsi mana yang harus dipanggil:
add_shortcode('hello_world', 'hello_world_shortcode');

Sekarang, setiap kali Anda menyisipkan [hello_world] ke dalam postingan atau halaman, WordPress akan menggantinya dengan “Hello, World!”

  1. Uji shortcode Anda. Tambahkan shortcode [hello_world] ke pos atau halaman mana pun untuk memastikan ia berfungsi sebagaimana mestinya.

Contoh Shortcode WordPress: Tombol Dasar

Tombol adalah bagian penting dari keterlibatan pengguna, baik itu untuk ajakan bertindak (CTA) maupun navigasi. Mari kita lihat contoh membuat shortcode Tombol WordPress.

Cara membuat shortcode tombol:

  1. Tentukan HTML dan CSS Tombol. Di berkas functions.php tema Anda, tentukan sebuah fungsi yang menghasilkan HTML tombol. Anda bisa menyesuaikan gaya tombol dengan CSS inline atau menautkan ke stylesheet eksternal. Berikut contoh cara membuat tombol sederhana:
function custom_button_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'text' => 'Click Me',
            'url' => '#',
        ), $atts
    );

    return '<a href="' . esc_url($atts['url']) . '" class="custom-button" style="padding: 10px 20px; background-color: #0073aa; color: white; text-decoration: none;">' . esc_html($atts['text']) . '</a>';
}

add_shortcode('custom_button', 'custom_button_shortcode');
  1. Tambahkan shortcode ke WordPress. Dalam contoh ini, kami membuat tombol yang mengambil dua parameter: teks dan URL. Anda sekarang bisa menambahkan shortcode [custom_button] di mana saja dalam konten Anda, seperti ini:

[custom_button text=”Learn More” url=”https://example.com”]

Ini akan menghasilkan tombol yang dapat diklik dengan teks “Learn More” yang mengarah ke URL yang disediakan.

  1. Integrasikan tombol ke dalam pos dan halaman. Anda bisa menggunakan contoh shortcode WordPress ini di pos, halaman, atau bahkan di dalam widget. Cukup masukkan shortcode [custom_button] di mana pun Anda memerlukan tombol, dan WordPress akan menghasilkan tombol bergaya di frontend.

Dengan membuat tombol kustom seperti ini, Anda dapat meningkatkan interaktivitas situs Anda dan memperbaiki pengalaman pengguna tanpa perlu mengubah halaman satu per satu setiap kali Anda membutuhkan tombol baru.

Cara Menambahkan Shortcode ke Halaman dan Post WordPress

Setelah Anda membuat shortcode, langkah berikutnya adalah menanamkannya ke dalam konten WordPress Anda. Shortcode dapat disisipkan ke postingan, halaman, dan bahkan tipe pos kustom menggunakan editor WordPress, memberi Anda fleksibilitas dalam bagaimana Anda mengelola konten. Ada beberapa cara berbeda untuk menambahkan shortcode ke WordPress. Mari kita lihat mereka dan jelajahi bagaimana mereka berinteraksi dengan berbagai blok dan tema.

Metode 1: Menggunakan Editor Klasik WordPress

Jika Anda menggunakan Editor Klasik, menyematkan shortcode cukup dengan mengetikkannya langsung di editor. Begini caranya:

  1. Buka postingan atau halaman tempat Anda ingin memasukkan shortcode.
  2. Di editor, cukup ketik shortcode antara tanda kurung siku. Misalnya, jika Anda menambahkan shortcode tombol, ketik
[custom_button text="Buy Now" url="https://yourlink.com"]
  1. Perbarui atau publikasikan halaman, dan WordPress akan menggantikan shortcode dengan fungsi terkait saat halaman dimuat.

Metode 2: Menggunakan Editor Blok (Gutenberg)

Dengan editor blok Gutenberg, menambahkan shortcode juga sangat mudah, berkat Blok Shortcode. Inilah cara menambahkan shortcode ke WordPress menggunakan editor blok:

  1. Buka pos atau halaman di editor blok.
  2. Klik tombol tambah (+) untuk menambahkan blok baru, lalu cari “Shortcode.”
  3. Pilih blok shortcode, dan di bidang teks, tempel atau ketik shortcode Anda. Contoh, …
[custom_button text="Sign Up" url="https://yourlink.com"]
  1. Simpan atau perbarui konten Anda, dan blok akan menampilkan output shortcode Anda saat dilihat di antarmuka depan.

Metode 3: Menambahkan Shortcode dengan Page Builder

Banyak page builder WordPress populer, seperti Elementor atau WPBakery, memudahkan Anda menyisipkan shortcode langsung ke bagian desain kustom. Biasanya para builder ini memiliki widget shortcode khusus tempat Anda bisa menempelkan shortcode dan melihat pratinjau hasilnya langsung di dalam builder.

Terlepas dari editor atau builder mana pun yang Anda gunakan, memahami bagaimana menggunakan shortcode di WordPress akan memudahkan Anda menambahkan fungsionalitas dengan mudah, bahkan saat Anda beralih antar tema dan tata letak yang berbeda.

Cara Menggunakan Shortcode WordPress di Widget

Shortcode tidak hanya terbatas pada pos dan halaman – mereka juga bisa digunakan di area widget seperti sidebar, footer, dan header untuk menambahkan konten dinamis di seluruh situs WordPress Anda. Berikut cara memanfaatkan shortcode di WordPress pada area widget secara efektif.

Cara menambahkan shortcodes di widget:

  1. Pergi ke pengaturan widget Anda. Di dashboard WordPress Anda, buka Tampilan > Widget. Ini akan membuka area widget yang tersedia untuk tema Anda (biasanya sidebar atau footer).
  2. Tambahkan widget teks: Setelah berada di bagian Widget, seret dan lepaskan widget Teks ke area widget tempat Anda ingin menambahkan shortcode Anda. Widget Teks mendukung HTML dan shortcode, membuatnya ideal untuk tujuan ini.
  3. Masukkan shortcode: Di area teks widget, cukup tempel shortcode Anda. Misalnya, untuk menambahkan tombol kustom ke sidebar, Anda bisa menggunakan:
[custom_button text="Contact Us" url="https://yourlink.com"]
  1. Simpan dan Pratinjau: Setelah menyisipkan shortcode, simpan pengaturan widget dan pratinjau situs Anda. Shortcode akan dieksekusi, dan tombol (atau fungsionalitas lainnya) akan muncul di area widget.

Tingkatkan Widget Anda dengan Shortcode:

Shortcode adalah cara yang sangat baik untuk meningkatkan area widget situs Anda tanpa mengedit kode tema secara manual Anda bisa menambahkan apa saja mulai dari formulir kontak hingga galeri, slider, atau tombol khusus Fleksibilitas ini memungkinkan Anda menyesuaikan fungsionalitas situs dengan cepat sesuai kebutuhan, bahkan di sidebar atau footer.

Baik Anda sedang bekerja dengan tema maupun pembuat halaman, menguasai cara menggunakan shortcode di WordPress widgets akan memungkinkan situs Anda menjadi lebih dinamis dan ramah pengguna.

Daftar Shortcode WordPress: Shortcode Berguna untuk Meningkatkan Situs Anda

WordPress hadir dengan seperangkat shortcode bawaan yang dirancang untuk menyederhanakan proses menambahkan konten dinamis ke situs Anda. Shortcode pra-bangun ini memungkinkan Anda menyematkan multimedia, galeri, dan lainnya tanpa menyentuh satu baris kode. Berikut daftar shortcode WordPress yang telah kami kurasi untuk membantu meningkatkan fungsionalitas situs Anda dengan mudah.

Shortcode WordPress yang umum digunakan:

Galeri.Tampilkan galeri gambar dengan mudah di halaman mana pun atau pos dengan menggunakan

shortcode. Anda dapat menentukan gambar mana yang ditampilkan dengan menggunakan atribut ids.

Contoh:

Audio. Embedding audio files is just as easy. Use the shortcode to include music or podcasts in your posts.

Contoh:


https://www.youtube.com/watch?v=abc123

<img src="image.jpg" alt="Sample"/> Caption Text

Ini hanyalah sebagian contoh shortcode WordPress pra-buat yang tersedia di WordPress. Shortcode ini mempermudah penambahan elemen multimedia dan fitur lain secara cepat dan intuitif, bahkan bagi pengguna tanpa pengetahuan pemrograman. Dengan menggunakan shortcode ini, Anda bisa secara signifikan meningkatkan pengalaman pengguna di situs Anda sambil menjaga alur kerja yang efisien.

Cara Mempermudah Alur Kerja Anda dengan Generator Shortcode WordPress

Bagi pengguna yang mungkin tidak nyaman menulis atau menyesuaikan kode, generator shortcode WordPress bisa sangat membantu. Alat-alat ini menyederhanakan proses dengan secara otomatis membuat shortcode berdasarkan preferensi Anda, menghemat waktu dan mengurangi kemungkinan kesalahan. Baik Anda menambahkan tombol kustom, formulir, atau galeri, generator ini menawarkan antarmuka yang ramah pengguna untuk membantu menyelesaikan pekerjaan dengan cepat.

Apa itu Generator Shortcode WordPress?

Pembuat shortcode WordPress adalah alat atau plugin yang membantu pengguna menghasilkan shortcode tanpa perlu mengetahui kode dasarnya. Alat-alat ini biasanya menyediakan formulir sederhana di mana pengguna dapat memilih opsi yang diinginkan – seperti teks, URL, atau gaya – lalu menghasilkan shortcode untuk dimasukkan ke postingan, halaman, atau widget. Ini membuatnya sangat mudah bagi pemula untuk menambahkan fitur canggih ke situs mereka tanpa harus menulis shortcode secara manual.

Plugin dan Alat Generator Shortcode WordPress yang Populer:

Menggunakan generator shortcode WordPress adalah cara yang sangat baik untuk mempercepat alur kerja Anda, terutama jika Anda mengelola beberapa situs atau sering memperbarui konten. Dengan memanfaatkan alat ini, Anda bisa memastikan situs Anda tetap dinamis dan fungsional, meskipun Anda tidak memiliki latar belakang pemrograman.

Praktik Terbaik dan Tips Menggunakan Shortcode WordPress

Sementara shortcode memudahkan penambahan konten dinamis ke situs Anda, ada beberapa praktik terbaik yang bisa membantu Anda mengoptimalkan penggunaannya. Berikut beberapa tips untuk memastikan Anda memanfaatkan shortcode seoptimal mungkin:

Beberapa plugin Elfsight populer untuk WordPress meliputi:

  • Plugin Instagram Feed: Tampilkan postingan Instagram terbaru Anda dalam format yang menarik secara visual. Integrasi shortcode memungkinkan Anda menempatkan konten dinamis di mana saja di situs Anda, apakah itu di sidebar, footer, atau di dalam sebuah posting.
  • Plugin Ulasan Google: Segera bangun kepercayaan pelanggan baru dengan menampilkan ulasan Google secara real-time. Cukup tambahkan shortcode yang disediakan plugin untuk menonjolkan ulasan di area widget mana pun atau blok konten.
  • Plugin Form Kontak: Dengan widget Form Kontak Elfsight, Anda bisa dengan mudah mengintegrasikan formulir ke situs Anda menggunakan shortcode. Ia dilengkapi template yang dapat disesuaikan, memungkinkan Anda membuat formulir yang sesuai dengan desain situs Anda.
  • Plugin Obrolan WhatsApp mempermudah komunikasi dengan menambahkan tombol obrolan WhatsApp ke situs Anda. Fitur ini memungkinkan pengunjung Anda menghubungi Anda langsung via WhatsApp, meningkatkan dukungan pelanggan dengan platform pesan yang familiar dan praktis.
  • Plugin Kalender Acara menyediakan cara yang terstruktur untuk menampilkan acara mendatang di situs Anda Dengan shortcode Anda bisa dengan cepat menambahkan kalender dinamis yang mencakup rincian acara tanggal dan opsi RSVP, menjadikannya pilihan tepat bagi bisnis dan organisasi yang menyelenggarakan acara secara rutin.

Dengan mengikuti panduan ini dan menggunakan alat kuat seperti plugin Elfsight, Anda dapat memperlancar alur kerja, mengurangi coding manual, dan menambahkan fitur dengan tampilan profesional ke situs Anda hanya dalam beberapa klik.

Kesimpulan

Shortcode WordPress adalah alat yang sangat berharga untuk menambahkan fitur dinamis ke situs Anda tanpa pengetahuan pemrograman. Baik Anda menyematkan galeri, membuat tombol kustom, maupun mengintegrasikan widget Elfsight, shortcode menawarkan solusi yang fleksibel dan efisien untuk manajemen situs. Dengan menguasai shortcode, Anda dapat memperluas fungsionalitas situs Anda dan meningkatkan pengalaman pengguna dengan upaya minimal.

Bagi Anda yang ingin membawa situs WordPress ke level berikutnya, shortcode kustom menawarkan kemungkinan tanpa batas, terutama jika dipadukan dengan alat seperti plugin Elfsight. Dengan memudahkan proses menambahkan formulir, umpan media sosial, ulasan, dan lainnya, Anda akan selalu memiliki kendali atas konten dan fungsionalitas situs Anda.

FAQ





Bagaimana cara membuat shortcode kustom di WordPress?





Bisakah saya menambahkan shortcode ke area widget di WordPress?





Bagaimana widget Elfsight terintegrasi dengan shortcode WordPress?





Apakah ada generator shortcode untuk WordPress?





Artikel oleh
Manajer Konten
Panduan praktis, trik situs, dan widget berguna — itulah yang saya tulis. Saya Aisylu, berbagi cara mudah membuat situs Anda lebih pintar dengan Elfsight.