STINGER7：記事下&トップページのシェアボタンをカスタマイズ！

今回はSTINGER7の記事下や、トップページにあるシェア用のボタンをカスタマイズしていこうと思います。
と言ってもボタンを押しやすいように少し大きくするのと、アイコンを入れ替えるぐらいです。

完成するとこんな感じです↓

PCでの表示

スマホでの表示

コピペでサクッと終わるのでSTINGER7をお使いの方は参考にしてみてください。
それじゃあいってみよう！

子テーマの使用方法

テーマファイルをカスタマイズする時は子テーマを使うことが推奨されています。
子テーマを使用すると、テーマ本体をアップデートしてもカスタマイズ内容が消えないというメリットがあります。

STINGER7での子テーマの使用方法はこちら↓
STINGER7：テーマのインストールと子テーマの使用方法

特にSTINGER7の場合は「header.php」を編集する際には注意が必要です。
こちらの記事を参考にしてください↓
STINGER7：親テーマの任意のファイルを子テーマで編集する方法

IcoMoonのWebフォントを準備

STINGER7では最初「Font Awesome」というWebフォントが使われていますが、この中には「はてブ」や「LINE」のアイコンは含まれていません。

今回は「はてブ」や「LINE」もWebフォントで表示するので、オリジナルでWebフォントを作れる「IcoMoon」というサービズを利用します。

前回の記事で作ったWebフォントを配布していますのでご自由にダウンロードしてお使いください↓

WordPress：サイドバーにSNSやfeedlyのオリジナルボタンをオシャレに設置！

...

web-ashibi.net

2016.05.16

IcoMoonの導入方法も前回の記事に書いてありますので、まずはそこまで準備してくださいね。

記事下のボタンの編集

Webフォントの準備ができたらまずは記事下のボタンをカスタマイズしましょう。
「sns.php」の中身を全て以下のコードに置き換えてください↓

<?php if ( trim( $GLOBALS["stdata12"] ) == '' ) {
	if ( trim( $GLOBALS["stdata25"] ) !== '' ) {
		$twitter_name = esc_attr( $GLOBALS["stdata25"] );
	}else{
		$twitter_name = '';
	}

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

	<div class="sns">
	<h5>この記事をシェアする！</h5>
	<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"><span class="icon-twitter"></span><?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"><span class="icon-facebook"></span><?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"><span class="icon-google-plus"></span><?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"><span class="icon-pocket"></span><?php if(function_exists('scc_get_share_pocket')) echo (scc_get_share_pocket()==0)?'':'<span class="snstext">'.scc_get_share_pocket().'</span>'; ?></a></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 class="icon-hatena"></span><?php if(function_exists('scc_get_share_hatebu')) echo (scc_get_share_hatebu()==0)?'':'<span class="snstext"><span class="hatebno">'.scc_get_share_hatebu().'</span></span>';
 ?></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
		</li>

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

	</div> 

	<?php
}

「この記事をシェアする！」っていう文章のところはお好きな文字に変えてもオッケーです♪

トップページのボタンの編集

次はトップページです。
「sns-top.php」の中身を全て以下のコードに置き換えましょう↓

<?php if ( trim( $GLOBALS["stdata12"] ) == '' ) {
	if ( trim( $GLOBALS["stdata25"] ) !== '' ) {
		$twitter_name = esc_attr( $GLOBALS["stdata25"] );
	}else{
	$twitter_name = '';
	}
?>

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

<div class="sns">
	<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"><span class="icon-twitter"></span>
		<?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;?>"><span class="icon-facebook"></span>
		<?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;?>" ><span class="icon-google-plus"></span>
		<?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;?>"><span class="icon-pocket"></span>
		<?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'); ?>"><span class="icon-hatena"></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="async"></script>

		</li>

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

<?php
}

トップページにソーシャルボタンを表示したくない場合

トップページにはボタンを表示したくない場合は「home.php」を編集します。
この１行を消すだけでボタンが表示されなくなります↓

<?php get_template_part( 'sns-top' ); //ソーシャルボタン読み込み ?>

簡単ですね！

CSSで仕上げ！

最後にcssで見た目を調整します。
以下のコードを「style.css」に追加してください↓

.sns {
	text-align: center;
}
.sns h5 {
	color: #666; /* ボタン上の文字のスタイル */
}
.sns ul li {
	width: 30%;
	font-size: 14px;
	line-height: 27px;
}
.sns ul li a {
	height: 30px;
	padding: 8px 0;
}
.sns span.icon-hatena,
.sns span.icon-pocket,
.sns span.icon-twitter,
.sns span.icon-facebook
 {
	vertical-align: middle;
}
span.icon-google-plus {
	font-size: 130%;
	vertical-align: middle;
}
span.icon-line {
	font-size: 120%;
	vertical-align: middle;
}
@media only screen and (min-width: 781px) { /* PCでの表示 */
.sns ul li {
	width: 15%;
}
.sns ul li a {
	font-size: 18px;
}
.snstext {
	font-size: 18px;
}
}

微妙に色々と細かい調整したら長くなってしまいました(^^;)
でもこれでPCでもスマホでもキレイに表示できると思います！

まとめ

ボタンのデザインはある程度サイズがあった方が押しやすいですよね。
STINGER7を使っている方は参考にしてみてください♪

これで少しでもシェアが増えてくれますように（笑）

STINGER7のカスタマイズ記事をまとめました↓

STINGER7：カスタマイズまとめ

このブログでも使用させて頂いているWordPressテーマ「STINGER7」のカスタマイズ記事をまとめました。

web-ashibi.net

2016.03.24