【플러그인 완전 미사용】SNS 공유 버튼을 HTML과 CSS만으로 설치 【WordPress】

2019/7/302019/8/3

1. 계기
2. 이 코드에 의한 공유 버튼의 특징
3. 공유 버튼 코드 및 설치 방법
4. HTML
5. CSS
6. 표시 예

계기

지금까지 SNS 공유 버튼은 "WordPress Share Buttons Plugin – AddThis'라는 플러그인에 의존했습니다.

이 플러그인은

페이스북, 트위터, 라인, 포켓, 핀터레스트 등 해외 대기업 SNS 뿐만 아니라 하테나 북마크도 추가할 수 있다.
옆에 길고 작은 점유율 버튼 디자인이 있습니다.

라는 점에서 마음에 들었습니다만, 상당히 무거운 플러그인이었습니다.

"플러그인 없음, 공유 버튼"으로 검색하면 PHP, CSS, HTML, 소셜 아이콘 플러그인을 사용한 방법이 히트합니다.

이번에는 PHP와 소셜 아이콘을 사용하지 않고 CSS와 HTML만으로 SNS 공유 버튼을 설치해 보았습니다.

이 코드에 의한 공유 버튼의 특징

HTML 및 CSS로만 생성
PHP, 소셜 아이콘 사용하지 않음
태그에서 javascript 실행
공유할 페이지의 URL 및 페이지 제목을 자동으로 가져옵니다.
플러그인보다 고속(AddThis에 비해 최대 시 10점 정도 올랐다)
공유 수는 계산할 수 없습니다.
가로로 간단한 디자인

공유 버튼 코드 및 설치 방법

HTML

설명할 위치:
「외관」→「커스터마이즈」 → 「위젯」→ 공유 버튼을 설치하고 싶은 장소 → 위젯 추가 → 「커스텀 HTML」

이 기사 공유

CSS

설명하는 장소: 「외관」→「커스터마이즈」→「추가 CSS」

/*---SNS 공유 버튼---*/ /* 버튼의 문자 */ .fa-twitter:before, .fa-hatena:before, .fa-line:before, .fa-pocket:before { font -family: helvetica neue,helvetica,arial,sans-serif; font-weight: bold; font-size:14px } .fa-facebook:before { content: "f"; font-family: Verdana; font-weight: bold } .fa-twitter:before { content: "twitter";} .fa-hatena:before { content: "B!"; font-family: Verdana; } .fa-line:before { content: "Line"; } .fa-pocket:before { content: "pocket"; } /* 버튼 표시 위치 조정 */ .button-area { text-align: center; margin-top:15px; } /* 제목 표시 설정 */ . button-area-title { text-align: center; padding:.7em; } /* 버튼 블록 디자인 */ .button-area li a { padding: 2px; display: block; text-align: center; text-decoration : none; color: #fff; border-radius: 4px; } /* SNS별 배경색 */ .twitter a { background-color: #55acee; } .facebook a{ background-color: #3b5998; } .hatena a{ background-color: #008fde; } .line a{ background-color: #1dcd00; } .pocket a{ background-color: #ea5a6c; } /* 목록 "·" 삭제 */ .button-area ul { margin: 0; padding: 0; list-style: none; } /* 버튼 폭과 여백 설정 */ .button-area li { float: left; width: 19%; margin: 0 .3%; } .button -area ul:after { display: block; clear: both; } /* 버튼에 커서를 맞추었을 때의 표시 설정 */ .button-area li a:hover { -ms-transform: translateY(-2px); - webkit-transform: translateY(-2px); transform: translateY(-2px); }