네비게이션바와 헤더 이미지 추가하기

헤더 부분에 네비게이션바와 헤더이미지를 추가한다. 이때 네비게이션바는 사용자정의 메뉴의 기능으로, 헤더 이미지는 사용자정의 헤더 기능으로 표시하고 관리화면에서 메뉴의 구성과 이미지를 지정한다.
->POINT

  • 사용자정의 메뉴

register_nav_menu()/wp_nav_menu()

  • 사용자정의 헤더

add_custom_image_header()/header_image()

function.php

<?php

사용자정의 메뉴 설정하기
// 사용자정의 메뉴
register_nav_menus(array(
‘navigation’ => ‘네비게이션바’
));
헤더 이미지 표시하기
// 사용자정의 헤더
add_custom_image_header(”,’admin_header_style’);
function admin_header_style() {}define(‘NO_HEADER_TEXT’,true);
define(‘HEADER_IMAGE’,’%s/header_red.jpg’);
define(‘HEADER_IMAGE_WIDTH’,900);
define(‘HEADER_IMAGE_HEIGHT’,228);

// 위젯
register_sidebar();

?>

header.php

<!DOCTYPE html>
<html>
<head>
<meta charset=”<?php bloginfo (‘charset’); ?>” />
<title><?php bloginfo(‘name’); ?><?php wp_title(); ?></title>
스타일시트 적용하기
<link rel=”stylesheet” href=”<?php bloginfo (‘stylesheet_url’); ?>” type=”text/css” />
</head>
<body>
<!– 컨테이너 –>
<div id=”container”>
<!– 헤더 –>
<div id=”header”>
<h1><a href=”<?php echo home_url(); ?>”><?php bloginfo(‘name’); ?></a></h1>
<p id=”desc”><?php bloginfo(‘description’); ?></p>
<div id=”subinfo”>
<a href=”<?php bloginfo(‘rss2_url’); ?>”><img src=”<?php bloginfo(‘template_url’); ?>
/feed.png” alt=”RSS FEED” width=”28″ height=”28″ /></a>
</div>

네비게이션바 표시하기
<div id=”nav”>
<?php wp_nav_menu(array(
‘theme_location’ => ‘navigation’
)); ?>
</div>
헤더 이미지 표시하기
<?php if(get_header_image()): ?>
<div id=”image”><img src=”<?php header_image(); ?>” alt=”*” width=”<?php echo HEADER_IMAGE_WIDTH; ?>”
height=”<?php echo HEADER_IMAGE_HEIGHT; ?>” /></div>
<?php endif; ?>

</div>

출처: 바꾸면서 배우는 워드프레스 디자인

“네비게이션바와 헤더 이미지 추가하기”에 대한 한개의 댓글

답글 남기기