여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. 워드프레스 테마 제작 – 03편 - functions.php, sidebar.php 만들기
워드프레스 테마 제작 – 03편 – functions.php, sidebar.php 만들기
7개월전 작성
2개월전 수정

워드프레스 테마를 만들 때 기본이 되는 파일들 중 functions.php, sidebar.php를 만들어보자.워드프레스 functions.php sidebar.php
워드프레스 functions.php sidebar.php

 

functions.php 파일 만들기

워드프레스의 메뉴를 인식 시키고, 함수 정의 등을 하려면 이 파일이 꼭 있어야한다.

이 파일이 없으면 워드프레스에서 메뉴 추가해도 메뉴가 테마에서 보이지 않는다.

Navigation Menus, Sidebars, Theme Logo 등 설정이 가능하다.

여기서는 일단 Navigation Menus, Sidebars, Theme Logo 등록하는 방법을 알아보자.

Navigation Menus 메뉴 등록하기

가장 먼저 테마에 메뉴가 없으면 안되니까 메뉴를 등록하고 액션 훅을 생성 해야 한다.

메뉴 등록 예시
function Mingg_setup()
{
	register_nav_menus(
		array(
			'primary' => esc_html__( 'Primary menu', 'mingg' ),
			'footer'  => __( 'Secondary menu', 'mingg' ),
		)
	);

}
add_action( 'after_setup_theme', 'Mingg_setup' );
사용된 코드 설명
register_nav_menus()
:
Nav Menus 등록하는 함수.
array()
:
배열 함수.
‘primary’ => esc_html__( ‘Primary menu’, ‘mingg’ ),
:
primary에 ‘Primary menu’ 넣는 함수.
‘footer’ => __( ‘Secondary menu’, ‘mingg’ ),
:
footer에 Secondary menu 넣는 함수.
add_action( ‘after_setup_theme’, ‘Mingg_setup’ );
:
액션 훅 생성.

 

Sidebars 활성화하기

sidebar를 활성화 하면 워드프레스 테마에서 위젯이 활성화 된다.

사이드바 활성화 예시
function register_mingg_sidebar()
{
	register_sidebar(
		array(
			'name' => __('Mingg Sidebar', 'mingg'),
		)
	);
}
add_action('init','register_mingg_sidebar');
사용된 코드 설명
register_sidebar()
:
Sidebar 등록하는 함수.
‘name’ => __(‘Mingg Sidebar’, ‘mingg’),
:
sidebar에 ‘Mingg Sidebar’ 넣는 함수

 

Theme Logo 등록하기

Theme Logo를 등록하면 테마 지원에서 로고를 추가할 수 있다.

function Mingg_setup()
{
	
	add_theme_support( 'custom-logo', array(
		'height'      => 128,
		'width'       => 128,
	) );

}
add_action( 'after_setup_theme', 'Mingg_setup' );

Mingg_setup() 함수 사용하므로 NAV Munus랑 같이 등록하면 된다.

‘custome-logo’의 width, height 둘 다 128px로 지정 한다.

header.php 적용

기존 header.php
<!doctype html>
<html <?php language_attributes(); ?>>
	<head>
		<meta charset="<?php bloginfo( 'charset' ); ?>" />
		<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">

		<title><?php bloginfo( 'name' ); ?></title>
		
		<?php wp_head(); ?>
	</head>

	<body <?php body_class(); ?>>
		<?php wp_body_open(); ?>
		
		<div class="container">
			<header>
				여기는 header 입니다.
			</header>
			<main>

여기에 NAV Menus, Theme Logo를 추가해본다.

수정된 header.php
<!doctype html>
<html <?php language_attributes(); ?>>
	<head>
		<meta charset="<?php bloginfo( 'charset' ); ?>" />
		<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">

		<title><?php bloginfo( 'name' ); ?></title>
		
		<?php wp_head(); ?>
	</head>

	<body <?php body_class(); ?>>
		<?php wp_body_open(); ?>
		
		<div class="container">
			<header>
				<?php
					$custom_logo_id = get_theme_mod( 'custom_logo' );
					$custom_logo_url = wp_get_attachment_image_url( $custom_logo_id , 'full' );
					echo '<img src="' . esc_url( $custom_logo_url ) . '" class="CustomLogo" alt="로고">';
				?>
				<?php
					wp_nav_menu(
						array('theme_location'  => 'primary',)
					);
				?>
			</header>
			<main>
사용된 코드 설명
get_theme_mod()
:
테마 수정값을 검색하는 함수.
wp_get_attachment_image_url()
:
custom_logo URL 찾는 함수
esc_url( $custom_logo_url )
:
custom_logo URL 불러오는 함수
wp_nav_menu()
:
NAV Menus 불러오는 함수
‘theme_location’ => ‘primary’,
:
theme_location을 primary로 설정

 

footer.php 적용

기존 footer.php
			</main>
			<footer>
				여기는 푸터 입니다.
				<?php wp_footer(); ?>
			</footer>
		</div>
	</body>
</html>

여기에 footer menu는 추가해본다.

수정된 footer.php
			</main>

			<footer>
				<?php
					wp_nav_menu(
						array('theme_location' => 'footer',)
					);
				?>
				<?php wp_footer(); ?> 
			</footer> 
		</div> 
	</body>
</html>

 

sidebar.php 파일 만들기

sidebar.php 예시
사이드바 입니다.
<?php
	dynamic_sidebar('Mingg Sidebar');
?>
사용된 코드 설명
dynamic_sidebar(‘Mingg Sidebar’);
:
사이드바 불러올 때 사용하는 함수.

 

index.php에 적용

index.php에 sidebar.php 적용하는 방법을 알아보자.

기존 index.php
<?php get_header(); ?>
	Test Theme 만들기
<?php get_footer(); ?>

여기에 sidebar를 추가하자.

수정된 index.php
<?php get_header(); ?>
	Test Theme 만들기
<?php get_sidebar(); ?>
<?php get_footer(); ?>
사용된 코드 설명
get_sidebar();
:
사이드바 템플릿을 불러오는 코드.

 

적용된 화면

FTP 이용해서 서버에 index.php, header.php, footer.php, sidebar.php, functions.php 업로드 후 확인하자.

메뉴는 추가해야보이니까 NAV 메뉴, footer 메뉴 추가 했다.

워드프레스 테마 만들기 - 3편

문제 없이 출력 잘 되는것 확인된다.

참고

 

관련 포스트
Mingg`s Diary
밍구
공부 목적 블로그