【Stinger5カスタマイズ】モバイルのみ一部のウィジェットを非表示化したよ。

今日は、このブログのモバイル表示から、一部のウィジェットを非表示にするカスタマイズを施しました。

これは、Stinger3の時にも実施していたカスタマイズですので、下記の記事も参考にして頂けると幸いです。

参考：Stinger3カスタマイズ（スマホ）；カスタマイズは足すだけじゃなく、引く事も大事。

なんで引くの？
1. 1.　表示速度の向上
2. 2.　次に読みたいものは？
カスタマイズの概略
非表示にする前の一工夫
ウィジェットの非表示化
1. サイドバーのコード
2. スタイルシートは？
まとめ

なんで引くの？

一部のウィジェットを非表示にする理由ですが、

表示速度を向上したい。
次に読みたいハズのものだけ表示したい。

の2点あります。

1.　表示速度の向上

そもそもスマホの場合は通信環境が脆弱なので、ただでさえ表示されるのに時間がかかりますよね。

で、表示が遅いと記事を読むモチベーションが下がってしまいます。

なので、モバイル環境を考慮すると、なるべく表示するのもを絞り込むことで、多少なりとも改善したいという意図です。

2.　次に読みたいものは？

もう一つの理由が、ランディング（入口）となった記事を読んで頂いた後は、「関連記事」とか「新着記事」、「良く読まれている記事」あたりに目を通して頂きたいから。

でもでも。

モバイル環境はディスプレイのサイズが小さい。

なので、スマホで見ると各パーツが縦に長～く表示されています。

という事は、読んで頂きたいパーツの間に余計なパーツが挟まっちゃってるんですよね。

ぶっちゃけ、サイドバーの検索ボックスや購読、FacebookのLikeBoxとか、Twitterのタイムラインとかってぶっちゃけ要らないんじゃない？と。

なので、Stinger5でも不要なパーツを非表示にしようと思った訳です。

カスタマイズの概略

WordPressでは基本的に、表示されているもののデザインはCSSで調整できますが、表示・非表示については、PHP側で制御する必要があります。

今回対象となるのは、sidebar.phpです。

（このブログではフッターにもウィジェットを突っ込んでますので、footer.phpも併せて修正しています）

また、Stinger5のスマホ表示分岐はfunctions.phpに記述されていますので、このis_mobile()関数を利用してあげればＯＫですね。

※見やすいようにマージン等を調整しています。

//functions.php; スマホ表示分岐
//スマホ表示分岐

function is_mobile(){
    $useragents = array(

    'iPhone', // iPhone
    'iPod', // iPod touch
    'Android.*Mobile', // 1.5+ Android *** Only mobile
    'Windows.*Phone', // *** Windows Phone
    'dream', // Pre 1.5 Android
    'CUPCAKE', // 1.5+ Android
    'blackberry9500', // Storm
    'blackberry9530', // Storm
    'blackberry9520', // Storm v2
    'blackberry9550', // Storm v2
    'blackberry9800', // Torch
    'webOS', // Palm Pre Experimental
    'incognito', // Other iPhone browser
    'webmate' // Other iPhone browser

    );

    $pattern = '/'.implode('|', $useragents).'/i';
    return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
}

非表示にする前の一工夫

非表示化する前に。

人気記事の一覧表示には、[Wordpress Popular Posts]プラグインを使って、ウィジェットエリア [サイドバーウィジェット] に入れている方が多いと思います。

が、このままサイドバーウィジェットを非表示化すると、人気記事の一覧まで非表示になってしまいますね。

対処法は次の2つ。

ウィジェットエリア [スクロール広告用] を使う
新たなウィジェットエリアを追加する

どちらでもＯＫですが、このブログでは新たなウィジェットエリアを追加する方法で対応しました。

※ウィジェットの追加方法が解らない場合は、下記の記事を参考にしてみて下さい。

参考（子テーマのfunctions.phpで対応）：Stinger5カスタマイズ；functions.phpのカスタマイズを子テーマ側で実施する方法

ウィジェットの非表示化

今日のポイントはウィジェットの非表示化ですが、前述の通り、is_mobile()関数で条件分岐させてあげればＯＫです。

//条件分岐
<?php if(is_mobile()) { ?>
    //モバイルならここ
<?php } else { ?>
    //それ以外はここ
<?php } ?>

上記コードの黄色でマークした行のどちらに挟むかで、モバイルとＰＣのどちらで制御するかを変える事ができます。

今回は、「モバイルでは非表示」がテーマですので、「//それ以外はここ」の上下のコードで、非表示にしたいパーツを挟んで上げればＯＫですね。

サイドバーのコード

サイドバーのコードは下記のようなイメージになります。

ポイントは

is_mobile()関数で表示の制御をしてあげる。
dynamic_sidebar(5)の数値を間違えずに設定する。

といったところです。

//sidebar.php
<?php if(is_mobile()) { //スマホの場合 ?>

  <!-- 最近のエントリ -->
  <h4 class="menu_underh2"> NEW POST</h4>
  <?php get_template_part('newpost');?>
  <!-- /最近のエントリ -->

  <!-- 人気記事スマホ用 -->
  <div id="mybox">
    <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(5) ) : else : ?>
      <p>人気記事スマホ用</p>
    <?php endif; ?>
    </div>
    <div class="clear"></div>
  <!-- 人気記事モバイル用 -->

<?php } else { //PCの場合 ?>

  <!-- RSSボタンです -->
  <div class="rssbox"> <a href="<?php echo home_url(); ?>/?feed=rss2"><i class="fa fa-rss-square"></i>&nbsp;購読する</a> </div>
  <!-- RSSボタンここまで -->
  <?php get_search_form(); //検索フォーム表示  ?>
  <!-- 最近のエントリ -->
  <h4 class="menu_underh2"> NEW POST</h4>
  <?php get_template_part('newpost');?>
  <!-- /最近のエントリ -->
  <div id="mybox">
    <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(1) ) : else : //サイドウイジェット読み込み ?>
    <?php endif; ?>
  </div>

<?php } ?>

上記コードを参考に、上手く調整してみて下さい。

スタイルシートは？

本来であれば、後はスタイルシートで表示のデザイン調整～っとなるところですが、今回はsidbar.phpの記述を工夫して端折ってみました。

//スタイルシートの設定を端折る
  <!-- 人気記事スマホ用 -->
  <div id="mybox">
    <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(5) ) : else : ?>
      <p>人気記事スマホ用</p>
    <?php endif; ?>
    </div>
    <div class="clear"></div>
  <!-- 人気記事モバイル用 -->

ポイントは黄色でマークした行。

サイドウィジェットとIDを合せる事で、スタイルシートのデザインを流用しています。

まぁ、こんな効率化の方法もあるという事でｗ