[기능] 티스토리 접은 글 텍스트 변경하기

2019. 9. 17. 22:56IT/Blog Customize

접은 글 텍스트 변경

티스토리 블로그를 이용하면 서 접은 글 기능을 이용하는 경우가 가끔 있는데 접은 글이 본문에서 ...더보기 접기로 밖에 나타낼 수 없다는 점을 파악하고 해당 텍스트를 수동으로 변경할 수 있는 스크립트를 작성하였습니다.

 

결과물

접은글 텍스트 수정 스크립트 적용 후
접은글 텍스트 수정 스크립트 적용 전

스크립트 삽입 방법

스크립트를 삽입하기 위해서는 블로그 관리 > 스킨 편집 > HTML 편집으로 접속하시면 됩니다.

블로그 관리 > 스킨 편집 > HTML 편집

HTML 편집에서 head 태그 내부의 script 태그에 아래 코드를 붙여 넣습니다.

// 접은글 텍스트 변경 스크립트
$(document).ready(function(){
	$(".btn-toggle-moreless").each(function(){
      var text_more = $(this).parent().first().data("text-more");
      var text_less = $(this).parent().first().data("text-less");

      $(this).text(text_more);

      $(this).on("click", function(){
          if ($(this).text() == text_less) {
      		$(this).text(text_less);
          } else {
      		$(this).text(text_more);
          }
      });
  });
});

위 스크립트를 작성하고 적용하면 모든 준비는 완료됩니다.

 

접은 글 텍스트 변경이 작동하지 않는 경우 아래 태그를 <script> 태그 위에 삽입 해 주세요.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>

접은 글 텍스트 변경하기

우선 게시물에 접은 글을 추가합니다.

접은 글을 추가한 후 작성 모드를 HTML로 변경하고 접은글의 data-text-more 속성과 data-text-less 속성을 원하는 값으로 변경하면 됩니다.

data-text-more 속성은 접은 글을 열기위해 표시되고 data-text-less는 접은글을 닫기 위해 표시됩니다.

HTML 모드

위의 간단한 과정을 따라 하면 쉽게 접은 글의... 더보기, 접기 텍스트를 원하는 대로 변경할 수 있습니다.

 

※ 본 게시물을 따라 하던 중 궁금한 점 혹은 티스토리 커스터마이징 제안 사항이 있으시면 자유롭게 댓글 남겨주세요.

  • 프로필사진
    J4BEZ2019.09.17 23:25 신고

    헐 너무나도 좋은 팁이에오!!! 아예 스킨의 헤드를 편집하는 방식이군요!! 멋진 꿀팁 정말 감사해서 하트 다섯번 누르고 갑니당! 내일 수정 시간에 수정해봐야겠어요!

    아아 혹시 글의 마지막 부분에 버튼을 하나 더 추가하여 접은 글을 다 읽고나서 마지막 부분의 버튼 클릭을 통해
    닫게 하는 방법은 없을까요?!

    • 프로필사진
      siyeol072019.09.17 23:56 신고

      감사합니다! 닫기 버튼을 글 마지막 부분에 추가하는 내용은 한번 확인해보도록 할게요!

    • 프로필사진
      J4BEZ2019.09.18 00:00 신고

      오오오!! 감사합니당!!

    • 프로필사진
      siyeol072019.09.18 00:37 신고

      접기 버튼을 마지막에 옮기는 내용 새로운 게시물에 작성 하였습니다! 아래 게시물 확인 부탁드립니다.

      https://blog.siyeol.com/51

    • 프로필사진
      J4BEZ2019.09.18 06:40 신고

      꺄 감사합니다!

  • 프로필사진
    G1mj1n2019.12.01 19:17 신고

    제가 사용중인 'Square' 스킨에서 코드를 적용해도 변화가 없어서 수정을 해보다가 'Portfolio' 스킨으로 변경 후 적용을 누르니 더보기가 수정이 됩니다. 제가 코딩에 대한 지식이 없어서 잘 모르겠지만 스킨마다 적용하는 코딩이 달라서 이러한 현상이 생긴게 아닐까 하고 글 남겨봅니다.

    접기 버튼을 마지막으로 옮기는 코드 역시 적용이 되지 않아서 확인 해주시면 정말 감사하겠습니다.

    • 프로필사진
      siyeol072019.12.04 12:24 신고

      Square 스킨에서 확인 후 답변 드리겠습니다.

    • 프로필사진
      siyeol072019.12.08 01:28 신고

      답변이 늦어 죄송합니다!
      'Square' 스킨에서 확인 결과 해당 스킨은 기본적으로 jQuery를 사용하지 않아 스크립트가 올바르게 적용되지 않았습니다.
      이런 경우는 <script> 태그 윗 부분에 아래 코드를 추가로 삽입해주시면 정상 작동 됩니다.
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>

    • 프로필사진
      G1mj1n2019.12.08 10:51 신고

      감사합니다

    • 프로필사진
      F.R.I.D.A.Y.2019.12.12 22:19 신고

      jquery.js보단 jquery.min.js를 사용하는 것이 좋을것 같습니다. jquery는 개발자용, jquery.min은 배포용으로 나뉩니다. 개발자용을 사용해도 상관 없지만 로딩 속도에 있어 차이가 있습니다.

    • 프로필사진
      siyeol072019.12.13 01:03 신고

      F.R.I.D.A.Y.님 추가 답변 감사합니다! 급하게 내용을 수정하다보니 해당 내용을 미처 생각하지 못하였네요

  • 프로필사진
    rawa2019.12.06 18:36

    안녕하세요! 혹시 script 태그에 붙여넣으라는 것이 정확이 어느 부분에 복붙하는 건지 알려주실 수 있나요? HTML 편집을 잘 모르다보니 어렵네요 ㅠㅠ 그리고 복붙하니 엔터가 무시되어 줄글처럼 복붙이 되는데 이 부분은 문제가 없나요?...

    • 프로필사진
      siyeol072019.12.08 01:30 신고

      HTML 편집에서 <script> 를 검색하신 후 해당 태그 바로 아랫 줄에 붙여넣으시면 됩니다.
      줄 바꾸기가 무시 된 부분은 $ 앞 부분에서 엔터 한번 입력해주시면 문제 없이 작동 될 것입니다!

  • 프로필사진
    'ㅅ'2020.01.08 13:37

    안녕하세요 태그 공유해주셔서 너무 감사드립니다
    저는 나나님 스킨을 사용 중인데 잘 적용되고 있어요!
    혹시 '더보기', '접기' 텍스트를 스크립트 수정을 통해 다른 텍스트로 대체할 수도 있나요?
    본문처럼 접은글마다 각각 다른 텍스트를 자유롭게 적용하는 것이 아니라
    모든 접은글 텍스트를 제가 원하는 문구로 바꿀 수 있을까 해서요
    실례가 안된다면 도움을 주실 수 있을까요?
    다시 한번 감사드리고 새해 복 많이 받으시길 바랍니다:)

    • 프로필사진
      siyeol072020.01.08 13:40 신고

      관심 가져주셔서 감사합니다!
      문의 해주신 부분은 스크립트 중 아래 내용을 변경하시면 됩니다.

      var text_more = “더보기 대체 문구”;
      var text_less = “접기 대체 문구”;
      이 두 부분만 변경하시면 모든 페이지에 적용 되실겁니다!

  • 프로필사진
    'ㅅ'2020.01.09 09:20

    저야말로 답변해주셔서 감사드려요!!
    태그 잘 알지도 못하는데 본문 스크립트 참고해서 어떻게 해보려다가 실패하고 울면서 쓴 댓글인데ㅠㅠㅠ 진짜 너무 감사합니다ㅠㅠㅠ 복 더 많이 받으세요ㅠㅠㅠ

  • 프로필사진
    Jonchann2020.03.19 21:49 신고

    진짜 감사합니다!
    계속 더보기로 나오거나 제일 위 제목으로 통일되고 있어서 짜증났는데 한 번에 해결되었어요ㅠㅠ

  • 프로필사진
    넌출월귤아속2020.04.12 15:22 신고

    블로그 처음 해보는데 큰 도움이 될 포스팅 감사합니다.
    그런데 제 경우에는 닫을 때의 텍스트가 열때의 텍스트와 같은 채로 변경이 안 되는데 어떻게 고칠 수 있을까요?
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
    $(document).ready(function(){ $(".btn-toggle-moreless" ).each(function(){ var text_more = $(this).parent().first().data("text-more" ); var text_less = $(this).parent().first().data("text-less" ); $(this).text(text_more); $(this).on("click", function(){ if ($(this).text() == "접기" ) { $(this).text(text_less); } else { $(this).text(text_more); } }); }); });
    </script>
    스크립트는 이렇게 적었습니다.
    댓글에 큰따옴표와 닫는괄호를 이어붙이면 ";) 이모티콘이 튀어나와서 임의로 떼어놨습니다

  • 프로필사진
    그무2020.04.22 17:51 신고

    유익한 글 감사합니다. 텍스트 바꾸는게 따로 없어 고민했는데 이 글을 보고 하니 이제 바꿀 수가 있네요.

  • 프로필사진
    초보2020.05.24 09:06

    정말 정말 감사드립니다! 더보기를 여러개 생성할경우 처음 더보기의 텍스트로만 나왔는데 올려주신 코드로 해결했습니다! 혹시 모바일로 보면 그대로 제일처음의 더보기 텍스트로만 나오는데 ㅠㅠ 방법이 있을까요?

    • 프로필사진
      siyeol072020.05.24 12:03 신고

      사용중이신 테마가 무엇인가요?? 제 테마에서는 모바일에서도 정상 작동합니다.

    • 프로필사진
      초보2020.05.24 15:52

      square입니다!

    • 프로필사진
      siyeol072020.05.25 00:07 신고

      제가 Square에서 테스트 해보았는데 아무 문제가 없었습니다.

    • 프로필사진
      초보2020.05.25 05:24

      안녕하세요 ㅠㅠ 제가 아주 착각을 하고 있었습니다.. 모바일로 접속할 시, 티스토리 모바일웹 자동연결을 사용하고 있었고, 이건 기본스킨? 인 듯 합니다.
      //기본스킨에선 더보기1 더보기2로 설정할 경우, 처음에더는 더보기1 더보기1로 나타나고 클릭을 하면 더보기1 더보기2로 이름이 바뀌었습니다.
      자동연결을 해제해서 square스킨으로 모바일 접속하니 아주 잘 작동합니다.
      감사드립니다!!!!