theme 만들기 from scratch (1)

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on print
Print

몇 달 전에 wordpress 기본 theme에 대한 child theme을 만드는 방법을 정리한 적이 있었다.
https://bekseju9n.pe.kr/wordpress-child-theme-만들기/

이번에는 parent theme 없이 theme를 처음부터 하나씩 만들어가는 강좌를 따라해보았다. 아무것도 없는 상태에서 출발하기 때문에 wordpress의 동작 방식에 대해 조금 더 쉽게 이해할 수 있을 거라 기대하고 있다. 1


Step1. Theme 개발용 local wordpress를 새로 설치한다.

https://bekseju9n.pe.kr/개발용-local-wordpress-추가하기/ 글을 참고한다.
설치 정보는 다음과 같이 하였다.

  • Local 설치 경로 : C:\20.Dev\WordpressStudy\ThemeFromScratch_200114
  • Site URL : ThemeFromScratch.study
  • DB Name : themefromscratch_study
  • Char Set / Collation : utf8mb4_unicode_ci 
설치가 잘 되었다.

설치가 잘 되었다면, Permalink를 사용자 친화적인 Post Name 타입을 사용하도록 변경한다.

어드민 > 설정 > 고유주소 메뉴를 선택하여 설정화면으로 들어간다.

Step2. 새로운 Theme을 만들어보자.

Step2-1. 기존의 Theme들을 모두 삭제한다.

wp-content/themes 폴더 아래 있는 기존 theme들을 모두 삭제한다.

Sublime Text Editor에서 themes 폴더 아래 theme들을 모두 선택/삭제한다.

이제 어드민 화면의 테마 메뉴를 선택하면 다음과 같이 테마 디렉토리가 존재하지 않는다는 메시지를 볼 수 있다.


Step2-2. 새로운 theme을 최소 구성 요소로부터 시작해본다.

themes 폴더 아래 새로운 theme 폴더를 생성하고, index.php 및 style.css 2개 파일을 생성한다. (비어있는 상태로)

내용은 나중에 입력하고, 우선 빈 파일 2개를 만들어본다.

이 단계에서 themefromscratch.study를 웹브라우저로 접속하면 아무것도 없는 빈 화면만 나온다.


Step2-3. style.css에 테마의 기본 정보를 입력한다.

wordpress.org 사이트의 theme handbook에 들어가면 기본적인 style.css에 대한 예시가 나온다. 예시를 활용해서 테마의 기본 정보를 입력해보자.
https://developer.wordpress.org/themes/basics/main-stylesheet-style-css/

/*
Theme Name: Theme from scratch 
Author: bekseju9n
*/

theme name과 author를 제외한 나머지 항목들은 제거하고 우선 2개 항목만 수정하여 저장하였다.

이제 어드민 메뉴의 테마 디자인 > 테마에 들어가면 다음과 같이 새로 만든 내 theme을 wordpress가 인식하는 것을 볼 수 있다. 2

새로 추가한 theme from scratch 테마가 벤틀리 스크린샷과 함께 보인다.

Step2-4. 테마를 활성화시킨다.

활성화 버튼을 눌러 우리의 theme from scratch 테마를 활성화한다.

두둥~

Step2-6. index.php 파일을 수정해본다.

이제 웹브라우저에서 사이트에 접속하면 테마 아래 있는 index.php 를 읽어서 보여주게 된다. 시험 삼아 '안녕하세요, 세상'이라고 저장해보면 결과는 아래와 같이 나온다.

Hello, world ~

Step3. Theme 템플릿 구성하기

Step3-1. 워드프레스 테마의 구조를 알아보자.

워드프레스 테마들은 대부분 다음 그림과 같은 구조를 가지고 있다.

컨셉 이해를 위해 sidebar는 생략하고 표현했다. 원리는 같다.

위 템플릿 파일들 내부를 살펴보면 다음과 같다.

single.php, page.php도 index.php와 동일한 구조를 사용한다.

이즈음에서 index.php, page.php 등 워드프레스 테마의 템플릿 파일들을 이해하기 위해 다음 이미지를 살펴 보자.

Post Type별 Template 계층도

위 그림은 왼쪽의 Post Type을 로딩하기 위해 사용하는 Template들을 오른쪽에 단계별로 정리한 것이다.
static page 즉, 정적 page는 page-$slug.php 템플릿이 있다면 그 템플릿을 사용하여 로딩하고, 만약 없다면 page-$id.php 템플릿을 사용하여 로딩하고, 만약 이 템플릿도 없다면 page.php 템플릿으로 로딩하고, 이미자도 없다면 singular.php 템플릿으로 로딩하고, 최종적으로 위 템플릿이 모두 없다면 index.php 템플릿을 사용하여 로딩하라는 의미이다.


Step3-2. header, footer, index.php로 구성된 기초적인 Theme 만들기

위 Post Type별 Template 계층도를 보면 포스트나 페이지 등 세부 페이지별 별도 Template이 없는 경우 index.php를 템플릿으로 사용하도록 되어 있다.

즉, header.php, footer.php, index.php 이 3개의 파일만 있다면 모양이야 어떻든 어떤 Post Type이라도 보여줄 수 있는 기초적인 Theme를 만들 수 있다. 3

index.php

<?php 
get_header(); // header 템플릿을 읽어 온다. require

while(have_posts()) : // WP_Query 오브젝트에 읽어들일 posts가 남았는지 판단
	the_post(); // iterate post 
?>
	<a href="<?php echo get_permalink(); ?>">
		<h1><?php the_title(); ?></h1>
	</a>

	<br/>

	<?php the_content(); // post의 content를 보여준다. ?>

	<br/><br/>
<?php
endwhile;

get_footer(); // footer 템플릿을 읽어 온다. require

그리고 아무 내용 없는 빈 파일로 header.php와 footer.php 파일을 만들어둔다.

이제 웹브라우저로 접근하면 다음과 같은 화면을 볼 수 있다.

이제 header.php와 footer.php도 작성해보자.

header.php

<!DOCTYPE html>
<html <?php language_attributes(); //언어 속성을 return한다. ?>>
<head>
	<meta charset="<?php bloginfo('charset'); ?>">
	<title>
		<?php 
		bloginfo('name'); //설정>일반의 사이트 제목
		wp_title(); //현재 보고 있는 페이지의 제목
		?>
	</title>

	<?php wp_head(); //'wp_head' 훅에 걸린 기본적인 20여가지 action들을 호출한다. 반드시 head 태그 앞에서 호출하여야 한다.?>
</head>

<body>
	<header>
		<div style="height:50px; background-color: green">
			<h1 class="site-title">
				<?php bloginfo('name');?>
			</h1>
		</div>
	</header>

footer.php

	<footer>
		<div class="copyright">
			Copyright 문구가 들어갑니다.
		</div>
	</footer>

	<?php wp_footer(); //'wp_footer' 훅에 걸린 액션들이 호출됩니다.?>
</body>
</html>

여기까지 작성하고 웹브라우저에서 다시접근하면 다음과 같은 화면을 볼 수 있다.

웹브라우저 개발자 도구에서 소스를 확인하면 다음과 같다.


  1. 이번 포스팅에선 주요 내용 외에 부연설명들을 bootstrap collapse로 숨겨놓았다. 예전에 https://bekseju9n.pe.kr/boostrap-modal-contents를-dynamic하게-load하기/ 글에서 bootstrap Modal을 띄우기 위해 https://www.wpbeginner.com/wp-tutorials/how-to-easily-add-javascript-in-wordpress-pages-or-posts/ 글을 참고하여 해당 Post ID에만 bootstrap을 로드하게 하였었는데, 이번엔 아예 Theme에 박아넣어서 어디서건 bootstrap을 사용할 수 있게 변경했다. 작업은 다음 글을 참고했다. https://wordpress.stackexchange.com/questions/282688/best-way-to-include-bootstrap-in-wordpress
  2. 이왕 하는 김에 이미지 파일을 선택해서 theme-from-scratch 폴더 아래에 screenshot.jpg (또는 .png) 이름으로 저장해두면 스크린 샷으로 보이게 할 수 있다.
  3. 여기에서 알 수 있는 중요한 포인트는 index.php는 일반적으로 어떤 site의 landing page로 사용되었다. 하지만 워드프레스에서는 index.php는 landing page 의미가 아닌 가장 low level의 template을 의미하게 된다. 전통적인 landing page의 목적으로는 front-page.php 템플릿을 사용해보자.

One Response

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다