WordPress에 머리글 및 바닥글 코드를 추가하는 방법

코드를 사용하여 WordPress 웹 사이트를 사용자 정의하는 것은 무서울 수 있습니다. 구성을 수정하거나 새 매개변수를 추가하기 위해 코어 파일을 파헤쳐야 하는 경우가 종종 있는데, 이는 잘못된 방식으로 진행하면 사이트가 손상될 수 있습니다.

그러나 머리글 및 바닥글 코드를 추가하는 것은 훨씬 간단합니다. 종종 특정 코드 조각만 복사하여 붙여넣으면 됩니다. 즉, 머리글 및 바닥글 파일에 액세스하는 방법을 알고 있다면 가장 무서운 부분을 지나쳤습니다.

이 기사에서는 WordPress에 수동으로 또는 플러그인을 사용하여 머리글 및 바닥글 코드를 추가하는 방법을 알려줍니다. 두 가지 접근 방식 모두 매우 간단하므로 바로 시작하겠습니다!

WordPress에 머리글 및 바닥글 코드를 추가해야 하는 이유

웹 사이트를 운영하는 경우 연결하기 위해 코드를 포함해야 하는 적어도 하나의 타사 서비스에 익숙할 것입니다.

가장 인기 있는 예로는 Google Analytics, Search Console, Facebook Pixel 및 웹사이트 추적과 관련된 기타 여러 도구가 있습니다.

이러한 모든 서비스를 사용하려면 웹사이트의 헤드 태그 사이에 특정 스크립트를 추가해야 합니다. 사이트 헤더는 스크립트, 제목, 스타일 파일 등과 같은 요소를 포함하는 중요한 구성 요소입니다.

바닥글 태그는 머리 태그와 유사하게 작동합니다. 기술적으로 사이트 바닥글에 코드 스니펫을 추가하면 헤더에 포함하는 것과 동일하게 실행되어야 합니다.

그러나 웹사이트는 포함된 순서대로 스크립트를 실행한다는 점을 이해하는 것이 중요합니다. 또한 헤더 코드는   페이지가 로드되기 전에 실행되고 바닥글 코드는 페이지가 로드된 후에 실행됩니다.

선택할 수 있는 옵션이 있고 웹사이트 최적화에 관심이 있는 경우 JavaScript를 사이트 바닥글로 이동하면 로딩 시간을 단축할 수 있습니다. 그러나 일부 서비스는 실행 문제를 피하기 위해 헤더에 코드를 추가하도록 명시적으로 요청합니다.

일반적으로 서비스에서 이를 묻는 경우 해당 조언을 ​​따르는 것이 좋습니다. 다른 JavaScript 코드 스니펫의 경우 WordPress 사이트 바닥글에 배치합니다. CSS 코드는 항상 헤더에 들어갑니다.

WordPress에 머리글 및 바닥글 코드를 추가하는 방법(2가지 방법)

WordPress의 경우와 마찬가지로 수동으로 파일을 수정하거나 플러그인을 사용하여 동일한 목표를 달성할 수 있습니다.

플러그인 접근 방식에 대해 이야기하는 것으로 시작하겠습니다.

1. 헤드, 푸터, 포스트 인젝션 등의 플러그인 사용

플러그인을 사용하여 WordPress의 머리글 및 바닥글 파일에 코드를 추가하는 것이 가장 안전한 방법입니다. 플러그인을 사용하면 테마 파일을 수동으로 수정하거나 올바른 위치에 스크립트를 추가하고 있는지 확인할 필요가 없습니다.

선택할 수 있는 좋은 플러그인이 많이 있지만 작업에 대한 권장 사항은 Head, Footer 및 Post Injection 플러그인입니다.

이 플러그인을 사용하면 코드에서 코드 조각을 추가할 위치를 다양하게 제어할 수 있습니다. 또한 사이트의 모바일 및 데스크탑 렌더링을 위해 다른 스크립트를 추가하는 옵션을 제공합니다.

플러그인을 추가하려면 대시보드 내에서 플러그인 > 새로 추가 로 이동하고 검색 기능을 사용하여 플러그인을 찾으십시오. 설치를 클릭한 다음 플러그인을 활성화합니다.

플러그인이 활성화되면 설정 > 머리글 및 바닥글 로 바로 이동할 수 있습니다. 코드 조각을 추가할 수 있는 여러 필드가 표시됩니다.

플러그인의 옵션을 자세히 살펴보면 코드 스니펫에 대해 많은 추가 배치를 제공한다는 것을 알 수 있습니다. 그러나 대부분의 경우 머리글 및 바닥글 탭을 사용할 수 있습니다.

전역 코드의 경우 해당 스니펫을 모든 페이지 필드에 배치해야 합니다. 그러나 코드를 홈 페이지에서만 실행해야 하는 경우에는 홈 페이지 에서만 옵션을 사용하십시오.

웹사이트에 코드 추가를 마치면 플러그인에 대한 변경 사항을 저장하면 됩니다.

2. functions.php 파일을 통해 코드 조각 추가

WordPress에서 머리글 및 바닥글 코드를 수동으로 추가하는 것은 복잡하지 않지만 플러그인 접근 방식보다 더 많은 고려 사항이 필요합니다.

활성 테마의 header.php 또는 footer.php 파일에 직접 코드를 추가할 수 있습니다. 활성 테마의 폴더를 열고 내부를 살펴보면 /public_html/wp-content/themes/ 디렉토리에서 이러한 파일을 찾을 수 있습니다.

FTP(파일 전송 프로토콜)를 통해 해당 파일에 액세스하고 즐겨 사용하는 코드 편집기를 사용하여 파일을 편집할 수 있습니다. 그러나 머리글 및 바닥글 파일을 직접 편집하는 것은 지저분할 수 있습니다. 이를 염두에 두고 수동 접근 방식을 사용할 계획이라면 두 가지 권장 사항이 있습니다.

1. 테마에 대한 하위 테마를 만듭니다. 이렇게 하면 상위 테마를 업데이트할 때 사용자 지정 내용이 손실되지 않습니다.
2. 후크를 사용하여 functions.php 파일을 통해 코드를 추가하십시오. 이것은 머리글과 바닥글 파일을 수동으로 편집하는 것보다 더 깔끔한 접근 방식을 제공합니다.

이상적으로는 모든 유형의 테마 사용자 지정을 수행할 계획이라면 항상 자식 테마를 사용해야 합니다. /wp-content/themes 디렉토리 내의 해당 폴더에서 하위 테마의 functions.php 파일에 액세스할 수 있습니다.

코드 편집기에서 functions.php 파일을 엽니다. 원하는 코드를 추가하려면 wp_head   또는 wp_footer   훅.

다음 코드 스니펫은 사이트 헤더에 사용자 정의 코드를 추가합니다.

 add_action('wp_head', 'test_script'); function test_script() { ?> <!-- Here comes your custom code in HTML format. --> <?php }

바닥글에 코드를 삽입하려면 wp_head 대신 wp_footer 후크를 사용할 수 있습니다. 원하는 경우 함수의 이름 (test_script) 을 변경할 수도 있습니다.

functions.php 파일 수정이 끝나면 변경 사항을 저장하는 것을 잊지 마세요. 추가한 코드가 무엇이든 지금 작동해야 합니다!

결론

Google Analytics 또는 Facebook Pixel과 같은 많은 타사 서비스에서는 웹사이트에 연결할 수 있도록 웹사이트에 코드 스니펫을 추가해야 합니다. 그러나 이것은 WordPress의 머리글과 바닥글에 코드를 추가해야 하는 많은 경우 중 하나일 뿐이므로 수행 방법을 아는 것이 좋습니다.

머리글과 바닥글에 코드 조각을 추가하는 방법에는 두 가지가 있습니다. 'Head, Footer, Post Injection'과 같은 플러그인을 사용하거나 functions.php 파일을 통해 코드 조각을 추가할 수 있습니다.

WordPress에 머리글 및 바닥글 코드를 추가하는 방법에 대해 질문이 있습니까? 아래 코멘트 섹션에서 그들에 대해 이야기합시다!