こちらの記事では、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を使用している方はぜひ試してみてください。
コメントを残す