몇 달 전에 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들을 모두 삭제한다.
이제 어드민 화면의 테마 메뉴를 선택하면 다음과 같이 테마 디렉토리가 존재하지 않는다는 메시지를 볼 수 있다.
Step2-2. 새로운 theme을 최소 구성 요소로부터 시작해본다.
themes 폴더 아래 새로운 theme 폴더를 생성하고, index.php 및 style.css 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
Step2-4. 테마를 활성화시킨다.
활성화 버튼을 눌러 우리의 theme from scratch 테마를 활성화한다.
Step2-6. index.php 파일을 수정해본다.
안녕하세요, 세상
이제 웹브라우저에서 사이트에 접속하면 테마 아래 있는 index.php 를 읽어서 보여주게 된다. 시험 삼아 ‘안녕하세요, 세상’이라고 저장해보면 결과는 아래와 같이 나온다.
재미있는 점은 ThemeFromScratch.study/ 뒤에 어떤 주소를 입력해도 모두 위와 같은 결과를 얻을 수 있다. TemeFromScratch.study/qwer 과 같은 주소를 입력해도 위 결과를 얻을 수 있는데, 그 이유는 Template Hierarchy 때문이다. 3
Step3. Theme 템플릿 구성하기
Step3-1. 워드프레스 테마의 구조를 알아보자.
워드프레스 테마들은 대부분 다음 그림과 같은 구조를 가지고 있다.
위 템플릿 파일들 내부를 살펴보면 다음과 같다.
이즈음에서 index.php, page.php 등 워드프레스 테마의 템플릿 파일들을 이해하기 위해 다음 이미지를 살펴 보자.
위 그림은 왼쪽의 Post Type을 로딩하기 위해 사용하는 Template들을 오른쪽에 단계별로 정리한 것이다.
static page 즉, 정적 page는 page-$slug.php 템플릿이 있다면 그 템플릿을 사용하여 로딩하고, 만약 없다면 page-$id.php 템플릿을 사용하여 로딩하고, 만약 이 템플릿도 없다면 page.php 템플릿으로 로딩하고, 이미자도 없다면 singular.php 템플릿으로 로딩하고, 최종적으로 위 템플릿이 모두 없다면 index.php 템플릿을 사용하여 로딩하라는 의미이다.
위 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> <div class="copyright"> Copyright 문구가 들어갑니다. </div> </footer> <?php wp_footer(); //'wp_footer' 훅에 걸린 액션들이 호출됩니다.?> </body> </html>
여기까지 작성하고 웹브라우저에서 다시접근하면 다음과 같은 화면을 볼 수 있다.
웹브라우저 개발자 도구에서 소스를 확인하면 다음과 같다.
Footnotes
- 이번 포스팅에선 주요 내용 외에 부연설명들을 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
- 이왕 하는 김에 이미지 파일을 선택해서 theme-from-scratch 폴더 아래에 screenshot.jpg (또는 .png) 이름으로 저장해두면 스크린 샷으로 보이게 할 수 있다.
- 주의할 점은 index.php가 아무런 text를 포함하지 않는 빈 파일인 경우에 아무런 주소를 입력하게 되면 404 Error를 발생시킨다. 직접 실습을 통해 확인해보자.
- 앞서 Step2-6에서 먼저 언급했었다.
- 여기에서 알 수 있는 중요한 포인트는 index.php는 일반적으로 어떤 site의 landing page로 사용되었다. 하지만 워드프레스에서는 index.php는 landing page 의미가 아닌 가장 low level의 template을 의미하게 된다. 전통적인 landing page의 목적으로는 front-page.php 템플릿을 사용해보자.
- 처음부터 필요한 Post Type별 Template 파일을 모두 작성해야 하나? WPShout에선 가능한 index.php에 필요한 내용을 만들다, 반드시 필요한 시점에 Template들을 만드는 식으로 확장하는 것을 권하고 있다.
- have_posts() : 워드프레스에 Posts가 있는지 물어본다. 거기 Posts있나요?
the_post() : 다음 Post를 불러와 주세요. - 아래 코드를 보면 특이한 점은 <?php를 닫는 ?> 코드가 없다는 점이다. WPShout에 따르면 ?>를 마지막에 닫는 경우 불필요한 whitespace가 남게 되고, 이게 OS간 whitespace 처리방식 차이로 인해 문제를 일으킬 수 있다고 한다.
One Response