이번 글에서는 워드프레스 사이트를 방문했을 때 해당 페이지의 URL 링크주소를 바로 복사해서 공유할 수 있는 버튼을 만드는 방법에 대해 알려드리도록 하겠습니다. 챗지피티와 몇시간을 씨름하고 얻은 코드라서 뿌듯하게 알려드립니다.
만약 워드프레스를 통한 수익형 블로그를 무료로 만들어보길 원하시면, 아래 경로로 쉽게 여러분의 워드프레스를 설치해 보세요. 3일 간 무료 체험을 통해 워드프레스의 매력을 한껏 경험해보실 수 있습니다. 클라우드웨이즈 가입시 워정공에서 드리는 다양한 혜택도 있으니 확인해보세요
SNS 공유버튼 만들기
카카오톡이나 트위터, 핀터레스트, 네이버, 페이스북 등 SNS로 공유하는 방법에 대해서는 앞선 글에서 한 번 알려드렸습니다. 이번에 알려드리는 URL 복사 및 공유하기 버튼은 해당 코드의 연장선상에서 알려드리기 때문에 기존 글을 한 번 봐주시면 훨씬 반영에 도움이 될듯합니다.
위 방법은 HTML코드 안에서 직접 디자인 및 배열까지 마무리해서 애드인서터에 넣기만하면 되는 간단한 방법입니다. 따로 CSS에서 디자인을 건드리는 방식은 상황에 따라 버튼의 배열방식이 원인모르게 깨지는 현상이 발견되서 앞선 글과 같이 알려드렸습니다.
이번 글에서 페이지 URL 복사 공유 버튼 만드는 방법은 두가지를 알려드리도록 하겠습니다. 취향에 따라 선택하시면 될것 같아요.
페이지 URL 주소 공유하기 버튼
공유버튼 이미지는 아래와 같습니다.
지금 보시는 글의 상단에 보면 기존보다 URL 복사버튼이 하나 더 추가된 게 보이실 거에요. 이 버튼을 한 번 눌러볼까요?
이렇게 알림창이 뜨면서 해당 주소가 복사되었습니다. 그리고 Ctrl + V를 눌러서 주소창에 한번 붙여넣어보세요. 그럼 ‘https://wp.mimmi.co.kr/?p=2801’ 이런 식으로 숫자로 주소가 복사되어 있을 거에요. 주소가 짧죠?
원래는 기존의 긴 한글 퍼머링크 주소를 다른 곳에 복사해서 붙여넣게 되면 ‘https://wp.mimmi.co.kr/%ec%9b%8c%eb%93%9c%ed%94%84%eb%a0%88%ec%8a%a4-sns-%ea%b3%b5%ec%9c%a0-%eb%b2%84%ed%8a%bc-%eb%a7%8c%eb%93%a4%ea%b8%b0/’ 이런 식으로 한글이 길게 깨져서 복사되게 됩니다. 그래서 뭔가 공유했을 때 스팸성 사이트같기도 하고 길어지기도 하죠. 그래서 저 버튼을 눌러서 복사할 때 만큼은 번호로 된 짧은 주소로 공유될 수 있도록 만들었습니다.
코드보기
애드인서터로 들어가셔서 지난번 글에서 알려드린 전체 SNS코드 중에서 아래 코드만 복사해서 추가하시면 됩니다. 붙여넣으실 때는 기존코드의 가장 하단에 있는 </ul> </div> 위에 붙여넣으시면 됩니다.
<!-- URL 복사 버튼 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@10">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
<li style="margin-right: 0.5; display: inline-block;">
<script>
function copyPermalink() {
let bodyClass = document.body.className;
let postId = bodyClass.match(/postid-(\d+)/)[1];
let siteURL = location.origin;
let permalink = siteURL + '/?p=' + postId;
navigator.clipboard.writeText(permalink).then(function() {
Swal.fire({
icon: 'success',
title: '페이지 URL이 복사되었습니다.',
showConfirmButton: false,
timer: 1200
});
}).catch(function(err) {
console.error('클립보드 복사 실패: ', err);
});
}
</script>
<img src="버튼 이미지 주소 넣어주세요" alt="URL 복사하기" rel="nofollow" style="border-radius: 25%; width: 34px; height: 34px; cursor: pointer;" onclick="copyPermalink();" onmouseover="this.style.cursor='pointer';">
</li>코드에 대해서 간단하게 설명드리면 SweetAlert2라는 라이브러리에서 이미지를 가져와서 구현되는 방식입니다. Github 에 들어있는 외부 이미지기 때문에 아래 알려드리는 두번째 방법도 있습니다.
- timer: 1200 : 알림창이 나오고 나서 1.2초(1200 이라고 나온 부분) 후에 사라지게 했구요
- showConfirmButton: false, : 확인버튼은 안보이게 처리했습니다.
- title: ‘페이지 URL이 복사되었습니다.’, : 문구 수정 가능합니다.
혹시 애드인서터 플러그인의 좀 더 다양한 사용법에 대해 궁금하신 분은 아래글을 참조해주세요.
URL 공유 버튼 이미지
그리고 버튼 이미지를 다운받아서 따로 개인 워드프레스 미디어에 넣어줘야 합니다. 그리고 이미지 주소를 확인해주세요. 코드의 가장 하단에 있는 ‘버튼 이미지 주소 넣어주세요’ 라는 곳에 그 주소를 넣어주시면 됩니다. 다른 아이콘으로 넣고 싶은 분들은 웹써칭해서 바꾸셔도 됩니다.
두번째 방법 – 브라우저 기본 알림창
두번째 방법은 외부의 이미지가 아닌 기본적인 브라우저의 기능을 활용한 방법입니다. 샘플로 이 글을 들어가서 확인해주세요. 똑같은 버튼을 누르면 아래와 같은 알림창이 뜹니다.
아래 코드를 넣게 되면 주소공유버튼을 눌렀을 때 이런 방식으로 알림창이 뜨게 되고 확인 버튼을 누르면 사라지게 됩니다. 이것도 확인버튼 자체를 없애고 조금 뒤 자동으로 사라지게 하고 싶어서 아무리 수정을 해봤지만 잘 안되더라구요. 그래도 방법은 공유드립니다.
<!-- URL 복사 버튼 -->
<li style="margin-right: 0.5; display: inline-block;">
<script>
function copyPermalink() {
let bodyClass = document.body.className;
let postId = bodyClass.match(/postid-(\d+)/)[1];
let siteURL = location.origin;
let permalink = siteURL + '/?p=' + postId;
navigator.clipboard.writeText(permalink).then(function() {
alert("페이지 URL이 복사되었습니다.");
}).catch(function(err) {
console.error('클립보드 복사 실패: ', err);
});
}
</script>
<img src="="버튼 이미지 주소 넣어주세요" " alt="URL 복사하기" rel="nofollow" style="border-radius: 25%; width: 34px; cursor: pointer;" onclick="copyPermalink();" onmouseover="this.style.cursor='pointer';">
</li>마무리
이번 글에서는 아주 간단하지만 유용하게 쓰이는 페이지 URL 링크 주소 공유버튼을 워드프레스에 추가하는 방법에 대해 알려드렸습니다. 좀 더 다양한 기능을 쓰고 싶으신 분은 챗지피티만 잘 구슬려보시면 더 좋은 코드가 나올거에요.