Bagaimana cara menambahkan kode pendek di WordPress

Apakah Anda ingin menyertakan kode pendek di situs Anda? Anda telah datang ke tempat yang tepat. Dalam panduan ini, kami akan menunjukkan cara menambahkan kode pendek di WordPress dan menunjukkan beberapa contoh sehingga Anda dapat memanfaatkannya sebaik mungkin.

Sejak kode pendek ditambahkan ke WordPress di versi 2.5, pengguna telah menggunakannya untuk mencapai semua jenis penyesuaian. Kode pendek sangat berguna dan memungkinkan kami menjalankan bagian kode tertentu di pos, halaman, dan hampir di mana saja di situs web kami. Selain itu, mereka sangat mudah digunakan bahkan untuk pengguna yang paling tidak berpengalaman.

Apa itu shortcode?

Sebuah kode pendek akan memicu sepotong kode yang ditentukan oleh nama kode pendek, yang selalu diapit dengan tanda kurung siku seperti ini : [shortcode-name]

Kode yang dijalankan setiap kode pendek tergantung pada bagaimana kode pendek itu dibuat. Banyak plugin menyediakan shortcode mereka sendiri dan WordPress juga menyertakan beberapa secara default. Dan bagian terbaiknya adalah API kode pendek WP memungkinkan Anda membuat kode pendek kustom Anda sendiri.

Kode pendek adalah alat yang hebat untuk pengembang karena memungkinkan Anda memasukkan skrip apa pun di mana saja di situs Anda. Saat Anda menggunakan skrip yang sama berkali-kali, Anda cukup menggunakan kode pendek yang sama tanpa harus mengulang kode tersebut. Ini membantu Anda menghemat waktu dan menjaga kode Anda tetap bersih.

Selain itu, kode pendek dapat mengambil beberapa nilai, yang bekerja mirip dengan parameter fungsi.

[ shortcode val1='hi' val2='ok' ]

Dan juga dapat digunakan sebagai tag HTML saat membuka dan menutup shortcode seperti ini [ shortcode ] some text [ /shortcode ] .

Singkatnya, kode pendek memungkinkan Anda menjalankan skrip PHP di ujung depan tanpa menulis kode apa pun (jika itu adalah kode pendek yang sudah ada). WordPress dan beberapa plugin memiliki beberapa kode pendek secara default tetapi Anda juga dapat membuatnya sendiri tergantung pada kebutuhan Anda.

Terakhir, ada berbagai jenis kode pendek: untuk menyisipkan galeri, produk WooCommerce, formulir, gambar, dan banyak lagi. Setiap kode pendek berbeda dan melakukan hal yang berbeda.

Jika Anda memerlukan informasi lebih lanjut, lihat panduan lengkap tentang kode pendek ini.

Sekarang setelah kita lebih memahami apa itu, mari kita lihat cara menambahkan kode pendek ke situs WordPress Anda .

Bagaimana cara menambahkan kode pendek di WordPress

Sebelum kita mulai, penting untuk dicatat bahwa karena setiap kode pendek dibuat secara berbeda, mereka dapat memiliki nilai atau tidak. Nilai-nilai ini spesifik untuk setiap kode pendek dan mereka meneruskan nilai ke kode untuk mendapatkan hasil yang kita inginkan.

Seperti yang kami sebutkan sebelumnya, ada berbagai jenis kode pendek, dan kode pendek WooCommerce adalah beberapa yang paling umum. Misalnya, kode pendek [ woocommerce_cart ] akan menampilkan keranjang WooCommerce di mana pun Anda menempelkannya.

Untuk mengujinya, cukup tempel kode pendek pada postingan atau halaman atau ketik seperti ini: [ woocommerce_cart ] . Kemudian, lihat frontend dan Anda akan melihat keranjang WC tepat di mana Anda memasukkan kode pendek.

CATATAN : Karena kami akan mengedit beberapa file inti, sebelum memulai, kami sarankan Anda membuat cadangan penuh situs Anda dan membuat tema anak. Anda dapat membuatnya secara terprogram atau dengan menggunakan salah satu plugin ini.

Tambahkan kode pendek WordPress dengan nilai

Sekarang mari gunakan kode pendek WordPress galeri default untuk mempelajari cara menambahkan kode pendek dengan nilai.

Kode pendek galeri menampilkan galeri gambar yang tampak bagus dan mendukung beberapa nilai. Anda perlu menyertakan nilai ID untuk menentukan gambar mana yang ingin Anda tampilkan di galeri. Parameter ini mengambil ID dan menampilkan gambar spesifik tersebut.

Misalnya, jika kita ingin menampilkan gambar dengan ID 720, 729, 731, dan 732, kita tambahkan shortcode ke postingan atau halaman sebagai berikut: [ gallery ids=”729,732,731,720” ]

Untuk mengujinya, cukup tempel kode pendek yang menggantikan ID gambar dengan ID Anda sendiri. Jika Anda tidak mengetahui ID gambar Anda, buka di editor perpustakaan media dan Anda akan melihat ID di URL browser dan tautan permanen tercetak pada detail gambar.

Jika Anda menggunakan editor teks klasik, Anda cukup menempelkan kode pendek ke dalam konten. Di Gutenberg, di sisi lain, Anda dapat menggunakan blok kode pendek. Selain itu, banyak pembuat halaman dan tema menyertakan beberapa solusi manajemen kode pendek lain yang dapat Anda gunakan.

Gutenberg

Editor klasik

Setelah Anda menambahkan kode pendek, periksa frontend situs Anda dan Anda akan melihat sesuatu seperti ini:

Menggunakan kode pendek dalam file template

Cara lain untuk menggunakan shortcode WordPress adalah dengan menambahkannya ke file template. Jika Anda ingin mengembangkan solusi khusus, ini adalah opsi yang menarik untuk Anda. Misalnya, ini memungkinkan Anda untuk menjalankan kode pendek pada logika bersyarat atau mengubah nilai kode pendek secara dinamis, di antara banyak kemungkinan lainnya.

Anda dapat menggunakan shortcode dalam file template dengan fungsi do_shortcode() PHP. Ini adalah fungsi WordPress default yang dapat Anda gunakan di file apa pun.

Untuk menjalankan kode pendek dari file, cukup tambahkan berikut ini:

echo do_shortcode(' [ gallery ids=”21,42,32,11” ] ');

Sekarang sesuaikan header dan jalankan shortcode galeri di file header.php . Untuk melakukan ini, Anda perlu menimpa file ini menggunakan tema anak. Untuk informasi lebih lanjut tentang cara menyesuaikan template, lihat panduan ini.

Di dashboard WordPress Anda, tambahkan shortcode ke header Anda, dengan masuk ke Appearance > Theme Editor, dan buka file header.php . Pergi ke akhir file dan rekatkan kode seperti yang ditunjukkan di bawah ini:

Setelah memasukkan skrip di atas ke dalam file, Anda akan melihat galeri di header.

Menggunakan Shortcode dengan hook WordPress

Cara lain untuk menambahkan kode pendek ke WordPress secara terprogram adalah dengan menggunakannya dalam kombinasi dengan kait. Jika Anda tidak terbiasa dengan hook, kami sarankan Anda membaca panduan ini untuk mempelajari lebih lanjut tentang hook.

Untuk menggunakan kode pendek dengan kait, Anda memerlukan fungsi do_shortcode() , seperti yang kita lihat di bagian sebelumnya.

Script berikut akan bekerja pada file functions.php dari tema anak. Kami menggunakan kait wp_footer() , jadi ini akan dicetak di footer situs.

/* Shortcode with wp_footer hook*/
add_action('wp_footer','QuadLayers_footer_shortcode');
function QuadLayers_footer_shortcode(){
echo do_shortcode(' /* Shortcode with wp_footer hook*/
add_action('wp_footer','QuadLayers_footer_shortcode');
function QuadLayers_footer_shortcode(){
echo do_shortcode(' [ products ids="623" ] ');
} ');
}

Kode pendek ini hadir dengan WooCommerce secara default dan digunakan untuk menampilkan produk. Dalam hal ini, kami menggunakannya untuk menampilkan satu produk, dengan ID = 623.

Untuk informasi selengkapnya tentang cara menyesuaikan footer di situs Anda, lihat panduan ini.

Cara membuat shortcode khusus di WordPress

Alternatif lain yang menarik adalah membuat kode pendek kustom Anda sendiri. Ini tidak sulit tetapi membutuhkan beberapa keterampilan pengembang dasar dan beberapa pengetahuan pengkodean. Jika Anda bukan pengguna tingkat lanjut, jangan khawatir. Bahkan programmer yang paling tidak berpengalaman pun akan menganggap ini cukup mudah.

WordPress memberi kita fungsi add_shortcode() untuk membangun dan menambahkan shortcode kita sendiri. Mari kita lihat cara menggunakan fungsi ini untuk membuat kode pendek khusus dengan beberapa contoh skrip.

Tampilkan pesan yang berbeda untuk pengguna yang masuk dan keluar

Skrip berikut akan membuat kode pendek dan mencetak pesan ke pengguna. Untuk membuatnya lebih menarik, kami telah menerapkan kondisi untuk menampilkan pesan yang berbeda untuk pengguna yang masuk dan keluar.

 /* Login kode pendek*/
add_shortcode('login','QuadLayers_shortcode_loggedin');
fungsi QuadLayers_shortcode_loggedin($atts){
    if(is_user_logged_in()==true){
        $response='Anda sudah login';
    }
    kalau tidak{
        $response='Anda sudah keluar';
    }
kembalikan $respon;
}

Menggunakan if, kami memeriksa apakah pengguna masuk dan menampilkan pesan "Anda masuk" jika itu benar dan "Anda keluar" jika tidak.

Tampilkan satu postingan berdasarkan ID

Pilihan lainnya adalah menambahkan shortcode WordPress yang menampilkan posting tertentu yang akan kita berikan sebagai nilai dalam shortcode.

 add_shortcode('get-post','QuadLayers_shortcode_post');
fungsi QuadLayers_shortcode_post($atts) {
    $a = shortcode_atts( array('id' => '',), $atts ); 
    $args = array('post_type' => 'post','p' => $a['id']); 
    $query = new WP_Query($args); 
    $query->the_post();
    $string = '<h3>'.get_the_title().'</h3>' ; 
    $string.=the_post_thumbnail();
    $string .= get_the_content();
    kembalikan $string;
}

Dalam contoh ini, kami telah menambahkan kode pendek [ get-post ] dan terlihat seperti ini:

Jalankan kode pendek yang berbeda pada kondisi logika

Dalam contoh ini, kita akan membuat kode pendek khusus untuk menjalankan kode pendek yang berbeda pada kondisi logika.

Kode pendek khusus kami akan menampilkan berbagai formulir yang dibuat dengan plugin formulir kontak. Jadi kami akan mencetak formulir yang berbeda untuk pengguna yang masuk dan keluar.

 add_shortcode('show-form','QuadLayers_custom_shortcode');
fungsi QuadLayers_custom_shortcode(){
    if(is_user_logged_in()==true){
        $response='<h3>Hubungi kami</h3>';
        $response.='[wpforms]';
    }
    kalau tidak{
        $response='<h3>Berlangganan buletin kami</h3>';
        $response.='[wpforms]';
    }
    echo do_shortcode($respon);
}

Sekali lagi, kami menggunakan kondisi jika untuk memeriksa apakah pengguna masuk atau tidak dan menampilkan formulir tertentu berdasarkan itu.

Catatan

• Selalu kembalikan data saat membuat kode pendek. Jika Anda mengulanginya, Anda mungkin mengalami beberapa masalah terkait dengan posisi Anda harus menampilkan konten
• do_shortcode(); fungsi berfungsi dengan baik di sebagian besar file templat, tetapi karena perlu digaungkan, itu juga dapat memicu beberapa masalah
• Banyak plugin yang menyediakan shortcode yang bisa Anda gunakan secara bebas. Namun, beberapa kode pendek mungkin tidak berfungsi pada postingan, halaman, atau saat mencoba menggunakannya pada widget header, footer, atau sidebar. Ini tergantung pada seberapa kompleks kode pendek dan bagaimana kode itu dibuat
• Jika Anda melihat beberapa kesalahan saat menggunakan kode pendek khusus pada editor Gutenberg, itu berarti kode pendek Anda tidak kompatibel dengan Gutenberg. Ini akan tetap berfungsi di frontend dan Anda dapat mencoba beralih ke editor default untuk menghilangkan kesalahan ini

Kesimpulan

Singkatnya, kode pendek adalah alat yang berguna yang memungkinkan Anda menjalankan bagian kode tertentu di mana saja di situs Anda. Saat Anda menggunakan skrip yang sama beberapa kali, Anda dapat membuat kode pendek dan menggunakannya untuk menghindari pengulangan kode berulang kali. Kode pendek mudah digunakan bahkan untuk pemula dan membantu Anda menghemat waktu.

Dalam panduan ini, kami telah melihat berbagai cara untuk menambahkan kode pendek di WordPress. Kami telah mempelajari cara menggunakan kode pendek dengan nilai, dalam file template, dan dengan kait. Selain itu, kami melihat cara membuat kode pendek khusus dan memberi Anda beberapa contoh skrip yang dapat Anda sesuaikan tergantung pada kebutuhan Anda.

Untuk mempelajari lebih lanjut tentang kode pendek dan cara menyesuaikan situs Anda, lihat posting berikut:

• Shortcode WooCommerce: Panduan Utama
• Cara menyesuaikan Halaman Toko WooCommerce
• Sesuaikan Halaman Produk di WooCommerce

Sudahkah Anda menambahkan kode pendek ke situs WordPress Anda? Apakah Anda memiliki masalah dalam mengikuti panduan ini? Beri tahu kami di komentar di bawah!