Stinger

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

投稿日:2013/10/07 更新日:

先日投稿した「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のボタンは表示されません。

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

当サイトのおすすめ記事

レンタルサーバー 1

当サイトは約5年間、さくらのレンタルサーバで運用させて頂きました。 何かトラブルがあったわけではないのですが、WordPressの表示速度を速くしたくてSSD搭載のレンタルサーバーで運用してみることに ...

プログラミング 2

SQLでIFを使わずに条件分岐する SQLでIFを書けばWHERE句の内容を変えて検索できますが、条件ごとに同じようなSQLを 複数回書くのは面倒なので、1行で分岐できないかと言う事でSQLを作って見 ...

SQLServer 3

SQLServerで発生するエラーコードをSQLで取得する SQLServerで発生したエラーコードの内容を メッセージが定義されているテーブルから取得します。 エラーコードを取得するSQL SQLs ...

4

SQLServerでテーブル型を戻り値とする関数を作る SQLServerではINT型やVARCHAR型などを返す関数と同様に ユーザー定義テーブル型を戻り値とする関数を作成できます。 テーブル型を戻 ...

5

アフィリエイトで即効成果を出す アフィリエイトで成果を出す、なかなか難しいですよね。 サイトをいくつも立ち上げてすでにコツをつかんでいる人なら チョチョイっとやっていけるんでしょうけど。 でも実際はこ ...

-Stinger
-, ,

Copyright© ソフトウェア開発日記 , 2017 AllRights Reserved.