작업실
그누보드 분류

그누보드5 주소복사 버튼 설치하기

컨텐츠 정보

본문

1. JS 파일 다운받기

 

https://github.com/zenorocha/clipboard.js/tree/master/dist

 

위 링크 또는 (https://github.com/zenorocha/clipboard.js/archive/master.zip)  이 파일에서

 

clipboard.min.js 파일을 다운받습니다.

 

그리고 적절한 폴더에 올립니다. 예를들어 /js 폴더에 올립니다.

 

 

2. 게시판 뷰스킨에 해당내용 추가하기

 

저는 Basic-Board를 사용 중이라서 해당 스킨에 적용하는 방법을 적어보겠습니다.

 

/skin/board/Basic-Board/view/basic/view.skin.php 

 

에 들어가서 최상단에 밑의 내용을 넣습니다.



<!--클립보드 JS 및 스타일 설정 시작-->
<script src="../js/clipboard.min.js"></script>
<script> 
    var clipboard = new Clipboard('.btn-clipboard', {
        text: function() {
            return 'http://<?php echo $_SERVER[HTTP_HOST].$_SERVER[REQUEST_URI]; ?>';
        }
    });
    clipboard.on('success', function(e) {
        console.log(e);
    });
    clipboard.on('error', function(e) {
        console.log(e);
    });
</script>
<style>
    button.btn-clipboard {display:inline-block;margin:0;padding:7px;line-height:12px;border:1px solid #ccc;background:#FFFFFF;color:#000;text-decoration:none}
    button.btn-clipboard:focus, button.btn-clipboard:hover {color:#FF0000;}
</style>
<!--클립보드 JS 및 스타일 설정 끝-->
 


스타일은 원하시는대로 넣으시면 됩니다. 그냥 예시로 넣었으니 참고하시구요.

 

js 파일 위치 확인하시고요.

 

 

참고로 짧은 주소 사용하시는 분은 주소 부분에

 


return '<?php echo G5_URL."/".$bo_table."/".$view['wr_id'];?>';

 

위와 같이 넣으면 됩니다.

 

 

3. 주소복사 버튼 설치하기

 

이제 주소복사 버튼을 넣는 방법입니다. 실제로 원하는 위치에 넣으면 됩니다.

 

저는 스크랩 신고 버튼 왼쪽에 넣어줬습니다. 부트스트랩 코드가 들어가서 부트스트랩 쓰시는 분들은 편하게 쓰실 수 있을겁니다.

 


<?php if(G5_IS_MOBILE) {?>
<button class="btn-clipboard cursor at-tip" data-toggle="tooltip" data-trigger="hover" data-placement="top" data-original-title="주소가 복사되었습니다.">주소복사</button>
<?php } ?>
<?php if(!G5_IS_MOBILE) {?>
<button class="btn-clipboard cursor at-tip" data-toggle="tooltip" data-trigger="click focus" data-placement="top" data-original-title="주소가 복사되었습니다.">주소복사</button>
<?php } ?>

 

위 내용만 넣으면 끝입니다. 이미지를 넣어도 되고요. 전 글자가 제일 무난한 것 같아서 글자를 넣었습니다.

 

내용을 살펴보면 모바일과 PC의 툴팁관련 코드가 다릅니다. 이건 한번 테스트 해보시면 될 듯 하네요.

 

 

 

4. 현재 홈페이지 적용 사항

 

뷰스킨 파일에서

 

최상단에

 


<!--클립보드 JS 및 스타일 설정 시작-->
<script src="../js/clipboard.min.js"></script>
<script>
var clipboard = new Clipboard('.btn-clipboard-subject', {
        text: function() {
            return '<?php echo G5_URL."/".$bo_table."/".$view['wr_id'];?>';
        }
    });
 
    clipboard.on('success', function(e) {
        console.log(e);
    });
 
    clipboard.on('error', function(e) {
        console.log(e);
    });
</script>
<style>
button.btn-clipboard-subject {display:inline-block;margin:0;padding:5px 7px;line-height:12px;border:0px solid #ccc;background:#FFFFFF;color:#555;text-decoration:none}
button.btn-clipboard-subject:focus, button.btn-clipboard-subject:hover {color:#000}
</style>
<!--클립보드 JS 및 스타일 설정 끝-->

 

위 코드를 넣어서 자바스크립트와 스타일을 잡아줬구요.

 


<?php
if($attach_list) {
echo '<div class="list-group'.$view_font.'">'.$attach_list.'</div>'.PHP_EOL;
}
?>

 

위 내용 바로 위에

 


<?php if(G5_IS_MOBILE) {?>
<div class="list-group-item break-word" style="padding:5px 8px; border-width:0px 0px 1px 0px;">
<button class="btn-clipboard-subject cursor at-tip" data-toggle="tooltip" data-trigger="hover" data-placement="top" data-original-title="주소가 복사되었습니다."><i class="fa fa-share-alt"></i> 주소복사 : <?php echo G5_URL."/".$bo_table."/".$view['wr_id'];?></button></div>
<?php } ?>
<?php if(!G5_IS_MOBILE) {?>
<div class="list-group-item break-word" style="padding:5px 8px; border-width:0px 0px 1px 0px;">
<button class="btn-clipboard-subject cursor at-tip" data-toggle="tooltip" data-trigger="click focus" data-placement="right" data-original-title="주소가 복사되었습니다."><i class="fa fa-share-alt"></i> 주소복사 : <?php echo G5_URL."/".$bo_table."/".$view['wr_id'];?></button></div>
<?php } ?>

 

위 내용을 넣어서 클립보드 위치를 상단에 위치시켰습니다.

 

 

모바일에서도 잘 되고 PC에서도 당연히 잘 되고요.

 

이상 소스를 제공해주신 사과님과 Tail 님에게 감사의 인사 드립니다.

관련자료

댓글 20개 / 2페이지

우성군님의 댓글의 댓글

짧은 주소는 그냥

return 'http://<?php echo $_SERVER[HTTP_HOST].$_SERVER[REQUEST_URI]; ?>';

위에 있는 내용 넣어주시면 될거예요.

저는 짧은 주소 형태가 /게시판이름/번호

이렇기 때문에

return '<?php echo G5_URL."/".$bo_table."/".$view['wr_id'];?>';

위와 같이 해준거거든요.

해적님의 댓글

흐음....<script src="../js/clipboard.min.js"></script> 경로가 잘못되었을까요..
으음..주소가 복사가 안되네욤...크흑..
Total 157 / 8 Page
RSS
그누보드5 주소복사 버튼 설치하기 댓글 20

그누보드 1. JS 파일 다운받기https://github.com/zenorocha/clipboard.js/tree/master/dist위 링크 또는 (…

멀티 도메인 멀티 루트의 Letsencrypt 인증서 만들기 댓글 4

1. 1개의 도메인, 1개의 루트letsencrypt certonly -a webroot --webroot-path=/var/sitea/ -d …

AhrefsBot 차단했습니다.

AhrefsBot은 우크라이나와 싱가폴을 중심으로 하는, 인터넷 서비스 스타트업 https://ahrefs.com 에서 운영하고 있는 크롤링 봇…

Nginx Gzip 압축 설정하기

사이트 속도 측정하는데 Javascript 파일이 Gzip 압축이 안된다고 나와있어 무난한 설정으로 변경했습니다.nginx.conf 파일에서##…

HTTPS 적용 후 웹마스터 사이트 수정하기 댓글 9

1. 포털별 웹마스터 추가 및 수정하기구글 웹마스터https://www.google.com/webmasters새로 등록했습니다.구글 웹로그 분석…

아미나 테마 미소베이직 HTTPS 적용 방법 댓글 14

생각보다 HTTPS 친화적인 테마인 것 같습니다.수정할 부분이 그다지 많지 않습니다.1. 구글 지도 (글 쓰기 할 때 구글 지도 부분)/skin…

최근글


새댓글


알림 0