Stinger3でSNSボタンの表示切り替え

公開日: : 最終更新日:2014/03/25 Stinger , ,

先日投稿した「Stinger3にfeedlyボタンとPocketボタンを追加する」でSNSボタンに
feedlyとPocketのボタンを追加したのですが、スマホで見ると追加したボタンが
追尾型のSNSボタンの幅をはみ出て、投稿にかぶって表示されて
とても見にくい状態になっていることに気がつきました。

そこで、対策としてPC表示の場合はfeedlyとPocketのボタンを表示して
スマホ表示の場合はfeedlyとPocketのボタンを表示しないようにしてみました。

PCとスマホでの表示を切り替える

まずは今表示されているデバイスがPCなのかスマホなのかを
切り分ける必要があります。

そんな便利な関数は無いのかと探すと、ありました、「wp_is_mobile()」。
「wp_is_mobile()」はスマホで表示された場合は「True」、そうで無い場合は「False」が
返ってくるようです。

ですから「wp_is_mobile()」を利用して

で切り分ければ上手くいきそうです。

Stinger3に反映してみる

Stinger3でSNSボタンを表示している箇所が2つあるので
その両方に反映して見ました。
まずは「fotter.php」です。
「はてなブックマーク」への追加ボタンを表示する部分の下に
「wp_is_mobile()」ではさんで

を追加します。

同じように「sns.php」も同様に挟みます。

こうすることでPC表示バージョンの場合はfeedlyとPocketのボタンを表示して、
スマホバージョンではfeedlyとPocketのボタンは表示されません。

これでスマホバージョンでも表示が崩れることなく投稿が見やすくなりました。

スポンサーリンク
  • このエントリーをはてなブックマークに追加
  • 14 follow us in feedly

関連記事

kaoup

Stinger3にアドセンス規約違反があるかも?

Stinger3にアドセンス規約違反があるかも? このサイトでも利用させてもらっている Word

記事を読む

wordpress-logo-stacked-rgb

Stingerのスマホ用アドセンス表示問題

当ブログでも利用させていただいている SEO対策とアフィリエイトに強いWordPressテーマSt

記事を読む

wordpress-logo-stacked-rgb

ブログのテーマを話題の「Stinger3」にしてみました。

@ENJILOG さんが作ってくださっている 無料のWordPressテーマ「stinger3」に

記事を読む

wordpress-logo-stacked-rgb

Stinger3で出ていた構造化データエラーが今さらながら解消

「構造化データエラー」解消 少し前にStinger3で話題になっていた 「WordPressユー

記事を読む

wordpress-logo-stacked-rgb

Stinger3で管理画面が真っ白になる対処法

Stinger3で管理画面が真っ白に WordPressで無料のテーマ「Stinger3」をインス

記事を読む

stinger3

Stinger3にFeedlyを乗っ取られる

Feedlyに表示される画像がStinger3だらけに このサイトがFeedlyでどれくらい登録さ

記事を読む

kaoup

STINGER5がリリースされましたね。

STINGER5がリリースされましたね。 早速ダウンロードして見ました。 STING

記事を読む

not_found

Stinger3の404エラーページカスタマイズしてみました

Stinger3の404エラーページカスタマイズ Stinger3の404エラーページを少しだけカ

記事を読む

wordpress-logo-stacked-rgb

Stinger3にfeedly、Pocketボタンを追加

Pocket、feedlyボタンの追加 少し暇ができたので、先日利用を開始したWordpressテ

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*

wordpress-logo-stacked-rgb
Stinger3で管理画面が真っ白になる対処法

Stinger3で管理画面が真っ白に WordPressで無料のテー

kaoup
Stinger3にアドセンス規約違反があるかも?

Stinger3にアドセンス規約違反があるかも? このサイトでも利用

kaoup
STINGER5がリリースされましたね。

STINGER5がリリースされましたね。 早速ダウンロードして見まし

not_found
Stinger3の404エラーページカスタマイズしてみました

Stinger3の404エラーページカスタマイズ Stinger3の

wordpress-logo-stacked-rgb
Stinger3にfeedly、Pocketボタンを追加

Pocket、feedlyボタンの追加 少し暇ができたので、先日利用

→もっと見る



PAGE TOP ↑