【WordPress】軽いSNSシェアボタンを作ってみた

「AddToAny Share Buttons (シェアボタン)」という、

SNSシェアボタンのプラグインを使っていたが、とても重かったので、

ボタンを手作りすることにした。

見た目は、↓こちらのサイトを参考にして、軽いSNSシェアボタンを作ってみた。

以下のコードを WordPress の function.php に追加した。

function content_sns_button($content) {

if ( !is_single()){
    return $content;
}

$btns = 

/**
 * シェアボタンここから
 */
.share-btn-type7 {
  max-width: 240px;
  margin: 1.2em auto;
  display: flex;
  justify-content: space-between;
}
.share-btn-type7 .share-btn__item {
  width: 50px;
  height: 50px;
  color: #fff;
  font-size: 16px;
  text-align: center;
  line-height: 50px;
  border-radius: 50%;
  box-shadow: 0 2px 2px rgba(0,0,0,.16);
  transition: all .3s;
}
.share-btn-type7 .share-btn__item:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 10px rgba(0,0,0,.14);
}
.share-btn-type7 .share-btn__item--hatebu {
  background-color: #00A4DE;
}
.share-btn-type7 .share-btn__item--facebook {
  background-color: #1778F2;
}
.share-btn-type7 .share-btn__item--twitter {
  background-color: #1BA1F3;
}
.share-btn-type7 .share-btn__item--pocket {
  background-color: #EF4155;
}
/**
 * シェアボタンここまで
 */


EOM;

$btns .= '＜!-- ここからシェアボタン --＞';
$btns .= '＜div class="share-btn-type7"＞';
$btns .= '＜a href="http://b.hatena.ne.jp/entry/'.esc_url(get_permalink()).'" data-hatena-bookmark-title="'.get_the_title().'" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加" class="share-btn__item share-btn__item--hatebu" target="_blank"＞＜strong＞Ｈ＜/strong＞＜/a＞';
$btns .= '＜a href="http://www.facebook.com/sharer.php?u='.esc_url(get_permalink()).'" class="share-btn__item share-btn__item--facebook" target="_blank"＞＜strong＞F＜/strong＞＜/a＞';
$btns .= '＜a href="http://twitter.com/intent/tweet?text='.get_the_title().' '.esc_url(get_permalink()).'" class="share-btn__item share-btn__item--twitter" target="_blank"＞＜strong＞T＜/strong＞＜/a＞';
$btns .= '＜a href="http://getpocket.com/edit?url='.esc_url(get_permalink()).'" class="share-btn__item share-btn__item--pocket" target="_blank"＞＜strong＞P＜/strong＞＜/a＞';
$btns .= '＜/div＞';
$btns .= '＜!-- シェアボタンここまで --＞';

$re_content = $btns.$content.$btns;
return $re_content;

}
add_filter('the_content','content_sns_button');

↓こんな感じ。

本文に入れ込んだ作りにしたので、AMPでもそのまま表示される。