記事を探す方はサイトマップへ

【SANGOカスタマイズ】おしゃれな自作SNSシェアボタンを設置する方法

 

どうも、SANGO愛好家のマクリン(@Maku_ring)です。

当ブログの外観は、サルワカさんがリリースされたSANGOをカスタマイズして利用しています。

参考

WordPressテーマ「SANGO」24の魅力SANGO

 

マクリン

元々サルワカデザインの大ファンだったので、リリース日に衝動買いしちゃいました!

テーマを変えてから早2ヶ月が経過しましたが、結果的に大満足のテーマ変更でした。

  • Googleのマテリアルデザインに遵守した、温かみのあるデザイン
  • センスが無くても手軽にオシャレなレイアウトにできる
  • 豊富すぎるショートコートがあり、後から装飾を追加する必要がない
  • ページ表示の高速化にこだわっている
  • テーマ作成者のサポートがしっかりしている

 

マクリン

当ブログのイケてるパーツは全部SANGOの機能。僕のカスタマイズはありません……!

 

SANGOに変えてからPVと回遊率が上がり、良いことづくめなのですが、一点だけ気になっていたことがあります。

 

マクリン

それはSNSシェアボタンがおしゃれすぎて、SANGOユーザーだとすぐにバレてしまうこと……。

おしゃれなSNSシェアボタン(ソーシャルボタン)は、SANGOのアイデンティティでもありますが、ちょっと変えてみたいと思いまして……。

 

マクリン

「SANGOオリジナルボタンから変えたい」という失礼な申し出にも関わらず、快くご協力くださったサルワカさん()には感謝しかありません!

 

本記事のカスタマイズを行うことで、SANGOオリジナルデザインから下記デザインに変えることができます。

そんなわけで今回の記事は「SANGOに自作SNSシェアボタンを設置する方法」について書いていきます。

 

SANGOに自作SNSシェアボタンを設置する方法

SANGOの特長のひとつといえば素早いページ表示。本ブログもSANGOに変えてから、サイト速度テスト「Google testmysite」での読み込み時間が10秒(前テーマ)から4秒まで縮まっています。

 

マクリン

ところが、各SNSが提供しているボタンをそのまま導入すると重くなるのです……!

 

どうしても画像・JavaScriptの読み込みに時間を要し、ページ表示を遅くしてしまう原因になってしまいます。

そこで自作ボタンの登場です。通常は各ロゴマークに画像を使うところ、今回はページを重くしないようWebアイコンフォントのFont Awesomeを活用します。

 

マクリン

SANGOはすでにFont Awesomeが実装済みなので、CSS上で呼び出すだけで使えますよ。

 

今回はオリジナルボタンで備えている「Facebook・Twitter・はてなブックマーク・Pocket・LINE」に加えて「RSS・feedly」を追加しました。

はてなブックマークだけは、Font Awesomeで代わりになりそうなアイコンがないため、あらかじめ準備することにします。

 

MEMO
なお本記事では、SANGOの子テーマを使ってカスタマイズを行います。子テーマを作っておきましょう。
参考

WordPressで子テーマを活用して安全にカスタマイズを行う方法SANGO

 

1. はてなブックマーク用のロゴマークを準備

「外観 テーマの編集」から子テーマのstyle.cssを開き、下記CSSを追加します。

style.css
/* Font Awesome hatena bookmark */
.fa-hatena:before {
content: "B!";
font-family: Verdana;
font-weight: bold
}

 

マクリン

これだけで、はてなお馴染みのB!マークが使えるようになりますよ!

 

2. SNSシェアボタンのスタイルを入力

次にSNSボタンのスタイルを作成します。

先ほどと同じく、子テーマのstyle.cssに下記CSSを追加します。

style.css
/* SNSボタン */
.share {margin-top : 5px;}
.share ul {margin : 0 auto;
    padding : 0;
    list-style : none;}
.share li a {display : block;
    padding : 10px;
    color : #fff;     /*ボタンの文字色*/
    font-size : 14px;
    text-decoration : none;
    text-align : center;
    border-radius:3px;}
.share li a:hover {opacity :0.8;
    color : #fff;}
.share li a:visited{ color: #fff;}
.share ul:after {content : "";
    display : block;
    clear : both;}

/*twitterボタンの背景色*/
.tweet a{background-color : #55acee;}
/*facebookボタンの背景色*/
.facebook a{background-color : #315096;} 
/*hatenaボタンの背景色*/
.hatena a{background-color : #008fde;}
/*LINEボタンの背景色*/
.lines a{background-color: #00c300;}
/*Pocketボタンの背景色*/
.pocket a{background-color :#f03e51;}
/*RSSボタンの背景色*/
.rss a{background-color: #ff8c00;}
/*feedlyボタンの背景色*/
.feedly a{background-color: #6cc655;}

.share li {float : left;
    width : 24%;
    margin:0.5% 0.5% 0.5% 0.5%;
margin-top:5px;}
MEMO
ボタンの文字色・背景色・角の丸みはお好みで変更ください。

 

今回のデザインは、ボタンが横に4つ並ぶ4列表示としています。

これは最後の記述「.share li」中にあるwidth(幅)を24%としているためですが、もし列表示を変えたい場合、適宜この数字を変更してください。

本ブログのようにPC閲覧時とスマホ閲覧時でボタンの配列を変えたい場合、さらに下記CSSを追加してスマホ用のボタンスタイルを追加してください。

style.css
@media screen and (max-width:480px){
.share li {
  width : 30%;
  margin:1.4% 1.4% 1.4% 1.8%;}
}

 

マクリン

僕はPC:4列表示、スマホ:3列表示にしていますよ!

 

3. 子テーマに「sns.php」を作成

SNSボタンのスタイルまで決定したので、次はボタンの中身を作成していきます。

つまりPHPにSNSボタンのコードを記述していくのですが、コードの中身がわりと長めです。

そこで別途、SNSボタン用のPHP「sns.php」を作成して、その中にボタンのコードを記述。設置したい箇所に「sns.php」を呼び出す形をとっていくことにします。

FTPソフトもしくはサーバーのファイルマネージャーを使用して、sns.phpを作成します。

参考

【FileZillaの使い方】WordPressでFTPソフトを使おうサルワカ

 

ここではエックスサーバーのファイルマネージャーで作成する手順を説明します。

エックスサーバーのインフォパネルにログイン後、ファイルマネージャーからさらにログインします。

 

「ドメイン名 public_html wp_content themes sango-theme-child」とたどっていくと、下記画面に入ります。

ファイル名の「sns.php」を入力後、ファイル作成を押すことでファイル一覧に「sns.php」が出来ています。

 

4. SNSシェアボタンの設置コードを入力

ダッシュボードに戻って「外観 テーマの編集」に入ると、子テーマ内にsns.phpがあります。

sns.phpにSNSボタンのコードを入力していきます。

sns.php
<?php
$url_encode=urlencode(get_permalink());
$title_encode=urlencode(get_the_title()).'|'.get_bloginfo('name');
?>
  
<div class="share">
	
    <ul>
  
<!--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=300,width=600');return false;">
        <i class="fa fa-facebook"></i> Facebook <?php if(function_exists('scc_get_share_facebook')) echo (scc_get_share_facebook()==0)?'':scc_get_share_facebook(); ?></a>
</li>
  
<!--ツイートボタン-->
<li class="tweet"><a href="http://twitter.com/intent/tweet?url=<?php echo $url_encode ?>&text=<?php echo $title_encode ?>&tw_p=tweetbutton" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;">
        <i class="fa fa-twitter"></i> Twitter <?php if(function_exists('scc_get_share_twitter')) echo (scc_get_share_twitter()==0)?'':scc_get_share_twitter(); ?></a>
</li>
  
<!--はてなボタン--> 
<li class="hatena"><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> Hatena <?php if(function_exists('scc_get_share_hatebu')) echo (scc_get_share_hatebu()==0)?'':scc_get_share_hatebu(); ?></a>
</li>
 
<!--LINEボタン-->   
<li class="lines">
<a href="http://line.me/R/msg/text/?<?php echo $title_encode . '%0A' . $url_encode;?>"><i class="fa fa-comment" aria-hidden="true"></i> 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 <?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/i/subscription/feed/https://makuring.com/feed" target="blank"><i class="fa fa-rss-square"></i> feedly <?php if(function_exists('scc_get_follow_feedly')) echo (scc_get_follow_feedly()==0)?'':scc_get_follow_feedly(); ?></a></li>   
</ul>
</div>
MEMO
青字部分でボタン内に表示するFont Awesomeのアイコンとテキスト名を指定しています。お好みで変更ください。feedlyボタンのコードには、自分のドメインを入れる部分(赤字)がありますので、こちらは必ずご自身のものに変えてください。

 

5. 子テーマに「entry-header.php」ならびに「entry-footer.php」を作成

SNSボタンのマテリアルは準備できたので、あとはボタンを設置する場所を子テーマ内に作ります。

  • タイトル下にSNSボタンを設置する場合  「entry-header.php」を作成
  • 記事下にSNSボタンを設置する場合  「entry-footer.php」を作成
  • 上記二箇所にSNSボタンを設置する場合  両方を作成

 

sns.php作成時と同じく、ファイルマネージャーにログインします。手順は下記のとおりです。

  1. 子テーマ内にpartsというフォルダーを作成する
  2. 作成したpartsフォルダー内にsingleというフォルダーを作成する
  3. 作成したsingleフォルダー内に、親テーマからコピーしたentry-footer.php(entry-footer.php)をアップロードする
MEMO
すなわちsango-theme-child/parts/single/entry-footer.php(entry-header.php)というフォルダー構造です。

 

具体的な方法は、下記2枚の画像をご参考ください。

「Parts」と「Single」2つのフォルダ作成が必要ですが、フォルダ作成のウィンドウにフォルダ名を入力して押下することでフォルダが出来上がります。

 

「sango-theme  parts single」と入って、親テーマからentry-footer.php(entry-footer.php)をダウンロードして、子テーマのsingleフォルダ内にアップロードしましょう。

6. SNSシェアボタンの設置コードに置き換え

ここまで来ればもう一息です。

ダッシュボードに戻って「外観 テーマの編集」に入ると、子テーマの「parts single」内に、親テーマから複製したentry-footer.php(entry-footer.php)があります。

それぞれ以下の記述がSANGOオリジナルSNSボタンのものです。

entry-header.php
<?php if(get_option('open_fab')) insert_social_buttons('belowtitle');//通常のボタン ?>
entry-footer.php
<?php insert_social_buttons(); //シェアボタン?>

 

上記二箇所のうち、自作ボタンに変えたい方を下記コード(sns.phpを呼び出すコード)に置き換えてください。

entry-header.php(entry-footer.php)
<?php get_template_part( 'sns' ); ?>

以上で設置完了です。

 

マクリン

我ながら、なかなかイイ感じのSNSボタンになりましたよ!

まとめ

今回の記事は「SANGOに自作SNSシェアボタンを設置する方法」について書きました。

 

マクリン

SNSボタンのデザインを変えるだけで、ガラリと印象が変わるものですね!

ボタン自体はどのテーマでも使えるものなので、お気に召したら気軽に持っていってください。

サルワカさん・ヨスさんを始め、下記記事にも大変お世話になりました。この場を借りて御礼申し上げます。

どうも、マクリンでした。