워드프레스 Code Snippets 플러그인 만들기

워드프레스 CMS는 블로그를 구축하고 운영할 때 필요한 기능을 제공해주는 매우 다양한 플러그인이 있다. 하지만 비용을 지불하지 않으면 원하는 기능을 사용하지 못하는 경우가 많고 불필요한 기능이 덕지덕지 붙어있어 무겁기까지 하다. 게다가 계속적으로 업데이트를 해야 한다는 알림이 뜨고 업데이트를 하면 문제가 발생하는 경우도 다반사다.

Code Snippets 관리용 플러그인

워드프레스를 사용해 블로그를 구축하고 운영할 때 꼭 필요한 기능 중 하나가 바로 코드 스니펫을 관리해주는 기능이다. 코드 스니펫 관리가 필요한 가장 대표적인 경우가 바로 구글 어낼리틱스, 네이버 웹마스터 도구의 코드를 추가할 때다. 그나마 이 코드들은 원하는 테마를 설치한후 헤더 파일 한곳에만 넣어주면 되기에 코드 스니펫 플러그인이 없이도 충분히 관리가 가능하다.

하지만 워드프레스를 운영하면서 헤더와 글의 본문, 글의 푸터 등 때에 따라 다른 코드를 넣어주어야 하는 구글 애드센스의 광고코드는 테마를 설치한 다음 두 세개의 파일에 추가해줘야 한다. 그뿐인가? 테마를 바꾸거나 업데이트 하면 코드를 다시 넣어줘야하는 경우도 비일비재하게 발생한다.

이런 경우 코드 스니펫 관리를 위한 플러그인은 필수다. 그런데 코드 스니펫을 관리하는 플러그인은 많지만 대부분 너무 불필요한 기능이 많아 무겁거나 원하는 기능은 유료 버전을 구매해야 하는 경우가 많다.

그래서 직접 코딩해 만들어 사용하기로 했다.

코드 스니펫 플러그인이 플러그인 목록에 보인다. 그리고 관리자 화면의 왼쪽 아래에 “Code Snippets Manager” 라는 메뉴가 보인다. 이 메뉴를 클릭하면 다음과 같이 코드 스니펫을 추가/수정/삭제할 수 있는 화면이 보이게 된다.

코드 스니펫의 이름(제목)을 입력하고 코드를 삽입할 위치를 선택한다.

위치는 모두 3군데 가능하다. Header는 <head>와 </head> 사이를 의미하며 Footer는 본문의 끝과 사이드바 사이를 의미한다. 마지막으로 php_init은 테마의 functions.php 파일에 php 코드를 삽입할 수 있음을 의미한다.

코드에는 구글 광고코드, 구글 어낼리틱스 코드, php 코드 등 다양한 코드를 삽입할 수 있다.

저장된 스니펫 목록에는 추가되어 활성화되거나 잠시 비활성화 된 코드 스니펫들의 목록이 보인다. 이 코드들은 수정할 수도 있고 잠시 꺼둘수도 있으며 삭제할 수도 있다. 위 화면에는 구글 SEO 리치코드를 비롯해 이미지 캐시를 위한 이미지 주소 변환 코드, 구글 애드센스코드등이 추가되어 활성화된 상태임을 알 수 있다.


다음 화면은 구글 애드센스의 공통 코드를 Header에 삽입한 예시다.

워드프레스 코드 스니펫 플러그인을 통해 구글 애드센스 공통코드를 삽입한 모습
워드프레스 코드 스니펫 플러그인을 통해 구글 애드센스 공통코드를 삽입한 모습

다음은 구글 SEO 점수를 높이기 위해 이미지 캐시서버를 구축하고 이미지의 URL을 이미지 캐시서버로 실시간 변환하여 클라이언트인 브라우저에게 제공하기 위한 코드다.

직접 코딩해 만든 코스 스니펫 관리용 플러그인을 통해 여러 코드 스니펫들을 관리하기 시작했다. 테마가 업그레이드 되어도 문제 없으며 이미지 캐시서버의 장애 시 해당 코드 스니펫을 끌 수 있어 신속한 대응도 가능하다.

이 코드 스니펫을 관리하는 플러그인의 제작도 AI의 도움을 받았는데 채 한나절이 걸리지 않았다.

코드는 Github에 공개되어 있다. (Github Repository)

#워드프레스 #코드스니펫 #를러그인

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다