Petunjuk untuk menulis dan menggunakan Shortcode WordPress dasar
Kode pendek adalah fitur wordpress yang sangat bagus, membantu Anda menambahkan konten, fungsionalitas fleksibel ke posting, halaman, atau sidebar Anda. Banyak plugin dan tema menggunakan kode pendek untuk menampilkan format konten khusus seperti formulir kontak, galeri gambar, slide, dll.
Artikel ini akan memandu Anda untuk menulis shortcode sederhana langkah demi langkah.
Apa itu shortcode?
Kode pendek di WordPress didefinisikan sebagai baris kode pendek yang menjalankan fungsi tertentu dan mengembalikan konten dinamis sesuai dengan konteks posting. Kode pendek dapat digunakan dalam posting, halaman, dan bahkan widget sidebar. Contoh contoh shortcode terlihat seperti ini:
[vietrick_shortcode]Untuk mendapatkan pemahaman yang mendalam tentang shortcode, mari kita mulai dengan latar belakang shortcode di WordPress. WordPress menerapkan filter ke semua konten di postingan, halaman, dll. untuk memastikan tidak ada yang bisa memasukkan kode berbahaya ke dalam database. Ini berarti editor konten apa pun yang Anda gunakan di WordPress tidak akan dapat menjalankan kode PHP, dan Anda cukup menggunakan kode HTML.
Lalu suatu hari nanti, bagaimana jika Anda perlu menjalankan beberapa kode PHP singkat untuk menyesuaikan artikel? Shortcode lahir untuk memenuhi kebutuhan ini. Jalankan kode yang Anda inginkan di mana saja di halaman yang Anda inginkan.
Pada dasarnya, shortcode memungkinkan kita untuk menulis dan menjalankan kode sebagai sebuah fungsi, dan fungsi ini terdaftar di WordPress sebagai sebuah shortcode. Pengguna dapat dengan mudah menggunakan kode pendek di mana saja. Saat WordPress menemukan shortcode, itu akan mulai mengkompilasi dan menjalankan shortcode terdaftar.
Panduan Pengguna Kode Pendek
Petunjuk untuk memasukkan Shortcode ke Posting/Halaman
Untuk memasukkan kode pendek ke dalam posting atau halaman, Anda melanjutkan untuk mengedit Posting/Halaman yang diinginkan. Kemudian di editor Gutenberg, Anda memilih blok untuk ditambahkan, temukan, dan sisipkan blok Shortcode
Setelah mengklik blok Shortcode, Anda hanya perlu memasukkan nama shortcode yang akan digunakan. Nama kode pendek dapat dideklarasikan oleh plugin yang Anda instal seperti Formulir Kontak 7 untuk memasukkan formulir kontak, Tombol Panggilan WP untuk menyisipkan tombol panggil… atau Anda juga dapat menulis kode pendek, yang dirinci di bagian berikut.
Masukkan kode pendek di Widget Sidebar WordPress
Untuk menyisipkan shortcode ke Sidebar, di bagian Customize widget, tambahkan widget Dokumen(teks), dan konten teks tempat Anda memasukkan kode pendek.
Kemudian ingat untuk menekan Simpan perubahan untuk menyimpan penyesuaian Anda.
Masukkan kode pendek di Tema WordPress
Kode pendek sering digunakan dalam posting, halaman, dan widget sidebar. Namun, terkadang kita juga perlu menyematkan shortcode tersebut di dalam Theme. WordPress memungkinkan kita untuk mengedit file .php di dalam tema. Jika Anda ingin menggunakan kode pendek di bagian mana pun dari tema, buka saja file tersebut .php dan kemudian masukkan kode berikut:
<?php echo do_shortcode("[ten_shortcode]"); ?>Kode pendek sangat berguna jika Anda perlu menyesuaikan konten artikel, menjalankan beberapa baris kode PHP. Namun, untuk menulis shortcode, Anda harus memiliki sedikit pengalaman coding. Pada bagian ini, saya akan memandu Anda secara detail untuk menulis dan mendeklarasikan shortcode sederhana.
Siapkan file PHP
Meskipun tidak diperlukan, namun untuk memastikan fungsi lain berfungsi dengan baik dan nyaman untuk debugging nanti, kami akan membuat file custom-shortcode.php untuk memuat kode pendek. File ini akan ditempatkan di folder tema yang Anda gunakan, hierarki yang sama dengan file tersebut functions.php Silakan. Misalnya, jika Anda menggunakan tema Aluka, maka buat file tersebut di jalur /wp-content/themes/aluka/ Silakan.
Dalam file custom-shortcode.php baru dibuat, Anda hanya perlu memasukkan konten berikut:
<?php
?>Selanjutnya, Anda membuka file functions.php di folder yang berisi tema yang digunakan, dan sisipkan baris berikut di akhir file.
include('custom-shortcode.php');Kode Pendek Sederhana
Setelah selesai, sekarang kita akan menulis kode pendek sederhana yang akan menampilkan gambar setiap kali dipanggil.
Untuk menulis kode pendek yang menampilkan gambar samping setiap kali dipanggil, buka file terlebih dahulu custom-shortcode.php dan masukkan kode berikut:
function vietrick_logo_function() {
return '<img src="https://coderja.com/wp-content/uploads/2023/06/1686303675_967_Petunjuk-untuk-menulis-dan-menggunakan-Shortcode-WordPress-dasar.png" alt="Vietrick-logo" width="144" height="144" class="left-align">';
}Pada kode di atas, fungsi vietrick_logo_function() akan mengembalikan hasil pemrosesan sebagai konten tag <img> gambar tampilan Logo Vietrick.
Setelah membuat fungsi untuk diproses, selanjutnya kita perlu mendeklarasikan fungsi ini ke WordPress sebagai shortcode setiap kali digunakan. Dalam file custom-shortcode.phpAnda memasukkan baris berikut untuk melanjutkan deklarasi shortcode:
add_shortcode('vietrick_logo', 'vietrick_logo_function');Untuk mendaftarkan kode pendek di wordpress, kami menggunakan fungsi tersebut add_shortcode tersedia. Pada baris di atas, vietrick_logo adalah nama shortcode yang akan kita daftarkan untuk digunakan.
Catatan: Nama shortcode harus dalam huruf kecil(huruf kecil)tulis tanpa aksen, dan dapat digunakan _.
Setelah menyimpan file, Anda dapat menggunakan shortcode yang baru saja ditulis seperti yang diperintahkan di atas.
[vietrick_logo]Kode pendek menggunakan parameter (Parameter)
Dalam contoh shortcode sederhana di atas, kami tidak memiliki banyak penyesuaian. Di bagian ini, kami akan melanjutkan sedikit menyesuaikan kode pendek dengan meneruskan parameter (parameter) untuk mengubah gambar yang sesuai.
Membuka file custom-shortcode.phpAnda menyisipkan paragraf berikut:
function logo_number_function( $atts = array() ) {
// Gán giá trị mặc định: number=1
extract(shortcode_atts(array(
'number' => '1'
), $atts));
return "<img src=\"https://www.vietrick.com/wp-content/uploads/2019/12/mstile-144x144-$number.png\"
alt=\"logo-number\" width=\"144\" height=\"144\" class=\"left-align\" />";
}Rahang logo_number_funtion() yang baru saja kita nyatakan di atas menggunakan parameter numberjika tidak dideklarasikan, nilai default dari number akan 1. Nilai parameter input disimpan dalam fungsi shortcode_atts. Jangan lupa untuk mendeklarasikan shortcode juga.
add_shortcode('logo_number', 'logo_number_funtion');Dengan kode pendek yang baru saja kita tulis, kita dapat menggunakan yang berikut ini:
[logo_number number=1]Anda mungkin juga tidak perlu memberikan nilai ke parameter angka:
[logo_number]Melampirkan kode pendek
Dalam contoh di atas, kami bekerja dengan shortcode self-closing, selain itu ada jenis shortcode lain: melampirkan kode pendek. Kode pendek ini memungkinkan kita untuk menggunakan kode BB yang sama di forum:
[viet_code]code mau[/viet_code]Melampirkan shortcode berguna ketika Anda ingin memasukkan shortcode dengan lampiran, seringkali konten yang kompleks. Penggunaan kode pendek terlampir memungkinkan kita untuk fokus hanya pada konten yang akan diproses daripada mengonfigurasi kode pendek.
Buat kode pendek terlampir
Kami terus kembali ke file custom-shortcode.phpAnda menambahkan kode berikut:
function vietlink_function( $atts, $content = null ) {
return '<a href="https://www.vietrick.com/" target="blank" class="vietrick" rel="noopener noreferrer">' . $content . '</a>';
}Dalam fungsi vietlink_function() Di atas akan mengembalikan tautan ke halaman Vietrick, konten utama tautan adalah konten kode pendek. Parameter $content = null Digunakan untuk mendeklarasikan nilai konten shortcode, standarnya adalah null. Saat Anda ingin memproses konten shortcode maka panggil variabelnya $content.
Juga jangan lupa untuk mendeklarasikan shortcode:
add_shortcode('vietlink', 'vietlink_function');Jadi pada dasarnya kami telah menulis kode pendek terlampir sederhana.
Gunakan kode pendek terlampir
Melampirkan shortcode tidak jauh berbeda dengan shortcode self-closing biasa.
[vietlink]Vietrick - Chia sẽ thủ thuật[/vietlink]Di atas adalah contoh sederhana melampirkan shortcode, sekarang mari kita masuk lebih dalam, menambahkan parameter(parameter) untuk kode pendek.
Juga di file custom-shortcode.php, tambahkan kode berikut:
function vlink_function( $atts = array(), $content = null ) {
// Gán giá trị mặc định
extract(shortcode_atts(array(
'link' => '#'
), $atts));
return '<a href="'. $link .'" target="blank" class="vlink" rel="noopener noreferrer">' . $content . '</a>';
}Pada kode di atas, kita menambahkan ekstraksi nilai parameter dalam array $atts. Pada saat yang sama giliran $link juga diberikan nilai default dari #.
Lanjutkan mendeklarasikan shortcode dengan wordpress:
add_shortcode('vlink', 'vlink_function');Anda dapat menggunakan kode pendek yang baru saja ditulis dengan sintaks berikut:
[vlink link="https://www.vietrick.com/"]Chia sẽ thủ thuật và công nghệ[/vlink]Seperti yang Anda lihat, dibandingkan dengan shortcode yang menutup sendiri, kita dapat melakukan hal yang lebih rumit dengan melampirkan shortcode.
Kode pendek pada Widget
Di atas, saya telah memandu Anda untuk menggunakan shortcode di sidebar widget. Namun, secara default, shortcode hanya berfungsi di konten Post / Page atau Custom Post. Agar kode pendek yang Anda tulis berfungsi di area widget, Anda perlu menambahkan kode deklarasi berikut ke file functions.php.
add_filter( 'widget_text', 'shortcode_unautop' );
add_filter( 'widget_text', 'do_shortcode' );Setelah menyimpan file, kode pendek Anda sekarang juga tersedia di area widget.
Menyimpulkan
Melalui artikel ini, semoga Anda dapat dengan mudah menulis shortcode sesederhana yang Anda inginkan tanpa menghabiskan banyak waktu dan tenaga. Menulis Shortcode itu sederhana dan nyaman. Bagian yang lebih mendalam tentang shortcode akan saya tulis di artikel berikut.
