로그인

검색

Extra Form
추천지수 6

작성된 게시글의  URL을 쉽게 클립보드에 복사할 수 있는 팁을 공유했는데요. 오늘은 제가 사용하는 스케치북 스킨에 공유버튼과  navi 버튼에 똑같은 기능의  URL 복사 버튼을 추가해 봤습니다.

 

게시글 주소  url 복사기능 추가하는 팁

https://rxtip.kr/rx_tip/4862

 

1.png

기존에 공유한 팁 게시글에서는 주소복사 버튼을 배치하거나 하는 것의 설명은 없었습니다. 각자 원하는 위치에 버튼을 추가하면 되니 따로 설명을 하지 않았구요.

 

오늘 추가한 아래쪽 navi 박스 안에 추가한 것은 따로 설명을 해 보겠습니다.

3.png

 

 

모바일에서도 navi 박스 안에 똑같이 URL 복사 버튼이 표시가 됩니다.

 

 

물론 위 링크해드린  url에서 설명한대로  js파일을 업로드하고 스크립트를 설명대로 추가한 상태여야 합니다. 지금 설명은 버튼을 추가하는 것의 설명만 있습니다.

 

 

스케치북 스킨의 _read_navi.html 파일을 열어보시고 원하는 곳에 아래의 코드를 추가해 줍니다.

 

<a class="copy_cmt_addr" href="#" onclick="return false;" data-clipboard-text="{$oDocument->getPermanentUrl()}" title="게시글 주소 복사"><i class="fa fa-link" aria-hidden="true"></i></a>

 

 

class(copy_cmt_addr) 는 실제 적용하신 class명으로 바꾸셔야 할 수 있습니다.

 

 

 

 

 

 

 

 

 

 

 

 

2.png

 

위 스크린샷은 PC의 작은 아이콘 공유버튼 쪽에 추가를 해준 모습니다.

 

위 부분은 _read.html 에 있으니 이 파일을 열어서 추가를 해 주어야 합니다. 

icon의 경우는 제가 첨부해 드린 파일을 사용하셔도 되고 다른 아이콘 파일을 구하셔도 됩니다.

 

업로드 위치는 modules/board/skins/sketchbook/img 경로에 업로드를 해주시고 

파일명은 link_icon.png 로 업로드 합니다.

 

 

잘 찾아보시면 아래와 같은 코드를 찾으실 수 있고 지금 하나만 남겨놓은 링크가 제가 추가한 부분입니다.

<!--// SNS -->
<div cond="$mi->to_sns=='3'" class="to_sns big" style="text-align:{$mi->to_sns_big}" data-url="{$sns_link}" data-permanenturl="{$oDocument->getPermanentUrl()}" data-title="{$sns_title}">
    <!--@if(Mobile::isMobileCheckByAgent())-->

    <a class="Link copy_cmt_addr" href="#" onclick="return false;"  data-clipboard-text="{$oDocument->getPermanentUrl()}" title="Link Copy"><b class="ico_sns link">LinkCopy</b></a>
    <!--@else-->

    <!--@end-->
</div>

 

 

그리고 board.css에 css를 추가해 줘야 합니다.

기존에 공유버튼들 적용되는 css의 다음줄에 추가해 주시면 관리하기 편합니다.

 

.bd .ico_sns16.link{background-size: 16px 16px;border-radius:3px;background-image:url(../img/link_icon.png);opacity:.8}

 

요런 css를 추가해주세요.

 

 

 

 

 

 

 

 

화면 캡처 2021-04-10 122356.png

 

요건 모바일에서 조금더 큰 버튼으로 출력되는 곳에 추가해 준 것입니다.

 

 

_read_sns.html 의 파일에 추가를 해주셔야 합니다.

파일을 열어보시면 다른 공유버튼들 소스가 있는데 맨 마지막에 한줄 추가해 주시면 됩니다.

 

<a class="{$mi->to_sns_small} copy_cmt_addr" href="#" onclick="return false;" data-clipboard-text="{$oDocument->getPermanentUrl()}" title="Link Copy"><i class="ico_sns16 link"></i><strong> LinkCopy</strong></a>

 

 

그리고 board.css 에 css를 추가해 줍니다.

 

.bd .ico_sns.link{background-size: 32px 32px;border-radius:3px;background-image:url(../img/link_icon.png)}

 

 

게시글의 url 공유가 자주 일어나고 하는 성격의 사이트나 블로그라면 눈에 띄는 곳에 링크복사 버튼이 많이 있다면 도움이 더 될 것 같습니다.

 

잘 따라하셔서 성공하시길!

 

 

Who's 꿀팁관리소장

profile
라이믹스로 커뮤니티 사이트를 운영하는 비개발자 운영자 입니다.
파트너쉽 맺으실 사이트 운영자분 환영합니다.
3 추천
Atachment
첨부 '1'
  • 벨로위키 2021.04.10 14:45

    여기에 자료가 있었네요. 링크 공유 넣는 중입니다. ^^

  • profile
    꿀팁관리소장 2021.04.10 14:47
    To.벨로위키
    링크 복사 기능 외 다른 공유 관련 팁이 몇가지 더 작성되어 있을 겁니다.
  • 스크린샷 2021-04-10 15.56.21.png.jpg스크린샷 2021-04-10 15.54.36.png스크린샷 2021-04-10 15.54.31.png스크린샷 2021-04-10 15.53.58.png.jpg스크린샷 2021-04-10 15.44.37.png.jpgIMG_384ED4454F29-1.jpeg



    링크 적용중인데 여기저기 문제가 발생하네요.

    일단 네비게이션에는 들어갔는데 정사각형으로 적용이 안되고 직사각형으로 들어가서 모양이 이상해졌습니다.

    sns쪽은  _read.html 과 _read_sns.html , board.css까지 다 코드를 넣긴 했는데 

    한가지 이상한점은 현재 작동되는 트위터와 핀터레스트 빼고 코드를 다지웠는데 

    모바일에서는 무려 7개나 아이콘이 떠있고 어찌하다보니 트위터 2개가 되어 있어서 뒤에 트위터 아이콘을 눌러보니

    거기에 링크복사 코드가 적용 되었더군요. 

    이해가 안되는 부분이 많습니다. 

    왜 이런 현상이 일어날까요. 

    https://feedzone.club/board_JoiA85/3798


  • profile
    꿀팁관리소장 2021.04.10 16:09
    To.벨로위키
    코드를 이미지로 보여주셔도 제가 볼수도 없고 뭔가 요청하실때 코드 전체를 이미지로 보여주시면 별 효과가 없을 겁니다.

    일단 제가 확실히 이해한 부분은 네비쪽에 문제는

    class에서 text 를 제거해 보시면 잘 나올겁니다. 위치에 따라 클래스에 영향을 받게 됩니다.
    이런 문제를 스스로 해결하시는 방법은 개발자도구로 보시고 어떤 클래스가 어떤 영향을 주는지 살펴보시면 금방 해결이 가능하십니다.
  • 벨로위키 2021.04.10 16:12
    To.꿀팁관리소장
    네 감사 합니다. sns 공유 코드를 전체 지워도 여전히 sns 버튼이 살아 있는것도 이해가 잘 안되네요. 아마 위 파일들 말고
    스케치북5가 sns관련해서 어디 개조된 파일을 출력하는지부터 찾아봐야겠습니다.
  • profile
    꿀팁관리소장 2021.04.10 16:14 Files첨부 (2)
    To.벨로위키
    스케치북 공유버튼 노출은 게시글 본문에서 담당하는 경우도 있고 별도 파일에서 담당하는 경우도 있습니다. 모바일 조건이 걸려있어 코드의 일부는 모바일에서 일부는 PC에서 보이고 설정에서 설정하시는 것에 따라 다른 크기의 버튼이 보이고 합니다.


    설정에 따라 어떤 위치에 공유버튼 코드들이 있는지 찾아보세요.



    11.jpg

    22.jpg


    지금 수정하고 싶은 곳의 코드가 어디에 있는지 정확히 찾으셔야 합니다. 개조된게 아닐겁니다.

  • To.꿀팁관리소장

    스크린샷 2021-04-10 16.27.49.png.jpg

    덕분에 네비게이션 문제는 해결 했습니다.

    sns 부분은 이렇게 해도 작동이 안되네요. 

    이 부분은 좀더 차근차근 나중에 html에 좀 익숙해 지면 그때 적용해야겠습니다.

    당장은 네비게이션만으로도 만족 합니다. 

    감사 합니다. 


  • profile
    꿀팁관리소장 2021.04.10 16:51
    To.벨로위키
    네. 지금 고치려는 코드가 어디에 위치해 있는지 찾는 것도 쉽지 않다면 원하는 곳을 사이트 운영자의 의도대로 고치기 쉽지 않습니다. 조금 더 익숙해 지면 시도해 보세요.

    한마디 조언을 해드린다면 지금 네비게이션으로 만족하셔서는 절대 안됩니다. 왜냐면 거기는 직관적이지 못해서 사실 저희와 같은 웹마스터 정도 웹사이트의 기능이나 아이콘의 의미를 잘 아는 사람들만 이해 가능한 곳입니다.

    제가 별도로 직관적으로 "주소복사" 와 같은 문구가 보이도록 해서 추가적으로 버튼을 빼고 하는 것은 누가봐도 알 수 있는 직관적인 UI 이기 때문입니다.

    가장 중요한 부분, 가장 시급한 부분 분명 나눠서 일을 해야 하는 것은 맞지만 중요한 부분은 꼭 처리해야 하는 과정을 계속 이어가셔야 할 것입니다. 물론 지금 익숙치 않아 To do 로 넘어갔다는 것이라는 것은 말씀 하신 것으로 잘 알겠네요.
  • profile
    꿀팁관리소장 2021.04.10 16:54
    To.벨로위키
    그리고 기존코드를 왜 다 날리셨는지는 모르겠네요.
    제가 샘플로 보여드린 것은 다른것이 방해가 될까봐 제가 추가하는 코드만 남기고 보여드린 것인데요.

    그리고 지금 코드가 추가된 곳은 모바일에서 본문 안에 큰 버튼으로 공유버튼이 표시되는 곳입니다. 거기를 고치신 다음 모바일에서 잘 되는지 체크해 보신거죠?
  • profile
    꿀팁관리소장 2021.04.10 16:59
    To.벨로위키
    그리고 지금 들어가서 살펴보니 링크는 잘 추가 하신 듯 한데요??

    CSS 적용이 안되서 버튼이 트위터 버튼으로 표시되고 있는 상황인 듯 합니다.
  • profile
    꿀팁관리소장 2021.04.10 17:17
    To.벨로위키
    # 링크 때문에 상단으로 이동하는거 불편하시면
    onclick="return false;" 를 추가해 주시면 이동이 안됩니다. 본문의 링크는 수정해 두었습니다.
  • 벨로위키 2021.04.10 17:57

    드디어 된것 같습니다. 정말 긴시간 동안 또 여러가지로 질문도 많고 고생이 많으셨습니다. 감사 합니다. 사용하지 않는 sns 버튼들은 코드에서 삭제가 안되어서  css에서 임시로 지워놔야 할것 같네요. 

  • profile
    꿀팁관리소장 2021.04.10 17:59
    To.벨로위키
    코드에서 삭제가 안되는게 아니고 잘 못 찾으시는거에요.
  • 벨로위키 2021.04.18 19:03
    오늘 스케치북 버젼을 바꾸면서 새롭게 모두 설정 했습니다. 아직도 헷깔리는 부분이 있어서 완벽하게 이해는 못했네요.
    일단 <!--// SNS -->
    <div cond="$mi->to_sns=='3'" class="to_sns big" style="text-align:{$mi->to_sns_big}" data-url="{$sns_link}" data-permanenturl="{$oDocument->getPermanentUrl()}" data-title="{$sns_title}">
    <!--@if(Mobile::isMobileCheckByAgent())-->

    <a class="Link copy_cmt_addr" href="#" onclick="return false;" data-clipboard-text="{$oDocument->getPermanentUrl()}" title="Link Copy"><b class="ico_sns link">LinkCopy</b></a>
    <!--@else-->

    <!--@end-->
    </div>

    여기에 본문이 아닌 모바일쪽에 링크 복사를 넣으신 이유가 있으신가요?
  • profile
    꿀팁관리소장 2021.04.18 19:07
    To.벨로위키
    본문이 아니란게 무슨말씀이신지 모르겠구요.
    모바일쪽에 적용한 이유는 모바일에서 사용하려고 모바일에 적용했습니다.

    저희는 PC의 경우는 큰아이콘이 아닌 작은 아이콘을 사용하는 공유버튼을 쓰는데 지금 언급하신 코드가 아닌 별도 다른 파일의 공유 코드에서 수정을 추가로 해야 합니다.

    PC,모바일 모두 큰아이콘으로 아실거면 모바일조건문 바깥쪽에 코드를 추가하면 되겠죠.
  • profile
    adlib 2021.05.10 09:00
    좋은 정보 감사합니다.
  • profile
    꿀팁관리소장 2021.05.10 09:01
    To.adlib
    도움이 되는 정보면 좋겠네요.
  • 웅돌프 2022.04.11 13:55
    이것도 추가 완료!
  • 동동 2023.02.21 12:08
    찾고 있었던 기능인데, 자세한 설명 감사드립니다.
  • 엠봉 2023.06.12 22:48
    감사합니당

라이믹스 팁(112)

라이믹스 운영과 사용에 관한 팁을 공유 합니다.

  1. read more
  2. read more
  3. Read More
  4. Read More
  5. 스케치북 빵조각 '메뉴 아이콘' 적용해 보았습니다.

    Date2021.04.21 Category기능 Views204 Votes3
    Read More
  6. Read More
  7. 본문 게시글 주소 복사 버튼 여러곳에 추가해 주기 20

    Date2021.04.10 Category기능 Views304 Votes3
    Read More
  8. input 입력창 크기가 작거나 이상한가요? css box-sizing

    Date2021.04.09 Category기타 Views245 Votes4
    Read More
  9. 본문 게시글 주소 클립보드 복사 기능 만들기 23

    Date2021.04.06 Category기능 Views602 Votes3
    Read More
  10. Read More
  11. 라이믹스 2.0 회원 서명 높이를 조절 하고 싶다면

    Date2021.03.13 Category기능 Views216 Votes5
    Read More
  12. Read More
  13. Read More
  14. Read More
  15. Read More
  16. Flex 레이아웃 로그인 오류 메시지 안뜨는 문제 해결

    Date2021.01.31 Category오류 Views245 Votes3
    Read More
  17. Read More
  18. Read More
  19. Read More
  20. Read More
  21. Read More
  22. Read More
  23. Read More
  24. Read More
  25. Read More
  26. Read More
  27. Read More
  28. Read More
  29. Read More
  30. Read More
  31. Read More
  32. Read More
Prev 1 2 3 4 Next
/ 4