wordpress 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 ~

재미있는 점은 ThemeFromScratch.study/ 뒤에 어떤 주소를 입력해도 모두 위와 같은 결과를 얻을 수 있다. TemeFromScratch.study/qwer 과 같은 주소를 입력해도 위 결과를 얻을 수 있는데, 그 이유는 Template Hierarchy 때문이다. 3

특별한 Post Type에 대한 Template 파일이 있다면 그 Template 파일, 없다면 모두 index.php

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를 템플릿으로 사용하도록 되어 있다. 4

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

index.php 7 8

<?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>

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

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


Footnotes

  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가 아무런 text를 포함하지 않는 빈 파일인 경우에 아무런 주소를 입력하게 되면 404 Error를 발생시킨다. 직접 실습을 통해 확인해보자.
  4. 앞서 Step2-6에서 먼저 언급했었다.
  5. 여기에서 알 수 있는 중요한 포인트는 index.php는 일반적으로 어떤 site의 landing page로 사용되었다. 하지만 워드프레스에서는 index.php는 landing page 의미가 아닌 가장 low level의 template을 의미하게 된다. 전통적인 landing page의 목적으로는 front-page.php 템플릿을 사용해보자.
  6. 처음부터 필요한 Post Type별 Template 파일을 모두 작성해야 하나? WPShout에선 가능한 index.php에 필요한 내용을 만들다, 반드시 필요한 시점에 Template들을 만드는 식으로 확장하는 것을 권하고 있다.
  7. have_posts() : 워드프레스에 Posts가 있는지 물어본다. 거기 Posts있나요?
    the_post() : 다음 Post를 불러와 주세요.
  8. 아래 코드를 보면 특이한 점은 <?php를 닫는 ?> 코드가 없다는 점이다. WPShout에 따르면 ?>를 마지막에 닫는 경우 불필요한 whitespace가 남게 되고, 이게 OS간 whitespace 처리방식 차이로 인해 문제를 일으킬 수 있다고 한다.

One Response

답글 남기기

이메일 주소를 발행하지 않을 것입니다. 필수 항목은 *(으)로 표시합니다

  • 카테고리

  • Count per Day

    • 292This post:
    • 102803Total reads:
    • 58431Total visitors:
    • 30Reads today:
    • 27Visitors today:
    • 2019년 3월 10일Counter starts on: