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

FYI
【PR】本ページはプロモーションが含まれています

 

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

参照 WordPress無料テーマ STINGER6（wp-fun.com）

※「STINGERシリーズ」は現在では有料テーマになりました。

スポンサーリンク

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も追加したのですが、ちゃんと機能しているかどうか自信が無いので、コードから外しています。
また、こんど紹介しますね。

by T.Y.

スポンサーリンク

WordPress Themes Media



【PR】以下はプロモーションが含まれています

SWELL

WELLは、国内シェアNo.1のワードプレステーマです。
シンプルなデザイン性で高機能なサイトをすぐにつくることができます。

詳しくはこちら

STORK19

STORK19は、使いやすいブロックエディタが特徴です。
デザインも美しく、スピーディーに記事を書きたい方にオススメです。

詳しくはこちら

ARKHE

ARKHEは制作会社さんにオススメしたいワードプレステーマです。
拡張性が欲しい。ローコードでサイトを作りたいという要望に応えます。

詳しくはこちら