티스토리 블로그의 모든 글에 자동으로 목차 표시하는 방법

2020. 5. 14. 00:01 | 댓글 54

티스토리 블로그에 목차를 표시하려는 경우 목차 스크립트 파일을 이용하여 목차를 추가할 수 있습니다. 보통의 경우 목차를 표시할 자리에 수동으로 HTML 코드를 추가해야 하는데, 그러면 번거로울 수밖에 없습니다. 저는 H2 태그가 2개 이상인 글에 첫 번째 H2 태그 앞에 목차를 삽입하는 코드를 만들어 사용하고 있습니다.

티스토리 블로그에서 헤딩 태그가 일정 개수 이상(예: 3개 이상)인 모든 글에 목차를 생성하고 싶은 경우 아래의 방법을 이용해보시기 바랍니다. 수동으로 목차 HTML 코드를 개별 글에 추가할 필요가 없기 때문에 편리합니다.

☞고래 스킨에 목차를 자동 생성하는 방법은 티스토리 블로그 고래 3.4 스킨에 목차 자동 생성하는 방법을 참고해보세요.

티스토리 블로그에 H2 태그가 2개 이상 있는 모든 글에 자동으로 목차 표시하는 방법

목차 스크립트는 구글에서 검색하면 다양한 스크립트를 다운로드하여 활용할 수 있습니다. 저는 lie7 님의 글에서 소개하는 목차 스크립트를 사용하고 있습니다. 

1. js 파일 업로드 및 스크립트 경로 추가하기

lie7 님 블로그에서 소개하는 스크립트를 다운로드하여 업로드합니다. js 파일을 업로드했다면 다음 순서에 따라 진행하면 됩니다.

파일은 꾸미기 > 스킨 편집 > HTML 편집 > 파일 업로드 탭에서 업로드하시면 됩니다.

※목차를 표시하는 코드만 알려드리면 간단하지만, 조금 자세히 설명해봅니다. 혹시 이해가 안 되는 부분이 있다면 댓글로 알려주세요. 앞에서 이와 동일한 글을 다룬 적이 있는데요. jQuery 스크립트를 이용하는 방법에 익숙하지 않으면 적용하는 데 어려움이 있을 것 같습니다.

파일을 업로드한 후에는 다음과 같은 코드를 <head>...</head> 사이트에 추가합니다. (꾸미기 > 스킨 편집 > HTML 편집 > HTML 탭에서 </head>를 찾아서 바로 위에 추가하시면 됩니다.)

	<script src="jquery.toc.min.js 파일 경로" ></script>

"jquery.toc.min.js 파일 경로" 부분에는 이 파일의 경로로 변경해주세요.

파일 링크 확인.

※링크 삽입법은 lie7 님 방법으로 설명했습니다만, 이 방법으로 하면 잘 안 되면 경로를 간단히 ./images/jquery.toc.min.js와 같이 처리해주어도 됩니다.

<script src="./images/jquery.toc.min.js"></script>

2. CSS 파일 추가하기

그런 다음, "티스토리에 목차 표시하는 방법 (북클럽 스킨)" 글에 나와 있는 CSS 코드를 CSS 탭에 붙여넣기 합니다. CSS 코드는 적절히 변경하여 사용하시기 바랍니다.

 

3. jQuery 스크립트 추가하기

마지막으로 다음과 같은 jQuery 스크립트를 </body> 바로 위에 추가합니다.  (꾸미기 > 스킨 편집 > HTML 편집 > HTML 탭에서 </body>를 찾아서 바로 앞에 추가하시면 됩니다.)

	<script>
const table = '<div class="book-toc"><p>목차</p><ul id="toc"></ul></div>';
		
		if ( $( ".entry-content h2" ).length > 1 ) {

  $('.entry-content h2:first-of-type').before(table);
		}
	</script>
	
<script>
  $(function(){
    $("#toc").toc( {content: ".entry-content", headings: "h2,h3,h4" , top: -90, isBlink : true, blinkColor : '#21B9DE'  } )
  });
</script>

위의 코드는 h2 태그가 2개 이상일 때 목차가 표시되도록 합니다. 만약 h2 태그가 3개 이상일 때에는 숫자를 '1' 대신 '2'로 수정하면 됩니다. 조건을 추가하거나 변경하고 싶은 경우에는 if 문을 적절히 변경합니다.

(* 위의 코드에서 .entry-content > h2...를 .entery-content h2...로 수정했습니다.)

예시 1:

if ( $( ".entry-content h2" ).length > 1 || $( ".entry-content h3" ).length > 1  )

이 코드를 사용하면 h2 태그 또는 h3 태그가 2개 이상 있을 경우에만 목차가 생성됩니다.

예시 2:

if ( $( ".entry-content h2" ).length > 1 && !$("#toc").length ) 

이 코드를 사용하면 h2 태그가 2개 이상이고 ID가 toc인 요소가 없는 경우에만 목차가 생성됩니다. 이미 다른 목차 스크립트를 사용하여 <div id="#toc">...</div>와 비슷한 HTML 코드를 개별 포스트에 입력한 경우에 이 코드를 응용하여 적절히 수정하여 사용하면 기존 글에 수동으로 추가된 목차 관련 HTML 코드를 제거할 필요가 없습니다.

목차는 첫 번째 h2 태그 바로 앞에 표시됩니다. h3 앞에 추가하고 싶다면 h2:first-of-type 부분에서 h2를 h3로 변경하도록 합니다.

목차를 첫 번째 h2 태그 대신 첫 번째 문단 앞에 표시하고 싶은 경우 위의 코드에서 h2:first-of-type 부분을 p:first-of-type로 변경하시면 됩니다.

저장한 후에 확인해보면 그림과 같이 목차가 표시될 것입니다.

jQuery를 사용하여 목차가 표시되므로 사용자 브라우저에서 javascript가 비활성화되면 제대로 작동하지 않습니다. (브라우저에서 자바스크립트를 해제하면 많은 기능이 제대로 작동하지 않을 것입니다.)

구글에 잘 검색되는 글을 작성하려면...

구글 애드센스 광고를 신청했다가 탈락하는 경우 구글이 좋아하는 형식으로 글을 작성하면 도움이 될 수 있습니다. 특히 구글에 위키백과 글이 상위에 노출되는데요. 위키백과 글을 분석하여 응용하는 것도 한 방법이 될 수 있습니다.

워드프레스에서는 다양한 무료 및 유료 SEO 플러그인이 있어 SEO에 최적화된 글을 작성하는 데 도움을 받을 수 있습니다. 다음 글은 워드프레스 플러그인과 관련되었지만, 글 작성과 관련된 팁을 티스토리 등에도 응용할 수 있습니다.

 

효과적인 글쓰기를 위한 Rank Math 활용 방법 - 워드프레스 기본

이 워드프레스 블로그에 Yoast SEO 플러그인을 오랫동안 사용하다가 얼마 전에 Rank Math로 SEO 플러그인을 바꾸었습니다. 이 글에서는 효과적인 글쓰기를 위한 Rank Math 활용 방법에 대해 살펴보겠습��

www.thewordcracker.com

마치며

목차를 표시하면 사용자 경험을 향상시켜 SEO(검색엔진최적화)에 유리하게 작용하므로 가능한 경우 목차를 생성하여 표시하는 것이 좋을 것 같습니다. 워드프레스에서는 목차 플러그인을 사용하면 헤딩 태그 개수를 체크하여 설정한 개수(예: 3개) 이상의 헤딩 태그가 존재하는 경우에만 목차(TOC)를 표시할 수 있습니다.

 

워드프레스 블로그 시작하기

워드프레스를 처음 시작하는 경우 무엇부터 시작할지 막막할 것입니다. 이 글에서는 워드프레스를 처음 시작하는 경우에 참고할 수 있도록 설치부터 설정, 활용까지 다양한 정보를 제공합니다.

www.thewordcracker.com

이 글에서 소개한 방법을 이용하면 워드프레스 목차 플러그인에서 제공하는 기능과 비슷하게 구현이 가능합니다. 이 방법을 이용하면 목차 HTML 코드를 일일이 포스트에 입력할 필요가 없으므로 목차에 대해 신경을 쓰지 않아도 됩니다. 이 방법은 북클럽(Book Club) 스킨에서 잘 작동합니다. 다른 스킨에서도 잘 작동할 것 같지만, 스킨에 따라 클래스(class)명이 달라 제대로 작동하지 않을 수 있습니다. 그런 경우 아래 댓글로 블로그 주소를 남겨주시면 체크해드리겠습니다.

참고한 문서

참고

  • 네이버 블러그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 카카오스토리 공유하기

댓글을 달아 주세요

">
  1. thumbnail
    공수래공수거

    잘 알아 갑니다
    오늘도 힘내는 하루 시작하세요^^

  2. thumbnail
    [찌쏘]'s Magazine

    와우 아주 유용한 글이네요~~~

  3. thumbnail
    귀차니즘 리뷰

    잘 보고 갑니다!

  4. thumbnail
    바밸 : 균형-건강을 위한 시작

    잘보고 가요~^^ 구독합니다^^

  5. thumbnail
    IT's me

    소개해주셔서 감사합니다. 모든글에 넣을까 말까 고민하다가 안넣은 이유가 목차를 넣으면 이상한 글이 아마 상당수가 작성되있을수도 있고. 미리 목차를 설명 안해도 되는 글이 있다고 생각해서였거든요.

    지금 와서 돌아보니 모든글에 자동 적용했어도 괜찮을것 같다는 생각이 들기는 합니다.

    한가지 고민되는건... h4를 목차에 넣는것이 좋은가, 아닌가입니다. ㅎㅎ

  6. thumbnail
    2020.05.14 19:48

    비밀댓글입니다

    • thumbnail
      홈페이지 제작, 워드프레스, 웹호스팅 정보를 제공하는 블로그 Avada
      2020.05.14 19:53 신고

      h2를 h3로 변경하여 테스트해보시겠어요?
      현재 h2 태그가 사용되지 않고 h3부터 사용되는 것 같습니다.

      아니면 다음과 같이 해서도 테스트해보시겠어요? 그러면 첫 번째 paragraph 앞에 목차가 생성될 것입니다.

      <script>
      const table = '<div class="book-toc"><p>목차</p><ul id="toc"></ul></div>';

      if ( $( ".entry-content h2" ).length > 1 || $( ".entry-content h3" ).length > 1 ){

      jQuery('.entry-content > p:first-of-type').before(table);
      }
      </script>

      <script>
      $(function(){
      $("#toc").toc( {content: ".entry-content", headings: "h2,h3,h4" , top: -90, isBlink : true, blinkColor : '#21B9DE' } )
      });
      </script>

    • thumbnail
      열매맺는나무
      2020.05.14 19:57 신고

      전에 수동으로 했을 때처럼 목차 테이블은 생기는데, 그 안에 실제 목차는 없이 빈 테이블로 나옵니다.

    • thumbnail
      홈페이지 제작, 워드프레스, 웹호스팅 정보를 제공하는 블로그 Avada
      2020.05.14 20:34 신고

      다음 부분이 잘못되었습니다.

      <script type="text/javascript" src="jquery.toc.min.js https://tistory3.daumcdn.net/tistory/230272/skin/images/jquery.toc.min.js" ></script>

      다음과 같이 수정하여 테스트해보시기 바랍니다.

      src="jquery.toc.min.js https://tistory3.daumcdn.net/tistory/230272/skin/images/jquery.toc.min.js"
      ==>
      src="https://tistory3.daumcdn.net/tistory/230272/skin/images/jquery.toc.min.js"

  7. thumbnail
    열매맺는나무

    앗, 정말 감사합니다. 리스트에 숫자는 없는 걸로 바꿨습니다.
    그런데,목차를 첫번째 <h2> 아래에 두는 것도 가능할까요?

  8. thumbnail
    열매맺는나무

    이렇게 애써주시다니.. 정말 감사합니다.
    그런데 H가 아예 없는 글은 있어도 h3부터 나오는 글은 없습니다.

  9. thumbnail
    2020.05.15 09:24

    비밀댓글입니다

    • thumbnail
      홈페이지 제작, 워드프레스, 웹호스팅 정보를 제공하는 블로그 Avada
      2020.05.15 09:30 신고

      블로그를 살펴보니 스타일시트 파일이 제대로 로드되지 않은지 몰라도 레이아웃이 깨지네요.

      이 경우 다음과 같이 조치해보시기 바랍니다.
      1. 스킨 백업 / 다운로드
      2. 스킨을 다른 스킨으로 일시적으로 변경함.
      3. 다시 본래 스킨으로 변경
      4. 사이드바 등 구성...
      5. 수정 사항(예: 네이버 웹마스터도구, 구글 서치 콘솔 소유 화인 코드 등)을 추가합니다.

      다음 글을 참고해보세요.

      https://avada.tistory.com/1560

  10. thumbnail
    얼음머리

    처음에 그대로 따라해서 목차 적용시
    https://frozenhead.tistory.com/24?category=942749

    이렇게 표시되는게 맞는건가요?

  11. thumbnail
    CCHOP

    안녕하세요
    좋은글 잘봤습니다.
    북클럽 사용중인데 다 적용시켰습니다.
    근데 목차 란 단어만 나오고 안에 내용이 안나오는데 검토가능하실까요 ㅜ
    https://cchop.tistory.com/68

  12. thumbnail
    CCHOP

    감사합니다. 현재 목차에 항목앞에 숫자 카운팅이 아니라 점 으로 되어있는데 숫자 카운팅은 어떻게넣을까요?

  13. thumbnail
    Charlie253

    안녕하세요.
    저도 목차를 추가하려고 하는데, 본 포스팅과 이전 포스팅(북클럽 스킨에서 목차추가하기)에 나오는 코드를 모두 추가하였는데도 불구하고 목차 칸만 나오고, 내용은 비어서 나옵니다.
    괜찮으시다면 혹시 제 포스팅도 한번 확인해 주실 수 있으실까요?
    https://tog2001.tistory.com/67

  14. thumbnail
    ◀↗↓↖▶바인

    안녕하세요. 오늘 블로그 수정하면서 시간을 이곳에서 많이 보내고 있습니다.
    하라는대로 다 한것 같은데 목차 만들기가 안되네요.

    테스트 스킨: #1
    테스트 주소: https://buza.co.kr/31

    한번 봐주세요. ^^

  15. thumbnail
    ◀↗↓↖▶바인

    안녕하세요. 퇴근 후 지금 소스 수정 하고 있습니다. 답변 감사합니다.
    알려주신대로 수정해서 목차 나타내는데는 성공했습니다.
    그런데 약간의 버그가 있는듯 합니다.
    https://buza.co.kr/31
    위 테스트 페이지에 오류내용 적어 놨습니다. 한번 봐주세요.

  16. thumbnail
    ◀↗↓↖▶바인

    안녕하세요. 오늘은 쉬는날이라 아침부터 수정작업을 하고 있습니다.
    알려주신 내용이 무슨 말인지 잘 모르겠습니다.

    목차 나오는 부분은 h1, h2 을 자동으로 인지하여 자동으로 상단에 리스트로 보여 주고 있는데 그 보여주는 방식에서 공백이 생기는 것 같다는 것을 이야기 했었습니다.
    그런데 css를 체크하라고 하시는것은 css가 잘못 되었다는 것 같은데요.
    알려주신 링크에서는 css 의 어디를 수정해야 하는지 전혀 감을 잡을 수가 없네요.

    글쓰기를 할때 잘못 한건지? 아니면 자동으로 글 상단에 리스트를 해주는 부분의 소스의 css를 수정해야 하는건지?

    조금만 더 구체적으로 알려주시면 제가 공부를 좀더 해보겠습니다.

    좋은 하루 되세요.

    • thumbnail
      홈페이지 제작, 워드프레스, 웹호스팅 정보를 제공하는 블로그 Avada
      2020.07.26 13:52 신고

      티스토리나 워드프레스 등을 이용하여 블로그를 만들 때, 세세한 부분은 CSS로 조정이 가능합니다.

      기본적인 CSS를 익히면 도움이 될 것입니다. 서점에서 책을 하나 구입해도 되고, '생활코딩' 같은 무료 동영상 강의를 활용해도 됩니다.

      기본적인 CSS는 익히는 데 그리 많은 시간이 소요되지는 않을 것입니다.

      즐거운 휴일 보내세요.

  17. thumbnail
    ◀↗↓↖▶바인

    안녕하세요.

    CSS를 수정 해야 한다는 것.
    제가 공부해서 제가 알아서 하라는것...까지 이해 했습니다.

    어느 파일 어디를 수정해야 하는지?를 제가 여쩌봐도 될까요?