月額定額制（サブスク）通販サイト制作-ドスブイサポート

お問い合わせ

お問い合わせ

　

close

【0から学ぶWordPress】プラグインなしでSNSシェアボタンを自作する

まいど！
今からWordpressでホームページを制作したい、勉強したいって方と共に成長できるように記事を連投しております。

大阪でホームページをサブスク運用でご提供してます
株式会社ディー・オー・エス　ドスブイサポートでございます！

本日は加速し続けるSNSへの拡散を目的としたボタンを生成したいと思います

記事をSNSでシェアしてもらうボタンを自作する意味

プラグインを使えば簡単に実装は可能かと思いますが今回は自作します

  • プラグインは使いたくない
  • テーマを途中で変えるかもしれない

当てはまるようでしたら簡単なので自作した方が良いです！
では！さっそく実装する方法を記載して参ります。

今回使用するSNSシェアボタン

今回実装するシェアボタンは

  • Twitter
  • Facebook
  • はてなブックマーク
  • LINE
  • Pocket
  • Google+

これがあれば現時点では私は最適かと思います。

シンプルかつ簡単に完結させるPHPでの実装

<?php
  $share_url   = get_permalink();
  $share_title = get_the_title();
?>
<ul>
<!-- Twitter -->
<li>
  <a href="//twitter.com/share?text=<?=$share_title?>&url=<?=$share_url?>" title="Twitterでシェア" onclick="javascript:window.open(this.href, '_blank', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=600');return false;">
    Twitter(アイコンなど)
  </a>
</li>
<!--Facebookボタン--> 
<li>
  <a href="//www.facebook.com/sharer.php?src=bm&u=<?=$share_url?>&t=<?=$share_title?>" title="Facebookでシェア" onclick="javascript:window.open(this.href, '_blank', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=800,width=600');return false;">
    Facebook(アイコンなど)
  </a>
</li>
<!-- はてな -->
<li>
  <a href="//b.hatena.ne.jp/add?mode=confirm&url=<?=$share_url?>" onclick="javascript:window.open(this.href, '_blank', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=1000');return false;" title="はてなブックマークに登録">
    はてブ(アイコンなど)
  </a>
</li>
<!-- LINE -->
<li>
  <a href="//line.me/R/msg/text/?<?=$share_title.'%0A'.$share_url?>" target="_blank" title="LINEに送る">
    LINE(アイコンなど)
  </a>
</li>
<!-- ポケット -->
<li>
  <a href="//getpocket.com/edit?url=<?=$share_url?>&title=<?=$share_title?>" target="_blank" title="Pocketに保存する">
    ポケット(アイコンなど)
  </a>
</li>
<!-- Google+ -->
<li>
  <a href="//plus.google.com/share?url=<?=$share_url?>" onclick="javascript:window.open(this.href, '_blank', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=500');return false;" title="Google+で共有">
    Google(アイコンなど)
  </a>
</li>
</ul>

このコードを使っているテーマのshingle.phpに出力したい箇所に追記して下さい。テキストですがリンクはできちゃんとシェアできるようになってます。

CSSでの装飾も併せて解説

先ほどのソースではテキストリンクで味気ないですので、よく見かける
カラーとアイコンを使って装飾を行って参ります。

いちいち自作しないでも便利なアイコンフォントがありますのでそちらを今回は利用させて頂きます。

こちらのサイトでよく使われるアイコンフォントがあります。

こちらが利用しやすいと思いますので、こちらをダウンロードしましょう。
解凍してできたフォルダ「icomoon」を使ってるテーマにアップロードします

今回は使っているテーマの中のCSSフォルダがあった場合を解説します
テーマのheader.phpにicomoonフォルダを追記してあげます

    <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/icomoon/style.css">

これで使えます。

スタイルに対応したクラスの指定で装飾をしましょう

私の場合はaタグにclassを追記してアイコン化してます。
色々やり方はありますね

<?php
  $share_url   = get_permalink();
  $share_title = get_the_title();
?>
<ul class="socialBtn d-flex">
<!-- Twitter -->
<li>
  <a class="twitter icon-twitter" href="//twitter.com/share?text=<?=$share_title?>&url=<?=$share_url?>" title="Twitterでシェア" onclick="javascript:window.open(this.href, '_blank', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=600');return false;">
    Twitter(アイコンなど)
  </a>
</li>
<!--Facebookボタン--> 
<li>
  <a class="facebook icon-facebook" href="//www.facebook.com/sharer.php?src=bm&u=<?=$share_url?>&t=<?=$share_title?>" title="Facebookでシェア" onclick="javascript:window.open(this.href, '_blank', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=800,width=600');return false;">
    Facebook(アイコンなど)
  </a>
</li>
<!-- はてな -->
<li>
  <a class="hatena icon-hatena" href="//b.hatena.ne.jp/add?mode=confirm&url=<?=$share_url?>" onclick="javascript:window.open(this.href, '_blank', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=1000');return false;" title="はてなブックマークに登録">
    はてブ(アイコンなど)
  </a>
</li>
<!-- LINE -->
<li>
  <a class="line icon-line" href="//line.me/R/msg/text/?<?=$share_title.'%0A'.$share_url?>" target="_blank" title="LINEに送る">
    LINE(アイコンなど)
  </a>
</li>
<!-- ポケット -->
<li>
  <a class="pocket icon-pocket" href="//getpocket.com/edit?url=<?=$share_url?>&title=<?=$share_title?>" target="_blank" title="Pocketに保存する">
    ポケット(アイコンなど)
  </a>
</li>
<!-- Google+ -->
<li>
  <a class="google icon-googleplus" href="//plus.google.com/share?url=<?=$share_url?>" onclick="javascript:window.open(this.href, '_blank', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=500');return false;" title="Google+で共有">
    Google(アイコンなど)
  </a>
</li>
</ul>

これだけでこうなります

好みにもよりますが、ボタン化するんで文字いらんかな。。。
では残りのCSSで装飾していきましょうか！

めっちゃすみません。bootstrap使っているんで書き方違うかもですが
レイアウトを簡単に作ってくれるbootstrapは個人的にめっちゃおススメです！

bootstarapについてはこちら

例えばulにclass=”d-flex” を追記しただけで横並びになります。

最後のCSS装飾

ul.socialBtn li{
    display: block;
    width: 33.33%;
}
ul.socialBtn li a {
    display: block;
    font-size: 1.4rem;
    font-weight: 500;
    text-decoration: none;
    text-align: center;
    color: #fff;
    padding:15px 40px;
    margin:5px 0;
    

}
a.twitter {background: #1da1f2;}
a.facebook {background: #3b5998;}
a.google {background: #db4437;}
a.line {background: #00b900;}
a.pocket {background: #ee4056;}
a.hatena {background: #00a4de;}

まとめ

いかがでしたか？
プラグイン不要でSNSのソーシャルにシェアをしてもらえるボタンの設置を
今回は解説させて頂きました。
実装できましたでしょうか？

結構難しいのかなと感じる方もいらっしゃったかと思いますが、単なるaタグで飛ばしているような単純な事なので、プラグイン使う必要は無いんじゃないかなとは思います。

では！本日はここまで
最後までご覧いただきまして誠に有難うございました！

お仕事のご依頼やお問い合わせはフォームやツイッターにてお気軽にお問い合わせ下さい。
お問い合わせフォーム
» 高橋しゃちょー (@osaka_dos) | Twitter

« 次の記事

【0から学ぶWordpress】サイドバー（ウィジェット）の複製で内容を変える

前の記事 »

figureタグ・figcaptionタグの意味

    • ​