워드프레스 child theme 만들기

워드프레스에 Google Analytics를 적용하려면 head 태그에 스크립트를 삽입해야하는데 테마 파일을 직접 수정하는 경우 테마 업데이트를 할 때마다 작업을 다시 해줘야하는 번거로움이 있다.

자식 테마를 생성하면 이런 문제를 해결할 수 있는데, 여기서는 다른 내용들은 전부 생략하고 오로지 구글 어낼리틱스를 적용하기 위한 최소한의 작업만 다루도록 한다

1. 자식 테마를 위한 디렉터리 생성

wp-content/themes에 원하는 이름으로 디렉터리를 생성한다. 다른 예제에서는 보통 부모 테마의 이름 뒤에 -child를 붙이는 식으로 안내하고 있다. 예를 들어 astra 테마의 자식 테마를 만들 경우 astra-child라는 이름으로 생성한다. 그런데 사실은 아무거나 해도 상관없다.

2. style.css 파일 생성

자식 테마를 만들려면 이 파일은 필수적으로 만들어야한다. 이전 단계에서 생성한 디렉터리에 이 파일을 생성하도록 한다. 최소한의 내용은 다음과 같다

/*
Theme Name:	Astra Child
Template:	astra
*/

Template 항목에는 부모 테마의 디렉터리 이름을 써야한다. Theme Name은 아무거나 써도 상관없다. 기존 테마에 GA만 추가할 것이기 때문에 별도의 스타일 선언은 필요없다.

3. functions.php 파일 생성

아래와 같은 내용으로 functions.php 파일을 생성한다

<?php
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles', PHP_INT_MAX );
function my_theme_enqueue_styles() {
    wp_enqueue_style('parent-style', get_template_directory_uri().'/style.css' );
}

add_action('wp_head', 'add_ga_script' );

function add_ga_script() {
?>
<script async src="https://www.googletagmanager.com/gtag/js?id=(본인의 트래킹 아이디)"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', '(본인의 트래킹 아이디)');
</script>
<?php
}
?>

GA 스크립트를 js 파일로 따로 묶어내면 더 깔끔하겠지만 그렇게 하면 link 태그로 삽입되어 제대로 동작하지 않는다. 좀 더 공부를 해보면 어떻게든 할 수는 있겠지만 굳이 그렇게까지 시간을 쓸 필요는 없을 것 같다.