【WordPress】プラグインを使わないでSNSシェアボタンを設置させる方法

WordPressで記事を書いていてなんか物足りないなと思っていたらソーシャルボタンが設置されていないからだと気づきました。

今回はソーシャルボタンをWordPressに設置させる方法を試行錯誤してなんとかできたのでそれについてまとめました。

WordPressにはソーシャルボタンを設置させるプラグインもあるのですが、今回はプラグインを使わないで設置させようと思います。

phpのコードを少し扱うのでプログラムを初めて見る方には少し難しいかもしれませんが、コピペでできるようにしています。

WordPressのバージョンは下記です。

WordPress 5.2.2 
(Start Magazine テーマ)

そもそもソーシャルボタンとは？

ソーシャルボタン（英:social button）とは、ブログやニュースサイトなどのウェブサイトからSNSやソーシャルブックマークなどのソーシャルメディアに情報を入出力するために設置される、ボタン型のインターフェースのことである
wikipediaより

つまり、よくニュースの記事とかで表示されているこんな感じのボタンです。

social_link.phpの作成（SNSシェアボタンの出力用）

使っているテーマによってパスを読み換えてください。

自分の場合はstart_magazineを使っているので下記のパスに配置しました。

wp-content/themes/start-magazine/social_link.php

↓↓のソースコードをコピーしてsocial_link.phpという名前で文字コードはutf-8で保存してください。

    <?php
$url_encode=urlencode(get_permalink());
$title_encode=urlencode(get_the_title()).'｜'.get_bloginfo('name');
?>
<div class="share">
  <ul>
    <!--LINEボタン-->

    <li class="line">
      <a href="//line.me/R/msg/text/?<?php echo $url_encode;?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=900');return false;">
       <i class="fab fa-line"></i><span> LINE</span>
      </a>
    </li>

    <!--Facebookボタン-->

    <li class="facebook">
      <a href="//www.facebook.com/sharer.php?src=bm&u=<?php echo $url_encode;?>&t=<?php echo $title_encode;?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;">
        <i class="fab fa-facebook"></i><span> facebook</span>
      </a>
    </li>
    <!--ツイートボタン-->

    <li class="tweet">
      <a href="//twitter.com/intent/tweet?url=<?php echo $url_encode ?>&text=<?php echo $title_encode ?>&tw_p=tweetbutton" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;">
        <i class="fab fa-twitter"></i><span> tweet</span>
      </a>
    </li>
    <!--はてなボタン-->

    <li class="hatena">
      <a href="//b.hatena.ne.jp/add?mode=confirm&url=<?php echo $url_encode ?>&title=<?php echo $title_encode ?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=510');return false;"><i class="fa fa-hatena"></i><span> はてブ</span>
     </a>
    </li>
    <!--Pocketボタン-->

    <li class="pocket">
      <a href="//getpocket.com/edit?url=<?php echo $url_encode ?>&title=<?php echo $title_encode;?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=510');return false;"><i class="fab fa-get-pocket"></i><span> Pocket</span>
     </a>
    </li>

  </ul>
</div>

font-awesomeの呼び出し

font-awesomeとは

下記のサイトが参考になりました。

つまりツイッターやフェイスブック等のアイコンを表示してくれるものです。

【保存版】Font Awesomeの使い方：Webアイコンフォントを使おう

header.phpを編集

wp-content/themes/start-magazine/header.php

header.phpを編集します。

<head>ブロックがあるので13行目のようににcssを呼び出すコードを追加します。

    <head>
        <?php
        /**
         * Hook - start_magazine_action_head.
         *
         * @hooked start_magazine_head - 10
         */





        do_action( 'start_magazine_action_head' );
        ?>

        <?php wp_head(); ?>
        <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

</head>

cssの調整（SNSシェアボタンのデザイン）

下記のファイルを修正します。

wp-content/themes/start-magazine/style.css

style.cssの末尾に下記のコードを追加します。

CSSについて詳しくない方はコピペで大丈夫です。

    
.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;
  font-weight: bold;
}
 
.share li a:hover {
  opacity: .8;
}
 
.share li a:visited {
  color: #fff;
}
 
.line a {
  background-color: #00b900;
}

.tweet a {
  background-color: #55acee;
}
 
.facebook a {
  background-color: #315096;
}
 
.hatena a {
  background-color: #008fde;
}
 
.pocket a {
  background-color: #ef4056;
}

@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: 1.3em;
    padding-top: 3px;
  }
  .share li span {
    display: none;
  }
}

content-single.phpの調整（記事ページへソーシャルリンク表示）

下記のファイルを修正します。

wp-content/themes/start-magazine/template-parts/content-single.php

どこに出力したかによって記載する箇所が異なるので、アイキャッチ画像の下にSNSシェアボタンを表示させたい場合は自分のを参考にしてください。

↓↓追加する内容

    <?php get_template_part( 'social_link.php' ); ?>

表示結果

PCの場合

PCはこんな感じで表示させることができました。

スマホの場合

スマホの方はこんな感じです。

SNSシェアボタンを表示させる方法についてまとめてきました。

少しでも参考になれば幸いです。

そもそもソーシャルボタンとは？

social_link.phpの作成（SNSシェアボタンの出力用）

font-awesomeの呼び出し

font-awesomeとは

header.phpを編集

cssの調整（SNSシェアボタンのデザイン）

content-single.phpの調整（記事ページへソーシャルリンク表示）

表示結果

PCの場合

スマホの場合

Related Posts

【WordPress】目次のデザイン調整（ソースコード修正）

【WordPress】目次を追加する方法

【WordPress】ボックスデザインの適用方法

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル