Kanamii

伝えたい想いを自分らしく・・・

kanamii-739-1

スポンサーリンク

STINGERカスタマイズ

【STINGER PLUS】 ソーシャルボタンのテキストがスマホで表示されない原因と対処法は?

2016/11/17

WordPressテーマ「STINGER PLUS+」の初期設定とカスタマイズの途中で、ふと、パソコン以外の端末(タブレット・スマホ)では、ソーシャルボタンのテキストが表示されていないことに気が付きました。

こちらがパソコン表示。

kanamii-739-2

こちらがスマホ表示。

アイコンフォントの横のborderは任意で非表示にしていますが、これが原因ではなさそうです。

kanamii-739-3

「LINE」以外のテキストが表示されていない・・。
でも、これ、すべてのサイトに起きている現象じゃないんですね。

例えば、STNGER PLUS+ のデモサイトは、もちろん表示されてる。
テーマを利用されている他のサイトにお邪魔させていただくと、ほとんどのサイトは表示されてる。
でも、表示されていないサイトも一部見受けられました。

・・どうしてだろう?

スポンサーリンク

先に結論を

この記事を更新後、Twitterにてステ子ちゃんよりご回答をいただきました。

結論としては、全っ然!表示がおかしい訳ではなく、「SNS Count cache」を有効化してカウントを表示させた際に、シェア数が多い場合のスペースの問題を考慮した標準仕様だということです。

ありゃりゃりゃ・・これは早とちりの勘違い。

こんな時は、一人で暴走せずフォーラムで質問するべきでした。
大変失礼いたしました。

ということで、以下は、私のように(笑)「シェア数はたぶんそんなに増えないし、タブレットやスマホでもソーシャルボタンのテキストをカウント付きで表示させたい」という方におすすめのカスタマイズ方法となります。

パソコンでレスポンシブサイトのスマホ表示を確認する方法

パソコンのGoogle Chromeブラウザであらゆる端末の表示確認が簡単に行えます。
ブラウザ右上にある三本線「Google Chromeの設定」→「その他のツール」→「デベロッパーツール」→下記赤枠で囲んだアイコンをクリック。

kanamii-739-4

2016年6月現在では、以下の端末別に表示が確認できます。

  • Galaxy S5
  • Nexus 5X
  • Nexus 6P
  • iPhone 5
  • iPhone 6
  • iPhone6 Plus
  • iPad

修正後、iPhone6での現在の表示はこのようになっています。

kanamii-739-6

※各端末に切り替えを行った後は、必ず「F5キー」で画面を更新してから確認を行ってください。

※RSS・Feedly・Push7のボタン追加のカスタマイズ方法は、下記ページをご参照ください。

STINGER PLUS カウント付きオリジナルソーシャルボタンにRSS・Feedly・Push7を追加する方法

テキストが表示されている「LINE」と他のボタンのコードを見比べてみる

唯一テキストが表示されている「LINE」と表示されていない他のボタンの違いを探しました。
自分が理解しやすいように、コードの頭を揃えて、ジー・・っと見ます。

以下がTwitterのツイートボタンのコード。

2:クラス名
3:ツイッターへのリンク
4:アイコンフォント
5:テキスト
6:WordPressプラグイン「SNS Count Cache」適用時のカウント数のコード

そして以下がLINEボタンのコード。

2:クラス名
3:LINEへのリンク
4:アイコンフォント
5:テキスト
6:WordPressプラグイン「SNS Count Cache」適用時のカウント数表示は対象外なのでコードなし

ここで重要視するのは、5行目の「テキスト」。
LINEにはなくて、他のコードにあるコードは・・・

<?php echo $plug; ?>
これかな?

テキスト表示のカスタマイズは任意で

<?php echo $plug; ?>
何を呼び出すコードなんだろう?。。こんな時、知識がないと困りもの。

sns.php内に以下のコード、

style.css内に以下のコードを見つけました。

・・・あえてスマホ非表示のコードが入っているということなのでしょうか。
それとも、「SNS Count Cache」適用時に必要なコードなのかな?・・・
↑その通りでした。疑う必要なしですね。

タブレットやスマホでテキストを表示させたい場合は、以下のようにコードをコメントアウトします。

WordPressダッシュボード→外観→テーマ→テーマの編集→「sns.php」を開きます。

パソコンの「Ctrl」キー+「F」で表示される検索欄に<?php echo $plug; ?>と入力するとマークされるコードの、<?phpのすぐ後ろに//(半角)を入力するだけです。

※「LINE」以外のソーシャルボタン5か所の修正が必要です。

全てのテーマファイルの編集は「子テーマ」で行うことをおすすめします。
親テーマを編集される際には必ずバックアップをとり、テーマの取り扱いには十分ご注意ください。
▶子テーマについて

まとめ

全てではなく、ごく一部のテーマ適用サイトのソーシャルボタンのテキストが表示されないのが不思議でした。

  1. どこかの設定を忘れているから?
  2. プラグインの関係とか?
  3. WordPressのバージョンが違う?
  4. 表示されなかった人にはハワイ旅行が当たるとか?・・

おそらく4番かな?と思いましたが、見事に不正解。
正解は、プラグイン「SNS Count Cache」有効時に適用される標準仕様なので2番ですね。
標準仕様を疑うとはなんたる無礼者。お恥ずかしい限りです。。

ステ子ちゃん、お忙しい中ご回答を本当にありがとうございました。

▶STINGER PLUS・STINGER8・AFFINGER4 カスタマイズ全記事一覧へ

この記事が気に入ったら
いいね!しよう

Twitter で

Facebook・Twitterへ最新記事をお届けします

-STINGERカスタマイズ