Memahami Shortcode WordPress

Jika Anda telah menggunakan WordPress untuk waktu yang lama, Anda mungkin sudah menggunakan beberapa shortcode.

Kode pendek adalah cuplikan kecil berguna yang memungkinkan Anda memasukkan semacam fungsi khusus ke dalam konten Anda yang tidak mungkin dilakukan. Sebagai contoh: banyak galeri gambar dan plugin penggeser memberi Anda kode pendek yang dapat Anda masukkan dengan mudah ke dalam konten Anda di mana pun Anda ingin membuat gambar yang tepat muncul di sana. Kode pendek biasanya terlihat seperti ini:

[example shortcode]

Dengan kata lain: kode pendek menyebabkan sesuatu yang istimewa terjadi di mana pun kode tersebut ditempatkan di teks Anda.
Tetapi Anda tidak terbatas pada shortcode yang telah ditentukan sebelumnya; Anda dapat menentukan kode pendek khusus untuk melakukan apa pun yang Anda inginkan! Mereka bisa sederhana, kompleks, atau apa pun di antaranya.

Dalam seri ini, kita akan mulai dengan shortcode sederhana, dan berlanjut ke beberapa contoh yang lebih rumit (dan bahkan lebih berguna!).

Catatan: kita akan bekerja terutama dengan PHP di sini, khususnya di file functions.php tema Anda. Jika Anda tidak menggunakan tema anak (atau tema khusus/pemula yang boleh diedit tanpa takut pembaruan menimpa perubahan Anda), Anda sebaiknya membuat tema anak sebelum memulai.

Perhatikan juga: Anda tidak memerlukan pengetahuan PHP apa pun untuk membaca posting ini, tetapi mengetahui setidaknya dasar-dasarnya akan membantu. Kode yang terlibat di sini cukup sederhana, dan kami mencoba membuatnya semudah mungkin untuk disalin dan disesuaikan. Kami akan menjelaskan setiap bagian dari kode saat kami melanjutkan, tetapi jika Anda benar-benar baru menggunakan PHP tema WordPress, ketahuilah bahwa sedikit kode buruk di file functions.php Anda dapat merusak situs.

Contoh Shortcode Sederhana yang Berguna

Katakanlah kita menginginkan kode pendek yang menyuntikkan bagian info-penulis khusus ke dalam sebuah pos, seperti ini:

Alih-alih membuat dan menata kotak, gambar, dan teks di editor visual WordPress, kami hanya akan membuat kode pendek untuk menampilkan semuanya dengan cuplikan sederhana!

(Catatan tambahan: WordPress memiliki cara yang lebih baik untuk bekerja dengan profil penulis, tetapi kami tetap menggunakan contoh ini karena contoh ini dengan baik menunjukkan betapa mudahnya menggunakan kode pendek untuk menempatkan blok konten tertentu pada halaman.)

Langkah 1: Tambahkan Kode Pendek di File functions.php Tema Anda

Anda akan menggunakan fungsi add_shortcode untuk memberi nama pada kode pendek Anda, dan memberi tahu WordPress apa yang harus dilakukan kapan pun kode pendek tersebut digunakan. Tambahkan baris ini ke file functions.php tema Anda:

 [php]add_shortcode( 'author_bio', 'create_author_bio' );[/php]

Tidak masalah di mana di dalam functions.php , tetapi untuk menghindari konflik, Kami sarankan untuk meletakkannya di bagian paling akhir. (Namun, jika file diakhiri dengan penutup ?> tag, itu harus dilakukan tepat sebelum itu, bukan setelahnya.)

Sebelum melangkah lebih jauh, mari kita uraikan garis itu sedikit, sehingga kita memahami apa yang sebenarnya terjadi di sini. Dua potongan teks, atau "argumen", di dalam tanda kurung sebenarnya tidak istimewa; mereka hanya nama. Mari kita bahas apa artinya masing-masing:

1. Argumen pertama: dalam hal ini, author_bio – memberi tahu WordPress nama sebenarnya dari shortcode Anda. Ini akan menjadi teks yang dapat diketik pengguna, dalam tanda kurung, untuk menggunakan kode pendek. Jadi dengan kode ini seperti yang tertulis, [author_bio] akan menjadi shortcode kita untuk memicu kotak bio penulis kita.
   Teks ini bisa berupa apa saja, tetapi selalu yang terbaik adalah mencoba menjadi unik. Dengan begitu, Anda tidak akan menghadapi risiko nama kode pendek Anda bertentangan dengan nama orang lain dari plugin atau tema lain yang terpasang.
2. Argumen kedua: dalam hal ini, create_author_bio – mengarahkan WordPress ke fungsi PHP sebenarnya yang harus dijalankan setiap kali kode pendek ini digunakan. Kami akan membuat fungsi itu di langkah berikutnya; untuk saat ini, kami hanya memberi tahu WordPress apa namanya nantinya. (Nama ini juga harus unik, untuk menghindari konflik.)

Jadi jika itu membantu, Anda dapat memikirkan kode seperti ini:

 [php]add_shortcode( 'when_you_see_THIS_shortcode', 'do_THIS' );[/php]

Jika Anda tertarik dengan detail seluk beluk lainnya, lihat entri codex add_shortcode .

Langkah 2: Buat Fungsi untuk Menangani Kode Pendek

Sekarang kita perlu benar-benar membuat fungsi yang baru saja kita beri nama!

Karena kita baru saja memberi tahu WordPress pada langkah terakhir bahwa nama fungsi kita adalah create_author_bio, kode kita sekarang akan terlihat seperti ini, setelah fungsi baru ditambahkan:

 [php]add_shortcode( 'author_bio', 'create_author_bio' ); function create_author_bio(){ //Code goes here! }[/php]

Anda mungkin menyadari bahwa fungsi ini belum benar-benar melakukan apa pun; semua yang ada di dalamnya adalah komentar. Kami akan menanganinya di langkah berikutnya. Untuk saat ini, kami hanya ingin menunjukkan bahwa sebenarnya hanya ada dua bagian di sini: pendaftaran kode pendek, dan fungsi yang terjadi setiap kali digunakan. WordPress PHP mungkin terlihat mengintimidasi, tetapi sebenarnya sesederhana itu!

Catatan tambahan: tidak masalah jika fungsi create_author_bio muncul setelah fungsi add_shortcode atau sebelumnya. Urutan tidak penting dalam kasus ini.

Langkah 3: Jadikan Fungsi melakukan Sesuatu

Sekarang yang tersisa hanyalah membuat fungsi kita melakukan apa yang kita inginkan!

Fungsi seperti ini dapat melakukan apa saja, tetapi apa pun yang terjadi, pada akhirnya akan mengembalikan nilai tunggal (seperti string teks atau angka). Nilai itu bisa berupa panjang atau kerumitan apa pun, tetapi apa pun fungsi yang dikembalikan adalah apa yang akan muncul di mana pun kode pendek kita digunakan.

Untuk tujuan kita, ini hanya beberapa HTML sederhana. Inilah markup untuk menambahkan gambar penulis dan bio kami di dalam elemen <aside> dengan kelas khusus (tapi jangan letakkan ini dulu; kami hanya melihatnya sebagai pratinjau untuk saat ini):

 [html]<aside class="author-bio-box"></span> <img src="https://upload.wikimedia.org/wikipedia/en/1/1f/Bilbo_Baggins_Tolkien_illustration.jpg"> <p>Bilbo Baggins is the author of <cite>The Hobbit</cite>, translator of various works from the elvish, and author of a number of poems and songs.</p> <p>He is the oldest Hobbit ever in Middle Earth, and spends his days in his Tol Eressea home across the sea.</p> </aside>[/html]

Terakhir, kita akan menggunakan kelas author-bio-box di baris pertama untuk menata bio dengan CSS. (Kami akan menggunakan kelas alih-alih ID, kalau-kalau Anda ingin menambahkan lebih dari satu kode pendek penulis untuk konten yang ditulis oleh banyak penulis.) Namun ingat, ini bisa berupa apa pun yang ingin kami masukkan ke halaman!

Sekarang, yang perlu kita lakukan hanyalah mengembalikan fungsi kode pendek kita ke HTML di atas!

Karena file functions.php seharusnya hanya berisi… yah, fungsi PHP (dan juga untuk kerapian), Kami telah menghapus jeda baris dan spasi di antara elemen HTML yang baru saja kami lihat dan memasukkannya ke dalam string (di dalam tanda kutip tunggal) . Tapi secara fungsional, ini masih sama dengan cuplikan HTML yang baru saja kita lihat di atas, dan seperti inilah tampilan akhir kode PHP kita:

 [html]add_shortcode( 'author_bio', 'create_author_bio' ); function create_author_bio(){ return '<aside class="author-bio-box"><img src="https://upload.wikimedia.org/wikipedia/en/1/1f/Bilbo_Baggins_Tolkien_illustration.jpg"><p>Bilbo Baggins is the author of <cite>The Hobbit</cite>, translator of various works from the elvish, and author of a number of poems and songs.</p><p>He is the oldest Hobbit ever in Middle Earth, and spends his days in his Tol Eressea home across the sea.</p></aside>'; }[/html]

Kita sudah selesai dengan PHP! Setelah kita menyimpan file functions.php kita dengan kode akhir di atas di dalamnya, setiap penulis cukup memasukkan [author_bio] di halaman atau postingan mana saja, dan HTML di atas akan muncul di tempat shortcode!

Plus, hal yang sangat keren adalah: jika kita perlu memperbarui bio kita, kita tidak perlu mengedit setiap tempat yang muncul! Sebagai gantinya, yang perlu kita lakukan hanyalah mengedit kode di file functions.php kita, dan itu akan diperbarui di mana saja sekaligus. Rapi, ya?

Namun, untuk memanfaatkan ini secara maksimal, kami mungkin ingin menambahkan beberapa gaya khusus ke kotak bio.

Langkah 4: Tambahkan Beberapa CSS

Kode pendeknya tidak bagus tanpa beberapa gaya, jadi mari kita tambahkan! Anda mungkin perlu sedikit menyesuaikan beberapa nilai, tergantung pada font situs Anda sendiri (yang ada di gambar di atas adalah Teks Fanwood) dan aturan CSS apa yang sudah ada. Atau Anda mungkin hanya ingin mencoba sesuatu yang berbeda!

CSS ini dapat disalin ke file style.css tema (anak) Anda, atau jika Anda menjalankan WordPress 4.7 atau lebih tinggi (yang seharusnya!), Anda dapat menempelkan CSS ini ke kotak "CSS Tambahan" di Kustomisasi layar:

 [css].author-bio-box { background: #d4ead9; padding: 2em; overflow: auto; font-family: Fanwood Text; font-size: 1.2em; line-height: 1.4em; } .author-bio-box img { float: left; max-width: 128px; height: auto; margin: 0 1em 0 0; } .author-bio-box > p:first-of-type:first-letter { font-size: 3.1em; line-height: 1; float: left; margin-bottom: -.2em; } .author-bio-box > p:last-of-type { margin: 0; }[/css]

Sekarang semuanya harus terlihat jauh lebih baik. Tapi jangan ragu untuk bermain-main dengan CSS untuk membuat kotak penulis Anda sendiri dan membuatnya betah di situs Anda!

Direkomendasikan: Jadikan Fungsinya “Dapat Dipasang”

Ini tidak khusus untuk kode pendek, dan tidak benar-benar diperlukan agar kode berfungsi, tetapi ini adalah praktik terbaik, dan ini saat yang tepat untuk menyebutkannya.

Pertama, sedikit latar belakang cara kerja PHP :

Ingat bagaimana kita menamai sendiri fungsi create_author_bio kita? Yah, tidak ada yang istimewa dengan nama create_author_bio; kita dapat dengan mudah menamai fungsi kita apa pun yang kita inginkan (walaupun sebaiknya nama fungsi memberi Anda setidaknya sedikit petunjuk tentang fungsinya, itulah sebabnya kami memilih create_author_bio ).

Tapi inilah masalahnya: jika dua fungsi PHP diberi nama yang sama, hasilnya akan menjadi kesalahan fatal yang akan mencegah situs memuat, karena PHP tidak akan tahu fungsi mana yang benar. PHP tidak menebak, jadi berhenti begitu saja.

Dan bukan hanya kode kita yang perlu kita khawatirkan; situs WordPress mungkin menggunakan kode dari lusinan atau bahkan ratusan pengembang yang berbeda, tergantung pada plugin dan tema yang diinstal. Jika nama fungsi yang sama digunakan dua kali, semuanya rusak!

Itu buruk, dan jelas, kami ingin memastikan hal itu tidak pernah terjadi.

Kita dapat melakukannya dengan menjadikan fungsi kita "bisa dicolokkan;" dengan kata lain, memberi tahu WordPress untuk tidak membuat fungsi kita jika sudah ada yang lain dengan nama yang sama. Sederhana dan elegan; kami hanya membungkus kode kami yang ada di dalam pernyataan bersyarat yang mudah ini:

 [php]if( !function_exists( 'create_author_bio' ) ){ //Our existing PHP goes here! }[/php]

Ekspresi if kondisional itu hanya memeriksa untuk memastikan bahwa fungsi bernama create_author_bio belum ada. Semua kode PHP yang telah kita gunakan sejauh ini hanya bisa dipindahkan di dalam pernyataan itu, di antara tanda kurung { } .

Tetap yang terbaik adalah memberi nama fungsi seunik mungkin! Membuat fungsi kita dapat dicolokkan hanya untuk menghindari kesalahan fatal. Jadi jika ada konflik penamaan, kode pendek kami tetap tidak berfungsi, tetapi setidaknya situs tersebut masih aktif dan tidak ada lagi yang rusak.

Kesimpulan

Itu dia! Semoga Anda menikmati membuat kode pendek bio penulis khusus! Jika Anda mengikuti, yang perlu Anda lakukan hanyalah mengetik [author_bio] di mana saja di halaman atau postingan dan kode Anda akan muncul!

Kode pendek ini dapat dengan mudah diadaptasi untuk menampilkan apa pun ke halaman. GIF, blok khusus HTML dan/atau JavaScript, gambar atau video...apa pun yang Anda inginkan!

Namun, meskipun contoh ini berguna jika Anda hanya perlu mengeluarkan satu nilai statis ke halaman di suatu tempat, itu tidak terlalu fleksibel. Itu akan selalu mengembalikan hal yang persis sama setiap saat, dan kami sering membutuhkan kode pendek agar lebih mudah beradaptasi dari itu.

Kabar baik: kita hanya membahas dasar-dasar shortcode, dan mereka mampu melakukan lebih banyak lagi!