WordPressSTINGER7

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

eye_stinger7

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

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

PCでの表示
20160519a

スマホでの表示
20160519b

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

子テーマの使用方法

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

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

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

IcoMoonのWebフォントを準備

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

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

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

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

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」を編集します。
この1行を消すだけでボタンが表示されなくなります↓

<?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」のカスタマイズ記事をまとめました。
WordPress
\記事が役に立ったらシェアしてね/
うぇぶあしび

comment

  1. Kou より:

    説明が非常にわかりやすいので、いつも参考にさせてもらっています。
    今回の内容もまさに今自分がやりたかったことなので、さっそくコピペコピペで試してみたんですが、ボタンのサイズは横長になったしリンクも機能している様子ではあるものの、webフォントの部分が表示されません。(つまりSNSボタンが色のついたタダの四角形になってしまっています)

    もし良ければurlをお知らせするので、こうしたら改善するかもというヒントなど頂けないでしょうか…?

  2. DICE DICE より:

    Kou様

    コメントありがとうございます!
    Icomoonのフォルダが適切な場所にアップされているか、「header.php」にちゃんと読み込みのコードが挿入されているかチェックしてみてください。
    URLを教えて頂ければ何か分かるかもしれませんので、フッターのお問い合わせからでもメッセージください(^^)

  3. Kou より:

    先週コメントさせてもらったKouと言います。即レスどうもありがとうございました!
    あの後すぐにお問い合わせからurl込みのメッセージ送らせてもらったんですが、もしかして迷惑メールの方にでも行ってないでしょうか…笑

    また、ど素人なりに原因を考えていたんですが、zipを解凍したフォルダ「icomoon」(便宜上A)内には「__MACOSX」と「icomoon」(便宜上B)の2つが入っています。

    そして、上記の「icomoon」(A)をそのままstyle.cssと同じ階層(子テーマ)にUPする際、header.phpに記述する読み込みのためのコードは以下ですよね?

    (http://web-ashibi.net/archives/799より)
    &lt;link rel=&quot;stylesheet&quot; href=&quot;/icomoon/icomoon.css"&gt;

    つまり、icomoon(A)内のicomoon(B)内のicomoon.cssを指定するはずが、1つ「/icomoon」が足りない為に読みこめていない状況ではないかと思ったんですが…

    この手のことは自信がなく、下手に触ってより重大なミスが起こっても怖いので、ご意見いただければ有難いです。

  4. DICE DICE より:

    Kou様

    返信遅くなってすいません。最近パタパタしてまして(^^;)
    「zipを解凍したフォルダ「icomoon」(便宜上A)」はzip形式フォルダではないでしょうか?
    フォルダを右クリックでファイルの種類が確認できると思います。
    おっしゃるようにアップロードするのは「icomoon」(便宜上B)の方ですね。
    恐らくこれで解決できるかと思われますが、また何かありましたらメッセージくださいませ(^^)

  5. KAN太郎 より:

    担当者様

    初めまして!いつも参考にさせていただいてます。KAN太郎と申します。

    早速質問なんですが、「次ページ」についてです。
    ページ下にある「1 2 ・・・Next&gt;&gt;」の部分が、正常に表示されません。

    カスタマイズはウェブアシビの通り、ほとんどそのままです。
    私はSTINGER PLUSを使っています。それがいけないのでしょうか?

    お忙しいと思いますが、お時間のあるときにでも宜しくお願い致します。

    2016/6/23 KAN太郎

  6. DICE DICE より:

    KAN太郎様

    コメントありがとうございます!
    ページナビゲーションが表示されないとのことですが、「home.php」を編集しましたか?
    編集していたらその時に「 <?php get_template_part( 'st-pagenavi' ); //ページナビ読み込み ?> 」という部分を削除していないでしょうか?

    </aside>
    <?php get_template_part( 'sns-top' ); //ソーシャルボタン読み込み ?>
    <?php get_template_part( 'st-pagenavi' ); //ページナビ読み込み ?>
    </article>

    という風にソーシャルボタンを読み込むコードのすぐ下にあったと思います。
    もしなければ、ページナビ読み込みのコードを復活させれば表示されるようになると思います。
    確認してみてくださいね!

  7. KAI より:

    こんにちは 普段お世話になっております。
    此方のカスタマイズも参考にさせて頂き実行してみたところ、大方うまくいったのですが
    .sns ul li {
    width: 15%; 
    このままですと一番右のLINEボタンの右余白が
    一番左にあるTwitterボタンの左余白より大きくなったため16.6%とした所一応問題なく解決でき、スマホの方も16.6%の1列ボタン表示にしております。
    ただ同じstinger7を利用の方が15%設定でもちゃんと真ん中に揃えられて、自分のサイトだと駄目なのは何が原因と考えられますでしょうか? 

    あと此方の記事とは全く関係ないのですが、サイトのプロフィールページだけうぇぶあしび様のように固定ページで作り、サイト上部のメニューバーから飛べるようリンクしているのですが
    その固定ページリンクがサイトTOPページと記事ページのフッターの部分と
    各記事ページの終わり際に自動挿入されてしまうのですが、これを表示させないようにするにはどうすればいいでしょうか?

    もし解決策などがあれば教えて頂きたいです。

    • DICE DICE より:

      返信遅くなってすいません(^^;)
      サイトを見てみないと正確には分かりませんが、ボタンのCSSは他の部分のCSSが影響しているのではないでしょうか?
      でも希望通りに表示できているならそのままで良いと思いますよ♪

      メニューのリンクは「外観 → メニュー」でフッター用のメニューを編集するか、ウィジェットで記事下一括表示のところに何か入っていないか確認してみると良いと思います!

タイトルとURLをコピーしました