WordPressテーマ「STINGER PLUS+」の初期設定とカスタマイズの途中で、ふと、パソコン以外の端末(タブレット・スマホ)では、ソーシャルボタンのテキストが表示されていないことに気が付きました。
こちらがパソコン表示。
こちらがスマホ表示。
アイコンフォントの横のborderは任意で非表示にしていますが、これが原因ではなさそうです。
「LINE」以外のテキストが表示されていない・・。
でも、これ、すべてのサイトに起きている現象じゃないんですね。
例えば、STNGER PLUS+ のデモサイトは、もちろん表示されてる。
テーマを利用されている他のサイトにお邪魔させていただくと、ほとんどのサイトは表示されてる。
でも、表示されていないサイトも一部見受けられました。
・・どうしてだろう?
スポンサーリンク
Contents
先に結論を
この記事を更新後、Twitterにてステ子ちゃんよりご回答をいただきました。
「SNS Count cache」プラグインを有効化するとシェアされた時に数字が入るので文字は消える仕様です。数字が入るまでは寂しいので無効化でも良いかも https://t.co/CJdgQH7Odw
— ステ子@STINGER公式 (@WPSTINGER) 2016年6月11日
結論としては、全っ然!表示がおかしい訳ではなく、「SNS Count cache」を有効化してカウントを表示させた際に、シェア数が多い場合のスペースの問題を考慮した標準仕様だということです。
ありゃりゃりゃ・・これは早とちりの勘違い。
こんな時は、一人で暴走せずフォーラムで質問するべきでした。
大変失礼いたしました。
ということで、以下は、私のように(笑)「シェア数はたぶんそんなに増えないし、タブレットやスマホでもソーシャルボタンのテキストをカウント付きで表示させたい」という方におすすめのカスタマイズ方法となります。
パソコンでレスポンシブサイトのスマホ表示を確認する方法
パソコンのGoogle Chromeブラウザであらゆる端末の表示確認が簡単に行えます。
パソコンの「F12キー」または、ブラウザ右上にある三本線「Google Chromeの設定」→「その他のツール」→「デベロッパーツール」→下記赤枠で囲んだアイコンをクリック。
2016年6月現在では、以下の端末別に表示が確認できます。
- Galaxy S5
- Nexus 5X
- Nexus 6P
- iPhone 5
- iPhone 6
- iPhone6 Plus
- iPad
修正後、iPhone6での現在の表示はこのようになっています。
※各端末に切り替えを行った後は、必ず「F5キー」で画面を更新してから確認を行ってください。
----パソコンでの各端末の表示確認方法 ここまで----
RSS・Feedly・Push7のボタン追加のカスタマイズ方法は、下記ページでご紹介しています。
テキストが表示されている「LINE」と他のボタンのコードを見比べてみる
唯一テキストが表示されている「LINE」と表示されていない他のボタンの違いを探しました。
自分が理解しやすいように、コードの頭を揃えて、ジー・・っと見ます。
以下がTwitterのツイートボタンのコード。
1 2 3 4 5 6 7 |
<!--ツイートボタン--> <li class="twitter"> <a onclick="window.open('//twitter.com/intent/tweet?url=<?php echo $url_encode ?>&text=<?php echo $title_encode ?>&via=<?php echo $twitter_name ?>&tw_p=tweetbutton', '', 'width=500,height=450'); return false;"> <i class="fa fa-twitter"></i> <span class="snstext <?php echo $plug; ?>" >Twitter</span> <?php if(function_exists('scc_get_share_twitter')) echo (scc_get_share_twitter()=='0')?'':'<span class="snscount">'.scc_get_share_twitter().'</span>'; ?></a> </li> |
2:クラス名
3:ツイッターへのリンク
4:アイコンフォント
5:テキスト
6:WordPressプラグイン「SNS Count Cache」適用時のカウント数のコード
そして以下がLINEボタンのコード。
1 2 3 4 5 6 |
<!--LINEボタン--> <li class="line"> <a href="//line.me/R/msg/text/?<?php echo $title_encode . '%0A' . $url_encode;?>" target="_blank"> <i class="fa fa-comment"></i> <span class="snstext">LINE</span></a> </li> |
2:クラス名
3:LINEへのリンク
4:アイコンフォント
5:テキスト
6:WordPressプラグイン「SNS Count Cache」適用時のカウント数表示は対象外なのでコードなし
ここで重要視するのは、5行目の「テキスト」。
LINEにはなくて、他のコードにあるコードは・・・
<?php echo $plug; ?>
これかな?
テキスト表示のカスタマイズは任意で
<?php echo $plug; ?>
何を呼び出すコードなんだろう?。。こんな時、知識がないと困りもの。
sns.php内に以下のコード、
1 |
$plug = "smanone" |
style.css内に以下のコードを見つけました。
1 2 3 4 |
/* スマートフォンは表示しない */ .smanone { display: none; } |
・・・あえてスマホ非表示のコードが入っているということなのでしょうか。
それとも、「SNS Count Cache」適用時に必要なコードなのかな?・・・
↑その通りでした。疑う必要なしですね。
タブレットやスマホでテキストを表示させたい場合は、以下のようにコードをコメントアウトします。
WordPressダッシュボード→外観→テーマ→テーマの編集→「sns.php」を開きます。
パソコンの「Ctrl」キー+「F」で表示される検索欄に<?php echo $plug; ?>と入力するとマークされるコードの、<?phpのすぐ後ろに//(半角)を入力するだけです。
1 |
<?php //echo $plug; ?> |
※「LINE」以外のソーシャルボタン5か所の修正が必要です。
やむおえず親テーマを編集される際には必ずバックアップをとり、テーマの取り扱いには十分ご注意ください。
▶子テーマについて
まとめ
全てではなく、ごく一部のテーマ適用サイトのソーシャルボタンのテキストが表示されないのが不思議でした。
- どこかの設定を忘れているから?
- プラグインの関係とか?
- WordPressのバージョンが違う?
- 表示されなかった人にはハワイ旅行が当たるとか?・・
おそらく4番かな?と思いましたが、見事に不正解。
正解は、プラグイン「SNS Count Cache」有効時に適用される標準仕様なので2番ですね。
標準仕様を疑うとはなんたる無礼者。お恥ずかしい限りです。。
ステ子ちゃん、お忙しい中ご回答を本当にありがとうございました。