워드프레스 테마 만들기 | 메뉴 만들기

메뉴 등록하기

테마에서 메뉴 기능을 사용할 수 있도록 설정해야 [외모 - 메뉴]가 활성화됩니다. 메뉴 등록은 register_nav_menus() 함수를 이용합니다.

메뉴를 하나만 만들 때는 register_nav_menu()를 이용해도 되는데, register_nav_menus()로도 메뉴를 하나만 만들 수 있습니다.

functions.php에 다음 코드를 추가합니다.

register_nav_menus( array(
  'main_menu' => 'Main Menu',
  'footer_menu' => 'Footer Menu',
) );

이제 외모에 메뉴가 생기고, 메뉴에 Main Menu와 Footer Menu가 있는 것을 확인할 수 있습니다.

적당히 메뉴를 만들고 Main Menu에 위치시킵니다.

메뉴 출력하기

wp_nav_menu() 함수로 메뉴를 출력합니다. 메뉴를 출력하고 싶은 부분에 다음 코드를 입력합니다.

<?php
  wp_nav_menu( array(
    'theme_location'  => 'main_menu',
    'depth'           => 2,
    'fallback_cb'     => false,
    'menu_id'         => 'jb-main-menu',
    'menu_class'      => 'jb-menu',
  ) );
?>
  • theme_location : 출력할 메뉴를 정합니다.
  • depth : 계층적 메뉴에서 몇 단계까지 출력할지 정합니다. 0이면 모든 메뉴를 출력하고, 1이면 1단계, 2면 2단계까지만 출력합니다. 기본값은 0입니다.
  • fallback_cb : 메뉴에 아무 것도 없을 때 무엇을 출력할지 정합니다. 기본값은 wp_page_menu로 페이지 목록이 나옵니다. false로 정하면 아무 것도 나오지 않습니다.
  • menu_id, menu_class : 메뉴에 추가할 id 값과 class 값입니다.

이외에도 여러 옵션이 있습니다. wp_nav_menu()를 참고하세요.

메뉴 꾸미기

index.php의 사이트 제목 및에 메뉴를 출력하는 코드를 넣습니다.

메뉴는 순서 없는 목록(<ul>)으로 출력됩니다.

<ul id="jb-main-menu" class="jb-menu">
  <li ...> ... </li>
</ul>

설정한 id, class 등을 이용하여 모양을 꾸밉니다.

#jb-main-menu li {
  display: inline-block;
}

참고

 

지금까지 만든 테마 파일

/functions.php

<?php
// Setup
  function cmsfactory_setup() {
    add_theme_support( 'title-tag' );
    add_theme_support( 'automatic-feed-links' );
    register_nav_menus( array(
      'main_menu' => 'Main Menu',
      'footer_menu' => 'Footer Menu',
    ) );
  }
  add_action( 'after_setup_theme', 'cmsfactory_setup' );
// Styles & Scripts
  function cmsfactory_scripts() {
    wp_enqueue_style( 'cmsfactory', get_theme_file_uri( '/style.css' ) );
  }
  add_action( 'wp_enqueue_scripts', 'cmsfactory_scripts' );

/index.php

<!doctype html>
<html <?php language_attributes(); ?>>
  <head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <link rel="profile" href="http://gmpg.org/xfn/11">
    <?php wp_head(); ?>
  </head>
  <body <?php body_class(); ?>>
<div class="jb-container">
  <div class="jb-header">
    <header>
      <h1 class="jb-site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
      <?php
        wp_nav_menu( array(
          'theme_location'  => 'main_menu',
          'depth'           => 2,
          'fallback_cb'     => false,
          'menu_id'         => 'jb-main-menu',
          'menu_class'      => 'jb-menu',
        ) );
      ?>
    </header>
  </div>
  <div class="jb-content">
    <h2>Content</h2>
  </div>
  <div class="jb-sidebar">
    <h2>Sidebar</h2>
  </div>
  <div class="jb-footer">
    <footer>
      <p>Copyright © <?php bloginfo( 'name' ); ?> All Rights Reserved.</p>
    </footer>
  </div>
</div>
    <?php wp_footer(); ?>
  </body>
</html>

/style.css

/*
  Theme Name: CMS FACTORY
  Author: JB
  Version: 1.0
*/
/* Layout */
* {
  box-sizing: border-box;
}
body {
  margin: 0px;
  padding: 0px;
  font-family: sans-serif;
}
a {
  text-decoration: none;
  color: #2196f3
}
.jb-container {
  width: 960px;
  margin: auto;
}
.jb-header {
  margin: 30px;
  padding: 0px 30px;
  border: 1px solid #cccccc;
}
.jb-content {
  margin: 30px;
  padding: 0px 30px;
  border: 1px solid #cccccc;
}
.jb-sidebar {
  margin: 30px;
  padding: 0px 30px;
  border: 1px solid #cccccc;
}
.jb-footer {
  margin: 30px;
  padding: 0px 30px;
  border: 1px solid #cccccc;
}
#jb-main-menu li {
  display: inline-block;
}

Created on 2017-11-11 09:46 | Updated on 2017-11-20 13:14

이 글을 공유하기

Kakao

워드프레스 프리미엄 테마 사이트