プラグインなしでWordPressのSNSボタンを追加する方法

Advertisements

wordpressのカスタマイズで、
使用しているテーマ内にsnsのシェアボタン機能がデフォルトでついていなかったようなので、
文字によるシンプルなSNSボタンを作るための備忘録です。
ボタン設置のためにインストールするプラグインを増やしたくない場合にも最適だと思います！

sns.phpを新規で作る

まずはじめに、Filezillaなどの転送ソフトを使って、
/wp-content/themes/適用しているテーマ名　の場所に
sns.phpのファイルを作って、SNSシェアボタンの下記内容を記述します。
今回、Twtitter、 Facebook、Pinterest、Line のボタンを入れました。


<?php
$url_encode=urlencode(get_permalink());
$title_encode=urlencode(get_the_title()).'｜'.get_bloginfo('name');
?>

<div class="snsshare">
<ul>

<li>
<!-- Twitter -->
<a class="btn--twitter" href="//twitter.com/intent/tweet?url=<?php echo $url_encode ?>&text=<?php echo $title_encode ?>&tw_p=tweetbutton" target="_blank">
Twitter </a>
</li>

<li>
<!-- Facebook -->
<a class="btn--facebook" href="//www.facebook.com/sharer.php?src=bm&u=<?php echo $url_encode;?>&t=<?php echo $title_encode;?>" target="_blank">
Facebook </a>
</li>

<li>
<!-- Pinterest -->
<a class="btn--pinterest" href="//pinterest.com/pin/create/button/?url=<?php echo $url_encode;?>" target="_blank">
Pinterest </a>
</li>

<li>
<!-- Line -->
<a class="btn--line" href="//social-plugins.line.me/lineit/share?url=<?php echo $url_encode;?>" target="_blank">
LINE </a>
</li>

</ul>
</div>

Advertisements

ファイルの詳細

$url_encodeには、get_permalink()で投稿記事のURLリンクを取得しています。

$title_encodeでは、get_the_title()で投稿タイトルを取得し、
get_bloginfo(‘name’) で、wordpressの管理画面「設定」→「一般」で設定したサイトのタイトルを取得しています。

それぞれの値の取得後、さらにurlencode()でURLエンコードをかけた値をセットしています。

シェアボタンの<a>タグ内の<?php echo $url_encode;?>と<?php echo $title_encode;?>によって、
その取得した値を表示させています。

Advertisements

style.cssに、デザインを記載

次に、sns.phpの見た目を整えるため、style.cssにレイアウトを記述します。
今回PCとタブレット幅では横に４つ、 SP幅では横に2つ並ぶように、calc関数を使って幅を調節しました。


/*SNS share*/

.snsshare ul{
	margin:0;
	list-style-type:none;
	display:flex;
	flex-wrap:wrap;
	gap:10px;
}
.snsshare li{
  width: calc(25% - 30px/4);
}
@media screen and (max-width: 414px) {
	.snsshare li{
  width: calc(50% - 5px);
	}
}
.snsshare a{
  box-sizing: border-box;
  display: block;
  padding: .6em 0;
  border-radius: 3px;
  color: white;
  text-decoration: none;
  text-align: center;
  font-weight: bold;
}
.btn--twitter{
  background: #55acee;
}
.btn--facebook{
  background: #3b5998;
}
.btn--pinterest{
 background: #c60120;
}
.btn--line{
  background: #00b900;
}