GeneratePress 테마에 SNS공유 버튼을 만드는 방법을 알아보겠습니다. 플러그인을 사용해서 만들 수 있지만 플러그인을 많이 사용할 수록 페이지 속도가 느려지는데요. 그래서 Elements를 사용해서 SNS공유 버튼을 만드는 방법을 사용할 수 있습니다.
이 워드프레스 블로그에도 하단에 보시면 네이버나 페이스북 트위터 공유 버튼처럼 만들 수 있습니다. 처음하면 어렵지만 한번만 해보면 다음에 쉽게 할 수있습니다.
Elements 요소 설정
1.워드프레스 관리자 페이지에서 [외모] – [Elements]에 들어가서 [Add New Element]를 눌러주세요. 그럼 Choose Element Type 선택 창이 나오는데 여기서 Hook를 선택해주세요.
2. 그럼 위에 사진처럼 창이 나오는데요. 제목을 정하고 아래는 코드를 넣어주어야 합니다. 코드는 아래에 있는 코드 전체를 복사해서 위에 그림처럼 넣어주시면 됩니다.
그리고 하단에 Settings에서 본문 하단에 넣을지 본문 전에 넣을지 본인이 원하는 곳을 선택하시면 됩니다.
generate_after_content : 본문 상단
generate_after_content : 본문 하단
<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="사진주소" 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="사진주소" 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="사진주소" 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="사진주소" 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="사진주소" width="35px" height="35px" alt="카카오스토리 공유하기"></a>
</li>
</ul>
</div>이미지 주소가 필요한데요. 사진주소는 아래 찾는방법은 아래 설명하겠습니다.
추가로 URL 복사 버튼는 위에 코드에서 아래 코드를 추가로 넣어주시면 됩니다. (출처: 워드프레스 정보꾸러미)
<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>
아까 Settings 옆에 Display Rules에서 Location을 [글] [All글]을 선택하고 업데이트를 눌러주시면 됩니다.
사진주소 찾는 방법
우선 트위치, 네이버, 페이스북, 카카오 이미지가 필요한데요. 구글에서 SNS아이콘을 검색하면 쉽게 찾을 수 있습니다. 찾은 이미지를 라이브러리에 업로드 해야 하는데요.
[미디어] – [새로 추가]를 눌러서 파일 선택하고 이미지를 업로드 해주세요.
[미디어] – [라이브러리]에서 업로드한 이미지를 선택해주세요.
만약 트위터 이미지를 선택하면 오른쪽 아래 파일 URL 주소를 복사해서 아까 사진 주소에 넣어주시면 됩니다.
CSS 추가
이제 CSS만 추가하면 끝입니다.
관리자 페이지에서 [외모] – [사용자 정의하기] – [css]를 눌러서 아래에 코드를 넣고 위에 공개를 눌러주시면 끝입니다.
/* SNS 공유 시작 */
.sns-go ul {
list-style-type: none;
margin: 40px 0 0 0;
padding: 0;
overflow: hidden;
}
.sns-go li {
float: left;
padding-right: 5px;
}
.sns-go img {
border-radius: 5px;
width: 35px;
}
.single .entry-content {
margin-top: 0.6em;
}
/* SNS 공유 끝 */
◦GeneratePress 테마 상단 메뉴바 색상 변경 방법
◦GeneratePress 테마 날짜 글쓴이 안보이게 삭제하는 방법
◦GeneratePress 테마 본문 상단 썸네일 사진 삭제 방법
◦GeneratePress 테마 사이드 메뉴 삭제 방법
◦GeneratePress 테마 메인 썸네일 이미지 크기 설정 방법
