[WordPress] 自由なデザインのソーシャルボタンをプラグインなしで設置したい

公開日:2018/12/02 更新日:2018/12/03

やりたいこと

SNSへの投稿を手軽に行えるようにするためのソーシャルボタン（シェアボタンとも）
ボタンは各サービスから提供されていますしWordPress用のプラグインもたくさんありますが、少しサイズが控えめだったりデザインも固定だったりします
今回はプラグインなしで自由にデザインできる、Facebook、Twitter、はてなブックマークの3サービスのソーシャルボタンを実装してみました

サンプルコード

functions.php

function enqueue_my_scripts() {
    wp_enqueue_style('font_awosome_brands', 'https://use.fontawesome.com/releases/v5.5.0/css/brands.css');
}
add_action('wp_enqueue_scripts', 'enqueue_my_scripts');

html

<nav class="btn_share">
    <a href="http://www.facebook.com/share.php?u=<?php echo the_permalink(); ?>" rel="nofollow" target="_blank" class="btn_share_fb"></a>
    <a href="https://twitter.com/share?url=<?php echo the_permalink(); ?>&text=<?php the_title(); ?>" rel="nofollow" target="_blank" class="btn_share_twitter"></a>
    <a href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php echo the_permalink(); ?>&title=<?php the_title(); ?>" target="_blank" rel="nofollow" class="btn_share_hatena"></a>
</nav>

CSS

.btn_share {
    display: flex;
    justify-content: center;
}
.btn_share > a {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    width: 90px;
    height: 90px;
    margin: 0px 10px;
    border-radius: 50%;
    color: #fff;
    font-size: 45px;
    text-decoration: none;
}
.btn_share > a::before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    font-family: "Font Awesome 5 Brands";
    font-weight: 400;
}
.btn_share > .btn_share_fb {
    background-color: #3b5998;
}
.btn_share > .btn_share_fb::before {
    content: "f39e";
}
.btn_share > .btn_share_twitter {
    background-color: #1da1f2;
}
.btn_share > .btn_share_twitter::before {
    content: "f099";
}
.btn_share > .btn_share_hatena {
    background-color: #008fde;
}
.btn_share > .btn_share_hatena::before {
    font-family: Verdana;
    font-weight: bold;
    content: "B!";
}

仕組み、解説、補足など

サンプルコードは丸型のボタンですが、CSSでいかようなデザインも実現できます
Facebook、TwitterのロゴはFontAwesomeを使っています
ロゴアイコンだけを個別に読み込むようにして、表示スピードに影響が出ないようにしています

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。