Kami berusaha menyediakan website yang berguna untuk pengetahuan para pembaca, panduan singkat dan sederhana ini semoga menjadi jalan bagi kalian yang mengalami kesulitan dalam membuat blog di dunia maya, kami mengambil sumber dari blog Panduan Blog Online.com seandainya kalian berkenan langsung mengunjungi website tersebut, selamat menikmati!
WordPress adalah CMS yang terkenal dengan berbagai fasilitas yang memudahkan penggunanya. Shortcode WordPress adalah salah satunya.Berkat fitur ini, Anda tidak perlu menuliskan kode-kode HTML yang rumit untuk melakukan kustomisasi pada halaman situs dan konten blog.
Jika Anda ingin mempelajari shortcode WordPress, artikel ini adalah tempat yang tepat. Di sini, Anda akan dipandu secara lengkap, mulai dari pengenalan hingga cara membuat shortcode custom. Selamat membaca!
Shortcode WordPress adalah kode-kode pendek yang digunakan untuk merubah format konten atau menambahkan fitur di halaman situs.
Pada dasarnya, ia memiliki fungsi yang sama dengan kode HTML dan embed. Hanya saja, bentuknya sangat ringkas.
Shortcode ditandai dengan tag. Karena itu, ia diawali dengan tanda [ dan diakhiri dengan tanda ]. Selain itu, shortcode dibagi menjadi dua jenis:
Baik self-enclosed shortcode dan enclosing shortcode dapat diikuti dengan attribute dan value untuk kustomisasi lebih lanjut. Contohnya seperti demikian:
[shortcode attr=”xyz”]KONTEN[/shortcode]
Apa saja shortcode yang bisa digunakan? WordPress memiliki enam shortcode bawaan, yaitu audio, playlist, gallery, video, caption, dan embed.
Selain itu, masih ada banyak shortcode lainnya yang tersedia jika Anda memasang plugin dan tema tertentu. Bahkan, Anda bisa membuat shortcode custom yang caranya akan kami jelaskan nanti.
Sekarang Anda belajar untuk menggunakan shortcode WordPress di editor halaman dan post terlebih dahulu.
Di panduan ini, kami akan mencontohkan penggunaan shortcode di blog post. Pertama, klik Posts > Add New di Dashboard WordPress. Kemudian klik ikon + untuk menambahkan blok baru. Pilih blok Shortcode.
Jika susah untuk menemukannya, ketikkan saja nama blok tersebut pada search bar yang ada di atas daftar blok.
Setelah blok shortcode muncul, masukkan kode dari formatting atau fitur yang ingin digunakan pada kolom yang tersedia. Sebagai contoh, kami memasukkan shortcode galeri beserta attribute dan value-nya:
Bagaimana cara mengetahui ID gambar yang telah diunggah? Sebenarnya mudah, tetapi ID ini cukup tersembunyi.
Untuk mengetahuinya, akses Media Library dan arahkan kursor Anda ke salah satu judul gambar. Kemudian, perhatikan URL yang muncul di pojok kiri bawah halaman.
Di setiap URL gambar, Anda akan menemukan “post=” yang diikuti oleh angka. Nah, angka tersebut adalah ID-nya. Agar lebih jelas, Anda dapat melihat contohnya di bawah ini.
Artinya, ID dari gambar tersebut adalah 8.
Nah, hasil dari shortcode tadi seperti demikian di dalam post:
Langkah-langkah di atas dilakukan jika Anda menggunakan editor Gutenberg bawaan WordPress. Bagi yang lebih suka dengan editor klasik, Anda tinggal mengetikkan shortcode tanpa klik tombol apapun.
Selain untuk konten halaman dan blog post, shortcode WordPress juga bisa Anda gunakan di sidebar sebagai widget.
Namun, perlu diketahui bahwa tidak semua tema WordPress mendukung sidebar. Tema bawaan WordPress, misalnya, hanya mendukung widget di area footer. Apabila Anda memang menginginkan sidebar untuk widget, carilah tema yang mendukungnya.
Tidak perlu repot-repot. Klik Appearance > Themes > Add New. Di halaman tema klik Feature Filter dan centang checkbox Left Sidebar atau Right Sidebar. Kemudian, klik Apply Filters untuk menampilkan hasil pencarian tema.
Jika sudah meng-install tema yang bisa menggunakan sidebar, klik Appearance > Widgets di Dashboard. Pada halaman selanjutnya Anda dapat menemukan daftar berbagai jenis widgets. Klik Text dan geser ke daftar widget sidebar.
Klik Text lagi untuk membuka pengaturan widget-nya, kemudian beri judul, ketikkan shortcode, dan klik Save.
Mari kita cek hasilnya:
Anda dapat menampilkan berbagai elemen atau fitur di sidebar atau footer dengan bantuan shortcode.
Namun, fungsi shortcode sebenarnya lebih dari itu. Anda juga bisa meletakkannya di mana saja pada halaman website. Misalnya, Anda ingin meletakkan formulir sederhana di akhir setiap blog post.
Untuk melakukannya, Anda perlu menggunakan fungsi do_shortcode. Ini adalah sebuah baris kode yang ditambahkan dalam file tema WordPress, seperti header.php atau footer.php. Contoh kodenya seperti demikian:
<?php echo do_shortcode("[shortcode_anda]"); ?>Pada kode tersebut, [shortocde_anda] adalah tempat di mana Anda meletakkan shortcode dari elemen yang diinginkan.
Ingin mengetahui caranya lebih lanjut? Anda bisa membaca panduan kami tentang fungsi do_shortcode.
WordPress menyediakan ribuan tema dan plugin yang memudahkan pengguna untuk membuat website sesuai keinginan. Namun, bagaimana jika Anda tidak menemukan fitur atau fungsi yang dikehendaki? Atau mungkin Anda ingin membuat fitur tersendiri?
Anda bisa melakukannya dengan membuat shortcode WordPress sendiri. Caranya tidak semudah langkah-langkah yang telah kami bahas sebelumnya karena membutuhkan pemahaman dasar tentang bahasa pemrograman PHP. Akan tetapi, akan sangat memudahkan Anda dalam melakukan kustomisasi jika dapat melakukannya.
Sebelum mulai mempelajari cara membuat shortcode WordPress, Anda perlu memahami shortcode API terlebih dahulu yang akan kami jelaskan pada bagian ini.
Shortcode API milik WordPress adalah protokol yang menjadi dasar pembuatan dan penggunaan shortcode. Tanpanya, shortcode tidak dapat berfungsi.
Pada dasarnya, API tersebut bertugas untuk melakukan parsing terhadap kode-kode yang telah ditetapkan untuk sebuah shortcode dan attribute-nya. Dengan demikian, Anda tidak perlu mengetikkan baris kode yang rumit setiap kali ingin menambahkan sebuah elemen atau fitur pada halaman.
Tugas tersebut dilakukan setiap kali halaman website Anda diakses. Saat proses halaman dimuat, shortcode API mencari shortcode-shortcode yang terdaftar di dalamnya.
Jika menemukan shortcode yang terdaftar, protokol tersebut menampilkan elemen yang sesuai pada letak yang ditentukan.
Nah, bagaimana cara mendaftarkan shortcode yang Anda buat? Untuk melakukannya, Anda perlu memasukkan fungsi add_shortcode() di dalam file functions.php milik tema atau plugin yang digunakan. Di bawah ini adalah format kodenya:
add_shortcode( 'shortcode_name', 'shortcode_handler_function' );
Kode tersebut diikuti oleh dua hal:
Berikut adalah format kode handler function:
function shortcode_handler_function( $atts, $content, $tag ){ }Pada kode tersebut terdapat tiga bagian, yaitu:
Tadi sudah kami sebutkan bahwa fungsi add_shortcode() dimasukkan ke dalam file functions.php tema atau plugin. Akan tetapi, penanganan keduanya sedikit berbeda.
Untuk tema, Anda tinggal menambahkan kode fungsi add_shortcode() beserta nama shortcode dan handler function-nya.
Untuk plugin, Anda dianjurkan untuk memastikan bahwa shortcode custom dijalankan hanya setelah halaman website selesai dimuat. Ini diperlukan Agar plugin terkait tidak mengalami error.
Anda dapat memastikannya dengan fungsi shortcodes_init. Kodenya seperti di bawah ini:
function shortcodes_init(){add_shortcode( 'shortcode_name', 'shortcode_handler_function' );
}
add_action('init', 'shortcodes_init');Tiba bagian yang Anda tunggu, yaitu membuat shortcode WordPress custom. Untuk mempraktikkan cara yang telah dibahas pada bagian sebelumnya, kami akan memberikan dua contoh shortcode beserta langkah pembuatannya.
Sebagai catatan, pastikan Anda telah melakukan backup WordPress sebelum mengubah file tema maupun plugin. Ini diperlukan agar Anda bisa restore website jika terjadi kesalahan dalam mengedit file tersebut.
Tombol CTA atau call-to-action umumnya digunakan untuk mengajak pengunjung situs atau blog agar melakukan hal yang dikehendaki pemilik website. Misalnya mendaftar ke sebuah layanan, mengisi formulir, dan subscribe konten blog.
Apabila ingin menyisipkan tombol serupa, Anda dapat menggunakan template kode di bawah ini. Attribute-nya juga dapat disesuaikan dengan keinginan Anda, tentunya.
add_shortcode( 'tombol_cta', 'contoh_cta' );
function contoh_cta( $atts ) {$a = shortcode_atts( array(
'link' => '#',
'id' => 'cta',
'color' => 'blue',
'size' => '',
'label' => 'Button',
'target' => '_self'
), $atts );
$output = '<p><a href="' . esc_url( $a['link'] ) . '" id="' . esc_attr( $a['id'] ) . '" class="button ' . esc_attr( $a['color'] ) . ' ' . esc_attr( $a['size'] ) . '" target="' . esc_attr($a['target']) . '">' . esc_attr( $a['label'] ) . '</a></p>';
return $output;
}
Agar mudah dipahami kami akan menjelaskan bagian-bagian dari kode di atas:
Pada contoh yang kedua ini kami akan membuat sebuah shortcode untuk menampilkan kotak teks. Elemen ini dapat digunakan jika Anda ingin meletakkan tulisan penting dalam sebuah kotak.
add_shortcode( 'kotak_teks', 'contoh_kotak_teks' );
function contoh_kotak_teks( $atts, $content = null ) {$a = shortcode_atts( array(
'title' => 'Title',
'title_color' => 'white',
'color' => 'blue',
), $atts );
$output = '<div class="contoh_kotak_teks" style="border:2px solid ' . esc_attr( $a['color'] ) . ';">'.'<div class="judul_contoh_kotak_teks" style="background-color:' . esc_attr( $a['color'] ) . ';"><h3 style="color:' . esc_attr( $a['title_color'] ) . ';">' . esc_attr( $a['title'] ) . '</h3></div>'.'<div class="isi_contoh_kotak_teks"><p>' . esc_attr( $content ) . '</p></div>'.'</div>';
return $output;
}
Karena shortcode ini digunakan untuk mengubah format teks, Anda perlu memberitahu WordPress bahwa ia merupakan enclosing shortcode. Maka dari itu, $content = null harus ditambahkan ke dalam shortcode handler.
Seperti yang telah dipelajari dari artikel ini, shortcode WordPress memudahkan kustomisasi website. Namun, penggunaannya tidak selalu berimbas baik untuk situs Anda. Di bawah ini kami jelaskan kelebihan dan kekurangan yang perlu Anda waspadai ketika menggunakan shortcode.
Berikut adalah manfaat yang Anda dapatkan dengan adanya shortcode:
Berikut adalah kekurangan yang harus Anda ketahui sebelum menggunakan shortcode:
Bagi Anda yang sedang belajar membuat situs dengan WordPress, shortcode adalah fitur yang sangat membantu. Dengannya, Anda dapat menambahkan berbagai elemen pada halaman website maupun konten blog.
Dengan mempelajari panduan ini, Anda tidak hanya memahami cara menggunakannya, tetapi juga cara membuat shortcode WordPress custom.
Jika memiliki pertanyaan, jangan sungkan untuk meninggalkan komentar Anda pada kolom yang tersedia di bawah.
Source:niagahoster.com
No comments:
Post a Comment