Posted on

Tips-trik Membuat Dan Kustomisasi Topbar WordPress

wpJakarta.Com – Tips-trik Membuat Dan Kustomisasi Topbar WordPress. Selalu ada cara untuk membuat atau memperluas fungsi website WordPress. Maksudnya banyak cara bisa dilakukan untuk lebih membuat website yang dikelola menjadi lebih informational. Bagi yang menggunakan tema premium, biasanya sudah menyediakan tiga bahkan lima menu navigasi.

wp jakarta tips-trik wordpresswp jakarta tips-trik wordpress

Tips trik WordPress lainnya

Contohnya saja : Primary menu, Secondary menu, Sosial menu, Footer menu dan Mobile menu. Tapi untuk tema website WordPress versi free atau lite biasanya hanya menyediakan maksimal dua lokasi menu saya, primary dan secondary. Namun tetap ada ruang untuk membuat menu baru. Atau setidaknya memberikan informasi yang berguna bagi pengunjung website kita.

Tips-trik Membuat Dan Kustomisasi Topbar WordPress

Salah satunya dengan menempatkan teks informasi atau link di atas header website, atau biasa di sebut topbar. Banyak tema website WordPress (terutama premium) yang sudah memiliki fitur untuk setting topbar melalui halaman customizer. Namun lagi-lagi tema website WordPress versi free atau lite biasanya terbatas dan tidak memiliki fitur untuk menempatkan informasi pada topbar. Kami memiliki tips-trik untuk membuat dan meng- kustomisasi topbar pada website WordPress.

Membuat Kustomisasi Topbar WordPress

Topbar adalah seksi atau bagian paling atas dari halaman sebuah website. Ya, tepat paling atas. Di website ini anda dapat menemuinya bagian dengan background warna hitam yang bertuliskan teks warna putih “wpJakarta.Com – a Non Open BO Company !!!. Yup… itu adalah bagian dimana kami melakukan kustomisasi pada bagian topbar website ini. Informasinya jelas bahwa wpJakarta.Com adalah bukan situs website Wanita Panggilan atau website dimana para suhu memberikan laporan FR sehabis benerin genteng, heheheheh.

Untuk melakukan demikian tambahkan kode berikut ke dalam file function.php. Namun mengedit langsung file function.php bukanlah cara yang baik, karena kode yang biasa di tambahkan pasti akan terhapus jika terdapat update tema website.

Tips trik WooCommerce lainnya

Membuat dan kustomisasi topbar WordPress dengan kode php

Untuk menyiasatinya bisa dengan membuat site specific plugin khusus untuk menambahkan setiap kode tambahan ke dalam file WordPress. Untuk lebih jelas mengenai apa itu “site specific plugin” ? Kunjungi artikel Tips-Trik Membuat Site Specific Plugin WordPress. yang pernah di tulis di website ini.

// Storefront Topbar
function wpjkt_storefront_topbar() {
    ?>
    <div id="topbar">
        <div class="col-full">
            <p><a href="https://wpjakarta.com/produktifitas/warung-produktif-jakarta-website-optimasi-bisnis-blog-dan-komunitas/">wpJakarta.Com - a Non Open BO Company !!!</a></p>
        </div>
    </div>
    <?php
}
add_action( 'storefront_before_header', 'wpjkt_storefront_topbar' );

Untuk melengkapi dalam membuat dan meng- kustomisasi topbar website WordPress, berikan sedikit sentuhan stylesheet dengan selector .topbar. Anda bisa menyesuaikan kode style css yang di inginkan.

#topbar {
 background-color:#000;
 text-align:center;
 text-decoration:underline;
}

#topbar > div > p > a {
 color:#fff;
}

Tentu saja, teks pada topbar tersebut dapat disesuaikan dengan yang anda mau atau yang sesuai dengan niche website yang di jalankan. Untuk website toko online misalnya, dengan memberikan informasi diskon atau promo menarik seperti contoh pada website freshplus62.com. Docs: Tips-trik Membuat Dan Kustomisasi Topbar WordPress.

Tips-trik membuat dan kustomisasi topbar website WordPress menggunakan plugin

Jika tidak ingin pusing-pusing menulis kode, tentu ada tips-trik lain untuk membuat dan meng- kustomisasi topbar website WordPress. Yaitu dengan memasang plugin. Beberapa plugin bisa di cari pada halaman repository plugin WordPress. https://wordpress.org/plugins/search/topbar/.

Artikel lainnya