워드프레스 테마 만들기: 테마가 메뉴 지원 할 수 있도록 만들기

테마를 이용하는 사용자가 원하는 메뉴¹를 만들고 사용할 수 있도록 하려면, 테마 자체에서 메뉴를 지원하도록 만들어주어야 합니다.

테마가 사용자에게 메뉴를 사용할 수 있도록 하기 위해서는 두 가지 작업을 해야 합니다.

1. 테마 사용자가 메뉴를 등록할 수 있어야 함
2. 테마에서 사용자가 등록한 메뉴를 표시해줘야 함

이를 위해 functions.php 파일과 header.php 파일을 건드려 볼께요.

테마에서 메뉴 활성화 시키기

사용자가 메뉴를 등록하고 사용하기 위해서는 테마에서 메뉴 기능을 활성화 해야 합니다. 다른 말로 하자면 사용자가 워드프레스 대시보드에서 메뉴를 등록 할 수 있도록 만들어 주는 것입니다. 이 작업은 테마의 functions.php 파일에서 할 수 있습니다.

<?php
    //Register Menu
    function triki_register_menus() {
        register_nav_menus(
            array(
                'menu1' => 'Header Menu',
                'menu2' => 'Footer Menu',
            )
        );
    };
    add_action('init', 'triki_register_menus');
?>

menu1 과 menu2 라는 고유한 이름²을 가진 메뉴 두 개를 사용자가 사용할 수 있도록 등록 해주었습니다. 위 코드에서 array 에 라인을 추가 하는 방법으로 더 많은 메뉴를 지원 하도록 할 수 있습니다.

여기서 사용된 워드프레스 내장함수는 register_nav_menus 입니다. 이 내장함수에 대한 자세한 사항은 아래 링크를 참고해 주세요.

• register nav menus – WordPress Codex

사용자가 등록한 메뉴를 실제로 보여주기

사용자가 등록한 메뉴를 실제로 보여주기 위해서는 테마의 적절한 위치에 메뉴를 표시해주는 코드를 삽입해야 합니다. 여기서 적절한 위치는 테마 개발자에 따라 다릅니다. 헤더의 사이트 타이틀 아래에 위치 할 수도 있고, 누군가는 페이지 최하단의 Copyright 와 함께 표시 하고자 할 수도 있습니다.

실제로 메뉴를 화면에 출력하기 위한 코드는 아래와 같이 구성할 수 있습니다.

<div>
<?php
    //Top Menu
    if ( has_nav_menu( 'menu1' ) ) {
        wp_nav_menu(
            array(
                'theme_location' => 'menu1',
                'depth' => 0,
                'after' => ' · '
            )
        )
    }
?>
</div>

위 메뉴 등록 예시 코드에서 지정한, menu1 이라는 고유한 이름을 가진 메뉴를 출력하는 과정입니다. 글로 풀어보자면
아래와 같습니다.

• menu1 이라는 메뉴에 사용자가 메뉴를 등록 했으면(has_nav_menu( 'menu1' ))
• menu1 을 표시 하되('theme_location' => 'menu1',)
• menu1 을 최상위 아이템만 표시 하고('depth' => 0,)
• 메뉴 각 아이템 뒤에는 점을 붙여서 표시 할 것('after' => ' · ')

위 예제에는 워드프레스 내장함수인 has_nav_menu 와 wp_nav_menu 를 사용 하였습니다. 이 내장함수들에 대한 더욱 자세한 정보는 아래 링크를 참고 하세요.

• has nav menu – WordPress Codex
• wp_nav_menu – WordPress Code Reference

wp_nav_menu 에는 더욱 많은 파라미터들을 사용할 수 있으니 입맛에 맞게 메뉴를 출력 할 수 있습니다.