티스토리에서 카테고리별로 다른 문구/광고 표시하기

워드프레스 정보를 제공하는 블로그 Avada 2018. 12. 19. 16:26 • 댓글:

티스토리에서 카테고리별로 다른 문구나 배너 혹은 광고를 표시하고 싶은 경우가 있을 수 있습니다. 그런 경우 "티스토리 카테고리별로 다른 광고 표시하기"에서 제시하는 코드를 사용해볼 수 있습니다.

하지만 jQuery보다는 javascript를 사용하는 것이 사이트 성능에 미치는 영향을 최소화할 수 있습니다. 전 javascript에 까막눈이라서 구글을 검색하여 조합하여 만들어보았습니다.

why if (element.innerHTML == “”) is not working in firefox라는 글을 참고로 다음과 같이 만들어서 테스트해보니 의도한 대로 작동하는 것을 확인할 수 있었습니다.

(* 아래 스크립트에 오류가 있거나 개선해야 할 점이 있으면 아래 댓글로 알려주시면 수정하도록 하겠습니다.)

<script>
   if(document.getElementById("post_category") != null){
   var element = document.getElementById("post_category");
   var htmlstring = element.innerHTML;
   htmlstring = (htmlstring.trim) ? htmlstring.trim() : htmlstring.replace(/^\s+/,'');
  if(htmlstring == '워드프레스') {
  var string = document.getElementById("bottom_text");
string.innerHTML = '원하는 문구(HTML)';

else if(htmlstring == '기타') {
  var string = document.getElementById("bottom_text");
string.innerHTML = '원하는 문구(HTML)';

  }
// ...
 }
</script>

위의 코드를 적절히 수정하여 </body> 바로 앞에 추가하도록 합니다. 그리고 다음 코드를 문구를 표시할 곳에 추가하도록 합니다.

<p class="bottom_text"></p>

post_category ID명은 스킨마다 다르므로 확인하여 변경하도록 합니다. 카테고리를 표시하는 ID가 없는 경우 다음과 같은 형식으로 적절한 곳에 추가할 수 있습니다.

<span id="post_category">IT & 기타/티스토리</span>

이 블로그에 사용 중인 #1이라는 스킨에는 개별 포스트에 카테고리를 표시하는 요소가 없어서 위와 비슷한 형식으로 추가했습니다.

구글 애드센스 광고 배너 코드는 테스트해보지 않았습니다.

참고로 if(document.getElementById("post_category") != null){... } 부분은 Uncaught Typeerror: cannot read property 'innerHTML' of null 에러를 방지하기 위해 추가했습니다.

참고: