Cara Membuat Shortcode WordPress dan Bekerja Dengannya

Kode pendek WordPress adalah tag kecil yang digunakan sebagai pintasan untuk menjalankan fitur tertentu di postingan dan halaman. Anda dapat mengenali kode pendek dengan tanda kurung siku yang mengelilingi kata atau frasa sederhana. Mereka diperkenalkan di versi 2.5 dengan misi untuk membantu orang menjalankan fungsi dengan cara yang mudah.

Seperti yang mungkin sudah Anda ketahui, WordPress menggunakan bahasa pemrograman PHP untuk memperkuat dirinya sendiri. Jadi, ketika Anda ingin menambahkan fitur tertentu langsung ke posting dan halaman, Anda harus menulis kode di editor teks. Sebagai gantinya, kode pendek memungkinkan pengguna untuk mengganti seluruh blok kode dengan istilah sederhana dan menjalankannya hanya dengan menerbitkan posting. Menakjubkan, bukan?

Cara menggunakan shortcode WordPress

Untuk menggunakan kode pendek, seseorang tidak perlu tahu cara membuat kode atau memahami cara kerjanya di backend. WordPress sendiri, serta sebagian besar tema dan plugin WordPress, menggunakan kode pendek yang berbeda untuk memungkinkan penggunaan banyak fitur lanjutan.

Misalnya, untuk menampilkan seluruh galeri gambar, Anda hanya perlu menggunakan kode pendek [galeri] yang disertakan dengan WordPress. Sebagian besar shortcode dapat digunakan dalam bentuk dasarnya seperti contoh sebelumnya.

Parameter kode pendek

Lebih sering daripada tidak, kode pendek dapat memiliki parameter tambahan . Dengan menambahkan informasi tambahan kepada mereka, Anda dapat menyesuaikan dan mengubah output. Misalnya, sementara kode pendek [galeri] sepele menampilkan semua gambar yang dilampirkan ke pos, dimungkinkan untuk mengubahnya. Kode pendek galeri memungkinkan Anda menentukan gambar berdasarkan ID mereka sehingga Anda dapat menampilkan hanya gambar tertentu atau bahkan menyertakan gambar yang bukan bagian dari pos tertentu.

Juga, dimungkinkan untuk menentukan ukuran galeri, dan banyak hal lainnya dengan memberikan parameter tambahan. Berikut ini contohnya:

Galeri dari contoh ini hanya akan menampilkan gambar dengan nomor ID tertentu. Dalam hal ini, ukurannya akan otomatis berubah menjadi medium. Dan Anda mendapatkan semua itu dengan kode pendek sederhana. Sekarang bayangkan seperti apa keseluruhannya jika Anda akan menambahkan kode PHP secara manual yang akan memiliki puluhan atau bahkan ratusan baris. Terima kasih, kode pendek!

Tag awal dan akhir

Misalnya, plugin Google Maps memungkinkan Anda menampilkan lokasi di peta melalui kode pendek. Sebagian besar plugin tersebut akan memiliki tag awal dan akhir, sedangkan alamat harus ditulis di antaranya. Berikut ini contohnya:

[[maps]]New York, AS[[/maps]]

Seperti yang dapat Anda lihat dari contoh, tag penutup selalu dimulai dengan tanda garis miring “/”. Dengan memiliki kedua tag tersebut, WordPress dapat mengidentifikasi bagian-bagian shortcode dengan lebih mudah.

Bekerja di editor teks

Meskipun hanya pintasan ke fungsi, kode pendek sebenarnya adalah kriptogram khusus WordPress sendiri. Jadi, jika Anda mencoba menulis kode pendek di editor visual, WordPress akan segera menunjukkan kepada Anda output (atau hanya placeholder) dari kode pendek itu. Jika Anda mengikuti contoh galeri dan menulis kode pendek di editor Visual, Anda akan melihat bahwa WordPress segera menampilkan isinya (lihat gambar pertama di posting ini untuk melihat cara kerjanya).

Kode pendek WordPress default

Kode pendek biasanya dikelola oleh tema dan plugin. Setiap pengembang dapat mendaftarkan kode pendeknya sendiri, jadi masing-masing berbeda. Apa yang dilakukan kode pendek, apa parameter dan fungsinya, hanya bergantung pada plugin dan tema tertentu yang Anda gunakan.

Misalnya, plugin yang membantu Anda menampilkan lokasi di Google Maps mungkin memiliki kode pendek [[maps]], yang menampilkan formulir berlangganan akan menggunakan [[form]] dan seterusnya.

Namun, WordPress hadir dengan serangkaian kode pendek default yang dapat Anda gunakan tanpa menginstal ekstensi tambahan. Secara default, ini adalah kode pendek yang dapat Anda gunakan:

Melarikan diri dari kode pendek (menampilkan teks kode pendek tanpa menjalankannya)

Terkadang, Anda mungkin ingin menampilkan teks yang mewakili kode pendek alih-alih mengeksekusinya. Jika Anda mencoba menambahkan kode pendek baik ke teks dan editor visual, Anda menyadari bahwa itu dieksekusi pada kedua kesempatan.

Jika Anda ingin menampilkan kode pendek dengan tag awal dan akhir, gunakan hanya tanda kurung ganda pertama dan terakhir: [[maps]New York, USA[/maps]]

Saat bekerja di editor teks, Anda juga dapat mengganti tanda kurung siku dengan kodenya. Jadi, alih-alih "[" Anda dapat menggunakan "[", dan sebagai gantinya "]" gunakan "]". Misalnya: [shortcode&#93 ; akan menampilkan kode pendek juga tanpa menjalankannya.

Cara membuat kode pendek sederhana

Ketika Anda menulis artikel di WordPress setiap hari, ada kalanya Anda mengulanginya sendiri dan ketika Anda harus mengetik sesuatu berulang kali. Tidak masalah apakah itu URL situs web, kalimat panjang, atau mungkin potongan kode HTML yang terus-menerus Anda tulis dari awal, Anda harus mempertimbangkan untuk menulis kode pendek untuk itu.

Dan dengan fungsi sederhana ini, Anda tidak perlu menjadi seorang programmer atau Anda bahkan tidak akan menyewa seorang untuk mempermudah Anda. Ikuti beberapa langkah berikutnya dan buat sendiri kode pendek khusus:

1. Buka file function.php di menu Appearance -> Editor
2. Tempatkan kode berikut di akhir file:

 fungsi fsg_shortURL() {
 kembali 'http://www.firstsiteguide.com';
 }
 add_shortcode('fsg', 'fsg_shortURL');

3. Buka Editor Teks dan ketik [fsg] untuk mendapatkan URL alih-alih kode pendek

Itu tidak sulit, kan?

Contoh lebih lanjut: Tambahkan kode pendek gambar

Dengan menempatkan kode berikut di functions.php, Anda dapat membuat kode pendek untuk menempatkan gambar dengan atribut lebar dan tinggi khusus:

1. Buka file functions.php
2. Tempelkan kode berikut:

 function img_shortcode( $atts , $content = null ) {

	ekstrak( shortcode_atts(
		Himpunan(
			'lebar' => '',
			'tinggi' => '',
		), $att )
	);
kembali '';
}
add_shortcode( 'img', 'img_shortcode' );

3. Buka Editor Teks:

Di sini Anda dapat menggunakan kode pendek [img width='x' height='y'] http://… [/img] di mana “x” dan “y” adalah angka yang mewakili lebar dan tinggi dalam piksel.

Anda dapat dengan mudah menambahkan atribut gambar lainnya jika Anda membutuhkannya; lihat daftar semua atribut gambar di W3 Schools.

Cara menggunakan kode pendek di Widget Teks

Kode pendek dapat berisi berbagai fungsi yang dapat Anda tambahkan ke situs web WordPress Anda. Apakah Anda telah membuatnya sendiri atau datang dengan tema atau plugin yang baru saja Anda instal, Anda mungkin akan menggunakan kode pendek sepanjang waktu. Karena Anda benar-benar dapat menghemat waktu dan memanfaatkannya, tidak ada alasan untuk tidak menggunakan kode pendek.

Jika Anda baru saja mulai membangun situs WordPress Anda, Anda mungkin hanya menggunakan shortcode di editor Post. Namun, sebenarnya Anda dapat menggunakan kode pendek secara praktis di mana saja .

Misalnya, jika Anda menggunakan plugin Google Maps PRO 5 detik yang memungkinkan Anda membuat peta dengan mudah dengan pin yang tidak terhitung jumlahnya, Anda mungkin ingin menyisipkan peta melalui kode pendek langsung di Widget Teks dan menunjukkan lokasi Anda di bilah sisi alih-alih satu Pos. Tetapi jika tema Anda tidak mendukung kode pendek di widget, Anda harus mengaktifkan fungsinya sendiri dan itulah yang akan kami tunjukkan di artikel ini.

Jika Anda perlu menggunakan kode pendek di file PHP Anda (misalnya, jika Anda ingin menjalankan kode di file header.php Anda dan menjalankan kode pendek di mana pun header ada), Anda dapat melakukannya dengan mudah dengan membungkus kode di sekitarnya . Tetapi jika Anda telah mencoba menggunakan kode pendek di Widget Teks Anda seperti pada contoh yang telah kami sebutkan di atas, Anda akhirnya kecewa karena itu tidak berfungsi dan widget menampilkan kode pendek sebagai gantinya isinya. Kecuali jika tema Anda sudah memiliki fitur yang terdaftar, Anda harus mengaktifkannya sendiri.

Jadi, jika Anda ingin dapat memasukkan kode pendek ke dalam Widget Teks dan menjalankannya, jangan khawatir; Anda dapat mewujudkannya dalam hitungan detik:

1. Buka function.php
2. Salin dan tempel dua baris berikut:

 add_filter( 'widget_text', 'shortcode_unautop');
 add_filter( 'widget_text', 'do_shortcode');

3. Simpan perubahan

Meskipun sebenarnya cukup menggunakan hanya baris kedua yang membuat kode pendek berfungsi, Anda akan menginginkan baris pertama untuk menghindari penyisipan paragraf dan tag pemutusan otomatis WordPress di mana Anda secara tidak sadar membuat jeda baris dengan memformat teks dalam widget . Untuk berjaga-jaga jika Anda meletakkan kode pendek pada baris terpisah, unautop akan menghapus tag paragraf tersebut dan kode pendek akan berfungsi seperti pesona.

Sekarang Anda dapat menavigasi ke Penampilan -> Widget dan seret Widget Teks ke tempat yang Anda inginkan. Setelah semua ini, ketika Anda menulis kode pendek langsung ke Widget Teks Anda (yang terdaftar di situs Anda, tentu saja) itu akan dieksekusi seperti yang diketikkan ke Editor Posting.

Demikian pula, Anda dapat menjalankan kode PHP dari Widget Teks Anda. Itu cukup mudah, bukan? Nikmati kode pendek Anda.

Kode pendek ada di mana-mana

Jika Anda baru memulai blog WordPress, kode pendek mungkin tampak berlebihan dan sulit dipahami. Sebagian besar waktu akan memungkinkan untuk menghindari kode pendek dengan menggunakan antarmuka yang ramah pengguna yang disediakan oleh sebuah plugin. Tetapi ketika Anda lebih terlibat dengan blog, dan ketika Anda mulai menggunakan lebih banyak plugin, Anda akan memahami kekuatan sebenarnya dari shortcode.

Menggunakannya akan menjadi rutinitas, dan Anda akan cepat terbiasa menulis tanda kurung siku di setiap postingan baru yang Anda buat. Jadi luangkan beberapa menit, dan gunakan artikel ini untuk mempelajari dasar-dasarnya.