Panduan untuk Membuat Shortcode Khusus di WordPress

Diterbitkan: 2020-06-20

Cara termudah untuk menggambarkan shortcode adalah dengan mendefinisikannya sebagai cara mudah untuk menambahkan konten dinamis ke dalam posting, halaman, dan sidebar WordPress Anda. Banyak plugin dan tema WordPress memiliki kode pendek sebagai sarana untuk menambahkan konten khusus seperti formulir kontak, galeri gambar, bilah geser, dan banyak lagi. Cara termudah untuk memulai dengan membuat dan menggunakan kode pendek adalah dengan plugin kode pendek. Namun, jika Anda tertarik untuk membuat kode pendek khusus di WordPress, kencangkan sabuk pengaman, karena panduan ini cocok untuk Anda. Pikiran Anda, ini akan memerlukan beberapa keahlian teknis dalam pengkodean, oleh Anda mungkin sudah tahu itu.

Jadi, ada dua cara di mana Anda dapat menemukan shortcode WordPress yang berguna bagi Anda:

  1. mereka dapat mengurangi jumlah kode yang perlu Anda tulis,
  2. mereka menyederhanakan penggunaan plugin WordPress, tema, dan fungsi lainnya.
Monitor komputer dengan situs WordPress di dalamnya
Mempelajari cara membuat kode pendek khusus di WordPress akan memberi Anda kontrol lebih besar terhadap situs web Anda.

Proses mempersiapkan WordPress untuk kode pendek khusus

Meskipun ini sama sekali bukan suatu keharusan, umumnya merupakan ide yang baik untuk menyimpan kode pendek khusus Anda di file mereka sendiri. Jika tidak, Anda dapat memilih untuk menambahkannya ke file functions.php tema Anda. Mulailah dengan membuat file baru bernama 'custom-shortcodes.php', dan simpan di dalam folder yang sama dengan file functions.php tema Anda. Kemudian, di dalam file yang baru dibuat, Anda akan menambahkan blok kode berikut:
<?php
?>
Setelah melakukannya, Anda ingin membuka file functions.php, dan menambahkan baris kode berikut:
include('custom-shortcodes.php');
Selamat! Anda sekarang siap untuk mulai membuat shortcode khusus di WordPress.

Membuat kode pendek dasar di WordPress

Kami akan menjelaskan proses pembuatan kode pendek WordPress dasar melalui contoh penyisipan gambar avatar sederhana. Langkah pertama adalah membuat fungsi shortcode. Di dalam file custom-shortcodes.php, Anda akan menambahkan yang berikut:

fungsi simpleavatar_fungsi() {
kembali '<img src=”https://simpleavatar.com/wp-content/uploads/avatar-simple.png”
alt=”doti-avatar” width=”96″ height=”96″ class="left-align" />':
}

Pada contoh kode di atas, simpleavatar_function mengembalikan gambar yang telah ditentukan sebelumnya bernama avatar-simple.png. Langkah selanjutnya adalah mendaftarkan kode pendek dengan WordPress menggunakan fungsi bawaan add_shortcode. Masih di dalam custom-shortcodes.php, pastikan Anda menambahkan baris kode berikut:

add_shortcode('simpleavatar', 'simpleavatar_function');

Setelah Anda mendaftarkan kode pendek menggunakan fungsi add_shortcode, Anda akan meneruskan tag kode pendek ($tag) dan fungsi yang sesuai ($func)/hook yang akan dijalankan setiap kali pintasan itu digunakan. Dalam kasus khusus ini, tag pintasannya adalah simpleavatar dan kaitnya adalah dotiavatar_function.
Pastikan Anda hanya menggunakan huruf kecil saat menamai tag , tanpa menyertakan tanda hubung. Garis bawah, bagaimanapun, dapat diterima.
Jadi, sekarang setelah Anda membuat kode pendek, dan mendaftarkannya, alangkah baiknya Anda mencobanya. Kapan pun Anda ingin avatar sederhana muncul di dalam konten posting, cukup gunakan kode pendek saja: [simpleavatar]

Proses pengkodean pada monitor komputer
Setelah membuat dan mendaftarkan kode pendek, Anda selalu ingin mencobanya.

Membuat shortcode khusus di WordPress dengan parameter (atribut)

Pada contoh sebelumnya, Anda tidak memiliki banyak ruang untuk mengubah banyak hal. Dan, mari kita asumsikan bahwa alih-alih mendorong satu gambar, Anda ingin dapat mengatur gambar mana yang akan digunakan menggunakan parameter. Cara yang bagus untuk melakukannya adalah dengan menambahkan beberapa atribut ($atts). Jadi, seperti sebelumnya, di dalam custom-shortcodes.php, tambahkan fungsi lain:

fungsi penyederhanaan_fungsi( $att=array() ) {

//mengatur parameter default

ekstrak(shortcode_atts(array(

'peringkat' => '5'

), $att));

kembalikan “<img src=\"http://simpleavatar.com/wp-content/uploads/$raing-star.png\”

alt=\”simple-rating\” width=\”130\” height=\”190\” class=\”left-align\" />”;

}

Apa yang Anda tulis di atas menerima satu parameter: peringkat. Jika nilai peringkat tidak diteruskan, itu akan menggunakan nilai string default 5. Ini dilakukan dengan membuka bungkusan array atribut menggunakan fungsi shortcode_atts bawaan dan kemudian menggabungkan nilai default dengan nilai yang mungkin telah diteruskan ke fungsi . Pastikan Anda tidak lupa untuk mendaftarkan kode :
add_shortcode('penyederhanaan', 'fungsi_penyederhanaan');

Dengan fungsi kode pendek dibuat, dan kait ditambahkan, kode pendek siap untuk menemukan tempatnya di dalam konten posting Anda:

[peringkat penyederhanaan=3]

Itu akan menjadi inti dari pembuatan shortcode WordPress yang menutup sendiri. Namun, masih ada jenis lain yang bisa Anda buat.

Seorang pria belajar cara membuat shortcode khusus di WordPress.
Jika Anda tertarik untuk memanipulasi konten terlampir, ada cara lain untuk membuat kode pendek khusus di WordPress.

Jenis kode pendek tambahan yang dapat Anda buat: melampirkan kode pendek

Sampai saat ini, kami telah menjelaskan kode pendek yang melampirkan sendiri. Namun, ada jenis kode pendek lain yang ingin kami perkenalkan kepada Anda: melampirkan kode pendek.

Ini memungkinkan Anda untuk menggunakan format gaya BBCode. Gaya seperti itu akan terlihat seperti ini:

[shortcode]konten[/shortcode]

Melampirkan kode pendek berguna jika Anda perlu memanipulasi konten terlampir. Untuk mengilustrasikan lebih lanjut, katakanlah Anda memiliki gaya tombol tertentu yang Anda gunakan untuk situs web Anda. Anda dapat menggunakan kode HTML untuk menghasilkan tombol/gaya itu setiap kali Anda perlu menggunakannya. Namun, Anda juga dapat mengatur kode pendek lampiran khusus untuk melakukannya untuk Anda.

Dengan memanfaatkan kode pendek terlampir, Anda akan dapat tetap fokus pada konten alih-alih kode.

Membuat kode pendek terlampir

Anda akan sekali lagi ke file custom-shortcodes.php, dan menambahkan apa yang berikut:

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

kembali '<a href=”https://twitter.com/simpleavatar/” target=”blank” class=”doti-follow”>' . $konten . '</a>';

}

Dalam blok kode di atas, $content = null digunakan untuk mengidentifikasi fungsi ini sebagai kode pendek terlampir. Di dalam fungsi itu, Anda membungkus konten Anda di dalam kode HTML. Anda mungkin dapat menebak langkah berikut – mendaftarkan kode pendek:

add_shortcode('simplefollow', 'simplefollow_function');

Voila! Kode pendek siap digunakan.

Seorang pria menggunakan WordPress untuk blognya
Anda sekarang memiliki kontrol yang lebih baik untuk menyesuaikan WordPress Anda.

Apa yang terjadi?

Setelah Anda memahami cara kerja membuat shortcode khusus di WordPress, Anda akan mendapati prosesnya sendiri menjadi sederhana dan mudah. Namun, jika ini tampaknya terlalu sulit bagi Anda, ingatlah bahwa Anda dapat menghindari proses sama sekali, dan memilih plugin, tema, dan fitur lain yang memungkinkan Anda mendesain situs web sesuai keinginan Anda.