Membuat Horizontal Scroll untuk Menu Mobile di NewKarma, Bloggingpro, Majalahpro

oleh -248 views

POSMETRO MEDAN – Menu atau Navigation adalah hal hal yang menjadi perhatian bagi pemilik website, untuk memudahkan pengunjung berpindah dari halaman satu ke halaman lainnya. Menu atau Navigasi juga digunakan untuk menampilkan fitur-fitur yang dimiliki oleh sebuah website, mulai dari layanan hingga kategori artikel.

Banyaknya pengunjung website yang menggunakan perangkat mobile atau smartphone saat ini membuat para pemilik website harus menyajikan tampilan web yang menarik dan mudah diakses. Namun terkadang, pemilik website hanya terpaku pada tampilannya saja. Alih-alih memberikan tampilan yang baik, malah kerap keberadaan menu mengganggu tampilan website.

Pengantar

Pada artikel ini, saya akan membagikan cara membuat horizontal scroll menu untuk tampilan mobile website. Menu ini sebenarnya bisa juga digunakan untuk versi desktop, namun sepanjang sepengetahuan saya lebih banyak digunakan untuk versi mobile. Contoh menu ini ada di bagian header website ini sat diakses melalui mobile device.

Fokus tutorial ini untuk pengguna template NewKarma, Bloggingpro dan MajalahPro buatan Mas Gian Mokhammad Ramadhan (kentooz, idtheme.com) . Mungkin bisa juga diterapkan untuk template wordpress lainnya.

 

Hal-hal yang harus dipersiapkan:

  1. Akses ke CPANEL>File Manager
  2. Akses ke Dashboard wordpress sebagai administrator

DISCLAIMER: Tutorial ini saya buat berdasarkan pengalaman pribadi, mungkin ada cara yang lebih mudah dari cara yang saya share pada artikel ini. Untuk mengantisipasi adanya kerusakan pada file yang diedit, disarankan untuk melakukan backup sebelum melakukan pengeditan.

 

Step by step membuat horizontal scroll menu:

Edit functions.php

Langkah pertama kita menambahkan fungsi baru ke website kita dengan cara menyisipkan baris berikut pada file fuctions.php. Tujuannya ialah membuat lokasi menu baru.

function wpb_custom_new_menu() {
register_nav_menu('my-custom-menu',__( 'Menu Mobile' ));
}
add_action( 'init', 'wpb_custom_new_menu' );

Buka CPANEL dimana website kalian disimpan, lalu akses File Manager. Secara default, letak function.php berada di public_html/wp-content/themes/bloggingpro/functions.php atau /public_html/wp-content/themes/newkarma/functions.php atau /public_html/wp-content/themes/majalahpro/functions.php.

Pada template NewKarma, sisipkan pada baris ke 87, untuk template Bloggingpro pada baris ke 74, untuk template Bloggingpro pada baris ke 87 Jangan lupa untuk menyimpan hasil file yang telah diedit.

 

Edit file header.php

Selanjutnya kita aktifkan fungsi menu baru tadi agar nanti bisa ditampilkan di frontend halaman web. Caranya dengan menyisipkan kode berikut pada file header.php

<?php
wp_nav_menu( array(
'theme_location' => 'my-custom-menu',
'container_class' => 'custom-menu-class' ) );
?>

Secara default, letak function.php berada di public_html/wp-content/themes/bloggingpro/header.php atau /public_html/wp-content/themes/newkarma/header.php.

Pada template NewKarma, sisipkan pada baris ke 103, untuk template Bloggingpro pada baris ke 125, untuk template MajalahPro pada baris ke 71  Jangan lupa untuk menyimpan hasil file yang telah diedit.

 

Konfigurasi menu baru

Untuk mengatur daftar menu yang akan ditampilkan, langkah selanjutnya ialah mengkonfigurasi menu. Buka dashboard wordpress lalu menuju ke TAMPILAN>MENU atau APPEARANCE>MENUS

Klik membuat menu baru atau create new menu

Buatlah nama menu sesuai keinginan, lalu tambahkan item-item yang akan dijadikan daftar menu. Harus diingat, horizontal scroll yang saya bagikan ini hanya mendukung satu tingkatan menu. Artinya anda tidak bisa membuat menu dropdown.

Jika sudah selesai, pada lokasi penayangan centang Menu Mobile. Klik Simpan Menu

 

Atur CSS untuk merapikan tampilan

Jika semua step telah dilakukan dengan benar, seharusnya pada website anda sudah menampilkan menu mobile yang tadi dibuat. Hanya saja tampilannya masih berantakan.

Untuk merapikan tampilan, dan mengaturnya supaya hanya muncul di mobile, langkah selanjutnya ialah menambahkan custom CSS berikut.

@media (min-width:768px) {
.custom-menu-class {
display:none;
}
}

.custom-menu-class {
margin-top:-16px;
margin-bottom:-20px;
}
.custom-menu-class ul {
overflow: auto;
white-space: nowrap;
overflow-x: auto;
margin: 1rem auto;
background-color: #2a2a72;
background-image: linear-gradient(315deg, #fc6203 0%, #fc3503 74%);
text-align: center;
padding-inline-start: 10px;
}

.custom-menu-class li {
max-width: 48em;
display: inline-block;
padding: 8px 5px;
}

.custom-menu-class li a {
text-decoration: none;
color: #fff;
}

Untuk menambahkannya, bisa melalui dua cara, yakni disisipkan pada file style.css atau melalui CSS Tambahan pada Sesuaikan. Kalau saya lebih menyarankan diletakkan di CSS Tambahan

Kode di atas tinggal ditempelkan di CSS Tambahan lalu klik TERBITKAN,dan selesai sudah cara membuat horizontal scroll menu.

Semoga artikel ini berguna bagi teman-teman pengguna wordpress, khususnya pengguna template NewKarma, BloggingPro dan MajalahPro buatan Mas Gian Mokhammad Ramadhan. Terima kasih. (Sumber : smartizen.my.id)

This site is using SEO Baclinks plugin created by Locco.Ro