구글 사이트 인증 코드, 네이버 사이트 인증 코드, 구글 웹사이트 통계 추적 코드, 네이버 웹사이트 통계 추적 코드, 소셜 네트워크 서비스 자바스크립트 코드나 사용자 정보, 자동으로 생성되지 않는 사이트 메타 태그 정보, 워드프레스 자바스크립트 커스텀 템플릿, 파비콘 및 때로 추가 필요한 모든 소스 코드 등, 웹사이트나 블로그의 헤더(</head> 태그 위)와 푸터(</body> 태그 위)에 추가하는 요소는 많이 있습니다. 따라서 워드프레스로 사이트나 블로그를 운영 중 또는 운영 계획이 있다면 위와 같은 요소를 추가하는 워드프레스 방식을 한 번은 익혀 둘 필요가 있습니다.
이 포스트에서는 워드프레스 사이트 소스 헤더에 ‘구글 및 네이버 사이트 인증 코드’, 푸터에 ‘구글 및 네이버 웹사이트 통계 추적 코드’와 같은 ‘테마 변경에 영향을 받지 않는 사이트 전역 설정’과 관련된 코드만 추가한다는 기준으로 이어갑니다.
- 구글 사이트 인증 코드 : google-verify-1234
- 네이버 사이트 인증 코드 : naver-verify-1234
- 구글 웹사이트 통계 추적 코드 : UA-google-1234
- 네이버 웹사이트 통계 추적 코드 : NA-naver-1234
위의 코드들은 가상의 데이터입니다. 만약, 자신에게 해당하는 실제 코드가 있다면 그 코드를 사용해도 됩니다.
테마 템플릿 header.php, footer.php 파일에 직접 추가
가장 단순한 방법은 워드프레스에서 사용하는 테마의 header.php 파일과 footer.php 파일에 직접 추가하는 것입니다.
header.php 파일에 추가
// header.php 파일 </head> 태그 위 영역에 추가
<meta name="google-site-verification" content="google-verify-1234" />
<meta name="naver-site-verification" content="naver-verify-1234"/>
</head>footer.php 파일에 추가
// footer.php 파일 </body> 태그 위 영역에 추가
<!-- 구글 웹사이트 통계 추적 코드 -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-google-1234', 'auto');
ga('send', 'pageview');
</script>
<!-- 네이버 웹사이트 통계 추적 코드 -->
<script type="text/javascript" src="https://wcs.naver.net/wcslog.js"></script>
<script type="text/javascript">
if(!wcs_add) var wcs_add = {};
wcs_add["wa"] = "NA-naver-1234";
wcs_do();
</script>
</body>이때, 직접 만든 테마가 아니라면 child theme 사용하여 특정 경우에 초기화되는 것을 방지할 수 있습니다. 워드프레스 사용자라면 이제는 충분히 일반적인 사항이므로 설명이 필요 없을 것입니다.
저장소 플러그인
워드프레스 header 및 footer 영역에 특정 소스 추가 기능이 있는 저장소 플러그인은 많습니다. 어떤 플러그인은 오직 header 및 footer에 추가할 소스 입력만 제공하며, 어떤 플러그인은 여러 기능 중에 하나의 기능으로 제공하기도 합니다.
필요한 기능만 제공하는 플러그인
다음 그림은 header와 footer 영역에 추가할 소스 입력 기능만 제공하는 Insert Headers and Footers 플러그인에서 포스트의 기준 코드를 입력한 것입니다.
포스트에서 구글 및 네이버의 특정 코드만 추가한다는 기준을 정했기에 위의 그림처럼 기준 코드만 추가했습니다. 그러나, 해당 영역에 추가해야 할 다른 코드도 얼마든지 추가할 수 있습니다. CSS 코드도 추가하여 테마와 플러그인의 스타일을 덮어쓸 수 있으며, 자바스크립트 소스 등 문제가 되지 않는 코드라면 무엇이든 가능합니다.
특정 영역에 소스를 추가하는, 필요한 기능만 제공하는 이런 플러그인은 몇 가지 더 있으므로 선택하면 됩니다.
Jetpack Site verification
워드프레스 Jetpack 플러그인의 Site verification 모듈을 활성화하면 다음 그림처럼 특정 검색 엔진의 인증 코드를 입력할 수 있는 화면이 나타납니다.
필요한 코드를 입력 후 저장하면 사이트에서 해당 코드가 </head> 태그 위에 추가된 것을 볼 수 있습니다. 그러나, 이 플러그인의 모듈은 특정 코드만 입력할 수 있도록 제한하고 있기에 다른 코드도 추가해야 한다면 비활성화로 사용하지 않는 것이 더 유리합니다.
wp_head, wp_footer 훅 사용
워드프레스 사이트 </head>, </body> 태그 위에 출력되는 소스는 wp_head, wp_footer 훅에 의한 결과입니다. 이 포스트의 핵심 내용도 이 훅의 사용을 전달하는 것입니다.
이 훅을 사용한다는 것은 코드를 추가한다는 것이며, 코드를 추가한다는 것은 특정 파일이 있어야 한다는 뜻입니다. 이때, 사용하는 테마의 functions.php 파일이나 사용하는 테마에 파일을 만들어 인클루드한다면 테마를 변경할 때 사이트에 적용되지 않으므로 다른 방법이 필요합니다.
플러그인
사이트 전역 설정으로 테마 변경에 영향을 받지 않기 위한 가장 쉬운 방법은 플러그인입니다. 이때의 플러그인은 워드프레스 저장소에 등록된 플러그인이라 아니라 최소한의 플러그인 형식을 유지하여 직접 정의하는 것을 말합니다.
다음 코드는 하나의 파일에 header 및 footer 영역에 추가할 코드를 훅을 사용하여 간단한 플러그인 형식으로 정의한 것입니다.
<?php
/*
Plugin Name: My Site Header and Footer
Description: 사이트 소스 head, body 위에 추가할 코드
Author: Jane Doe
Version: 1.0
*/
/* 사이트 Header */
add_action( 'wp_head', 'site_header_script', 7 );
function site_header_script() {
$gvc = 'google-verify-1234'; // 구글 사이트 인증 코드
$nvc = 'naver-verify-1234'; // 네이버 사이트 인증 코드
?>
<meta name="google-site-verification" content="<?php echo $gvc; ?>" />
<meta name="naver-site-verification" content="<?php echo $nvc; ?>"/>
<?php
}
/* 사이트 Footer */
add_action( 'wp_footer', 'site_footer_script', 25 );
function site_footer_script() {
$gsc = 'UA-google-1234'; // 구글 웹사이트 추적 코드
$nsc = 'NA-naver-1234'; // 네이버 웹사이트 추적 코드
if ( ! is_preview() ) { // 미리보기가 아닐 때만 코드 출력
?>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', '<?php echo $gsc; ?>', 'auto');
ga('send', 'pageview');
</script>
<!-- 네이버 웹사이트 통계 추적 코드 -->
<script type="text/javascript" src="https://wcs.naver.net/wcslog.js"></script>
<script type="text/javascript">
if(!wcs_add) var wcs_add = {};
wcs_add["wa"] = "<?php echo $nsc; ?>";
wcs_do();
</script>
<?php
}
}위 코드로 wp-content/plugins/ 경로에 custom-header_footer.php 이름의 파일을 만들면 됩니다. 그리고 관리페이지 플러그인 목록에서 활성화하면 사이트에 적용됩니다.
12, 13, 23, 24번 줄을 자신에게 해당하는 값으로 변경해도 됩니다.
25번 줄 is_preview 함수로 ‘미리보기’ 화면이 아닐 때 코드를 출력하도록 조건을 추가하였으며, 10번 줄과 21번 줄은 다음과 같습니다.
add_action( 'wp_head', 'site_header_script', 7 );
add_action( 'wp_footer', 'site_footer_script', 25 );1번 줄의 7을 77 또는 15 등 다른 수로 변경하여 사이트 소스 </head> 위에 출력되는 추가 코드의 위치를 확인해보세요. 2번 줄의 25도 다른 수로 변경하여 </body> 위에 출력되는 추가 코드의 위치 변화를 확인해보세요. 이 포스트에서는 숫자(순서, 우선순위) 변경에 의한 출력 위치 변동 확인으로 해당 숫자의 역할을 경험하는 정도면 충분합니다.
플러그인은 관리페이지에서 편집할 수 있으므로 간단한 플러그인 형식으로 만들면 코드 편집기 사용하지 않아도 쉽게 파악하여 편집할 수 있으므로 편리한 때가 많습니다.
워드프레스 웹사이트를 직접 구성한다면 이처럼 훅과 함께 간단한 코드를 추가하여 역시 간단한 플러그인 형식으로 만들어 테마 변경에 영향을 받지 않고 사이트 전역에 적용되도록 구성하는 것이 가장 좋습니다.
또, CSS와 자바스크립트 추가, PHP 또는 워드프레스 함수와 코드로 조건을 추가하여 때에 따라 필요한 데이터 출력을 제어할 수 있으므로 오히려 가장 효율적입니다.
사이트 전역에 추가할 코드 외에 특정 테마 사용 시에만 필요한 추가 코드가 있다면, 이 역시 워드프레스 함수와 기타 조건을 사용하여 함께 추가해도 문제가 없습니다. 계획, 설계의 문제로 구성하기 나름입니다.
Must Use Plugins
앞에서 만든 custom-header_footer.php 파일을 다음 경로로 이동하면 사이트 전역에 적용되면서 기본으로 관리페이지에서 비활성화가 불가한 Must Use Plugin으로 만들 수 있습니다. mu-plugins 디렉터리는 없다면 만들어야 하며, 단지 위치만 옮기면 됩니다.
wp-content/mu-plugins/
디렉터리를 만들고 파일을 이동하면 플러그인 목록 페이지에 다음 그림처럼 Must-Use 링크가 생성됩니다.
옵션 페이지와 코드 추가
워드프레스에서 옵션 데이터는 보통 사이트 전역에 적용하는 데이터입니다. 워드프레스뿐 아니라 거의 모든 웹사이트는 사이트 전역에 적용할 정보가 존재합니다. 만약, 비용을 받고 워드프레스 사이트를 제작하는 그룹에 속한다면 관리페이지 내에서 정보를 등록할 수 있는 화면을 제공하는 것이 좋습니다. 물론, 해당 그룹이 아니라도 사이트 전역 데이터를 등록하는 화면을 구성하면 편리합니다.
워드프레스에서 옵션 페이지를 추가하여 옵션 데이터를 등록하는 방법은 다음 포스트를 참고하면 됩니다. wp_head 및 wp_footer 훅을 사용하여 사이트에 출력하는 내용도 함께 있습니다.
사이트 전역 데이터를 위한 워드프레스 커스텀 옵션 페이지 추가
정리
다음 링크는 이번 포스트에서 구성한 간단한 플러그인입니다. 업로드 형식의 플러그인 설치 방법으로 설치하고, 활성화하기 전에 플러그인 > 편집기 화면에 접근하여 자신의 코드로 변경한 후 활성화하면 됩니다. 번거롭지 않기 위한 참고용입니다.
워드프레스를 사용할 때 모든 구성을 저장소의 설치 플러그인만으로 처리하는 것은 아주 비효율적입니다. 관련 지식이 부족해도, 이 포스트에서 안내한 정도의 방식은 기초 패턴에 따른 단순 ‘추가’이므로 어렵지 않습니다. 직접 간단한 플러그인 형식의 구성으로 워드프레스 사이트 사용 방식에 조금씩 변화를 주세요.