STINGER6が公開されて、STINGER5のブログをどうしようか迷いました。結局STINGER5のまま、SNSシェアボタンをカスタマイズすることに。

blog

ハイ! リサです。

WordPressの無料テーマ「STINGER6」が公開されました。
私のブログは「STINGER5」なのですが、乗り換えるかどうするか迷いました。

参照WordPress無料テーマ STINGER6

スポンサーリンク
スポンサーリンク

STINGER6を試す

「MAMP」でローカル環境をつくってSTINGER6を試してみました。

STINGER5の進化版で「お知らせの表示」や「STINGER環境設定」からのカスタマイズ等、出来ることが増えていました。
その分PHPファイルも増えてしまいましたが…
このブログのCSSを設置してみると、ある程度問題なくレンダリングできました。

しかし、ヘッド周りの空間バランスが少し異なってしまいましたので、デザイナー的には同じものとは言えませんでした。
バランスを変えるためには、少しCSSを書き換えないといけないようです。

せっかくSTINGER5をここまで修正してきたので、結局、STINGER6のインストールは諦めました。

STINGER6のSNSボタンをSTINGER5に移植する

このブログで少し困っていたのは、SNSボタンの不統一でした。

シェアボタンといいねボタンが混在していたり、リンクがおかしな感じがしていました。
読み込み時にSNSボタンが壊れることも、しばしばありました。

そこで、新しいSTINGER6のSNSボタンを移植することにしました。

STINGER6のSNSボタンは「SNS Count Cache」プラグインによって高速化がはかられているので、この点も良くなっています。

修正は「sns-top.php」と「sns.php」を入れ替えるだけの簡単なものです。
しかし、「STINGER環境設定」の設定が入っていたので、そこは削除しました。

LINEはPCではいらないような気がしたので、スマホのみにしています。

sns-top.phpのコード


<?php
 $url_encode=urlencode(get_home_url());
 $title_encode=urlencode(get_bloginfo('name'));
?>

<div class="sns_b">
 <ul class="clearfix">
 <!--ツイートボタン-->
 <li class="twitter"> <a target="_blank" href="http://twitter.com/intent/tweet?url=<?php echo $url_encode ?>&text=<?php echo $title_encode ?>&via=<?php echo $twitter_name ?>&tw_p=tweetbutton"><i class="fa fa-twitter"></i>
 <?php 
 if(function_exists('get_scc_twitter')) { 
 if( scc_get_share_twitter( array( 'post_id' => 'home' ) ) !== 0){
 echo '<span class="snstext">'.scc_get_share_twitter( array( 'post_id' => 'home' ) ).'</span>';
 }
 }?>
 </a> </li>
 
 <!--Facebookボタン-->
 <li class="facebook"> <a target="_blank" 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>
 <?php 
 if(function_exists('get_scc_facebook')) { 
 if( scc_get_share_facebook( array( 'post_id' => 'home' ) ) !== 0){
 echo '<span class="snstext">'.scc_get_share_facebook( array( 'post_id' => 'home' ) ).'</span>';
 }
 }?>
 </a> </li>
 
 <!--Google+1ボタン-->
 <li class="googleplus"> <a target="_blank" href="https://plus.google.com/share?url=<?php echo $url_encode;?>" ><i class="fa fa-google-plus"></i>
 <?php 
 if(function_exists('get_scc_gplus')) { 
 if( scc_get_share_gplus( array( 'post_id' => 'home' ) ) !== 0){
 echo '<span class="snstext">'.scc_get_share_gplus( array( 'post_id' => 'home' ) ).'</span>';
 }
 }?>
 </a> </li>
 
 <!--ポケットボタン-->
 <li class="pocket"> <a target="_blank" href="http://getpocket.com/edit?url=<?php echo $url_encode;?>&title=<?php echo $title_encode;?>"><i class="fa fa-get-pocket"></i>
 <?php 
 if(function_exists('get_scc_pocket')) { 
 if( scc_get_share_pocket( array( 'post_id' => 'home' ) ) !== 0){
 echo '<span class="snstext">'.scc_get_share_pocket( array( 'post_id' => 'home' ) ).'</span>';
 }
 }?>
 </a></li>
 
 <!--はてブボタン-->
 <li class="hatebu"> <a href="http://b.hatena.ne.jp/entry/<?php home_url(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-layout="simple" title="<?php bloginfo('name'); ?>"><i class="fa fa-hatena"></i><span style="font-weight:bold">B!</span>
 <?php if(function_exists('get_scc_hatebu')) { 
 if( scc_get_share_hatebu( array( 'post_id' => 'home' ) ) !== 0){
 echo '<span class="snstext">'.scc_get_share_hatebu( array( 'post_id' => 'home' ) ).'</span>';
 }
 }?>
 </a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async></script> 
 </li>
 
 <!--LINEボタン-->
 <li class="line">
 <?php if(is_mobile()) { //スマホの場合 ?>
 <a target="_blank" href="http://line.me/R/msg/text/?<?php echo $title_encode . '%0A' . $url_encode;?>"><span class="snstext">LINE</span></a>
 <?php } ?>
 </li>
 </ul>
</div>

sns.phpのコード

「sns.php」の「はてぶ」のカウント設定には簡単なコーディングミスがありましたので、修正しました。


<?php
 $url_encode=urlencode(get_permalink());
 $title_encode=urlencode(get_the_title());
 ?>

 <div class="sns_b">
 <ul class="clearfix">
 <!--ツイートボタン-->
 <li class="twitter"> 
 <a href="http://twitter.com/intent/tweet?url=<?php echo $url_encode ?>&text=<?php echo $title_encode ?>&via=<?php echo $twitter_name ?>&tw_p=tweetbutton" target="_blank"><i class="fa fa-twitter"></i><?php if(function_exists('scc_get_share_twitter')) echo (scc_get_share_twitter()==0)?'':'<span class="snstext">'.scc_get_share_twitter().'</span>'; ?></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;?>" target="_blank"><i class="fa fa-facebook"></i>
 <?php if(function_exists('scc_get_share_facebook')) echo (scc_get_share_facebook()==0)?'':'<span class="snstext">'.scc_get_share_facebook().'</span>'; ?></a>
 </li>

 <!--Google+1ボタン-->
 <li class="googleplus">
 <a href="https://plus.google.com/share?url=<?php echo $url_encode;?>" target="_blank"><i class="fa fa-google-plus"></i><?php if(function_exists('scc_get_share_gplus')) echo (scc_get_share_gplus()==0)?'':'<span class="snstext">'.scc_get_share_gplus().'</span>'; ?></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>
 <?php if(function_exists('scc_get_share_pocket')) echo (scc_get_share_pocket()==0)?'':'<span class="snstext">'.scc_get_share_pocket().'</span>'; ?></a></pre>
<pre> </li>

 <!--はてブボタン--> 
 <li class="hatebu"> 
 <a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-layout="simple" title="<?php the_title(); ?>"><span style="font-weight:bold">B!</span>
 <?php if(function_exists('scc_get_share_hatebu')) echo (scc_get_share_hatebu()==0)?'':'<span class="snstext">'.scc_get_share_hatebu().'</span>';
 ?></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async></script>
 </li>
 
 <!--LINEボタン--> 
 <li class="line">
 <?php if(is_mobile()) { //スマホの場合 ?>
 <a href="http://line.me/R/msg/text/?<?php echo $title_encode . '%0A' . $url_encode;?>" target="_blank"><span class="snstext">LINE</span></a>
 <?php } ?>
 </li> 
 </ul>

 </div>

css

スマホで改行がおかしくなったので、cssも修正。
それと色が派手すぎたのでシックな色に統一しました。


/*--------------------------------
SNS
---------------------------------*/
/* トップページ */
.sns_b {
margin-bottom: 20px;
}

/* 下ページ */
.post .sns_b {
margin-bottom: 37px;
}
.sns_b .snstext {
font-size: 12px;
vertical-align: top;
}

.sns_b ul {
list-style: none;
padding: 0;
margin: 0 0 20px;
}

.sns_b li {
float: left;
list-style: none;
margin-right: 10px;
margin-top: 10px;
}

.sns_b li a {
font-size: 15px;
position: relative;
display: block;
color: #fff;
border-radius: 2px;
text-decoration: none;
height: 20px;
line-height: 25px;
padding-top: 3px;
padding-right: 10px;
padding-bottom: 7px;
padding-left: 10px;
}

/* ツイッター */
.sns_b .twitter a {
background: #454545;
}

.sns_b .twitter a:hover {
background: #55acee;
}

.sns_b .twitter .snstext {
border-left: 1px solid #fff;
padding-left: 10px;
margin-left: 10px;
}

/* Facebook */
.sns_b .facebook a {
background: #454545;
}

.sns_b .facebook a:hover {
background: #3b5998;
}

.sns_b .facebook .snstext {
border-left: 1px solid #fff;
padding-left: 10px;
margin-left: 5px;
}

/* グーグル */
.sns_b .googleplus a {
background: #454545;
}

.sns_b .googleplus a:hover {
background: #c2635a;
}

.sns_b .googleplus .snstext {
border-left: 1px solid #fff;
padding-left: 10px;
margin-left: 5px;
}

/* はてぶ */
.sns_b .hatebu a {
background: #454545;
}

.sns_b .hatebu a:hover {
background: #2493b9;
}

.sns_b .hatebu .snstext {
border-left: 1px solid #fff;
padding-left: 10px;
margin-left: 3px;
}

/* LINE */
.sns_b .line a {
background: #454545;
}

.sns_b .line a:hover {
background: #219900;
}

/* Pocket */
.sns_b .pocket a {
background: #454545;
}

.sns_b .pocket .snstext {
border-left: 1px solid #fff;
padding-left: 10px;
margin-left: 5px;
}

.sns_b .pocket a:hover {
background: #c0392b;
}

本当はfeedlyも追加したのですが、ちゃんと機能しているかどうか自信が無いので、コードから外しています。
また、こんど紹介しますね。

See you !

© oh yeah Steve!

スポンサーリンク
スポンサーリンク
スポンサーリンク

シェアする

フォローする