なるろぐ

生活の豆知識やイベント情報、ガジェットのことなどをお届け!

サイト運営

【StingerPlus】PCとスマホでSNSアイコンの数を変える方法と記事上にもSNSボタンを追加する方法

WordPressテーマ「Stinger Plus」のSNSシェアボタンを記事上に表示させたり、ボタンの数を減らしたり、ついでにスマホとPCで表示数を替えたりする方法です。

ただし、自己流かつ親テーマを触りますので、怖い方は真似されないようにして下さい。

スポンサーリンク
 

記事上にもSNSボタンをつける

当記事を見ていただくとわかるように、タイトルと記事の間にSNSシェアボタンを表示させています。これは、様々な大手サイトさんがシェアボタンを記事上にも表示されており、効果が高そうでしたので採用しました。

やり方は簡単です。親テーマのsingle.phpに書かれているのsnsボタンを表示させるコードをコピペするだけです。

 

StingerPlusのsinglephpの場所

個別投稿をクリック

 

外観→テーマの編集→右側にずらっとファイル名が出てきますので、下の方にある「個別記事(single.php)」をクリックして下さい。

クリックすると、single.phpの編集画面になります。

まず、コピーするのは

「//ソーシャルボタン読み込み」と書かれた1行です。

ソースからsnsボタンを読み込むコードをコピーする

ソーシャルボタン読み込みの行をコピー

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

これですね。

この行をコピーしたら、

StingerPlusのソースにsnsボタンを読み込むコードをペーストする

↑ここにこんな感じでペーストします。

 

目印は「 //本文 」と書かれた行で、この上の「<div class="mainbox">」と「</div>」の間にペーストする感じです。

この場所は、日付表示と本文の間になっていますので、上手くできたら、この記事の場所にSNSボタンが並ぶはずです。

数を減らしてなければ2段で6個並びますね。

これで完了です。

つぎに、PCとスマホでSNSシェアボタンを表示させたりさせなかったりします。

スポンサーリンク
 

PCとスマホでSNSシェアボタンの表示数を変える

snsシェアボタンの表示について

本来でしたら、StingerPlusに用意されているシェアボタンを全部並べたほうがユーザビリティが良いのかもしれませんが、ズラズラと並ぶのは好きではないことと、うちの場合はG+とPのシェア数が全部合わせても1年で二桁止まりでしたので思い切って消してしまいました。

というわけで、Google+とPocketは個別ページに表示するsnsボタンのコードをsns.phpファイルからから削除しています。もちろんPCの表示からもスマホの表示からも消えてなくなります。

LINEについては、スマホだけに表示させることにしました。これだと、スマホ表示のsnsシェアボタンの数4つになり、縦横2×2で並びますので、都合が良い感じです。PCだと3つが横に並びますので、こちらも良い感じですね。

これらをまとめると

PC表示は
Twitter・Facebook・はてな

スマホ表示は
Twitter・Facebook
はてな・LINE

こんな感じになります。

シェアボタンの表示数を変えた方法

完全に自己流ですし、StingerPlusの機能を見て思いついたことですので、他のテーマでは工夫しないと使えないかと思います。

どういうことかというと、記事エディッタにある

StingerPlusのテキストエディッタのボタン

これです。

「スマホに表示しないボックス」

「PCに表示しないボックス」

素晴らしい。

(自分で作るのが面倒な)
まるで魔法のボックスです!

というわけで、これをsns.phpに書いていきます。

具体的には

「スマホに表示しないボックス」は

<div class="smanone"> </div>

「PCに表示しないボックス」は

<div class="pcnone"> </div>

これらで、囲んであげました。

ですが、よく考えるとPCで見た時の画面からLINEのボタンだけを消せばいいだけですので、使ったのはPCに表示しないボックスだけです。

StingerPlusでsnsシェアボタンの表示数を変える

簡単ですね。

スマホでの表示は

StingerPlusでのsnsシェアボタンのスマホでの表示

このような感じになりました。4つだけですのですっきりしていると思います。

この方法でしばらくやっているのですが、とりあえず、今のところ問題有りませんので良いのですが、これがseoに対してどうなのかと言われても分かりません:;(∩´﹏`∩);:

 

注意1:phpファイルを書き換える時は、必ずすぐにバックアップから元の内容に書き換えられるように準備してから行って下さい。具体的には、1クリックか2クリックで元に戻せるようにしておいたほうが良いです。特にfunction.phpでミスするとブログが真っ白、管理画面も真っ白になる場合があり、ftpかサーバーのファイルマネージャーからしか元に戻せなくなります。

注意2:この方法は便利なのですが、AdSenseの広告に対して「PCのとスマホで表示を替えよう」と同じようなことをしたらポリシー違反だったと記憶しています。私の場合はfunction.phpにPCとスマホで読み込む広告コードを変える記述をして表示するようにしています。

まとめ

自分が好きな様にカスタマイズできるのが魅力では有りますが、それ以上に、記事をちゃんと書くことこそがブログかと思います(猛省)

なお、カスタマイズする時は、必ずブログ全部のバックアップを取っておいたほうが無難です。

ではノシ

スポンサーリンク

-サイト運営