워드프레스 주소 복사 버튼 추가하기

현재 페이지나 글의 주소를 클립보드에 복사할 수 있는 버튼을 추가하고 싶은 경우 간단한 자바스크립트를 사용하여 주소 복사 버튼을 표시할 수 있습니다.

참고로 뉴스페이퍼 테마를 사용하는 경우 자체적으로 Copy URL 버튼을 표시할 수 있는 기능을 제공합니다. 또한, AddToAny Share Buttons 등 일부 소셜 공유 플러그인에서 주소 복사 버튼을 제공하기도 합니다(아래 "플러그인을 사용하여 주소 복사 아이콘 표시하기: AddToAny Share Buttons 플러그인" 부분 참고).

[ 이 글은 2023년 1월 22일에 전체 코드를 추가하여 업데이트되었습니다. ]

플러그인을 사용하지 않고 워드프레스 주소 복사 버튼을 추가하는 방법

이 블로그의 글에는 해당 글의 URL을 복사할 수 있는 주소 복사 버튼이 추가되어 있습니다. 제가 주로 이용할 목적으로 URL 복사 버튼을 추가해보았습니다.

기본적으로 "Copy Page URL to Clipboard Javascript Causes Page to Scroll to Bottom" 문서에서 제시하는 자바스크립트를 활용할 수 있습니다.

JavaScript:

function copyToClipboard(text) {
  var inputc = document.body.appendChild(document.createElement("input"));
  inputc.value = window.location.href;
  inputc.select();
  document.execCommand('copy');
  inputc.parentNode.removeChild(inputc);
  alert("주소가 복사되었습니다!");
}

HTML 코드:

<a class="fbtn share" title="Share" onclick="copyToClipboard()" href="#">주소 복사</a><br/>

주소 복사 부분에 이미지를 추가할 수 있습니다. 저는 무료 이미지를 다운로드 받아 사용했습니다.

저는 "플러그인을 사용하지 않고 소셜 공유 버튼 추가하기 (네이버, 카카오톡)"에서 소개한 방법으로 소셜 공유 버튼을 표시하고 있습니다. 위에 언급한 자바스크립트 함수와 다음과 같은 HTML 코드를 추가하여 주소 복사 버튼을 추가했습니다.

<li>
<a class="fbtn share" title="URL 복사" onclick="copyToClipboard()" href="#"><img src="주소복사_버튼_이미지_URL" width="35px" height="35px" alt="글 URL 복사하기"></a>
</li>

자바스크립트 함수는 </body> 바로 앞에 추가하도록 합니다.

위의 코드가 작동하지만, 일부 브라우저에서는 작동하지 않을 수 있습니다.

Use navigator.clipboard.writeText() instead of document.execCommand('copy') to copy the text to the clipboard. This is the recommended method for modern browsers, as document.execCommand('copy') is now considered obsolete.

document.execCommand('copy') 대신 navigator.clipboard.writeText()를 사용하는 것이 바람직하다고 합니다.

"[Javascript] 간단한 링크 주소 복사 버튼 만들기"에서 소개하는 자바스크립트와 HTML 코드를 활용할 수도 있습니다.

JavaScript:

//현재 url 변수로 가져오기
let nowUrl = decodeURI(window.location.protocol + '//' + window.location.hostname + window.location.pathname);

function copyUrl(){
//nowUrl 변수에 담긴 주소를
navigator.clipboard.writeText(nowUrl).then(res=>{
alert("주소가 복사되었습니다!");
})
}

HTML 코드:

<div class="copyUrl">
<button class="button" onclick="copyUrl()">주소 복사</button>
</div>

또 다른 방법으로 케이보드 포럼에서 제시하는 jQuery를 사용하는 것도 가능합니다. (jQuery보다는 위의 자바스크립트가 더 바람직할 것 같습니다.)

참고로 현재 페이지/글의 주소를 표시하고 싶은 경우 다음과 같은 코드를 응용할 수 있습니다.

JavaScript:

document.getElementById('locUrl').value = decodeURI(window.location.protocol + '//' + window.location.hostname + window.location.pathname);

HTML 코드:

<input type="text" id="locUrl" readonly></input>

SNS 공유 전체 코드 (네이버, 카카오 & 주소 복사 버튼 포함)

이 블로그에 사용된 전체 코드입니다. 적절히 응용하시기 바랍니다. 버튼 크기의 경우 저는 35x35px로 설정했습니다만, 25x25px 등으로 변경해도 될 것 같습니다. 버튼 크기를 2배수 또는 3배수 크기로 올린 다음, CSS로 조정할 수 있습니다.

예시 HTML 코드:

<!-- SNS 공유 버튼 -->
											<div class="sns-go">
												<ul>
													<li>
														<a href="#" onclick="javascript:window.open('http://share.naver.com/web/shareView.nhn?url=' +encodeURIComponent(document.URL)+'&title='+encodeURIComponent(document.title), 'naversharedialog', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;" target="_blank" alt="Share on Naver" rel="nofollow"><img src="/wp-content/uploads/2023/01/naver.png" width="35px" height="35px" alt="네이버 블로그 공유하기"></a>
													</li>
													<li>
														<a href="#" onclick="javascript:window.open('http://band.us/plugin/share?body='+encodeURIComponent(document.title)+encodeURIComponent('\r\n')+encodeURIComponent(document.URL)+'&route='+encodeURIComponent(document.URL), 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;" target="_blank" alt="네이버 밴드에 공유하기" rel="nofollow"><img src="/wp-content/uploads/2023/01/band.png" width="35px" height="35px" alt='네이버 밴드에 공유하기'></a>
													</li>
													<li>
														<a href="#" onclick="javascript:window.open('https://www.facebook.com/sharer/sharer.php?u=' +encodeURIComponent(document.URL)+'&t='+encodeURIComponent(document.title), 'facebooksharedialog', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;" target="_blank" alt="Share on Facebook" rel="nofollow"><img src="/wp-content/uploads/2023/01/facebook.png" width="35px" height="35px"  alt="페이스북 공유하기"></a>
													</li>
														<li>
														<a href="#" onclick="javascript:window.open('https://twitter.com/intent/tweet?text=[%EA%B3%B5%EC%9C%A0]%20' +encodeURIComponent(document.URL)+'%20-%20'+encodeURIComponent(document.title), 'twittersharedialog', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;" target="_blank" alt="Share on Twitter" rel="nofollow"><img src="/wp-content/uploads/2023/01/twitter-icon.png" width="35px" height="35px"  alt="트위터 공유하기"></a>
													</li>	
													<li>
														<a href="#" onclick="javascript:window.open('https://story.kakao.com/s/share?url=' +encodeURIComponent(document.URL), 'kakaostorysharedialog', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes, height=400,width=600');return false;" target="_blank" alt="Share on kakaostory" rel="nofollow"><img src="/wp-content/uploads/2023/01/kakao.png" width="35px" height="35px" alt="카카오스토리 공유하기"></a>
													</li>
													<li>
														<a class="fbtn share" onclick="navigator.clipboard.writeText(window.location.href);this.insertAdjacentHTML('afterend', '<div class=linktooltips-container>링크가 복사되었습니다!</div>');setTimeout(() => { document.querySelectorAll('.linktooltips-container').forEach(el => el.remove()); }, 3000);" target="_blank">
       <svg width="35" height="35" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M172.5 131.1C228.1 75.51 320.5 75.51 376.1 131.1C426.1 181.1 433.5 260.8 392.4 318.3L391.3 319.9C381 334.2 361 337.6 346.7 327.3C332.3 317 328.9 297 339.2 282.7L340.3 281.1C363.2 249 359.6 205.1 331.7 177.2C300.3 145.8 249.2 145.8 217.7 177.2L105.5 289.5C73.99 320.1 73.99 372 105.5 403.5C133.3 431.4 177.3 435 209.3 412.1L210.9 410.1C225.3 400.7 245.3 404 255.5 418.4C265.8 432.8 262.5 452.8 248.1 463.1L246.5 464.2C188.1 505.3 110.2 498.7 60.21 448.8C3.741 392.3 3.741 300.7 60.21 244.3L172.5 131.1zM467.5 380C411 436.5 319.5 436.5 263 380C213 330 206.5 251.2 247.6 193.7L248.7 192.1C258.1 177.8 278.1 174.4 293.3 184.7C307.7 194.1 311.1 214.1 300.8 229.3L299.7 230.9C276.8 262.1 280.4 306.9 308.3 334.8C339.7 366.2 390.8 366.2 422.3 334.8L534.5 222.5C566 191 566 139.1 534.5 108.5C506.7 80.63 462.7 76.99 430.7 99.9L429.1 101C414.7 111.3 394.7 107.1 384.5 93.58C374.2 79.2 377.5 59.21 391.9 48.94L393.5 47.82C451 6.731 529.8 13.25 579.8 63.24C636.3 119.7 636.3 211.3 579.8 267.7L467.5 380z"/></svg>
   </a>
													</li>
												</ul>
											</div>

아이콘 경로는 적절히 변경하시기 바랍니다. GeneratePress 테마를 사용하는 경우 후크(Hook)를 사용하여 원하는 곳에 추가할 수 있습니다.

• GeneratePress 테마 후크 사용하기

만약 상기의 "플러그인을 사용하지 않고 워드프레스 주소 복사 버튼을 추가하는 방법" 섹션에 소개된 자스 코드를 사용하려는 경우에는 자스 코드는 푸터 영역에 추가하시면 됩니다. 마찬가지로 GP 테마를 사용하는 경우 후크를 사용하여 wp_footer에 추가하실 수 있습니다. 테마의 footer.php 파일에 </body> 바로 위에 추가하는 것도 가능합니다. 이외에도 WPCode 플러그인을 사용하여 푸터 영역에 추가할 수도 있습니다.

• 워드프레스 헤더와 푸터에 쉽게 코드 삽입하기: WPCode Insert Headers and Footers 플러그인

작동하지 않을 경우 자스 코드를 헤더 영역(wp_header)에 추가하여 테스트해보시기 바랍니다.

CSS 코드:

CSS 코드는 "플러그인을 사용하지 않고 소셜 공유 버튼 추가하기 (네이버, 카카오톡)" 글에 언급된 코드를 사용하시기 바랍니다. 또한, 다음 코드를 추가로 사용했습니다.

/* 링크 복사 툴팁 */

   .linktooltips-container{
       background-color: #030303;
       color: #ffffff;
       padding: 5px 30px;
       border-radius: 10px;   
   }

커스텀 CSS 코드는 외모 » 사용자 정의하기 » 추가 CSS 섹션에 추가할 수 있습니다.

플러그인을 사용하여 주소 복사 아이콘 표시하기: AddToAny Share Buttons 플러그인

소셜 공유 플러그인에서 주소 복사 기능을 제공할 수 있습니다. 예를 들어, AddToAny Share Buttons 플러그인에서 Copy URL 버튼을 표시할 수 있는 옵션이 제공됩니다.

AddToAny Share Buttons 플러그인은 현재 50만 개가 넘는 사이트에 설치되어 사용되고 있고, 네이버 라인과 카카오 공유 버튼도 제공됩니다.

참고

• 마이크로소프트 워드프레스용 IndexNow 플러그인 공개(+빙 검색엔진 색인)
• 엘리멘터 페이지 빌더 Z-index 설정 방법 (위젯 표시 순서 지정)
• 워드프레스 Divi 테마 전체 사이트 프런트엔드 편집 기능 도입