Wordpress

Cara Menambahkan Area Widget Custom Tata Letak Pada WordPress

Area tata letak wordpress tepatnya bagian header atau homepage bisa di isi widget sesuai keinginan. Yaitu dengan menggunakan script function dan widget...

Cara menambahkan manual widget

Area tata letak wordpress tepatnya bagian header atau homepage bisa di isi widget sesuai keinginan. Yaitu dengan menggunakan script function dan widget keinginan. Cara menambahkan widget manual di wordpress tidak cukup sulit, Anda tinggal coding dan menerapkannya di function.php atau header.php bahkan footer pun bisa di modifikasi.

Coding manual widget dan tata letak wordpress membuat saya bingung awalnya. Tetapi setelah saya telusuri mencari informasi tentang bagaimana caranya mengatur tata letak widget ternyata hasilnya cukup mudah. Namun sebelum itu silahkan anda backup kode tema wordpress anda sehingga jika ada terjadi crash tidak usah pusing. Cukup restore saja data yang sudah anda backup sebelumnya.

Tujuan awal saya mengubahnya karena homepage website saya mbahalex terasa berat. Oleh karena itu saya mengubahnya dan mengecilkan css yang menurut saya tidak terpakai. Langsung saja menuju kodenya

Langkah-Langkah

1.Buatlah Header widget area dan silahkan kalian buka tema editor kalian dan buka function.php kemudian masukan kode di bawah ini dan klik save.

/**
* widget tengah di bawah primary menu by mbahalex.com
*/
function wpb_widgets_init() {
 
    register_sidebar( array(
        'name'          => 'Widget Letak Di Bawah Primary menu',
        'id'            => 'custom-header-widget',
        'before_widget' => '<div class="chw-widget">',
        'after_widget'  => '</div>',
        'before_title'  => '<h2 class="chw-title">',
        'after_title'   => '</h2>',
    ) );
 
}
add_action( 'widgets_init', 'wpb_widgets_init' );
Kode di atas memunculkan widget area tepat di bawah header dan Primary menu

2.Pastikan sudah muncul widget baru yang bernama Widget Letak Di Bawah Primary menu Anda bisa melihatnya di bagian widget area seperti berikut

Silahkan kalian menambahkan widget tambahan sesuai keinginan. Sebagai contoh diatas saya tambahkan widget Siteorigin.

3. Sampai di sini widget kalian tidak akan terlihat karena kalian belum memanggil function ini ke halaman tema anda.

Saya akan memanggilnya ke halaman index home di main index.php silahkan kalian panggil dengan kode seperti berikut

<?php
 
if ( is_active_sidebar( 'custom-header-widget' ) ) : ?>
    <div id="header-widget-area" class="chw-widget-area widget-area" role="complementary">
    <?php dynamic_sidebar( 'custom-header-widget' ); ?>
    </div>
     
<?php endif; ?>
index.php

Klik save/Update file. Dan refresh halaman website anda sehingga akan menjadi seperti berikut

Kesimpulan

Dengan kode manual menambahkan widget akan membuat kita paham arahan tata letak yang sesuai dengan tema kita. Perlu anda ketahui kode di atas saya dapatkan dari website WPbeginner dan saya mengubah nama class saja.

Note#

Jika anda tidak ingin menampilkan di halaman header/homepage tinggal kalian tempatkan kode langkah 3 ke tempat sesuai keinginan misalnya footer.php

Terimakasih dan selamat belajar tata letak widget 🙂

Written by Alex Sander Leonardo
Tidak akan ada pembuktian jika kita berhenti. Terus berjuang dan buktikan karya yang bermanfaat bagi orang lain. Menulis berbagai pengetahuan pribadi dan bisa dipertanggung jawabkan. Profile

Beri komentar...