Cara Membuat Menu Legalitas di Footer

RIFAIHAMDA.COM – Pernahkah kamu mencoba menambahkan menu halaman legalitas di bagian footer, tetapi tampilannya malah terlihat bertumpuk dan merusak estetika desain situs web? Mengatur menu di area footer memang sering kali bentrok dengan gaya bawaan dari tema yang digunakan.

Tenang, kamu tidak perlu bingung lagi. Lewat panduan sederhana ini, kita akan belajar cara menyisipkan menu legalitas langsung ke dalam skrip footer lengkap dengan sentuhan CSS khusus agar tampilannya menjadi rapi, responsif, dan terlihat elegan.

Halaman legalitas seperti Privacy Policy, Disclaimer, hingga Contact Us adalah elemen wajib agar situs web WordPress kamu terlihat profesional dan terpercaya di mata pengunjung maupun mesin pencari.

Namun, tak jarang tampilan menu legalitas di bagian footer justru berantakan atau terganggu oleh aturan border bawaan tema.

Jika kamu ingin menampilkan menu legal yang rapi, sejajar, dan bebas dari batasan widget, artikel ini akan membahas langkah-langkah praktis membuat menu legalitas di footer WordPress lengkap dengan kustomisasi kodenya!

Menu legalitas yang tertata rapi di bagian footer bukan hanya melengkapi syarat navigasi situs web, tetapi juga memperkuat kredibilitas brand kamu.

Jika cara biasa lewat widget membuat tampilannya kaku dan sulit diatur, memadukan fungsi wp_nav_menu di file footer dengan sedikit baris kode CSS adalah solusi paling ampuh.

Simak panduan langkah demi langkah berikut ini untuk membuat menu legalitas footer yang bersih dan fleksibel tanpa merusak tata letak tema.

Berikut adalah langkah-langkahnya:

1) Langkah Pertama, Buat Menu di WordPress

1. Buka Tampilan (Appearance) > Menu.
2. Klik Buat menu baru (Create a new menu).
3. Beri nama menu: Footer Legal.
4. Masukkan 4 halaman (About Us, Privacy Policy, Disclaimer, Contact Us).
5. Klik Simpan Menu.

2) Langkah Kedua, Edit File footer.php

Buka file footer.php dan cari bagian <div class=”site-info”>. Kita akan menyisipkan kode menu di atas teks copyright. Ubah bagian tersebut menjadi seperti ini:

<div class="site-info">
    <div class="custom-footer-menu">
        <?php
        wp_nav_menu( array(
            'menu' => 'Footer Legal', // Harus sama dengan nama menu di Langkah 1
            'container' => false,
        ) );
        ?>
    </div>
    <?php echo esc_html('©', 'minimalistblogger') ?> <?php echo esc_html(date('Y')); ?> <?php bloginfo( 'name' ); ?>
</div>

<div class="site-info">
    <div class="custom-footer-menu">
        <?php
        wp_nav_menu( array(
            'menu' => 'Footer Legal', // Harus sama dengan nama menu di Langkah 1
            'container' => false,
        ) );
        ?>
    </div>
    <?php echo esc_html('©', 'minimalistblogger') ?> <?php echo esc_html(date('Y')); ?> <?php bloginfo( 'name' ); ?>
</div>

3) Langkah Ketiga, Tambahkan CSS Khusus

Karena kita menggunakan class=”custom-footer-menu”, kita bisa memberikan gaya CSS yang “bersih” tanpa terganggu oleh gaya widget tema. Masukkan kode ini ke Tampilan > Sesuaikan > CSS Tambahan:

/* Menghapus gaya bawaan tema untuk area ini */
.custom-footer-menu ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 10px 0 !important; /* Jarak antara menu dan copyright */
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
}

/* Mengatur jarak antar menu */
.custom-footer-menu ul li {
    margin: 0 10px !important;
    border: none !important; /* Menghapus garis border tema */
}

/* Styling teks menu */
.custom-footer-menu ul li a {
    text-decoration: none !important;
    color: #ffffff !important; /* Sesuaikan warna jika background Anda hitam */
    font-size: 13px !important;
    text-transform: uppercase;
}

/* Opsional: Efek hover */
.custom-footer-menu ul li a:hover {
    text-decoration: underline !important;

/* Menghapus gaya bawaan tema untuk area ini */
.custom-footer-menu ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 10px 0 !important; /* Jarak antara menu dan copyright */
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
}

/* Mengatur jarak antar menu */
.custom-footer-menu ul li {
    margin: 0 10px !important;
    border: none !important; /* Menghapus garis border tema */
}

/* Styling teks menu */
.custom-footer-menu ul li a {
    text-decoration: none !important;
    color: #ffffff !important; /* Sesuaikan warna jika background Anda hitam */
    font-size: 13px !important;
    text-transform: uppercase;
}

/* Opsional: Efek hover */
.custom-footer-menu ul li a:hover {
    text-decoration: underline !important;

4) Mengapa cara ini lebih berhasil?

4.1) Bypass Widget

Dengan memasukkan kode langsung ke footer.php, menu kamu tidak lagi dianggap sebagai “Widget”, sehingga tidak akan terkena aturan garis/border yang diberikan oleh tema untuk area footer widget.

4.2) Kontrol Penuh

Menggunakan wp_nav_menu memungkinkan kamu mengubah urutan halaman kapan saja dari dashboard tanpa menyentuh kode lagi.

4.3) Tampilan

Kode CSS di artikel ini menggunakan !important untuk memastikan tema (misalkan: tema Minimalist Blogger) tidak bisa menimpa style kode kamu lagi.

Silakan dicoba langkah ini. Jika kamu sudah melakukan ini, seharusnya menu tersebut akan otomatis tampil sejajar (landscape) dan rapi.***