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

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

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

WordPress
スポンサーリンク
色白おばけをフォローする

SEOに強いおすすめWordPressテーマ

THE THOR(ザ・トール)は、SEO・デザイン・機能の3拍子揃った国内最高峰のWordPressテーマです。
ザ・トールは、国内トップクラスのWEBデザイナー・SEOコンサルタントであるFITが長年培ってきたノウハウのすべてを注ぎ込んだ国内最高峰のWordPressテーマです。
【ザ・トールの特徴】

  1. 圧倒的にSEOに強く、抜群に上位表示されやすい
  2. おしゃれで美しいデザイナーズサイトが簡単に作れる
  3. アクセスUP、収益UPを強力に後押しする「集客・収益化支援システム」を搭載

「賢威(ケンイ)」は、SEO業界で圧倒的な実績を持つ京都のWebプランニングチーム「ウェブライダー」が、そのノウハウを余すことなく詰め込んだ、SEOテンプレートパックです。
2007年1月に発売して以来、上場企業や中小企業のWeb担当者、個人起業家、アフィリエイターやブロガーなど、2万を超えるユーザーに利用されています。
賢威の特徴

  1. SEOテンプレート(HTML版 / WordPress版)、200ページを越えるSEOマニュアル、サポートフォーラムの利用権がセット
  2. ウェブライダーがもつ検索で上位表示させるためのノウハウが注ぎ込まれている
  3. コンテンツマーケティング、セールスページ、ブログなど幅広い用途に使える
  4. 賢威ユーザー限定のサポートフォーラムがあり、フォローが充実している
  5. 最新の賢威へのバージョンアップは原則無料

BRIDGEは記事コンテンツの価値を高め広告収入をUPさせる新しいアフィリエイト専用WordPressテーマです。ランキング・比較・口コミ・レビューサイトなど、アフィリエイトに特化して開発された「BRIDGE」は、検索者と有益な商品・サービスを提供する事業者との架け橋となり本物の価値あるコンテンツを配信するアフィリエイターの広告収入をアップさせます。

ソフトウェア開発日記
タイトルとURLをコピーしました