Cara Menggunakan do_shortcode pada WordPress - Niagahoster Blog

Shortcode pada WordPress menyediakan fungsi tambahan yang memungkinkan Anda melakukan embed konten ke dalam halaman, postingan, maupun sidebar berbekal fungsi do_shortcode.

Beragam plugin dan template menggunakan fungsi shortcode, sehingga pengguna WordPress dapat dengan mudah menambahkan konten tertentu pada blog.

Untuk memudahkan pemahaman, kami ambil contoh berupa shortcode yang digunakan plugin Contact Form 7 berikut ini.

[contact-form-7 id="98" title="Blog Niagahoster Contact Form"]

Pada shortcode di atas terlihat kode berada dalam dua buah kurung siku, code tersebut di-generate oleh plugin Contact Form 7. Kemudian WordPress akan menampilkan konten yang dihasilkan oleh function PHP.

Jika Anda menambahkan shortcode pada postingan, halaman, atau sidebar, maka akan tampil form kontak seperti pada tutorial cara membuat form kontak.

Bagaimana jika Anda ingin menggunakan shortcode WordPress di dalam file template? Anda dapat melakukannya dengan function WordPress do_shortcode.

Apa yang Anda Perlukan?

Sebelum memulai langkah pada tutorial ini, Anda memerlukan:

Perhatian: Tutorial ini akan mengedit file template WordPress. Oleh karena itu, kami menyarankan Anda untuk melakukan backup website terlebih dahulu.

Berikut adalah Langkah Menggunakan do_shortcode pada WordPress

Pada bagian ini Anda telah memahami penggunaan shortcode pada WordPress. Selanjutnya adalah melakukan pengaturan pada shortcode untuk Contact Form 7 supaya dapat ditampilkan pada bagian template, misalnya di header. Permasalahannya, template Anda tidak memiliki widget untuk memasang shortcode.

Untuk mengatasi hal tersebut, yang perlu Anda lakukan adalah mendapatkan shortcode yang telah di-generate oleh plugin terlebih dahulu. Sebagai contoh, kami akan menggunakan shortcode dari Contact Form 7:

Catatan: Anda perlu instal plugin Contact Form 7 terlebih dahulu.

1. Akses dashboard WordPress dan pilih menu Contact > Contact Forms.

form kontak

2. Akan terlihat shortcode untuk form kontak di sebelah kanan (CatatanTitle shortcode bergantung pada nama yang Anda buat pada contoh ini: Blog Niagahoster Contact Form)

shortcode wordpress

3. Silakan salin shortcode tersebut.

Karena tidak terdapat widget pada bagian header di template WordPress yang Anda gunakan, Anda memerlukan function do_shortcode, dan codenya akan terlihat seperti berikut:

<?php echo do_shortcode( '[tempat shortcode anda diletakkan]' ); ?>

Untuk menambahkan Contact Form 7 pada header, Anda perlu mengedit file header.php. Seperti yang telah kami sampaikan sebelumnya, Anda perlu melakukan backup website terlebih dahulu sebelum mengubah file pada WordPress.

Ada beberapa cara mengedit file header.php misalnya melalui FTP Client, file manager, atau melalui dashboard WordPress. Dalam tutorial kali ini kami menggunakan pilihan ketiga.

1. Login ke dashboard WordPress.

2. Pilih menu Apearance > Editor.

edit file wordpress

3. Klik file header.php yang berada di menu sebelah kanan.

do_shortcode

4. Scroll ke bagian bawah dan letakkan shortcode pada posisi yang diinginkan. Shortcode pada tutorial ini akan terlihat seperti berikut ini.

<?php echo do_shortcode( '[contact-form-7 id="98" title="Blog Niagahoster Contact Form"]' ); ?>

5. Untuk shortcode kami letakkan sebelum tag </header> Berikut posisi penempatan code pada tutorial ini.

shortcode pada wordpress

6. Berikut ini adalah tampilan contact form pada header, untuk tampilannya akan berbeda tergantung dari template yang Anda gunakan, template pada tutorial ini menggunakan Twenty Fifteen.

template

Kesimpulan

Demikian cara menggunakan function do_shortcode pada WordPress. Apabila Anda memiliki cara lain seputar penggunaan function do_shortcode, jangan ragu untuk membagikannya melalui kolom komentar. Silakan klik Subscribe pada kolom yang tersedua untuk mendapatkan artikel terbaru langsung di inbox email Anda! 🙂

 

Subscribe Sekarang

Dapatkan beragam artikel tutorial, insight dan tips menarik seputar dunia online langsung melalui email Anda. Subscribe sekarang dan raih kesuksesan bersama kami!

There are currently no comments.