intro 매번 기록해야지 하면서도 게으름을 이기지 못하고 시간이 흘러갔다. 그러다 최근 새롭게 도전하고 싶은 것들이 생겨나면서 다시 기록하기 위해 오랜만에 돌아왔다. 그동안 미뤄왔던 블로그도 개편하면서 다시 시작한다는 마음으로 임해보고자 한다.
이번 글을 시작으로 Headless WordPress까지 작성해 보는 게 목표이기 때문에 워드프레스가 정확히 무엇이고 어떻게 동작하는지 작성해보고자 한다.
워드프레스(WordPress)란?
CMS(Content Management System)의 일종으로, 사용자가 전문적인 기술 지식 없이도 웹사이트에서 콘텐츠를 생성, 관리 및 수정할 수 있도록 도와주는 콘텐츠 관리 시스템 소프트웨어이다.
워드프레스는 PHP와 MySQL을 기반으로 서버 측에서 동작하는 CMS이다. 클라이언트 측에서 동작하는 리액트와는 반대인 것이다. 서버 측에서 동작하기 때문에 SEO에 친화적일 수밖에 없는데 워드프레스는 한 발 더 나아가 SEO가 자체적으로 내장되어 있어 모든 페이지와 게시물에 대한 tag와 meta description을 자동으로 생성해 준다는 장점을 가지고 있다. 무엇보다 워드프레스의 가장 큰 특징은 관리 대시보드를 제공하기 때문에 비개발자인 사람도 웹사이트 구축과 관리가 용이하다는 것이다.
위의 설명만 보면, 참 쉽고 간편해 보인다. 그러나 현실과 다르게 내가 실제로 접한 워드프레스는 생각보다 이해해야 할 것이 많았다. 특히, 커스텀 테마를 제작하기 위해서는 워드프레스의 내부 동작 방식을 더 잘 이해할 필요가 있었다. 그럼 어떻게 동작하는지 알아보자.
워드프레스의 템플릿 계층 구조(ft. 동작 방식)
우선 위 그림을 한 번 훑어보길 추천한다! 공식문서에서 제공하는 예시를 인용하여 차근차근 이해해 보도록 하겠다.
현재 내가 보고 있는 페이지에서 unicorns라는 카테고리를 클릭한다고 가정해 보겠다.
- 현재 테마 경로에서 템플릿 파일을 찾는다.
category slug가 unicorns이기 때문에 워드프레스는 category-unicorns.php 파일을 찾을 것이다. - 그런데 해당하는 파일이 slug가 아닌 id 값으로 되어있다면, 해당 id 값으로 된 일치하는 파일을 찾을 것이다.
ex) category-4.php - 일치하는 파일을 찾지 못했다면, 좀 더 포괄적인 템플릿 파일을 찾는다. ex) category.php
- 또다시 일치하는 파일이 없다면, 그럼 더 포괄적인 템플릿 파일을 찾아낸다. ex) archive.php
- 이것마저도 없다? 더 이상 갈 곳이 없어 메인 테마 템플릿 파일을 띄워주게 된다. ex) index.php
이제 다시 그림과 예시를 보며 요약을 해보자면 이러하다.
- 템플릿 계층 구조에 따라 결정된 순서대로 템플릿을 선택한다.
- 일치하는 템플릿 파일을 찾을 수 없을 경우에는 index.php 파일을 사용하게 된다.
그림 1-1처럼 결국에는 index.php 파일로 귀결된다. 때문에 공식 문서를 읽으면서도 가장 중요한 건 index.php라는 점을 상기시킬 수 있었다. 다양한 파일 중에서 특정 파일을 찾아서 읽어 들이는 방식은 이해했는데 그렇다면 기능 연결은 어떻게 하고, 스타일 연결은 어떻게 하는 것일까?
워드프레스 테마에서 파일을 연결하고 실행되는 모든 것을 실현시켜 주는 것이 바로 function.php 파일이다.
흔히들 워드프레스 테마의 "엔진"이라고도 표현한다. 테마의 동작 방식을 결정하고, 테마에 기능을 추가하거나 기존 기능을 수정하는 역할을 하기 때문에 기능측면에서 핵심 파일이라고 할 수 있다. functions.php 파일의 역할을 정리하면 아래와 같다.
- 테마 기능 추가 및 확장
- 스크립트 및 스타일 등록
- 커스터마이즈 및 필터
// 스크립트 및 스타일 파일 연결
function mytheme_enqueue_scripts() {
wp_enqueue_style('mytheme-style', get_stylesheet_uri());
wp_enqueue_script('mytheme-script', get_template_directory_uri() . '/js/custom.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'mytheme_enqueue_scripts');
// 커스터마이징 적용
function mytheme_filter_content($content) {
if (is_single()) {
$content .= '<p>Thank you for reading this post!</p>';
}
return $content;
}
add_filter('the_content', 'mytheme_filter_content');
워드프레스의 함수
워드프레스 함수를 알면 복잡한 절차를 쉽고 간단하게 처리할 수 있다. 그중에서도 자주 사용되는 함수들을 정리해 보았다.
Path 관련 함수
- bloginfo( $show )
: 사이트 설정 중 $show에서 넘겨주는 '질의'에 해당하는 값을 출력한다. - get_template_directory_url()
: 테마가 위치한 경로의 URL 주소를 얻을 수 있다.
How to use <?php echo get_template_directory_url() . '/folder/path/other.js'; ?> - get_stylesheet_directory_uir()
: 현재 사용 중인 테마 혹은 자식 테마의 stylesheet directory uri를 반환한다.
File 연결 함수
- wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer )
: 웹페이지와 연결된 스크립트 파일의 안전한 로딩과 체계적인 관리를 가능하게 해 준다. (스크립트 링크 정보를 생성)
호출된 시점에서는 아무 일도 발생하지 않으며 내부 데이터 구조로 설정만 가지고 있다가 wp_head()/wp_footer()를 만나야 출력됨. - wp_enqueue_style( $handle, $src, $deps, $ver, $media )
: wp_enqueue_script와 유사하며 스타일 시트를 제어한다. head/footer에서 출력하는 설정은 없다.
Post 관련 함수
- body_class( $class )
: 현재 위치한 웹페이지와 관련된 css 클래스들을 주어진 $class와 병합하여 body 태그의 css 클래스 속성을 생성한다.
ex) page-template-<file-name>, postid-<id>, logged-in - wp_nav_menu( $args )
: 관리자 [ Appearance → menu ]에서 설정된 메뉴를 지정된 형식에 맞게 출력/반환한다.
- theme_location : 사용할 위치
- menu_id : 루트(ul) 요소에 적용될 아이디명 지정
- container : ul 요소를 감쌀 것인지에 대한 여부. 만약 감싼다면 어떤 요소로 감쌀 것인지 전달 가능 (default: 'div')
- link_before / link_after : 링크 텍스트의 전치/후치 문자열
- items_wrap : list item들을 감싸는 방식 지정 - wp_head
: head 태그 내에 필요한 정보를 출력하는 함수. 스크립트와 스타일시트의 링크 정보 및 해당 페이지와 관련된 각종 메타 태그를 생성한다. 반드시 </head> 태그 이전에 수행해야 한다. - wp_footer
: wp_head에서 수행되지 못한 스크립트나 스타일시트 파일을 링크한다. - get_header( $name )
: $name이 주어지면 header-{$name}.php 파일 내용을 출력하고, 값이 없거나 해당 파일이 없으면 header.php 파일 내용을 출력한다. 주로 파일 내부 상단에 위치한다. - have_posts()
: 보여줄 포스트가 있는 경우 true, 더 이상 없으면 false를 반환한다. 루프를 순회하는 횟수를 제한해 주기 위해 조건을 만족하는 경우에만 수행한다. - the_post()
: 전역 WP_Query 객체의 콘텐츠 목록 내에서 다음 콘텐츠로 이동한다. 글과 관련된 전역 함수들이 사용 가능하도록 설정된다.
How to use <?php while( have_posts()) : the_post(); ?> - get_permalink( $post, $leavename )
: 현재 참조 중인 전역 $post 또는 특정 글의 고유 주소를 얻기 위해 사용된다. 생략 시, 전역 $post 객체의 글이 고유 주소로 반환된다. - the_content( $more_link_text, $strip_teaser )
: 전역 $post를 참조하여 본문을 출력한다. - get_footer( $name )
: $name이 주어지면 footer-{$name}.php 파일 내용을 출력하고, 값이 없거나 해당 파일이 없으면 footer.php 파일 내용을 출력한다. 주로 파일 내부 하단에 위치한다. - get_post_meta( $post_id, $key, $single )
: 게시물의 메타데이터를 검색하여 정보를 얻을 수 있다.
- $post_id : get_the_id()를 사용해서 취득
- $key : 데이터를 검색할 메타키. 지정하지 않으면 해당 게시물의 모든 데이터를 검색 (optional)
- $single : 값을 배열로 반환할지 단일 값으로 반환할지에 대한 여부 지정 - get_current_blog_id()
Multisite(ex. 다국어)는 사이트 당 아이디 값을 가지고 있는데, 그 값을 얻을 수 있다.
워드프레스의 훅(hook)
워드프레스의 어떤 기능이 실행될 때 다른 기능을 만들어 추가로 실행하거나 워드프레스 해당 기능의 일부 또는 전부를 빼거나 다른 기능으로 대체하는 것입니다. 고도화된 기능을 더욱 빠르고 간편하게 구현할 수 있습니다.
- '워드프레스 테마 직접 만드는 개발자 되기' 발췌
리액트도 함수형 컴포넌트가 가능한 이유가 훅의 도입이었던 것처럼, 워드프레스에서 테마와 플러그인을 제작하기 위해서도 훅을 잘 알고 있어야 한다.
👀 테마(Theme)와 플러그인(Plugin)
테마는 레이아웃을, 플러그인은 기능을 담당하는 것으로 구분지은 것이 아닌 워드프레스의 테마는 등록된 글, 이미지, 첨부파일 등을 어떤 형식으로 보여줄지를 결정하는 레이아웃을 구성하는 파일들의 집합이며, 플러그인도 마찬가지이다. 단, 테마는 1개만 활성 가능하지만 플러그인은 여러 개를 조합이 가능하다는 차이가 있다.
워드프레스에서는 테마 개념이 워낙 중요하다 보니 테마에 대해 더 얘기해 보자면,
테마에는 스타일을 담당하는 style.css + 레이아웃을 담당하는 header.php, category.php 등 + 테마에 필요한 공통 기능을 담당하는 function.php으로 이루어져 있다!
그렇다면 훅이란 단어 자체의 의미부터 알아보자.
훅(hook) 이란?
일련의 처리 과정 중 특정 부분에 갈고리를 걸어 놓고, 수행 시 개발자가 원하는 다른 별도의 처리 과정을 거치도록 하는 메커니즘
우리가 함수만 사용하기에는 불필요한 과정이 있기 마련이다. 이에 워드프레스는 콜백 함수 개념을 사용하여 개발자로 하여금 개입할 수 있는 확장성을 마련한 것이 바로 이 '훅(hook)'인 것이다.
즉, 워드프레스의 훅은 내부에 콜백 함수들의 목록을 유지하였다가 순차적으로 호출하는 편리한 도구인 것이다!
그중 고도화된 액션과 필터라는 훅을 비교하여 정리해 보겠다.
| add_action | add_filter |
| 어떠한 이벤트 발생 시 추가로 수행이 필요한 작업을 할 때 사용한다. (워드프레스 내부의 이벤트가 발생할 때) | 반환되는 값에 추가적인 가공이 필요한 경우에 주로 사용한다. (DB에 저장하거나 화면에 출력하기 전에 콘텐츠의 내용을 변경할 때) |
| 반환 값이 없다. | 반환 값이 있다. |
| ex) 글을 등록하거나 댓글을 달 때 | ex) 포스트나 페이지 내용을 가져와서 화면 출력 전에 변경할 때 |
- add_action( $tag, $function_to_add, $priority, $accpeted_args )
- add_filter( $tag, $function_to_add, $priority, $accpeted_args )
WP_Query
워드프레스의 중요한 개념 중 하나인 WP_Query에 대해 정리해 보겠다.
WP_Query는 데이터 베이스에 저장된 글 목록을 얻어오고, 사용자에게 보여주는 과정에서 필요한 모든 정보를 관장하며, 워드프레스가 제공하는 모든 웹페이지는 WP_Query 객체를 기반으로 화면을 출력한다. WP_Query의 클래스인 $wp_query는 전역 변수로서 어느 곳에서든 접근이 가능하다.
콘텐츠를 출력할 때 사용하는 $have_posts, $the_post와 같은 루프 함수들도 $wp_query와 상호작용한다.
앞서 워드프레스의 모든 글이나 페이지의 메인 콘텐츠를 index.php에서 처리한다고 하였는데, 해당 처리 과정을 간략하게 풀면 이러하다.
[ header를 불러온다 → WP_Query 루프를 순환하면서 본문을 출력 → footer를 불러온다 ] 이 과정을 거치면 전체 html이 끝나게 된다. 이때 본문 출력 부분을 좀 더 상세히 풀면 아래와 같다.
- 사용자가 주소창에 특정 주소를 입력
- 워드프레스는 이 요청을 분석하여 그에 상응하는 정보를 얻어 $wp-query를 준비
- have_posts()의 호출 결과로 루프를 수행할지 판단
- the_post()가 수행되면, $wp_query가 가진 정보를 이용하여 글을 나타내는 $post( 전역 WP_Post 객체 )를 준비
- $wp_query( 전역 WP_Query 객체 )는 다음 글로 이동
- the_post()가 수행된 이후, 비로소 전역 $post 변수를 이용하는 함수들이 이용 가능(the_title, the_content, the_date 등)
- 함수들을 이용하여 화면에 각 정보를 출력한다.
개발을 막 시작할 때만 생각해 보더라도 내가 워드프레스를 사용하게 될 것이라고는 상상하지 못했지만, 지금 드는 생각은 정말 좋은 기회라는 것이다. 모든 코드는 작성되는 순간 레거시(legacy)가 된다는 말이 있다. 이 말처럼 기술은 지금도 빠르게 발전하고 있고, 교체가 되기도 한다. 그러나 어떤 곳에서는 옛 시스템이 여전히 살아있다. 즉 ⌜누군가는 새 시스템에서 옛 시스템으로, 그리고 옛 시스템에서 새 시스템으로 통신하게 하는 방법을 알아야 한다.⌟라는 말이 떠오른다. 워드프레스도 탄생한 지 10년이 되었다. 이제는 구시대의 산물 같은 취급을 받지만 웹을 보다 쉽고 편하게 구현하기 위해 탄생하였던 것처럼 현재도 이 같은 목적으로 이전 기술의 단점을 보완하며 React와 같은 새로운 기술들이 생겨나고 있다. 이런 흐름을 이해하고 나니 그저 최신 유행만 좇을 필요는 없다는 시각을 가지게 되었다. 무엇보다 워드프레스는 여전히 사랑받고 있고 과소평가될 수 없는 기술임을 사용해보고 나니 느낀다.
그러나 CMS인 워드프레스 특성상 백엔드와 프론트엔드가 결합된 구조로 한 몸처럼 동작하다 보니 코드 분리를 할 때도 백엔드와 협업해야 하고, 아직 미숙한 나에게는 shortcode 작성도 쉽지가 않다... 또한 워드프레스의 내장 함수는 대부분 전역 변수이며 그 양도 많다보니 상황에 따른 적합한 함수를 파악하는 것이 여간 힘들다...(경험이 적고 실력의 문제이긴 하지만...) 무엇보다 모듈화 방식의 편리함을 느낀 나로서는 워드프레스가 그저 아쉽다!!! 사실 나의 이런 불편은 사용자나 보안을 전혀 고려하지 않은 오로지 프론트엔드 개발 범위의 제약에 국한된 이야기이긴 하다. 그래서인지 최근에는 Headless CMS를 도입해서 워드프레스와 React, Vue.js, Angular 등 최신 프론트엔드 프레임워크를 결합하여 구축하는 방식에 많은 관심을 가지고 있다. 이에 대한 내용은 다음 글로 찾아오도록 하겠다:)
글을 맺으며 ChatGPT에 워드프레스와 리액트를 비교해 달라고 하니 아래와 같은 답을 해주었다.
워드프레스는 전체적인 웹사이트 관리에 적합하고, 리액트는 고급 사용자 인터페이스와 동적인 웹 애플리케이션 구축에 적합합니다.
워드프레스는 콘텐츠 관리 시스템 소프트웨어(CMS)라는 것을 잊지 말도록 하자!
📜 출처
- [워드프레스 공식문서] Template Hierarchy
- 워드프레스가 뭐죠?
- [워드프레스 공식문서] Functions
- [도서] 워드프레스 테마 직접 만드는 개발자 되기