WP홈페이지 제작 - Bootstrap 레이아웃 - 헤더

부트스트랩 레이아웃을 위해 원래의 요소에 클래스를 추가해보도록 하겠습니다.

먼저 테마 에디터에서 header.php를 선택하여 엽니다. 내용중 body 요소 아래쪽을 수정하여 부트스트랩을 적용해 보겠습니다.

header.php

<div id="page" class="hfeed site">

	<header id="masthead" class="site-header" role="banner">
		<div class="site-branding">
			<h1 class="site-title"><a href="<?php echo esc_url( home_url( '⁄' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?><⁄a><⁄h1>
			<h2 class="site-description"><?php bloginfo( 'description' ); ?><⁄h2>
		<⁄div>

		<nav id="site-navigation" class="main-navigation" role="navigation">
			<h1 class="menu-toggle"><?php _e( 'Menu', 'aca' ); ?><⁄h1>
			<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'aca' ); ?><⁄a>

			<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
		<⁄nav><!-- #site-navigation -->
	<⁄header><!-- #masthead -->

	<div id="content" class="site-content">

 

이제 여기에 클래스 요소를 추가해야 합니다. 우선 맨 위의 id가 page 인 div 요소가 있는데 이것이 홈페이지 전체를 감싸고 있는 요소 입니다. 여기 클래스에 "container"를 추가합니다.

그리고 아래쪽에 보면 id가 masthead 인 header 요소가 있습니다. header 요소는 사이트명, 사이트 설명, 네비게이션을 포함하고 있는 하나의 가로'행'을 구성하고 있습니다. 그렇기 때문에 클래스명에 "row"를 추가합니다.

header 요소 내부에 있는 div 요소는 사이트명, 사이트 설명을 포함하고 있으며 부트스트렙 레이아웃의 12행을 모두 포함합니다. 그래서 클래스명 site-branding 뒤에 "span12"를 추가합니다.

nav 요소는 메인 네비게이션으로 이 역시 12행을 모두 포함합니다. 클래스명 main-navigation 뒤에 "span12"를 추가합니다.

그리고 마지막 행의 id가 content인 div 요소는 헤더 아래쪽에서 푸터 위까지의 메인 콘텐츠 부분을 감싸고 있으므로 클래스명 site-content 뒤에 "row"를 추가합니다.

<div id="page" class="hfeed site container">
 
    <header id="masthead" class="site-header row" role="banner">
        <div class="site-branding span12">
            <h1 class="site-title"><a href="<?php echo esc_url( home_url( '⁄' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?><⁄a><⁄h1>
            <h2 class="site-description"><?php bloginfo( 'description' ); ?><⁄h2>
        <⁄div><!-- .site-branding .span12 -->
 
        <nav id="site-navigation" class="main-navigation span12" role="navigation">
            <h1 class="menu-toggle"><?php _e( 'Menu', 'aca' ); ?><⁄h1>
            <a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'aca' ); ?><⁄a>
 
            <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
        <⁄nav><!-- #site-navigation .span12 -->
    <⁄header><!-- #masthead .row -->
 
    <div id="content" class="site-content row">

 

헤더의 레이아웃을 간단히 아래의 그림으로 표현할 수 있습니다.

 

헤더의 레이아웃은 잡아놓았지만 아직 네비게이션 부분의 셋팅이 남아있습니다. 부트스트랩은 고유의 반응형 네비게이션 바를 제공하고 있으며 화면의 가로 사이즈에 따라 모양이 변합니다.
부트스트랩 네비게이션 바를 사용하기 위해서는 우선 "header.php" nav 요소 부분을 아래와 같이 수정합니다.

<nav id="access" class="navbar span12" role="navigation">
			<div class="navbar">
				<div class="navbar-inner">
				<!-- 화면폭 줄어들면 메뉴 사라지고 토글버튼 생김-->
					<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
					<span class="icon-bar"><⁄span>
					<span class="icon-bar"><⁄span>
					<span class="icon-bar"><⁄span>
					<⁄a>
					<div class="nav-collapse">
						<!-- 네비게이션 메뉴 시작 -->
						<?php wp_nav_menu( array( 'theme_location' => 'primary', 'walker' => new bootstrapwp_walker_nav_menu(), 'menu' => 'main-menu', 'menu_class' => 'nav', 'menu_id' => 'main-menu' ) ); ?>
						<!-- 네비게이션 메뉴 끝 -->
					<⁄div><!--.nav-collapse-->
				<⁄div><!--.navbar-inner-->
			<⁄div><!-- .navbar -->
		<⁄nav><!-- #access .navbar .span12-->

 

그리고 "functions.php" 파일을 열어 내용 가장 아래에 다음의 코드를 추가해 넣습니다. 이 코드는 워드프레스의 메뉴를 부트스트랩 메뉴로 변환시키는 (부트스트랩의 네비게이션 바를 워드프레스 _S 테마의 기본 메뉴 출력에 적용시키는) 함수입니다.

⁄* 
 * 부트스트랩 메뉴화
 *⁄

function register_my_menus() {
	register_nav_menus(
		array(
			'header-menu' => __('Header Menu'),
			'extra-menu' => __('Extra Menu')
			)
		);
}
add_action('init', 'register_my_menus');
add_theme_support('menus');

⁄⁄

class bootstrapwp_walker_nav_menu extends Walker_Nav_Menu {


  function start_lvl( &$output, $depth ) {

    ⁄⁄In a child UL, add the 'dropdown-menu' class
    $indent = str_repeat( "\t", $depth );
    $output    .= "\n$indent<ul class=\"dropdown-menu\">\n";

  }

  function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {

    $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

    $li_attributes = '';
    $class_names = $value = '';

    $classes = empty( $item->classes ) ? array() : (array) $item->classes;

    ⁄⁄Add class and attribute to LI element that contains a submenu UL.
    if ($args->has_children){
      $classes[]    = 'dropdown';
      $li_attributes .= 'data-dropdown="dropdown"';
    }
    $classes[] = 'menu-item-' . $item->ID;
    ⁄⁄If we are on the current page, add the active class to that menu item.
    $classes[] = ($item->current) ? 'active' : '';

    ⁄⁄Make sure you still add all of the WordPress classes.
    $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
    $class_names = ' class="' . esc_attr( $class_names ) . '"';

    $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
    $id = strlen( $id ) ? ' id="' . esc_attr( $id ) . '"' : '';

    $output .= $indent . '<li' . $id . $value . $class_names . $li_attributes . '>';

    ⁄⁄Add attributes to link element.
    $attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : '';
    $attributes .= ! empty( $item->target ) ? ' target="' . esc_attr( $item->target     ) .'"' : '';
    $attributes .= ! empty( $item->xfn ) ? ' rel="'    . esc_attr( $item->xfn        ) .'"' : '';
    $attributes .= ! empty( $item->url ) ? ' href="'   . esc_attr( $item->url        ) .'"' : '';
    $attributes .= ($args->has_children) ? ' class="dropdown-toggle" data-toggle="dropdown"' : ''; 

    $item_output = $args->before;
    $item_output .= '<a'. $attributes .'>';
    $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
    $item_output .= ($args->has_children) ? ' <b class="caret"><⁄b> ' : ''; 
    $item_output .= '<⁄a>';
    $item_output .= $args->after;

    $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
  }

  ⁄⁄Overwrite display_element function to add has_children attribute. Not needed in >= Wordpress 3.4
  function display_element( $element, &$children_elements, $max_depth, $depth=0, $args, &$output ) {

    if ( !$element )
      return;

    $id_field = $this->db_fields['id'];

    ⁄⁄display this element
    if ( is_array( $args[0] ) ) 
      $args[0]['has_children'] = ! empty( $children_elements[$element->$id_field] );
    else if ( is_object( $args[0] ) ) 
      $args[0]->has_children = ! empty( $children_elements[$element->$id_field] ); 
    $cb_args = array_merge( array(&$output, $element, $depth), $args);
    call_user_func_array(array(&$this, 'start_el'), $cb_args);

    $id = $element->$id_field;

    ⁄⁄ descend only when the depth is right and there are childrens for this element
    if ( ($max_depth == 0 || $max_depth > $depth+1 ) && isset( $children_elements[$id]) ) {

      foreach( $children_elements[ $id ] as $child ){

        if ( !isset($newlevel) ) {
          $newlevel = true;
          ⁄⁄start the child delimiter
          $cb_args = array_merge( array(&$output, $depth), $args);
          call_user_func_array(array(&$this, 'start_lvl'), $cb_args);
        }
        $this->display_element( $child, $children_elements, $max_depth, $depth + 1, $args, $output );
      }
        unset( $children_elements[ $id ] );
    }

    if ( isset($newlevel) && $newlevel ){
      ⁄⁄end the child delimiter
      $cb_args = array_merge( array(&$output, $depth), $args);
      call_user_func_array(array(&$this, 'end_lvl'), $cb_args);
    }

    ⁄⁄end this element
    $cb_args = array_merge( array(&$output, $element, $depth), $args);
    call_user_func_array(array(&$this, 'end_el'), $cb_args);

  }

}

 

마지막으로 "custom.css" 스타일시트 파일을 열어서 다음의 스타일을 추가합니다. 이것은 부트스트랩 네비게이션 메뉴가 브라우저 가로크기가 일정 크기 이하로 줄었을 경우 네비게이션이 드롭다운 방식 바뀔 때 제대로 동작하지 않는 경우를 약간 수정해 줍니다. 그래도 약간의 버그는 있는데 메뉴를 한 번 폈다가 접은 후 다시 펴야지 제대로 동작합니다(아직 완벽한 수정방법은 찾지 못했네요).

⁄* 부트스트랩 드롭다운 패치 *⁄
.dropdown-backdrop {
	position: static;
}

 

<부트스트랩 적용 php소스 : 워드프레스 완벽입문 참조>