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

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.min.js"></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);
          }
      });
      
      $(this).click();
      $(this).click();
  });
});

접은 글 텍스트 변경하기

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

접은 글을 추가한 후 작성 모드를 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스킨으로 모바일 접속하니 아주 잘 작동합니다.
      감사드립니다!!!!

  • 프로필사진
    ㅁㄴㅇ2020.08.15 01:37

    형님 덕분에 잘 사용하겠습니다 감사합니다!!!!!!! 인사오지게박습니다 행님

  • 프로필사진
    0142020.08.20 16:07

    안녕하세요 시월 님! 접은글의 제목을 바꾸는 방법을 찾다가 이 글을 발견하게 되었습니다. 작성해 주신 방법대로 아무리 따라 해도 제대로 적용이 되질 않네요... ㅠㅠ 몇 가지 문제들이 생기는데 도저히 모르겠어서 댓글을 달아봅니다
    제가 현재 쓰고 있는 스킨은 Poster Poster입니다!

    1. 제 스킨에서는 head 태그 내부에 script 태그가 없는 것 같더라고요... 그래서 여덟 번째 줄 아래에 본문에 적어 주신 스크립트를 넣었더니 블로그 홈 상단에 스크립트가 떠오릅니다 ㅠㅠ
    2. 이 글과 접은 글 위치 변경 글을 따라 해 봤는데도 아무런 변화가 없는 것 같습니다
    3. 접은 글 두 개를 쓸 때 HTML 편집에서 더보기와 닫기를 원하는 문구로 수정하면 두 번째 접은 글이 첫 번째 접은 글의 문구로 나타나고 한 번 클릭해야만 그제서야 설정했던 문구로 바뀌네요...

    너무 막막해서 댓글로 도움을 요청해 봅니다 ㅠㅠ 여유 있으실 때 천천히 읽으시고 답변 주시면 감사하겠습니다!

    • 프로필사진
      siyeol072020.09.01 01:30 신고

      안녕하세요! 댓글을 너무 늦게 확인했군요.
      우선, script 태그가 없다면 직접 만들어서 넣어주시면 됩니다.
      그리고 아무런 변화가 없거나 작동하지 않는 경우는 jQuery가 불러지지 않았을 가능성이 큰데 제가 여유있을 때 블로그에 방문하여 문제를 파악해보겠습니다!
      블로그 주소를 댓글로 남겨주세요!

  • 프로필사진
    구서2020.09.07 11:47

    안녕하세요! 저도 014님과 같은 문제를 겪고 있습니다... 1번 문제는 스크립트 태그를 직접 만들어서 해결하긴 했는데 3번이 해결이 안되네요 ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ 두번째 접은글의 문구가 첫번째 접은글의 문구로 나타나고 한번 클릭하니까 그제서야 설정했던 문구로 바뀌어요... 늦게라도 보고 알려주시면 감사합니다 (8ㅁ8

    • 프로필사진
      siyeol072020.09.07 12:49 신고

      안녕하세요! Poster 스킨에서 해당 문제를 파악하고 해결 방법을 찾아 알려드립니다.
      우선 발생 원인은 티스토리에서 기본적으로 접은글 텍스트 변경하는 스크립트와 충돌이 있었던 문제입니다. 해결 방법은 약간의 꼼수를 부려 해당 접은글을 펼첬다 접는 이벤트를 추가해주는 것입니다. 코드는 본문에 첨부해두겠습니다.

  • 프로필사진
    kadia2020.09.30 07:26

    안녕하세요~ 질문 하나만 해되 될까싶어 댓글을 씁니다.
    더 보기를 누르면 뒤에 배경색? 텍스트박스? 현재 글에 있는 더보기를 누르면
    검은색 배경의 박스 안에 글이 써져 있잖아요...
    그렇게 하는걸 아무리 검색해도 나오지 않아서 혹시나 알려주실 수 있나요?
    Poster 사용중입니다

  • 프로필사진
    안녕하세요2020.10.18 09:01

    #2라는 이름의 스킨 사용하고 있으며 Poster 스킨 쓰시는 분들과 같이 클릭해야만 첫 번째 이외의 접기글 제목이 변하는 현상이 일어납니다. 꼼수를 추가해두셨다고 하는데 본문의 코드를 전부 사용해봐도 변경되는 점이 없어 어떻게 해야할지 모르겠네요ㅠㅠ 도와주실 수 있으실까요?

1 2 3 4