WordPressのテーマ「Gush」のSNSボタンのカスタマイズ

公開日:  最終更新日:2018/09/02

GushではデフォルトのSNSボタンがありますが、

デザイン性、ユーザビリティの観点から変えたいと思ったので、紹介します。

もちろんプラグインなしで。


デフォルトのSNSボタン

デフォルトでは下記のように各SNS標準のボタンが設置されています。

PC

SP

対象箇所

もちろん子テーマで行います。

  • header.php
  • sns.php
  • style.css

header.php

こちらは汎用的に使われているアイコンFont Awesomeのライブラリを読み込みます。

headタグ内に挿入します。


  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.6/css/all.css">
  

sns.php

こちらはSNSの表示側でまるっと刷新します。

JavaScriptで指定のサイズを開くやり方はコードが見づらくなり、嫌いなので、target=”_blank”で開くことにしています。

インデントはめんどいので適当です(o^―^o)


<div id="entry_snsbox"><!--SNS-->

  <?php
    $url_encode = urlencode(get_permalink());
    $title_encode = urlencode(get_the_title()).'|'.get_bloginfo('name');
    $home_url = home_url();
  ?>
  <div class="share">
  <ul>
    <!--Facebookボタン-->
    <li class="facebook">
      <a href="//www.facebook.com/sharer.php?src=bm&u=<?php echo $url_encode;?>&t=<?php echo $title_encode;?>" target="_blank">
        <i class="fab fa-facebook-f"></i><span> facebook</span>
      </a>
    </li>
    <!--Twitterボタン-->
    <li class="tweet">
      <a href="//twitter.com/intent/tweet?url=<?php echo $url_encode ?>&text=<?php echo $title_encode ?>&tw_p=tweetbutton" target="_blank">
        <i class="fab fa-twitter"></i><span> tweet</span>
      </a>
    </li>
    <!--Google+ボタン-->
    <li class="googleplus">
      <a href="//plus.google.com/share?url=<?php echo $url_encode;?>" target="_blank">
        <i class="fab fa-google-plus-g"></i><span> Google+</span>
      </a>
    </li>
    <!--はてなボタン-->
    <li class="hatena">
      <a href="//b.hatena.ne.jp/entry/<?php echo $url_encode ?>" target="_blank">
        <i class="fa fa-hatena"></i><span> はてブ</span>
      </a>
    </li>
    <!-- LINE -->
    <li class="line">
      <a href="//line.me/R/msg/text/?<?php echo $title_encode . '%0A' . $url_encode;?>" target="_blank">
        <i class="fab fa-line"></i><span> LINE</span>
      </a>
    </li>
    <!-- Pocket -->
    <li class="pocket">
      <a href="//getpocket.com/edit?url=<?php echo $url_encode;?>&title=<?php echo $title_encode;?>" target="_blank">
        <i class="fab fa-get-pocket"></i><span> Pocket</span>
      </a>
    </li>
    <!--rssボタン-->
    <li class="rss">
      <a href="<?php echo $home_url; ?>/?feed=rss2" target="_blank">
        <i class="fas fa-rss-square"></i><span> rss</span>
      </a>
    </li>
    <!--feedlyボタン-->
    <li class="feedly">
      <a href="//feedly.com/index.html#subscription%2Ffeed%2F<?php echo urlencode( $home_url );?>%2Ffeed%2F" target="_blank">
        <i class="fas fa-rss-square"></i><span> feedly</span>
      </a>
    </li>
  </ul>
  </div>

  </div><!--//SNS-->
  

style.css

デザインはお好みで追加します。


/* sns_design_begin */
#entry_snsbox {
  border: 0px;
  padding: 0px 20px;
  text-align: left;
}
#entry_snsbox li {
  float: left;
  margin-right: 10px;
  min-height: 50px;
}
.fa-hatena:before {
  font-family: Verdana;
  font-weight: bold;
  content: 'B!';
}
.share {
  margin-top: 40px;
  margin-bottom: 40px;
}
.share ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.share ul:after {
  display: block;
  clear: both;
  content: '';
}
.share li {
  float: left;
  width: 20%;
  margin: 0;
  margin-top: 15px;
}
.share li a {
  font-size: 14px;
  display: block;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  color: #fff;
  border-radius: 5px;
}
.share li a:hover {
  opacity: .8;
}
.share li a:visited {
  color: #fff;
}
.share li i {
  vfont-size: 1.5em;
}
.tweet a {
  background-color: #55acee;
}
.facebook a {
  background-color: #315096;
}
.googleplus a {
  background-color: #dd4b39;
}
.hatena a {
  background-color: #008fde;
}
.line a {
  background-color: #00c300;
}
.pocket a {
  background-color: #EE4256;
}
.rss a {
  background-color: #ff8c00;
}
.feedly a {
  background-color: #6cc655;
}
@media(max-width: 599px) {
  .share li {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 3px;
  }
  .share li i {
    font-size: 2em;
    padding-top: 3px;
  }
  .share li span {
    display: none;
  }
}
/* sns_design_end */

仕上がり

こんな感じです。

PC

SP


参考(ほぼ引用)

下記サイトを参考にしました。

ありがとうございます。

【脱プラグイン作戦】プラグインなしで自作のSNSボタンを実装してみました。

SNSボタンをWordPressの記事やウィジェットにプラグインなしで追加

  • サイト内検索

  • カテゴリー

  • 最近の投稿

  • アーカイブ