Tambahkan kode pendek di template wordpress

Mempelajari cara membuat shortcode di WordPress bisa menjadi cara yang efisien untuk menyesuaikan postingan dan halaman Anda. Namun, jika Anda baru dalam prosesnya, Anda mungkin kesulitan memahami cara menggunakan fitur tersebut di situs Anda

Itu sebabnya kami menyusun panduan untuk membantu Anda memulai. Dengan melihat cara kerja shortcode dan cara menerapkannya secara efektif, Anda dapat mulai menyesuaikan konten sesuai keinginan Anda tanpa memerlukan plugin tambahan

Dalam posting ini, kita akan membahas apa itu shortcode WordPress dan mengapa Anda mungkin mempertimbangkan untuk menggunakannya. Selanjutnya, kami akan menunjukkan cara membuatnya sendiri. Mari kita mulai

Cara Membuat Shortcode di WordPress Video Tutorial

Pelajari langkah demi langkah cara membuat shortcode WordPress

Berlangganan Untuk video pendidikan lainnya. Akademi Hostinger

Langganan

Apa itu Shortcode WordPress

Kode pendek WordPress berfungsi sebagai pintasan yang memungkinkan Anda menyematkan elemen ke dalam postingan atau halaman dengan cepat. Ini biasanya terdiri dari satu baris kode di dalam tanda kurung siku, seperti [exampleshortcode], misalnya. Kode ini akan menampilkan fitur yang telah ditentukan di bagian depan situs Anda

WordPress pertama kali memperkenalkan shortcode dengan merilis Shortcode API. Ini memungkinkan pengguna untuk dengan mudah menambahkan elemen menarik ke posting dan halaman mereka, seperti Google Maps atau tombol "Suka" Facebook

Ada enam shortcode default di WordPress

• keterangan. membungkus teks di sekitar konten
• galeri. menampilkan galeri gambar
• audio. menyematkan dan memutar file audio
• video. menyematkan dan memutar file video
• daftar putar. menampilkan kumpulan file audio atau video
• menanamkan. membungkus item tertanam

Anda juga akan menemukan dua tipe dasar pemformatan kode pendek – menutup sendiri dan melampirkan. Shortcode self-closing dapat berdiri sendiri dan tidak memerlukan tag penutup, seperti gallery atau video shortcode di atas

Sementara itu, melampirkan shortcode membungkus konten yang ingin Anda ubah dan mengharuskan Anda untuk menutup tag secara manual. Misalnya, Anda dapat menyematkan video YouTube dengan menggabungkan URL dalam tag

include('custom-shortcodes.php');

include('custom-shortcodes.php');

Misalnya, ini akan membuat hasil berikut

Beberapa plugin WordPress terbaik hadir dengan kode pendeknya sendiri. Misalnya, WP Forms dan Contact Form 7 memiliki shortcode yang memungkinkan Anda menyematkan formulir kontak WordPress ke dalam postingan atau halaman dengan cepat. Anda juga dapat menggunakan plugin seperti MaxButtons untuk menambahkan kode pendek tombol WordPress di mana pun Anda inginkan di situs Anda

Mengapa Anda Harus Mempertimbangkan Menggunakan Shortcode WordPress

Ada banyak alasan mengapa Anda ingin menggunakan shortcode WordPress. Misalnya, ini lebih mudah dan lebih cepat daripada mempelajari dan menulis kode yang panjang dalam HTML. Selain itu, mereka membantu Anda menjaga konten tetap bersih dan mudah diakses

Kode pendek dapat digunakan untuk mengotomatiskan beberapa fitur yang Anda gunakan berulang kali. Misalnya, jika Anda menggunakan tombol ajakan bertindak (CTA) di setiap posting Anda, menyiapkan kode pendek khusus dapat menjadi solusi yang cepat dan praktis.

Perlu disebutkan bahwa Editor Gutenberg beroperasi dengan cara yang sama, mengandalkan penggunaan kode pendek. Ini memungkinkan pengguna WordPress untuk menambahkan beberapa fitur interaktif melalui penggunaan blok

Metode seperti itu jauh lebih ramah bagi pemula, karena Anda dapat menambahkan konten langsung ke antarmuka pengguna. Namun, Editor Blok WordPress masih terbatas pada apa yang ditawarkannya. Untungnya, ini hadir dengan blok Shortcode, memungkinkan Anda menambahkan konten khusus ke halaman Anda

Cara Membuat Shortcode di WordPress (Dalam 7 Langkah)

Jika Anda sudah memiliki pengetahuan pengkodean, Anda mungkin ingin membuat kode pendek khusus Anda sendiri. Ini memberi Anda kendali penuh atas tampilan dan fungsionalitas situs Anda

Mari kita lihat cara membuat kode pendek WordPress khusus. Dalam tutorial ini, kami akan menambahkan tautan media sosial ke postingan sebagai contoh kami

Langkah 1 – Buat File Tema Baru

Sebelum Anda mulai, ada baiknya untuk mencadangkan sepenuhnya situs WordPress Anda. Anda juga harus membuat file terpisah untuk kode pendek khusus Anda di luar fungsi tema Anda. file php. Ini akan memberikan fallback jika terjadi kesalahan

Anda dapat menggunakan klien File Transfer Protocol (FTP) seperti FileZilla untuk mengakses file tema situs Anda. Setelah terhubung ke situs Anda, navigasikan ke wp-content > themes, dan temukan folder untuk tema Anda saat ini. Dalam contoh kita, ini akan menjadi rosa-lite

Buka folder tema Anda, klik kanan, dan tekan tombol Buat file baru

Beri nama file baru Anda custom-shortcodes. php dan klik OK. Anda kemudian dapat mengeditnya dengan mengklik kanan padanya dan memilih opsi Lihat/Edit

Ini akan membuka file di editor teks default Anda. Kemudian, Anda hanya perlu menambahkan blok kode berikut

<?php 
?>

Ini memastikan bahwa file baru Anda akan diinterpretasikan sebagai PHP, yang merupakan bahasa skrip tempat WordPress dibuat

Anda kemudian dapat menyimpan perubahan Anda dan menutup file. Pastikan untuk mencentang kotak berikut untuk memastikan bahwa itu diperbarui di server dan diterapkan ke situs web Anda

Selanjutnya, buka fungsi. php di folder tema yang sama, dan tambahkan baris kode berikut di bagian bawah dokumen

include('custom-shortcodes.php');

Ini akan memberi tahu sistem untuk memasukkan perubahan apa pun yang Anda buat pada kode pendek khusus. file php di dalam fungsi. php sambil memungkinkan Anda untuk memisahkannya. Saat Anda siap, simpan perubahan Anda dan tutup file

Langkah 2 – Buat Fungsi Kode Pendek

Selanjutnya, Anda harus membuat fungsi shortcode, memerintahkan apa yang harus dilakukan. Pilih opsi Lihat/Edit lagi untuk kode pendek khusus Anda. file php. Gunakan cuplikan kode berikut untuk menambahkan tindakan untuk mengaitkan fungsi Anda

function subscribe_link(){
return 'Follow us on <a rel="nofollow" href="https://twitter.com/Hostinger?s=20">Twitter</a>';
}

Selanjutnya, Anda perlu menambahkan fungsi callback, yang akan berjalan saat hook action diaktifkan. Menambahkan baris kode berikut langsung setelah yang disebutkan di atas akan memberi tahu WordPress bahwa fungsi Anda adalah kode pendek

add_shortcode('subscribe', 'subscribe_link');

Saat Anda membuat kode pendek menggunakan fungsi add_shortcode, Anda menetapkan tag kode pendek “($tag)” dan kait fungsi “($func)” yang sesuai yang akan berjalan setiap kali pintasan digunakan

Dengan kata lain, jika tag shortcode adalah

include('custom-shortcodes.php');

Oleh karena itu, seluruh kode yang akan Anda gunakan dalam kode pendek khusus Anda. php file akan terlihat seperti ini

Perlu dicatat bahwa ketika Anda menamai tag, Anda hanya boleh menggunakan huruf kecil, meskipun garis bawah dapat digunakan. Ini juga penting untuk , karena ini dapat mengganggu kode pendek lainnya

Langkah 3 – Tambahkan Shortcode Self-Closing ke Website

Anda sekarang dapat menguji kode awal Anda sebagai kode pendek yang menutup sendiri di situs WordPress Anda. Dengan menggunakan Editor Blok WordPress, Anda dapat memasukkan tag

include('custom-shortcodes.php');

Ini akan menampilkan konten berikut kepada pengunjung situs web Anda

Jika Anda senang dengan kode pendek ini, Anda tidak perlu melakukan apa pun. Namun, jika Anda ingin menyesuaikannya, Anda dapat melanjutkan ke langkah berikutnya

Langkah 4 – Tambahkan Parameter ke Kode Pendek

Anda dapat mengadaptasi kode pendek 'berlangganan' untuk fungsi tambahan untuk menampilkan tautan media sosial lainnya. Anda dapat melakukannya dengan menambahkan parameter untuk mengubah URL

Untuk , Anda harus membuka custom-shortcodes. php dan tambahkan kode berikut

function subscribe_link_att($atts) {
    $default = array(
        'link' => '#',
    );
    $a = shortcode_atts($default, $atts);
    return 'Follow us on '.$a['link'];
}
add_shortcode('subscribe', 'subscribe_link_att');

Ini akan memungkinkan Anda untuk menyesuaikan tautan dalam tag kode pendek Anda untuk menambahkannya ke Editor Gutenberg. Anda dapat menempelkannya di atas kode sebelumnya di custom-shortcodes. file php. Seharusnya terlihat seperti ini

Penambahan fungsi shortcode_atts() akan menggabungkan atribut pengguna dengan atribut apa pun yang diketahui, dan setiap data yang hilang akan diubah ke nilai defaultnya. Saat Anda siap, simpan perubahan Anda dan tutup file

Langkah 5 – Uji Parameter

Anda sekarang dapat menguji kode pendek yang diperbarui di dalam Editor Blok WordPress. Dalam contoh kami, kami menguji tautan Twitter dan Facebook kami dengan shortcode berikut

[subscribe link='https://www.facebook.com/Hostinger/']
[subscribe link='https://twitter.com/Hostinger?s=20/']

Ini akan menghasilkan hasil berikut di ujung depan

Kode pendek yang menutup sendiri ini menampilkan URL langsung untuk profil sosial Anda kepada pengunjung. Namun, Anda mungkin ingin fitur ini terlihat sedikit dipoles

Misalnya, Anda dapat membuat versi terlampir yang memungkinkan Anda menyesuaikan sepenuhnya teks jangkar yang ditampilkan untuk pengguna saat mereka akan mengekliknya. Kami akan menunjukkan cara melakukannya pada langkah berikut

Langkah 6 – Buat Kode Pendek Terlampir

Kode pendek terlampir akan diformat mirip dengan contoh penutupan sendiri sebelumnya. Namun, itu akan menyertakan satu parameter tambahan untuk fungsi tersebut

Pertama, Anda harus menambahkan $content = null, yang mengidentifikasi fungsi ini sebagai kode pendek terlampir. Anda kemudian dapat menambahkan do_shortcode WordPress, yang akan mencari konten untuk kode pendek

Di dalam custom-shortcodes. php, tambahkan kode pendek terlampir baru

function subscribe_link_att($atts, $content = null) {
    $default = array(
        'link' => '#',
    );
    $a = shortcode_atts($default, $atts);
    $content = do_shortcode($content);

    return 'Follow us on <a href="'.($a['link']).'" style="color: blue">'.$content.'</a>';

}
add_shortcode('subscribe', 'subscribe_link_att');

Saat Anda siap, kode pendek khusus Anda. file php akan terlihat seperti ini

Kode sebelumnya juga memiliki atribut “style” tambahan, yang akan mengubah teks jangkar menjadi warna biru. Jangan lupa untuk menyimpan perubahan Anda setelah selesai

Langkah 7 – Tambahkan Kode Pendek Terlampir ke Situs Web

Anda sekarang dapat memasukkan kode pendek terlampir Anda ke Editor Blok WordPress untuk melihat hasil akhirnya

Seperti yang Anda perhatikan, Anda dapat dengan mudah mengubah URL halaman media sosial Anda dan teks jangkar yang ditampilkan kepada pengunjung menggunakan kode pendek terlampir ini. Dalam hal ini, kami memilih "Facebook" dan "Twitter"

Itu dia. Anda sekarang telah membuat kode pendek yang disesuaikan untuk tautan berlangganan di halaman dan posting Anda. Perhatikan bahwa semua langkah yang disebutkan sebelumnya dapat di-tweak untuk membuat semua jenis elemen berbeda menggunakan fungsi WordPress Shortcodes

Dapatkan hasil maksimal dari situs web WordPress Anda dengan hosting web yang dikelola sepenuhnya dan dioptimalkan untuk WordPress. Dapatkan Hosting WordPress

Kesimpulan

Menambahkan fungsionalitas ekstra ke situs web WordPress Anda jauh lebih sederhana dengan kode pendek. Anda dapat menggunakannya untuk menyesuaikan konten yang ada dan menambahkan fitur interaktif, seperti formulir kontak, galeri gambar, atau tautan langganan

Dalam posting ini, kami belajar cara membuat shortcode Anda sendiri di WordPress dalam tujuh langkah mudah

1. Buat file tema baru
2. Buat fungsi kode pendek
3. Tambahkan shortcode self-closing ke situs web
4. Tambahkan parameter ke kode pendek
5. Uji parameternya
6. Buat kode pendek terlampir
7. Tambahkan kode pendek terlampir ke situs web

Ada lebih banyak pertanyaan tentang cara membuat shortcode WordPress Anda sendiri atau berencana untuk mengoptimalkan kinerja situs Anda dengan hosting WordPress?

Pelajari Teknik WordPress Tingkat Lanjut Lainnya

Cara Menambahkan Font Kustom ke WordPress
Cara Meningkatkan Batas Memori WordPress
Cara Menghapus Sidebar di WordPress
Cara Mengubah Panjang Kutipan WordPress
Panduan Lengkap untuk Pengujian A/B WordPress
Cara Menyembunyikan Judul Halaman di WordPress

Penulis

akan M

Will Morris adalah penulis staf di WordCandy. Ketika dia tidak sedang menulis tentang WordPress, dia suka menampilkan rutinitas stand-up comedy-nya di sirkuit lokal

Bagaimana cara menggunakan shortcode di template?

Bagaimana cara menambahkan kode pendek ke editor tema saya?

Bagaimana cara memasukkan kode pendek di Elementor?