【STORK】Pinterestシェアボタンの実装方法【WordPress】

\ 知らないうちに損してる? /

Amazonポイント最大2.5%還元キャンペーン

駿河屋スタッフ募集中

こちらの記事では、WordPressテーマ「STORK(ストーク)」に、Pinterestのシェアボタンを実装する方法を解説します。

丸々コピペできるコードを記載していますのでご利用ください。

「STORK」以外のテーマでも応用できますので参考にしてください。

シェアボタン完成イメージ

PCでの見た目

スマホでの見た目

シェアボタンを実装する前に

修正するファイルは3つだけ

  • header.php
  • parts_sns_short.php
  • style.css

必ず親テーマではなく子テーマで

絶対に「stork」親テーマではなく、子テーマを作成して反映しましょう。

代わりに一つアイコンを消します

この記事では、使用頻度のpocketを非表示にして紹介します。

アイコンの準備

Font Awesome CDNを読み込む

https://fontawesome.com/account/cdn

このページに書いてある、以下のコードをheader.phpの<head>〜</head>内に追加します。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">

Pinterestシェアボタンを実装

「parts_sns_short.php」を、丸々こちらのコードに書き換えてください。

<?php
  $url_encode=urlencode(get_permalink());
  $title_encode=urlencode(get_the_title());
  $tw_url = get_the_author_meta( 'twitter' );
  $tw_domain = array("http://twitter.com/"=>"","https://twitter.com/"=>"","//twitter.com/"=>"");
  $tw_user = '&via=' . strtr($tw_url , $tw_domain);
?>
<div class="share short">
<div class="sns">
<ul class="cf">
	
<li class="twitter"> 
<a target="blank" href="//twitter.com/intent/tweet?url=<?php echo $url_encode ?>&text=<?php echo urlencode( the_title( "" , "" , 0 ) ) ?><?php if(get_the_author_meta('twitter')) : ?><?php echo $tw_user ;?><?php endif ;?>&tw_p=tweetbutton" onclick="window.open(this.href, 'tweetwindow', 'width=550, height=450,personalbar=0,toolbar=0,scrollbars=1,resizable=1'); return false;"><i class="fab fa-twitter"></i><span class="text">ツイート</span><span class="count"><?php if(function_exists('scc_get_share_twitter')) echo (scc_get_share_twitter()==0)?'':scc_get_share_twitter(); ?></span></a>
</li>

<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 class="text">シェア</span><span class="count"><?php if(function_exists('scc_get_share_facebook')) echo (scc_get_share_facebook()==0)?'':scc_get_share_facebook(); ?></span></a>
</li>
	
<li class="hatebu">       
<a href="//b.hatena.ne.jp/add?mode=confirm&url=<?php the_permalink() ?>&title=<?php echo urlencode( the_title( "" , "" , 0 ) ) ?>" onclick="window.open(this.href, 'HBwindow', 'width=600, height=400, menubar=no, toolbar=no, scrollbars=yes'); return false;" target="_blank"><span class="text">はてブ</span><span class="count"><?php if(function_exists('scc_get_share_hatebu')) echo (scc_get_share_hatebu()==0)?'':scc_get_share_hatebu(); ?></span></a>
</li>

<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 class="text">LINE</span></a>
</li>

<li class="pinterest">
<a href="https://pinterest.com/pin/create/button/?url=<?php the_permalink(); ?>&media=<?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' ); echo $thumb['0']; ?>&description=<?php echo get_the_title(); ?>" target="_blank" rel="nofollow"><i class="fab fa-pinterest"></i><span class="text">Pinterest</span></a>
</li>

<!--
<li class="pocket">
<a href="//getpocket.com/edit?url=<?php the_permalink() ?>&title=<?php the_title(); ?>" onclick="window.open(this.href, 'FBwindow', 'width=550, height=350, menubar=no, toolbar=no, scrollbars=yes'); return false;"><i class="fa fa-get-pocket"></i><span class="text">Pocket</span><span class="count"><?php if(function_exists('scc_get_share_pocket')) echo (scc_get_share_pocket()==0)?'':scc_get_share_pocket(); ?></span></a></li>
-->

</ul>
</div> 
</div>

スタイルを反映

以下のコードを「style.css」に追加します。

/* Pinterest*/

.sns .pinterest a {
	background: #e60023;
	box-shadow: 0 3px 0 #9d0a20;
}

.sns .pinterest a:hover {
	background: #9d0a20;
}

最後に

いかがでしたでしょうか。

「STORK」以外のテーマでも応用できますので、WordPressを使用している方はぜひ試してみてください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ABOUTこの記事をかいた人

幼少期、絵描きになりたくて毎日絵を描く。地元の写生大会で金賞受賞。
高校生の頃からバンドを組み、作詞・作曲・編曲・映像を担当。ライブで知り合ったバンドマンとは今でも仲良し。

25歳から独学でデザイン・ウェブ制作を0から学習し、ウェブデザイナーとして中途入社。自分だけの武器を探し、デザイン、マークアップ、企画、マーケティング、SNS、広告など片っ端から勉強。
今はその知識を活かしてPdMを担当。

その傍ら数々の副業(イラスト制作、アフィリエイト、古着転売、ハンドメイド、作曲)をして、現在30代に突入。

東海在住。
運営ブログ「シュマリ」は月間3万PV。
読んだ漫画は4万冊。