[header] 워드프레스 헤더그룹 로고(이름), 설명 제작하기

Posted on by pkchan

상단 네비게이션 메뉴를 제작하기 전에 index.php 파일을 좀더 세분화 하겠습니다. 정확하게 나누어지는 부분 즉 헤더, 본문, 풋터를 나누어서 관리하면 나중에 유지보수에도 유리합니다.
현재 index.php

<!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js no-svg">
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
	<header>header - 사이트 이름 및 설명 그리고 top navi(menu)가 들어갈 부분</header><!-- header -->
	contents - 사이트의 본문 혹은 리스트가 들어갈 부분
	<footer>footer - 카피라이트, 주소등 하단에 들어갈 내용.</footer><!-- footer -->
	<?php wp_footer(); ?>
</body>
</html>

header.php, index.php, footer.php 로 나누겠습니다. header.php 파일과 footer.php 파일을 index.php이 위치한 곳에 만들어줍니다. 새로 만들어진 header.php 파일과 footer.php 파일에 index.php 파일의 내용을 나누어 주고, index.php 파일에는 header.php와 footer.php를 포함하는 코드를 추가합니다.

header.php

<!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js no-svg">
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
	<header>header - 사이트 이름 및 설명 그리고 top navi(menu)가 들어갈 부분</header><!-- header -->

footer.php

	<footer>footer - 카피라이트, 주소등 하단에 들어갈 내용.</footer><!-- footer -->
	<?php wp_footer(); ?>
</body>
</html>

index.php

<?php get_header(); ?><!--header.php 파일을 추가합니다.(header.php 파일안에 내용을 복붙한다 생각하면 됩니다.)-->
contents - 사이트의 본문 혹은 리스트가 들어갈 부분
<?php get_footer(); ?><!--footer.php 파일을 추가합니다.-->

사용하는 브라우저로 확인했을때 파일을 분리하기 전과 후가 똑같은 3줄의 텍스트만 띄우고있다면 일단 성공입니다. 꼭 확인하고 넘어가야합니다.
header안에 들어갈 내용은 재일먼저 사이트의 이름과 설명이 들어갑니다. 워드프레스 환경설정에서 로고 이미지를 설정하여 이미지를 띄우기도 합니다. 이름 혹은 이미지와 설명, 검색창과 네비게이션이 포함된 헤더그룹을 만들겠습니다. 먼저 template-parts 폴더를 만들고 그안에 header 폴더를 만들어줍니다. template-parts 폴더에는 테마를 구성하는 작은 부분들을 모아둡니다.
header 폴더안에 header-hgroup.php 파일을 만들어줍니다.

header.php

<!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js no-svg">
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
	<header><?php get_template_part( 'template-parts/header/header', 'hgroup' ); ?></header>

header-hgroup.php

<hgroup>
	<h1><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
	<h2><?php bloginfo( 'description' ); ?></h2>
</hgroup>

1. get_template_part() 함수는 사용자 정의 파일을 불러올 수 있습니다. ‘template-parts/header/header’, ‘hgroup’ 첫번째 매게변수는 폴더명과 공통으로 사용되는 이름입니다. 두번째 매게변수는 파일명입니다. 예를 들면..
‘template-parts/header/header’, ‘hgroup’ ==>> template-parts/header/header-hgroup.php 파일을 불러옵니다.

‘template-parts/header/a’ ==>> template-parts/header/a.php
‘template-parts/header/a’, ‘b’ ==>> template-parts/header/a-b.php
‘template-parts/header/a’, ‘c’ ==>> template-parts/header/a-c.php

참조 : https://developer.wordpress.org/reference/functions/get_template_part/


브라우저로 확인하면 헤더그룹 파일에서 bloginfo 함수로 불러온 사이트 이름과 설명이 보입니다.
대부분의 웹사이트는 이름과 설명이 텍스트로 출력되는 대신 어드민페이지에서 업로드한 이미지로 출력합니다. 이미지를 업로드 하기 위해서는 외모 > 사용자정의 하기로 가야합니다. 그러나 아직 이미지를 업로드 할 수 없습니다. 먼저 functions.php 파일을 수정해야합니다. functions.php는 테마의 기능을 담당하는 파일입니다. 이미 있는 기능을 켜고 끄거나 새로운 기능을 만들 수 있습니다. 사이트의 아이덴티티를 보여주는 로고 이미지를 출력하는 기능도 functions.php 파일에서 켜줘야합니다.

기본 설정을 먼저 해줍니다.

function test_setup() {
	
	load_theme_textdomain( 'mokusurf', get_template_directory() . '/languages' ); // 다국어 설정
	
	add_theme_support( 'automatic-feed-links' ); // feed 자동 추가 설정
	
	add_theme_support( 'title-tag' ); // 타이틀 테그 - <title> html 테그 사용 설정
	
	//add_theme_support( 'customize-selective-refresh-widgets' );
	
	add_theme_support( 'post-thumbnails' ); // 썸네일 설정
	
	add_image_size( 'mokusurf-featured-image', 2000, 2000, false ); // 설정>미디어 에서 지정한 사이즈외에 따로 정의해서 사용할 이미지 사이즈를 설정합니다.

	add_image_size( 'mokusurf-thumbnail-article', 400, 400, false );
	
	register_nav_menus( array(
		'header_menu' => 'header menu', // header에 네비게이션 메뉴 추가.
	));
	
	add_theme_support( 'html5', array(
		'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' // html5를 서포트 하도록!
	));
			
	add_theme_support( 'post-formats', array( // 포스트 형식 지원
		'image',
		'video',
		'gallery'
	));
		

}

add_action( 'after_setup_theme', 'test_setup' );

다음으로 로고 이미지 관련, 또는 사이트 이름등을 설정해줍니다. 워드프레스에서는 ‘사용자 정의하기’ 페이지를 통해 실시간으로 수정사항을 확인해가며 작업할 수 있습니다. 그 기능을 켜주기 위해서는 부분 리프레쉬가 가능한 ajax를 함께 설정해야합니다.

functions.php

/*
	로고 이미지 업로드 할 수 있도록 설정.
*/

function test_custom_logo_setup() {
          $defaults = array(
                    'height'            => 100,
                    'width'             => 400,
                    'flex-height' => true,
                    'flex-width'  => true,
                    'header-text' => array( 'site-title', 'site-description' ),
          );
          add_theme_support( 'custom-logo', $defaults );
}

add_action( 'after_setup_theme', 'test_custom_logo_setup' );

function test_the_custom_logo() {
   if ( function_exists( 'the_custom_logo' ) ) {
            the_custom_logo();
   }
}

/*
	로고 이미지 업로드 할 수 있도록 설정 끝.
*/

require get_parent_theme_file_path( '/inc/customizer.php' ); // 커스터마이즈 설정 '사용자 정의' 페이지에서 실시간 확인하며 수정할 수 있도록 설정.

customizer.php

/*
	사용자 정의 로고, 사이트 이름, 설명 - 사용자 정의 페이지에서 실시간 확인하며 수정 할 수있도록 설정.
*/

function test_customize_register( $wp_customize ) {
	
	$wp_customize->get_setting( 'blogname' )->transport                     = 'postMessage';
	$wp_customize->get_setting( 'blogdescription' )->transport  = 'postMessage';
	$wp_customize->get_setting( 'header_textcolor' )->transport = 'postMessage';
	
	$wp_customize->selective_refresh->add_partial( 'blogname', array(
		'selector' => '.site-title a',
		'render_callback' => 'test_partial_blogname',
	));
	
	$wp_customize->selective_refresh->add_partial( 'blogdescription', array(
		'selector' => '.site-description',
		'render_callback' => 'test_partial_blogdescription',
	));
	
}

add_action( 'customize_register', 'test_customize_register' );

function test_partial_blogname() {
	bloginfo( 'name' );
}

function test_partial_blogdescription() {
	bloginfo( 'description' );
}

/*
	사용자 정의 로고, 사이트 이름, 설명 끝
*/



/*
	ajax로 전송.
*/

function test_customize_preview_js() {
	wp_enqueue_script( 'test-customize-preview', get_theme_file_uri( '/assets/js/customize-preview.js' ), array( 'customize-preview' ), '1.0', true );
}

add_action( 'customize_preview_init', 'test_customize_preview_js' );

customize-preview.js

(function( $ ) {

	// Site title and description.
	wp.customize( 'blogname', function( value ) {
		value.bind( function( newval ) {
			$( '.site-title a' ).text( newval );
		});
	});
	wp.customize( 'blogdescription', function( value ) {
		value.bind( function( newval ) {
			$( '.site-description' ).text( newval );
		});
	});
	// Header text color.
	wp.customize( 'header_textcolor', function( value ) {
		value.bind( function( newval ) {
			if ( 'blank' === newval ) {
				$( '.site-title, .site-description' ).css({
					clip: 'rect(1px, 1px, 1px, 1px)',
					position: 'absolute'
				});
				// Add class for different logo styles if title and description are hidden.
				$( 'body' ).addClass( 'title-tagline-hidden' );
			} else {
				// Check if the text color has been removed and use default colors in theme stylesheet.
				if ( ! newval.length ) {
					$( '#grey-custom-header-styles' ).remove();
				}
				$( '.site-title, .site-description' ).css({
					clip: 'auto',
					position: 'relative'
				});
				$( '.site-title a, .site-description' ).css({
					color: newval
				});
				// Add class for different logo styles if title and description are visible.
				$( 'body' ).removeClass( 'title-tagline-hidden' );
			}
		});
	});
} )( jQuery );

댓글 남기기