워드프레스에서는 다양한 방법으로 헤더와 푸터에 코드를 추가할 수 있습니다. GeneratePress 테마를 사용하는 경우 Elements 모듈을 사용하여 워드프레스 알림판에서 쉽게 헤더나 푸터 등에 스크립트를 쉽게 입력할 수 있습니다.
워드프레스에서 헤더/푸터에 코드를 추가하는 다양한 방법
구글이나 네이버 소유 확인 코드나 구글 애널리틱스 코드 또는 애드센스 자동 광고 스크립트, JS(자바스크립트) 코드 등을 헤더나 푸터에 추가해야 하는 경우가 있습니다.
워드프레스는 다양한 방법을 지원하므로 적당한 방법으로 코드를 추가할 수 있습니다.
- 워드프레스에서 제공하는 훅(Hook)을 사용하여 코드 추가
- 워드프레스 테마 파일에서 직접 코드 추가 (차일드 테마 이용)
- header.php 파일: 헤더 파일에 코드 추가
- footer.php 파일: 푸터 파일에 코드 추가
- WPCode나 Insert Headers And Footers와 같은 플러그인 사용
- 테마에서 헤더나 푸터 섹션에 코드를 추가할 수 있는 옵션을 제공하는 경우 테마 기능 가능하기
아바다 등 일부 테마에서는 테마 옵션을 통해 애널리틱스 추적 코드를 입력하거나 스크립트를 푸터에 입력할 수 있는 기능을 제공하기도 합니다. 테마에서 이런 기능을 제공한다면 테마 옵션을 이용할 수 있습니다.
손쉬운 방법은 WPCode와 같은 플러그인을 사용하는 것입니다. 특히 FTP 접속에 어려움을 겪는 경우 이 방법이 유용합니다. 하지만 이런 플러그인을 사용하는 경우 PHP 코드를 입력하는 것이 제한될 수 있고 사이트의 모든 페이지에서 코드가 로드되어 사이트 속도에 안 좋은 영향을 미칠 수 있습니다.
애드센스 광고나 공정위 문구 등의 위치를 정교하게 지정하고 싶은 경우에는 Ad Inserter 플러그인을 사용할 수 있습니다. 이 플러그인을 사용하면 카테고리나 태그에 따라 다른 광고나 문구를 표시하는 것도 가능합니다.
GeneratePress 테마: 헤더와 푸터에 코드를 추가하는 방법
GeneratePress 테마를 사용하는 경우 Elements 모듈을 활성화하여 워드프레스 알림판에서 헤더와 푸터 섹션를 비롯한 다양한 위치에 코드를 쉽게 추가할 수 있습니다. 무료 버전 사용자라면 자식 테마를 만들고 함수 파일에 코드를 직접 추가할 수 있습니다.
GP Premium가 설치되어 있다면 워드프레스 관리자 페이지 » 모양 » GeneratePress의 Modules 섹션에서 Elements 모듈을 활성화할 수 있습니다.
위의 그림과 같이 오른쪽에 Deactivate 버튼이 표시되면 해당 모듈이 활성화된 것입니다.
헤더나 푸터에 스크립트를 추가하려는 경우 모양 » Elements로 이동하여 Add New Element 버튼을 클릭한 다음, Choose Element Type 팝업이 표시되면 Hook를 선택하고 Create 버튼을 클릭하도록 합니다.
그러면 아래 그림과 같은 Add New Hook 화면이 표시됩니다.
- 제목 추가(①) 부분에 후크 제목을 입력합니다. 원하는 이름을 입력하시면 됩니다(예: 구글 애널리틱스 코드)
- 콘텐츠 영역(②)에 표시할 스크립트나 코드를 입력합니다.
- Settings 탭의 Hook(③)에서 적절한 훅을 선택합니다.
- 헤더 섹션에 코드를 추가하려면 wp_head를 선택합니다.
- 푸터 섹션에 코드를 추가하려면 wp_footer를 선택합니다.
예를 들어, 구글 서치 콘솔의 사이트 소유 확인 코드나 네이버 웹마스터 도구의 사이트 소유 확인 코드 등은 헤더 섹션에 입력합니다. 자바스크립트 코드는 보통 푸터 섹션에 추가하면 됩니다.
이외에도 제너레이트프레스 테마 자체에서 제공하는 훅을 선택할 수도 있습니다.
텍스트, 자바스크립트, 숏코드, PHP 코드 등을 입력할 수 있습니다.
- 숏코드를 실행하려면 Execute Shortcodes 체크박스를 선택합니다.
- PHP 코드를 실행하려면 Execute PHP를 선택합니다.
일부 워드프레스 사이트에서는 "Unable to execute PHP as DISALLOW_FILE_EDIT is defined"가 표시되면서 Execute PHP 옵션을 선택하지 못할 수 있습니다.
워드프레스 알림판에서 PHP 코드를 입력하여 실행하도록 하는 것은 보안상 바람직하지 않기 때문에 wp-config.php 파일에 다음 코드를 추가하여 알림판에서 파일 편집을 허용하지 않도록 설정할 수 있습니다.
define( 'DISALLOW_FILE_EDIT', true );워드프레스 대시보드에서 PHP 코드를 실행하는 것은 바람직하지 않지만 PHP 코드를 꼭 입력해야 하는 경우에는 wp-config.php 파일에서 위와 같은 코드를 제거하는 것을 고려할 수 있습니다.
Display Rules 탭에서 해당 코드나 스크립트가 표시될 페이지 등을 지정할 수 있습니다.
전체 사이트나 전면 페이지(홈페이지), 특정 페이지, 아카이브 페이지, 태그 페이지, 블로그 글 글을 지정할 수 있습니다.
Exclude 섹션에서 제외할 페이지를 선택할 수도 있습니다.
설정이 완료되었다면 발행하여 코드가 제대로 표시되는지 체크하시기 바랍니다.
구글/네이버 사이트 소유 확인하기
구글 서치 콘솔와 네이버 서치 어드바이저에 사이트를 등록하는 경우 사이트 소유 확인 과정을 거쳐야 합니다.
구글은 도메인 방식과 URL 접두어 방식으로 사이트 등록을 할 수 있습니다.
두 방식 중 하나로 사이트 소유권 인증을 하거나 두 방식을 모두 이용하여 사이트 소유권 확인을 하는 것도 가능합니다.
도메인 방식으로 등록하는 경우에는 제시된 DNS 레코드를 도메인 네임서버가 있는 곳에서 설정하면 됩니다.
URL 접두어 방식을 이용하는 경우 HTML 파일이나 HTML 태그 방식으로 소유권을 확인할 수 있습니다.
HTML 파일은 HTML 파일을 다운로드하여 FTP로 업로드하여 인증하는 방식이고 HTML 태그는 헤더에 사이트 소유권 확인 메타태그를 추가하는 방식입니다. FTP로 파일을 업로드하는 방법을 권장하지만, FTP에 접속할 수 없는 이유 등으로 인해 HTML 태그를 사용하여 인증해야 한다면 몇 가지 방식으로 헤더 섹션에 메타태그를 추가할 수 있습니다.
네이버에서는 HTML 파일 업로드와 HTML 태그 방식으로 사이트 소유 확인을 할 수 있습니다.
HTML 파일을 이용하는 경우 네이버와 구글 모두 FTP를 통해 파일을 사이트의 루트 폴더로 업로드해야 합니다.
HTML 태그를 이용하여 사이트 소유 확인을 하는 경우 이 글에서 제시된 방법으로 헤더 섹션에 메타태그를 추가할 수 있습니다.
- wp_header 훅을 통해 추가
- 테마의 header.php 파일에 추가 (차일드 테마 이용)
- WPCode와 같은 플러그인을 사용하여 헤더 섹션에 추가
- 테마에서 헤더에 코드를 추가할 수 있는 옵션을 제공하는 테마 기능 사용하기
GeneratePress 테마를 사용하는 경우에는 상기의 "GeneratePress 테마: 헤더와 푸터에 코드를 추가하는 방법" 섹션에 소개된 방식을 이용할 수 있습니다.
구글의 경우에는 사이트킷 플러그인을 사용하여 구글 검색 콘솔, 구글 애널리틱스, 구글 애드센스에 연동이 가능합니다.
또한, Yoast SEO 플러그인을 사용한다면 사이트 연결(Site connections) 메뉴에서 구글 검색 콘솔의 인증 코드(Verification Code)를 입력할 수 있습니다.
GeneratePress 테마인데요. header-min.php와 footer-min.php가 아닌 Theme Header(header.php)와 Theme Footer(footer.php)가 맞는 거죠?
코드 삽입 위치는 아래 예시가 맞을까요?
1.
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<!-- 헤더 코드 추가 -->
<?php wp_head(); ?>
</head>
2.
<?php
/**
* generate_after_footer hook.
*
* @since 2.1
*/
do_action( 'generate_after_footer' );
?>
<!-- 푸터 코드 추가 -->
<?php
wp_footer();
?>
</body>
</html>
헤더와 푸터는 워드프레스 자체에서 훅을 제공하므로 훅을 이용하여 차일드 테마 함수 파일에 추가해보시기 바랍니다.