워드프레스 포스트 URL 복사하기 버튼 만들기

이 블로그에서는 소셜 공유 버튼 플러그인을 사용하는 대신 직접 코드를 만들어서 공유 버튼을 표시하고 있습니다.

맨 오른쪽의 링크 모양의 아이콘을 클릭하면 포스트 URL이 복사됩니다. 이때까지는 브라우저 주소란에 표시되는 글 URL을 복사하였지만, URL에 한글이 들어갈 경우 인코딩 때문에 깨져 보이는 것에 대하여 문의가 많아서 쇼트링크(shortlink) 형식으로 복사하도록 코드를 조금 바꾸었습니다.

업데이트: 아래의 코드를 사용해도 되지만, 코드를 보다 효율적으로 개선한 버전을 다음 글에서 확인할 수 있습니다.

이 워드프레스 블로그에 사용된 SNS 공유 버튼 & URL 복사 버튼

URL에 한글이 포함될 경우 다음과 같이 한글 부분이 깨진 것처럼 보입니다.

https://www.thewordcracker.com/scribblings/%ec%9b%8c%eb%93%9c%ed%94%84%eb%a0%88%ec%8a%a4-%ec%82%ac%ec%9d%b4%ed%8a%b8-%eb%8c%93%ea%b8%80-1%eb%a7%8c%ea%b0%9c-%eb%8f%8c%ed%8c%8c/

인간에게는 깨진 것처럼 보이지만 검색엔진은 제대로 인식하기 때문에 문제가 되지 않습니다.

하지만 이렇게 깨져 보이는 것에 대하여 간혹 질문하시는 분들이 계시는데요. 포스트 URL을 공유할 때 위와 같이 이상한 문자들이 표시되면 거부감이 들 수도 있을 것 같습니다.

이러한 점을 감안하여 이 블로그에서 글 URL 복사 버튼을 클릭하면 다음과 같이 짧은 링크(Shortlink) 형식으로 표시되도록 바꾸었습니다.

https://www.thewordcracker.com/?p=56107

위의 두 링크를 클릭하면 동일한 글이 열립니다.

이 글에 사용된 SNS 공유 버튼 소스를 여기에서 확인할 수 있습니다.

기존의 URL 복사 버튼 부분의 코드는 다음과 같습니다.

<a class="fbtn share" style="cursor: pointer" onclick="navigator.clipboard.writeText(window.location.href);this.insertAdjacentHTML('afterend', '<div class=linktooltips-container>Copied! (복사되었습니다!)</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>

위의 코드를 다음과 같이 변경했습니다.

<a class="fbtn share" style="cursor: pointer" onclick="copyURL(this);" 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"></path></svg> </a>

그리고 다음 자스크립트 코드를 추가했습니다.

<script>
function copyURL(element){
    // Get the body class
    let bodyClass = document.body.className;

    // Extract the post ID
    let postId = bodyClass.match(/postid-(\d+)/)[1];

    // Construct the URL
    let url = 'https://www.thewordcracker.com/?p=' + postId;

    // Copy the URL to the clipboard
    navigator.clipboard.writeText(url);

    // Display a message and remove it after 3 seconds
    element.insertAdjacentHTML('afterend', '<div class=linktooltips-container>Copied!</div>');
    setTimeout(() => { 
        document.querySelectorAll('.linktooltips-container').forEach(el => el.remove()); 
    }, 3000);
}
</script>

위에서 https://www.thewordcracker.com은 실제 사이트 URL로 바꾸시기 바랍니다. 자바스크립트를 사용하여 도메인 주소 부분도 대체할 수 있지만, 그러면 코드가 조금 더 길어집니다. 예시: (※ 아래 코드는 테스트하지 않았습니다.)

<script>
function copyURL(element){
    // Get the body class
    let bodyClass = document.body.className;

    // Extract the post ID
    let postId = bodyClass.match(/postid-(\d+)/)[1];

    // Get the site URL from location.origin
    let siteURL = location.origin;

    // Construct the URL
    let url = siteURL + '/?p=' + postId;

    // Copy the URL to the clipboard
    navigator.clipboard.writeText(url);

    // Display a message and remove it after 3 seconds
    element.insertAdjacentHTML('afterend', '<div class=linktooltips-container>Copied!</div>');
    setTimeout(() => { 
        document.querySelectorAll('.linktooltips-container').forEach(el => el.remove()); 
    }, 3000);
}
</script>

자바스크립트 코드는 다음 글을 참고하여 로드할 수 있습니다.

워드프레스에서 js 스크립트 파일과 스타일시트를 올바르게 로드하는 방법

위의 방법이 바람직하지만, 귀찮은 경우 WPCode와 같은 플러그인을 사용하여 푸터 섹션에 자바스크립트 코드를 로드할 수 있습니다.

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

GeneratePress 테마를 사용하는 경우에는 훅(Hook)을 사용하여 푸터 영역에 로드되도록 할 수 있습니다.

Hook(후크)에 wp_footer를 선택하고 Display Rules(표시 규칙) 탭에서 모든 글에 표시되도록 설정할 수 있습니다.

워드프레스 포스트 URL 복사하기 버튼 만들기

참고

3 개 댓글

Leave a Comment 응답 취소