Apakah Anda ingin belajar cara membuat kode pendek di WordPress?
Mempelajari cara membuat kode pendek di WordPress bisa menjadi cara yang efektif untuk menyesuaikan posting dan halaman Anda. Namun, jika Anda baru dalam proses ini, Anda mungkin merasa sulit untuk mengetahui cara menggunakan fitur tersebut di situs web Anda.
Itu sebabnya kami telah menyusun panduan untuk membantu Anda memulai. Dengan melihat cara kerja kode pendek dan cara menerapkannya secara efektif, Anda dapat mulai menyesuaikan konten sesuai keinginan Anda tanpa memerlukan plugin tambahan.
Pada artikel ini, kita akan membahas apa itu shortcode WordPress dan mengapa Anda mungkin mempertimbangkan untuk menggunakannya. Kemudian kami akan menunjukkan cara membuatnya sendiri.
Tetapi sebelumnya, jika Anda belum pernah menginstal WordPress temukan Bagaimana menginstal sebuah blog WordPress langkah 7 et Bagaimana menemukan, menginstal dan mengaktifkan tema WordPress di blog Anda
Lalu kembali ke mengapa kita ada di sini.
Apa itu shortcode WordPress?
Kode pendek WordPress bertindak sebagai pintasan yang memungkinkan Anda dengan cepat menyematkan elemen ke dalam posting atau halaman. Ini biasanya satu baris kode yang diapit tanda kurung siku. Sebagai contoh :
[exemplecodehortcode]Kode ini akan menampilkan fitur yang telah ditentukan sebelumnya di front-end situs web Anda.
WordPress kode pendek yang pertama kali diperkenalkan dengan rilis API kode pendek. Ini memudahkan pengguna untuk menambahkan elemen menarik ke postingan dan halaman mereka, seperti Google Maps atau tombol "Suka" Facebook.
Itu ada di WordPress bawaant enam kode pendek :
- caption: Bungkus teks di sekitar konten
- galeri : menampilkan galeri gambar
- Audio: menyematkan dan memutar file audio
- vidéo : menyematkan dan memutar file video
- playlist : menampilkan kumpulan file audio atau video
- menanamkan : membungkus elemen sebaris
Anda juga akan menemukan dua tipe dasar pemformatan kode pendek: self-closing et enclosing.
Kode pendek self-closing dapat berdiri sendiri dan tidak memerlukan tag penutup.
Sementara itu, enclosing mengelilingi konten yang ingin Anda edit dan memaksa Anda untuk menutup tag secara manual. Misalnya, Anda dapat menyematkan video YouTube dengan membungkus URL di antara tag embed et /embed :
Misalnya, ini akan membuat hasil berikut:
Beberapa dari plugin WordPress terbaik datang dengan kode pendek mereka sendiri. Contohnya, Formulir WP et Hubungi Formulir 7 memiliki kode pendek yang memungkinkan Anda menyematkan a formulir kontak dalam postingan atau halaman. Anda juga dapat menggunakan plugin seperti Tombol Maks untuk menambahkan kode pendek tombol di mana pun Anda inginkan di situs web Anda.
Mengapa Anda Harus Mempertimbangkan Menggunakan Shortcode WordPress?
Ada banyak alasan mengapa Anda dapat menggunakan shortcode WordPress. Misalnya, lebih mudah dan lebih cepat daripada mempelajari dan menulis potongan kode yang panjang dalam HTML. Plus, mereka membantu Anda menjaga konten Anda tetap bersih dan mudah diakses.
Kode pendek dapat digunakan untuk mengotomatiskan fitur tertentu yang Anda gunakan berulang kali. Misalnya, jika Anda menggunakan tombol ajakan bertindak (CTA) pada setiap artikel Anda, menyiapkan kode pendek khusus dapat menjadi solusi yang cepat dan nyaman.
Harus disebutkan bahwa Editor Gutenberg bekerja 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 di UI. Namun, editor blok WordPress masih terbatas dalam apa yang ditawarkannya. Untungnya, itu datang dengan blok Kode pendek, yang memungkinkan Anda menambahkan konten khusus ke halaman Anda.
Cara membuat kode pendek di WordPress
Jika Anda sudah memiliki pengetahuan pengkodean, Anda dapat membuat kode pendek kustom Anda sendiri. Ini memberi Anda kendali penuh atas tampilan dan fungsionalitas situs web Anda.
Mari kita lihat cara membuat kode pendek WordPress khusus. Dalam tutorial ini, kami akan menambahkan tautan media sosial ke artikel sebagai contoh.
Langkah 1 – Buat file tema baru
Sebelum Anda mulai, ada baiknya untuk sepenuhnya buat cadangan situs web WordPress Anda. Anda juga perlu membuat file terpisah untuk kode pendek khusus Anda di luar file functions.php anda tema WordPress. Ini akan memberikan solusi mundur jika terjadi kesalahan.
Anda dapat menggunakan klien FTP (File Transfer Protocol) seperti FileZilla untuk mengakses file tema situs web Anda. Setelah masuk ke situs web Anda, buka wp-content> tema dan temukan folder tema Anda saat ini. Dalam contoh kita, ini akan menjadi burung hantu:
Buka folder Anda tema WordPress, klik kanan padanya dan tekan Buat file baru.
Beri nama file baru Anda custom-shortcodes.php kemudian klik OK. Anda kemudian dapat mengeditnya dengan mengklik kanan padanya dan memilih opsi Lihat/Edit :
Ini akan membuka file di editor teks default Anda. Maka Anda hanya perlu menambahkan blok kode berikut:
<?php ?>
Ini memastikan bahwa file baru Anda akan ditafsirkan sebagai PHP, yang merupakan bahasa skrip WordPress yang dibangun.
Anda kemudian dapat menyimpan perubahan dan menutup file. Pastikan untuk mencentang kotak berikut untuk memastikannya akan diperbarui di server dan diterapkan ke situs web Anda:
Kemudian buka file functions.php di folder tema yang sama dan tambahkan baris kode berikut di bagian bawah dokumen:
include('shortcodes-personnalises.php');
Ini akan memberi tahu sistem untuk memasukkan perubahan apa pun yang Anda buat pada file custom-shortcodes.php dalam functions.php sementara memungkinkan Anda untuk memisahkan mereka. Saat Anda siap, simpan perubahan Anda dan tutup file.
Langkah 2 - Buat Fungsi Kode Pendek
Selanjutnya, Anda harus membuat fungsi kode pendek, menginstruksikannya apa yang harus dilakukan. Pilih opsi lagi Lihat/Edit dari file Anda custom-shortcodes.php. Gunakan cuplikan kode berikut untuk menambahkan tindakan untuk mengaitkan fungsi Anda ke:
function subscribe_link(){
return 'Follow us on <a rel="nofollow" href="https://twitter.com/BlogPasCher">Twitter</a>';
}Selanjutnya, Anda perlu menambahkan fungsi panggilan balik, yang akan berjalan saat tindakan kait diaktifkan. Menambahkan baris kode berikut langsung setelah yang disebutkan di atas akan memberi tahu WordPress bahwa fungsi Anda adalah kode pendek:
add_shortcode('sabonner', 'subscribe_link');Saat Anda membuat kode pendek menggunakan fungsi add_shortcode, Anda menetapkan tag kode pendek “ ($tag) " dan kait fungsi yang sesuai " ($func) yang akan dijalankan setiap kali pintasan digunakan.
Dengan kata lain, jika tag kode pendeknya adalah [berlangganan], maka kaitnya 'subscribe_link' mengarahkan pengunjung ke URL yang disediakan.
Oleh karena itu seluruh kode yang Anda gunakan dalam file Anda shortcodes-personnalises.php akan terlihat seperti ini:
Perlu dicatat bahwa saat memberi nama tag, Anda hanya boleh menggunakan huruf kecil, meskipun garis bawah dapat digunakan. Ini juga penting hindari menggunakan tanda hubung, karena dapat mengganggu kode pendek lainnya.
Langkah 3 – Tambahkan Shortcode Self-Close ke Situs Web
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 [berlangganan] langsung ke dalam postingan:
Ini akan menampilkan konten berikut kepada pengunjung situs web Anda:
Jika Anda senang dengan kode pendek ini, Anda tidak perlu melakukan hal lain. Namun, jika Anda ingin menyesuaikannya, Anda dapat melompat ke langkah berikutnya.
Langkah 4 - Tambahkan Parameter ke Kode Pendek
Anda dapat menyesuaikan kode pendek "langganan" untuk fungsionalitas tambahan untuk menampilkan tautan media sosial lainnya. Anda dapat melakukannya dengan menambahkan parameter untuk mengubah URL.
untuk tambahkan atribut manajemen, Anda perlu membuka file 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('sabonner', 'subscribe_link_att');Ini akan memungkinkan Anda untuk menyesuaikan tautan di tag kode pendek Anda untuk menambahkannya ke editor Gutenberg. Anda dapat menempelkannya di atas kode sebelumnya di file custom-shortcodes.php. Seharusnya terlihat seperti ini:
Menambahkan shortcode_atts() fungsi akan menggabungkan atribut pengguna dengan semua atribut yang diketahui, dan data yang hilang akan diganti dengan nilai defaultnya. Saat Anda siap, simpan perubahan Anda dan tutup file.
Langkah 5 - Uji pengaturan
Anda sekarang dapat menguji kode pendek yang diperbarui di Editor Blok WordPress. Dalam contoh kami, kami menguji tautan Twitter dan Facebook kami dengan kode pendek berikut:
[subscribe link='https://www.facebook.com/live.blogpascher']Facebook[/subscribe]
[subscribe link='https://twitter.com/BlogPasCher']Twitter[/subscribe]
Ini akan menghasilkan hasil berikut di front-end:
Kode pendek yang menutup sendiri ini menampilkan URL langsung profil sosial Anda kepada pengunjung. Namun, Anda mungkin ingin fitur ini terlihat sedikit dipoles.
Misalnya, Anda akan dapat membuat versi terlampir yang memungkinkan Anda untuk sepenuhnya menyesuaikan teks jangkar yang ditampilkan kepada pengguna saat mereka akan mengkliknya. Kami akan menunjukkan cara melakukannya di langkah berikutnya.
Langkah 6 – Buat Enclosing Shortcode
Kode pendek terlampir akan diformat sama seperti contoh tutup otomatis sebelumnya. Namun, itu akan menyertakan parameter tambahan untuk fungsi tersebut.
Pertama, Anda perlu menambahkan $content = null, yang mengidentifikasi fungsi ini sebagai kode pendek terlampir. Anda kemudian dapat menambahkan do_shortcode dari WordPress, yang akan mencari konten untuk shortcode.
Di dalam file 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 'Suivez nous sur <a href="'.($a['link']).'" style="color: blue">'.$content.'</a>';
}
add_shortcode('sabonner', 'subscribe_link_att');Saat Anda siap, file Anda custom-shortcodes.php harus terlihat seperti ini:
Kode sebelumnya memiliki atribut " gaya " tambahan, yang akan mengubah teks jangkar menjadi warna biru. Jangan lupa untuk menyimpan perubahan Anda setelah selesai.
Langkah 7 – Tambahkan Enclosing Shortcode ke Situs Web
Anda sekarang dapat memasukkan kode pendek Anda di editor blok WordPress untuk melihat hasil akhirnya:
Seperti yang Anda perhatikan, Anda dapat dengan mudah mengubah URL halaman media sosial dan teks jangkar yang ditampilkan kepada pengunjung menggunakan kode pendek pembungkus ini. Dalam hal ini, kami telah memilih "Facebook" et "Indonesia" :
Di sana ! Anda sekarang telah membuat kode pendek khusus untuk tautan berlangganan di halaman dan posting Anda. Perhatikan bahwa semua langkah yang disebutkan di atas dapat dimodifikasi untuk membuat semua jenis elemen berbeda menggunakan fitur WordPress Shortcode.
Menambahkan fungsionalitas tambahan ke situs web WordPress Anda jauh lebih mudah dengan kode pendek. Anda dapat menggunakannya untuk mempersonalisasi konten yang ada dan menambahkan fitur interaktif, seperti formulir kontak, galeri gambar, atau tautan langganan.
Sumber daya lain yang direkomendasikan
Kami juga mengundang Anda untuk berkonsultasi dengan sumber daya di bawah ini untuk melangkah lebih jauh dalam cengkeraman dan kontrol situs web dan blog Anda.
- Cara membuat tombol mengambang dengan indeks Z dengan Elementor
- Kapan dan bagaimana untuk menginstal WordPress dalam subdirektori
- Cara Membuat Plugin WordPress Blok Gutenberg Sederhana
- Cara Menambahkan Font Kustom ke Situs WordPress
Kesimpulan
Pada artikel ini, kami belajar cara membuat kode pendek Anda sendiri di WordPress. Jika Anda memiliki masalah atau saran, beri tahu kami di dalam komentar.
Namun, Anda juga akan dapat berkonsultasi dengan kami ressources, jika Anda memerlukan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda, dengan membaca panduan kami di Pembuatan blog WordPress atau yang di Divi: tema WordPress terbaik sepanjang masa.
Sementara itu, bagikan artikel ini di berbagai jejaring sosial Anda.
...
