みらしん

読者の未来に、少しでも役立つネタを配信するブログ。

STINGER 記事内のSNSボタンを変更する方法

更新日:

SNSボタンのカスタマイズ記事_記事挿入アイキャッチ画像

WordPress(STINGERテーマ)を使用していて、記事内のSNSボタンを変更したい方に、読んでほしい記事です。

STINGERテーマ(ここではSTINGER5)では、記事内のSNSボタンが「Twitter」「Facebook」「Google+」「はてなブックマーク」の順に並んでいますが、「LINE」「feedly」などのボタンを加えた上で、デザインを整えたかったので、下記のようにデザインを変更しました。

SNSボタンのカスタマイズ記事_before_after画像

SNSボタンのデザイン、変更方法は下記のブログを参考にしています。

【参考】stinger5 SNSボタンが不揃いなのでカスタマイズしてサイドバーにも設置した

もし、同じようにSNSボタンのデザイン変更を考えているようであれば、本記事を参考にカスタマイズを進めてみてください。

なお、カスタマイズにあたり、まだ子テーマを作成していないようであれば、先に子テーマを作成することをオススメします。

【参考】WordPress 子テーマのメリットと作成方法

スポンサーリンク

PC300×250




「sns.php」のコード変更

まず、使用しているFTPサーバーの子テーマフォルダ内に「sns.php」がない場合は、親テーマのフォルダ内にある「sns.php」のファイルをそのまま子テーマ内にコピーします。
(子テーマを使用しない方は、親テーマの「sns.php」を直接いじっていきます。)

SNSボタンのカスタマイズ記事_ファイル作成画像

コピーした「sns.php」内の下記コードを変更します。

▪︎変更箇所(変更前)

<div class="sns">
    <ul class="snsb clearfix">
      <li> <a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script> 
      </li>
      <li>
        <iframe src="http://www.facebook.com/plugins/like.php?href=<?php the_permalink(); ?>&amp;layout=box_count&amp;show_faces=false&amp;width=50&amp;action=like&amp;colorscheme=light&amp;height=62" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:70px; height:62px;" allowTransparency="true"></iframe>
      </li>
      <li><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
        <g:plusone size="tall" href="<?php the_permalink(); ?>"></g:plusone>
      </li>
      <li> <a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php the_title(); ?>|<?php bloginfo('name'); ?>" data-hatena-bookmark-layout="vertical" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script> 
      </li>
    </ul>
  </div>

▪︎変更箇所(変更後)

<!-- 201XXXXX_SNSボタンのカスタマイズ ここから-->
<?php
  $url_encode=urlencode(get_permalink());
  $title_encode=urlencode(get_the_title());
?>

<div class="share">
<h4>記事のシェアや登録はコチラから!</h4>


<?php if(is_mobile()) {  //以下スマホの場合 ?>
<div class="sns">
<ul class="clearfix">
<!--ツイートボタン-->
<li class="twitter"> 
<a href="http://twitter.com/share?text=<?php echo $title_encode ?>&url=<?php echo $url_encode ?>&via=【※ここにTwitterのアカウント名(例:miraisyndrome)を入れてくだい※】&tw_p=tweetbutton"><i class="fa fa-twitter"></i>Twitter&nbsp;<?php if(function_exists('scc_get_share_twitter')) echo (scc_get_share_twitter()==0)?'':scc_get_share_twitter(); ?></a>
</li>

<!--Facebookボタン-->      
<li class="facebook">
<a href="http://www.facebook.com/sharer.php?src=bm&u=<?php echo $url_encode;?>&t=<?php echo $title_encode;?>"><i class="fa fa-facebook"></i>
Facebook&nbsp;<?php if(function_exists('scc_get_share_facebook')) echo (scc_get_share_facebook()==0)?'':scc_get_share_facebook(); ?></a>
</li>

<!--Google+1ボタン-->
<li class="googleplus">
<a href="https://plus.google.com/share?url=<?php echo $url_encode;?>" ><i class="fa fa-google-plus"></i>Google+&nbsp;<?php if(function_exists('scc_get_share_gplus')) echo (scc_get_share_gplus()==0)?'':scc_get_share_gplus(); ?></a>
</li>

<!--はてブボタン-->  
<li class="hatebu">       
<a href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php echo $url_encode ?>"><i class="fa fa-hatena"></i>はてブ&nbsp; <?php if(function_exists('scc_get_share_hatebu')) echo (scc_get_share_hatebu()==0)?'':scc_get_share_hatebu(); ?></a>
</li>

<!--LINEボタン-->   
<li class="line">
<a href="http://line.me/R/msg/text/?<?php echo $title_encode . '%0A' . $url_encode;?>">LINE</a>
</li>     

<!--ポケットボタン-->      
<li class="pocket">
<a href="http://getpocket.com/edit?url=<?php echo $url_encode;?>&title=<?php echo $title_encode;?>"><i class="fa fa-get-pocket"></i>Pocket&nbsp; <?php if(function_exists('scc_get_share_pocket')) echo (scc_get_share_pocket()==0)?'':scc_get_share_pocket(); ?></a></li>

<!--RSSボタン-->
<li class="rss">
<a href="<?php echo home_url(); ?>/?feed=rss2"><i class="fa fa-rss"></i>RSS</a></li>

<!--feedlyボタン-->
<li class="feedly">
<a href="http://feedly.com/index.html#subscription/feed/http://【※ここにドメイン名(例:mirasin.com)を入れてくだい※】/feed" target="blank"><i class="fa fa-rss"></i>feedly&nbsp; <?php if(function_exists('scc_get_follow_feedly')) echo (scc_get_follow_feedly()==0)?'':scc_get_follow_feedly(); ?></a></li>    
</ul>
</div> 

<?php } else { //以下PCの場合?> 

<div class="sns">
<ul class="clearfix">
<!--ツイートボタン-->
<li class="twitter"> 
<a href="http://twitter.com/share?text=<?php echo $title_encode ?>&url=<?php echo $url_encode ?>&via=【※ここにTwitterのアカウント名(例:miraisyndrome)を入れてくだい※】&tw_p=tweetbutton"><i class="fa fa-twitter"></i>Twitter&nbsp;<?php if(function_exists('scc_get_share_twitter')) echo (scc_get_share_twitter()==0)?'':scc_get_share_twitter(); ?></a>
</li>

<!--Facebookボタン-->      
<li class="facebook">       
<a href="http://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=800,width=1000');return false;"><i class="fa fa-facebook"></i>Facebook&nbsp; <?php if(function_exists('scc_get_share_facebook')) echo (scc_get_share_facebook()==0)?'':scc_get_share_facebook(); ?></a>
</li>
      
<!--Google+1ボタン-->
<li class="googleplus">
<a href="https://plus.google.com/share?url=<?php echo $url_encode;?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=500');return false;"><i class="fa fa-google-plus"></i>Google+&nbsp;<?php if(function_exists('scc_get_share_gplus')) echo (scc_get_share_gplus()==0)?'':scc_get_share_gplus(); ?></a>
</li>

<!--はてブボタン-->  
<li class="hatebu"> 
<a href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php echo $url_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>はてブ&nbsp; <?php if(function_exists('scc_get_share_hatebu')) echo (scc_get_share_hatebu()==0)?'':scc_get_share_hatebu(); ?></a>
</li>

 <!--LINEボタン-->      
<li class="line">
<a href="http://line.me/R/msg/text/?<?php echo $title_encode . '%0A' . $url_encode;?>" target="blank">LINE</a>
</li>       

<!--ポケットボタン-->      
<li class="pocket">
<a href="http://getpocket.com/edit?url=<?php echo $url_encode;?>&title=<?php echo $title_encode;?>" target="blank"><i class="fa fa-get-pocket"></i>Pocket&nbsp; <?php if(function_exists('scc_get_share_pocket')) echo (scc_get_share_pocket()==0)?'':scc_get_share_pocket(); ?></a></li>

<!--RSSボタン-->
<li class="rss">
<a href="<?php echo home_url(); ?>/?feed=rss2" target="blank"><i class="fa fa-rss"></i>RSS</a></li>

<!--feedlyボタン-->
<li class="feedly">
<a href="http://feedly.com/index.html#subscription/feed/【※ここにドメイン名(例:mirasin.com)を入れてくだい※】/feed" target="blank"><i class="fa fa-rss"></i>feedly&nbsp; <?php if(function_exists('scc_get_follow_feedly')) echo (scc_get_follow_feedly()==0)?'':scc_get_follow_feedly(); ?></a></li>    
</ul>  
</div>
<?php } ?>
</div>

<!-- 201XXXXX_SNSボタンのカスタマイズ ここまで-->

「ツイートボタン」のコードにある【※ここにTwitterのアカウント名(例:
miraisyndrome)を入れてくだい※】を墨付きカッコ含めて削除し、自分のアカウント名を入れてください。(2箇所あり)

「feedlyボタン」のコードにある【※ここにドメイン名(例:mirasin.com)を入れてくだい※】を墨付きカッコ含めて削除し、自分のドメイン名を入れてください。(2箇所あり)

「記事のシェアや登録はコチラから!」の文字を変えたいようであれば、コードの<h4></h4>の中に書かれている文字を変更してください。

php言語で「<!– –>」内の記載内容は、サイトに反映されない内容になるので、コードの最初と最後に「変更時の日付」「変更内容」などのメモを残しておくと、コードを見返すときに便利になります。(無くても反映されます。)

「style.css」のコード変更

「style.css」はデザインを担当するコードのため、SNSボタンのデザインはここで実装していきます。

子テーマの「style.css」を開き、以下のコードを追記していきます。
(子テーマを使用しない方は、親テーマの「style.css」を直接いじっていきます。)

▪︎スマホおよびタブレット用

「 /*media Queries タブレットサイズ
----------------------------------------------------*/
@media only screen and (max-width: 780px) { }」より前に以下のコードを記載。

/* 201XXXXX_カスタマイズ_スマホ用SNSボタン ここから*/
/*--------------------------------
SNS
---------------------------------*/
.share{
	width:100%;
}
.share h4{
	font-size:120%; 
	text-align:center;
}

.sns{
	margin:0 auto;
	text-align:center;
	
}
.sns ul {
	list-style:none;

}
.sns li {
	float:left;
	width:48%;
	margin:0 2% 3% 0;
}
.sns li a {
	font-size:80%;
	position:relative;
	display:block;
	padding:10px;
	color:#fff;
	border-radius:6px;
	text-align:center;
	text-decoration: none;
	text-shadow:1px 1px 0 rgba(255,255,255,0.3);
}
.sns li a:hover {
	-webkit-transform: translate3d(0px, 5px, 1px);
	-moz-transform: translate3d(0px, 5px, 1px);
	transform: translate3d(0px, 5px, 1px);
	box-shadow:none;
}

/* ツイッター */
.sns .twitter a {
	background:#00acee;
	box-shadow:0 5px 0 #0092ca;
}
.sns  .twitter a:hover {
	background:#0092ca;
}

/* Facebook */
.sns  .facebook a {
	background:#3b5998;
	box-shadow:0 5px 0 #2c4373;
}
.sns .facebook a:hover {
	background:#2c4373;
}

/* グーグル */
.sns .googleplus a {
	background:#db4a39;
	box-shadow:0 5px 0 #ad3a2d;
}
.sns  .googleplus a:hover {
	background:#ad3a2d;
}

/* はてぶ */
.sns  .hatebu a {
	background:#5d8ac1;
	box-shadow:0 5px 0 #43638b;
}
.sns .hatebu a:hover {
	background:#43638b;
}

/* LINE */
.sns  .line a {
	background:#25af00;
	box-shadow:0 5px 0 #219900;
}
.sns .line a:hover {
	background:#219900;
}

/* Pocket */
.sns  .pocket a {
	background:#f03e51;
	box-shadow:0 5px 0 #c0392b;
}
.sns  .pocket a:hover {
	background:#c0392b;
}

/* RSS */
.sns  .rss a {
	background:#ffb53c;
	box-shadow:0 5px 0 #e09900;
}
.sns  .rss a:hover {
	background:#e09900;
}

/* Feedly */
.sns  .feedly a {
	background:#87c040;
	box-shadow:0 5px 0 #74a436;
}
.sns  .feedly a:hover {
	background:#74a436;
}

/* 201XXXXX_カスタマイズ_スマホ用SNSボタン ここまで*/

▪︎PC用

「 /*media Queries PCサイズ
----------------------------------------------------*/
@media only screen and (min-width: 780px){ }」より後、かつ、「/*-- ここまで --*/」の直前に以下のコードを記載。

/* 201XXXXX_カスタマイズ_PC用SNSボタン ここから*/
/*--------------------------------------
  780px SNS
--------------------------------------*/
.share{
	padding-bottom:10px;
}
.sns ul {
	margin:0 auto;
	list-style:none;
}
 .sns li {
	width:23%;
	margin:0 2% 3% 0;
}
.sns li a {
	font-size:75%;
	padding:10px 2px;
}
.sns li:nth-child(4n) {
	margin-right:0;
}

/* 201XXXXX_カスタマイズ_PC用SNSボタン ここまで*/

これで、SNSボタンの変更が完了しました。

SNSボタンのカスタマイズ記事_完成画像

それぞれのボタンを押してみて、それぞれのサービスが立ち上がれば完成です。

本記事は以上になります。

ほとんど参考サイトのコピペでしたが、無事完成しました。

記事の上部には、今回の方法とは別に、WordPressのプラグイン「WP Social Bookmarking Light」を使って、最低限のSNSボタンを設置しても良いのかなと思います。

お付き合い頂き、ありがとうございました!

PC300×250




PC300×250




-ブログ運営

Copyright© みらしん , 2021 All Rights Reserved.