본문 바로가기

간편한 Header 이미지 관리

Publish: 2012.04.16.

워드프레스 3.0 이후 버전 부터 Header 이미지 관리 기능이 추가 되었습니다.

Function

// Header Image
add_action( 'after_setup_theme', 'visual_setup' );
if ( ! function_exists( 'visual_setup' ) ):
function visual_setup() {
	define('HEADER_TEXTCOLOR', 'ffffff');
	define('HEADER_IMAGE', '%s/img/header_image.jpg');
	define('HEADER_IMAGE_WIDTH', 960);
	define('HEADER_IMAGE_HEIGHT', 270);
	define('NO_HEADER_TEXT', true );

	add_custom_image_header( '', 'admin_header_style' );

	register_default_headers( array(
		'default' => array(
			'url' => '%s/img/header_image.jpg',
			'thumbnail_url' => '%s/img/header_image_thumbnail.jpg',
			'description' => __( 'default', 'visual' )
			)
		)
	);
}
endif;

if ( ! function_exists( 'admin_header_style' ) ) :
	function admin_header_style() {
		?><style type="text/css">
			#headimg {
				width: <?php echo HEADER_IMAGE_WIDTH; ?>px;
				height: <?php echo HEADER_IMAGE_HEIGHT; ?>px;
				border:none !important;
				background: no-repeat;
			}
		</style><?php
	}
endif;

위 코드를 functions.php에 추가합니다.
visual_setup() 에서 기본 이미지 경로와 사이즈값을 입력합니다.
기본 이미지는 해당 테마 폴더 내에 업로드 해야 합니다.

Header Image Code

Header Image를 보여줄 영역에 아래 코드를 추가 합니다.

<?php if ( get_header_image() ) : ?>
 <img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
 <?php endif; ?>

댓글 쓰기