Articles

Fungsi navigasi menu pada Wordpress

Pada saat kita merancang theme Wordpress, kita dapat melakukan kustomisasi menu. Pemilik website dapat menambahkan page, posts, categoris atau URL ke dalam menu. Dalam merancang menu pada theme yang kita rancang, kita perlu meregistrasikan menu tersebut dan menampilkan pada lokasi yang sesuai.

Dalam merancang menu untuk theme Wordpress yang kita buat, kita perlu meregistrasikan menu kita menggunakan function register_nav_menus() pada file functions.php .
Contoh registrasi lokasi menu pada file functions.php adalah seperti contoh di bawah ini:

function twentyseventeen_setup() {

    //POTONG YA
    // This theme uses wp_nav_menu() in two locations.
    register_nav_menus( array(
        'top'    => __( 'Top Menu', 'twentyseventeen' ),
        'social' => __( 'Social Links Menu', 'twentyseventeen' ),
    ) );

    //POTONG YA
}
add_action( 'after_setup_theme', 'twentyseventeen_setup' );

Hasil dari registrasi ini dapat dilihat seperti gambar di bawah ini:

Untuk menampilkan menu pada theme, kita menggunakan function wp_nav_menu pada file template.
Sebagai berikut contoh source codenya:

<nav id="site-navigation" class="main-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Top Menu', 'twentyseventeen' ); ?>">
    <button class="menu-toggle" aria-controls="top-menu" aria-expanded="false">
        <?php
        echo twentyseventeen_get_svg( array( 'icon' => 'bars' ) );
        echo twentyseventeen_get_svg( array( 'icon' => 'close' ) );
        _e( 'Menu', 'twentyseventeen' );
        ?>
    </button>

    <?php wp_nav_menu( array(
        'theme_location' => 'top',
        'menu_id'        => 'top-menu',
    ) ); ?>

    <?php if ( ( twentyseventeen_is_frontpage() || ( is_home() && is_front_page() ) ) && has_custom_header() ) : ?>
        <a href="#content" class="menu-scroll-down"><?php echo twentyseventeen_get_svg( array( 'icon' => 'arrow-right' ) ); ?><span class="screen-reader-text"><?php _e( 'Scroll down to content', 'twentyseventeen' ); ?></span></a>
    <?php endif; ?>
</nav><!-- #site-navigation -->

Informasi lebih lanjut silahkan mengunjungi https://developer.wordpress.org/themes/functionality/navigation-menus/ .

Kunjungi www.proweb.co.id untuk menambah wawasan anda.

Other Wordpress Articles:
Feature Image pada Wordpress
Shortcode gallery pada Wordpress
Fungsi media images pada Wordpress
Fungsi media pada Wordpress
Fungsi pagination pada Wordpress
Fungsi navigasi menu pada Wordpress
Fungsi widget pada Wordpress
Fungsi sidebar pada Wordpress
Custom header pada Wordpress
Fungsi-fungsi dalam Wordpress theme
Template taksonomi pada Wordpress