2020.06.28
- Word Press
WordPressでシェアボタンをプラグインなしで設置する方法
WordPressではSNSのシェアボタンをプラグインで簡単に設置ができます。
代表的なものとしてはAddToAny Share ButtonsやWordPress Share Buttons Plugin – AddThisなどでしょうか。
インストールするだけで簡単に設置できるため用途によってはプラグインを使うのもいいですが、デザインのカスタマイズができなかったり、プラグインのバージョンが更新されず止まってしまうものなど、不安要素も多くあります。
そこで今回は、プラグインなしでデザインのカスタマイズも可能なシェアボタンを設置する方法をご紹介します。
まずこちらがデモになります。
See the Pen
SNS Share button by awakia0309 (@nyantora_03_09)
on CodePen.
記事ページ内にシェアボタン用のコードを追加
まず最初にsingle.phpなどの記事ページを生成するファイル内に、使用したいSNSのシェアボタンを追加していきます。aタグに設置する各リンクがSNSごとに変わっていきます。アイコン自体はFont Awesomeを読み込ませています。
あとでアイコンのボタンデザインをCSSでカスタマイズ出来るよう、各タグにはクラス名を追加しています。また、今回は横並びで一列のレイアウトになるよう各シェアボタンごとにdivタグで覆い、それをさらに全体的に覆うdivタグも設置しています。
<div class="sns_area_inner">
<div class="sns_area_item">
<a href="https://twitter.com/share?url=<? echo get_the_permalink(); ?>&text=<? echo get_the_title(); ?>" class="sns_tw" target="_blank">
<i class="fab fa-twitter icon_tw" aria-hidden="true"></i>
</a>
</div>
<div class="sns_area_item">
<a href="http://www.facebook.com/share.php?u=<? echo get_the_permalink(); ?>" class="sns-button sns_fa" target="_blank">
<i class="fab fa-facebook-f icon_fb" aria-hidden="true"></i>
</a>
</div>
<div class="sns_area_item">
<a href="https://social-plugins.line.me/lineit/share?url=<? echo get_the_permalink(); ?>" class="sns-button sns_line">
<i class="fab fa-line icon_line" aria-hidden="true"></i>
</a>
</div>
<div class="sns_area_item">
<a href="https://getpocket.com/edit?url=<?php echo urlencode(get_permalink()); ?>" class="sns-button sns_pc">
<i class="fab fa-get-pocket" aria-hidden="true"></i>
</a>
</div>
</div>デザインのカスタマイズ
元となるコードが設置できたら、CSSで全体的なレイアウトを整えていきます。今回はシンプルに背景色を単色でまとめ、マウスオーバー時に背景色が各SNSのカラーに切り替わるように設定しています。
.sns_area_inner {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
.sns_area_item {
margin-right: 18px;
a {
width: 48px;
height: 48px;
display: inline-block;
background: #1a1a1a;
border-radius: 50%;
padding: 0.7rem;
box-sizing: border-box;
transition: all 0.15s ease;
text-align: center;
line-height: 1;
display: flex;
align-items: center;
text-decoration: none;
.fab {
font-size: 1.5rem;
color: #fff;
width: 100%;
}
}
.sns_tw {
&:hover {
background: #00acee;
}
}
.sns_fa {
&:hover {
background: #3b5998;
}
}
.sns_line {
&:hover {
background: #00b900;
}
}
.sns_pc {
&:hover {
background: #ee4056;
}
}
}
}横並びのレイアウトにできるよう、最初に全体を覆うdivタグにflex-boxを設定します。その次に各ボタンの余白をmarginで指定していきます。
アイコンの角丸はaタグに指定したborder-radiusで調整していますので、不要であればこちらを削除すれば正方形のボタンになります。
アイコンをFont Awesomeで読み込ませているため、サイズを変更したい場合はfont-sizeで変更可能です。色も同様にCSSのプロパティで変更できます。
最後にマウスオーバー時の背景色を変更するため、各SNSのブランドカラーを指定していきます。
SNSのブランドカラーはこちらの記事が参考になりました。
https://ferret-plus.com/7909
SNSシェアボタンの完成
以上で完成となります。
今回紹介したSNSは4種類でしたが、シェアしたいサービスに応じて調整も可能です。はてなブックマークなどの日本のサービスはFont Awesomeにアイコンがない場合もありますので、その際には画像などでも代替できます。
