Semua Tentang Shortcode WordPress

Jika Anda pernah bekerja dengan tema WordPress maka Anda mungkin menemukan kode pendek WordPress… sesuatu yang terlihat seperti ini:

 [button type="twitter"]

Apakah Anda memahami apa itu kode pendek dan bagaimana cara kerjanya adalah masalah lain! Penulis tema secara ekstensif menggunakan kode pendek tetapi kadang-kadang hanya 'berasumsi' bahwa pengguna akan tahu apa itu dan bagaimana cara kerjanya padahal sebenarnya mereka bisa sangat membingungkan!

Kabar baiknya adalah bahwa kode pendek mudah dipahami dan digunakan. Pada artikel ini kita akan melihat shortcode untuk mengetahui bagaimana Anda dapat memanfaatkannya sebaik mungkin sebelum melihat bagaimana Anda dapat membuat shortcode Anda sendiri!

Ayo masuk!

Apa itu Shortcode WordPress?

WordPress memperkenalkan shortcode jauh kembali ketika mereka merilis v2.5 dari WordPress (itu pada tahun 2008) dan sejak itu mereka telah digunakan secara luas di sebagian besar tema dan plugin.

Jadi, apa sebenarnya shortcode itu? Singkatnya (maaf, tidak tahan), shortcode adalah sedikit kode yang dapat digunakan hampir di mana saja di situs web Anda untuk menyisipkan fitur atau fungsi. Jadi, daripada harus susah payah membuat kode, ikon media sosial menggunakan HTML, Anda dapat menyisipkan kode pendek yang 'memberi tahu' WordPress untuk menyisipkan ikon media sosial di mana pun Anda memasukkan kode pendek tertentu. Gaya dan fungsi (dalam contoh ini) ikon media sosial telah ditentukan sebelumnya oleh pengembang tema sehingga semua pekerjaan berat dari perspektif pemrograman telah dilakukan untuk Anda.

Jadi, mungkin Anda ingin meletakkan ikon Facebook di bagian bawah posting blog. Alih-alih menyisipkan ini secara manual, menambahkan hyperlink, memperbarui ukuran ikon, dan sebagainya, yang mungkin perlu Anda lakukan hanyalah memasukkan kode pendek yang telah 'diprogram sebelumnya' oleh pembuat tema yang dapat terlihat seperti ini:

 social icon="facebook"]

Penting untuk menegaskan kembali pada titik ini bahwa Anda tidak bisa hanya menambahkan kode pendek dari rancangan Anda sendiri dan mengharapkannya berfungsi. Mereka memang perlu ditambahkan sebagai opsi untuk tema Anda. Biasanya, tema dilengkapi dengan banyak kode pendek yang dibuat sebelumnya dan instruksi tema akan menyertakan daftar kode pendek yang tersedia untuk Anda pilih.

Kode pendek adalah jalan pintas yang bagus untuk non-pengembang untuk menampilkan banyak jenis konten tanpa menulis kode dan alat yang juga dapat menghemat waktu bagi pengembang.

Apa yang Dapat Anda Lakukan Dengan Shortcode WordPress?

Kode pendek digunakan untuk menyisipkan berbagai konten mulai dari tombol ajakan bertindak (CTA), kotak iklan dinamis, formulir kontak, galeri gambar, penggeser, dan banyak lagi selain… tetapi, seperti yang disebutkan di atas, opsi kode pendek apa yang tersedia untuk Anda akan tergantung pada tema dan plugin yang Anda gunakan.

Contoh Kode Pendek menggunakan Plugin Formulir Kontak 7

Bukan hanya tema yang menggunakan kode pendek. Salah satu plugin Formulir Kontak paling populer yang tersedia saat ini, Formulir Kontak 7, menggunakan kode pendek untuk memungkinkan pengguna dengan cepat dan mudah menyematkan formulir kontak di lokasi pilihan mereka.

Untuk melakukan ini, setelah Anda menginstal Formulir Kontak 7, yang perlu Anda lakukan untuk menambahkan formulir ke halaman atau posting di situs web Anda adalah sebagai berikut.

Langkah pertama:

Buka menu Kontak > Formulir Kontak dan buat formulir baru atau gunakan formulir yang sudah ada yang disertakan dengan plugin.

Salin kode pendek [contact-form-7 title="Contact form 1"] yang sesuai dengan formulir.

Langkah Kedua:

Tempelkan kode pendek di lokasi tempat Anda ingin formulir muncul seperti yang ditunjukkan di bawah ini:

Simpan halaman dan Anda akan melihat ini:

Dan itu saja! Anda baru saja berhasil menggunakan kode pendek untuk menyematkan formulir kontak di situs web Anda. Seperti yang Anda lihat, kode pendek sangat mudah digunakan dan dapat mempercepat tugas yang seharusnya rumit dan memakan waktu.

Menggunakan Kode Pendek WordPress Default

Meskipun sebagian besar kode pendek yang mungkin akan Anda gunakan akan diperkenalkan sebagai hasil dari pemasangan tema atau plugin. Namun WordPress sendiri memang memiliki beberapa shortcode 'default' yang dapat Anda gunakan. Ini termasuk:

• audio
• Keterangan
• Menanamkan
• Galeri
• Daftar putar
• Video

Kode pendek ini dapat digunakan di seluruh situs Anda untuk menambahkan berbagai konten, misalnya, pemutar audio. Pada gambar di bawah ini kami menunjukkan ini digunakan dalam widget Footer.

Untuk mengetahui cara menggunakan kode pendek ini secara lebih rinci, lihat artikel dukungan WordPress tentang ini.

Jadi, apa yang Anda lakukan ketika WordPress atau tema/plugin yang Anda gunakan tidak menyediakan kode pendek yang Anda butuhkan untuk tujuan spesifik Anda? Mudah… buat sendiri!

Buat Kode Pendek WordPress Anda Sendiri

WordPress memiliki API Kode Pendek yang dapat dimanfaatkan untuk mengembangkan kode pendek Anda sendiri dengan relatif mudah. Mari kita jalankan langkah-langkah dasar yang perlu Anda ambil untuk membuat kode pendek Anda sendiri sekarang.

Langkah pertama:

Dalam contoh ini kita akan membuat tombol CTA (Call to Action) yang dapat diklik pembaca untuk diarahkan ke Formulir Kontak.

Untuk membantu menjaga semuanya tetap teratur, kami sarankan Anda menyimpan semua kode pendek Anda di file terpisah (daripada menambahkan kode ke file yang ada). Untuk melakukan ini, buat file kosong baru di bawah folder yang sama dengan file functions.php tema Anda dan beri nama seperti my-shortcodes.php . Setelah ini, sertakan file ini ke file functions.php Anda seperti ini:

 include('my-shortcodes.php');

Sementara, seperti yang baru saja kami katakan, kami sarankan untuk membuat kode pendek Anda dalam file terpisah, untuk keperluan artikel ini kami akan melanjutkan dan menambahkan kode baru kami langsung ke file functions.php kami untuk membantu menjaga contoh sejelas mungkin.

Kami akan menggunakan fungsi add_shortcode yang diperkenalkan di wp-includes/shortcodes.php . Fungsi ini membutuhkan dua parameter, tag kode pendek dan fungsi panggilan balik.

 add_shortcode( string $tag, callable $callback )

Langkah Kedua:

Berikut adalah potongan kode yang dapat Anda masukkan ke dalam file functions.php Anda:

 add_shortcode( 'my_cta_button', 'my_cta_function' ); function my_cta_function() { return '<span class="cta_button"><a href="THE_CONTACT_FORM_URL">Let us know you are interested</a></span>'; }

Perhatikan bahwa nama tag dan fungsi hanya menyertakan huruf kecil dan garis bawah.

Jangan lupa untuk mengganti 'THE_CONTACT_FORM_URL' dengan URL formulir kontak yang ingin Anda alihkan pengguna.

Selain itu, Anda juga dapat menggunakan kode CSS ini di file style.css Anda untuk membuat tombol terlihat lebih menarik secara visual:

 .cta_button a { color: white; text-decoration: none; } .cta_button { text-align: center; color: #fff !important; text-transform: uppercase; text-decoration: none; background: #ed3330; padding: 20px; border-radius: 5px; display: inline-block; border: none; transition: all 0.4s ease 0s; } .cta_button:hover { background: #434343; letter-spacing: 1px; -webkit-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57); -moz-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57); box-shadow: 5px 40px -10px rgba(0,0,0,0.57); transition: all 0.4s ease 0s; }

Langkah ketiga:

Menampilkan kode pendek Anda di konten situs web dilakukan seperti yang Anda lakukan untuk kode pendek lainnya. Dalam contoh ini kode pendek kita adalah [my_cta_button] . Tambahkan ini ke Postingan atau Halaman dan Anda akan melihat sesuatu seperti ini saat Anda melihat halaman:

Contoh ini menampilkan konten yang telah ditentukan sebelumnya dalam kode PHP yang kami sediakan. Mari kita lihat bagaimana Anda dapat mengizinkan pengguna admin untuk menyesuaikan output kode pendek jika diperlukan.

Kode Pendek yang Menerima Atribut Pengguna

Untuk membuat kode pendek yang memiliki atribut yang dapat diedit pengguna, Anda harus menentukan larik atribut yang ingin Anda izinkan untuk diubah pengguna di dalam fungsi panggilan balik Anda. Misalnya, Anda mungkin menginginkan kemampuan untuk mengubah judul default dan url tombol.

 add_shortcode( 'my_cta_button', 'my_cta_function' ); function my_cta_function( $atts ) { $params = shortcode_atts( array( 'title' => 'Let us know you are interested', 'url' => 'THE_CONTACT_FORM_URL' ), $atts ); return '<span class="cta_button"><a href="' . $params['url'] .'">' . $params['title'] .'</a></span>'; }

Dalam kode di atas kami menggunakan fungsi shortcode_atts untuk menggabungkan atribut yang ditentukan pengguna dengan atribut yang diketahui. Dengan cara ini Anda harus membuat fungsi kode pendek yang berbeda untuk setiap tombol CTA yang Anda perlukan, tetapi hanya satu yang mengarahkan ulang ke mana saja yang ditentukan pengguna setiap saat.

Penggunaan kode ini harus ditentukan seperti ini: [my_cta_button title='My Custom Title' url='MY_URL']

Tambahkan Kode Pendek dalam File Template

Dari sudut pandang pengembang, ada juga cara cepat untuk memasukkan kode pendek secara paksa ke posisi yang telah ditentukan sebelumnya di situs web Anda dengan memanggilnya di file template yang sesuai. Misalnya, jika kita ingin tombol CTA ditampilkan di bagian bawah setiap Post atau Halaman, kita dapat mengedit template tunggal dan menggunakan fungsi do_shortcode . Dalam tema Twenty Twenty, kami mengedit file singular.php dan memasukkan baris ini di bawah penutup wadah div utama:

 <?php echo do_shortcode('[my_cta_button]'); ?>

Hasilnya akan ditampilkan di bawah konten posting dan sebelum widget footer.

Kesimpulan

Sebelum kita menyelesaikan artikel ini, ingatlah bahwa jika Anda menggunakan kode pendek yang disediakan oleh tema atau plugin Anda dan kemudian Anda menonaktifkan tema/plugin itu, maka kode pendek tersebut akan berhenti berfungsi (Anda hanya akan dibiarkan dengan braket kode pendek yang ditampilkan di ujung depan situs web Anda).

Dengan satu peringatan kecil itu, kode pendek adalah fitur yang sangat membantu dalam hal membangun situs web. Mereka banyak digunakan di WordPress dan, jika Anda belum pernah menggunakannya, maka mungkin sekarang saatnya untuk memberikan tampilan lain pada shortcode!