Simplicity2のモバイル表示でフッターにウィジェットを出すには | なんかいろいろ備忘録

Simplicity2のモバイル表示でフッターにウィジェットを出すには

WordPress
2017.04.01

WordPressのテーマにSimplicity2を使っていると、通常はフッターウィジェットに入れたブログパーツはスマートフォンなどで表示されないので、今回は、表示させる方法について書こうと思います。

スポンサーリンク

Simplicity2でモバイル表示の時フッターにウィジェット表示させるには

スマートフォンでアクセスしたらフッター領域のウィジェットに追加したブログパーツが表示されないんだけど？

WordPressのテーマSimplicity2は通常スマートフォンやタブレットでのモバイル表示でフッターに追加したウィジェットは表示できません。

ただし、次の方法で表示させることができます。

  • 親テーマの「footer.php」を子テーマにコピーする
  • コピーした子テーマ「footer.php」のコードを変える
  • 子テーマの「mobile.css」に「フッターウィジェット」を表示させる

コードを編集する必要があるので、「mobile.css」と「footer.php」について説明していきます。

「親テーマの「footer.php」を子テーマにコピーする」についてはFTPソフトなどでコピーしますが、ここでは省略します。

子テーマの「mobile.css」と「footer.php」のコードを編集

フッターのウィジェットはブロックの要素になっていて“footer-widget”という属性で、モバイルからのアクセスでは非表示になってます。

なので、“footer-widget”で表示させてしまえばよいわけです。

Simplicity2はモバイル用のcssがあるのでこれに追記します。

#footer-widget {
 display: block;
}

※ mobile.css

しかし、これだけではフッターにウィジェットが表示されません。実は、もう一つ表示させるのに必要なファイルがあります。

footer.php、このファイルでウィジェットを表示させるかの条件をパソコンとモバイルで分けています。コードが多いの元のコードと編集後のコードの2つ書いて説明します。

 <?php //フッターにウィジェットが一つも入っていない時とモバイルの時は表示しない
   if ( (is_active_sidebar('footer-left') ||
     is_active_sidebar('footer-center') ||
     is_active_sidebar('footer-right') ) &&
   !is_mobile() ): ?>
   <div id="footer-widget">
     <div class="footer-left">
     <?php if ( dynamic_sidebar('footer-left') ) : else : ?>
     <?php endif; ?>
     </div>
     <div class="footer-center">
     <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('footer-center') ) : else : ?>
     <?php endif; ?>
     </div>
     <div class="footer-right">
     <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('footer-right') ) : else : ?>
     <?php endif; ?>
     </div>
   </div>
 <?php endif; ?>

 <div class="clear"></div>
   <div id="copyright" class="wrapper">
     <?php //フッターメニューの設定

※元のソースコード

 <?php //フッターにウィジェットが一つも入っていない時とモバイルの時は表示しない
   if ( (is_active_sidebar('footer-left') ||
     is_active_sidebar('footer-center') ||
     is_active_sidebar('footer-right') ) &&
   !is_mobile() ): ?>
   <div id="footer-widget">
     <div class="footer-left">
     <?php if ( dynamic_sidebar('footer-left') ) : else : ?>
     <?php endif; ?>
     </div>
     <div class="footer-center">
     <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('footer-center') ) : else : ?>
     <?php endif; ?>
     </div>
     <div class="footer-right">
     <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('footer-right') ) : else : ?>
     <?php endif; ?>
     </div>
   </div>
 <?php endif; ?>

 <?php //モバイルに左フッター表示
   if (is_active_sidebar('footer-left') && is_mobile() ): ?>
     <div id="footer-widget">
     <div class="footer-left">
     <?php if ( dynamic_sidebar('footer-left') ) : else : ?>
     <?php endif; ?>
     </div>
     </div>
 <?php endif; ?>

 <div class="clear"></div>
   <div id="copyright" class="wrapper">
     <?php //フッターメニューの設定

※追記後のソースコード、前後のコードは省略していますが、黄色の部分を追記しています。

Simplicity2のフッターウィジェットは「左」「中央」右」の３つがあり、左のみのウィジェットを表示させてます。

フッターウィジェットを「中央」「右」で表示するには黄色の部分を以下のように変更します。

 <?php //モバイルに中央フッター表示
   if (is_active_sidebar('footer-center') && is_mobile() ): ?>
   <div id="footer-widget">
     <div class="footer-center">
     <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('footer-center') ) : else : ?>
     <?php endif; ?>
     </div>
   </div>
 <?php endif; ?>

※フッターウィジェット中央表示

 <?php //モバイルに右フッター表示
   if (is_active_sidebar('footer-right') && is_mobile() ): ?>
   <div id="footer-widget">
     <div class="footer-right">
     <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('footer-right') ) : else : ?>
     <?php endif; ?>
     </div>
   </div>
 <?php endif; ?>

※フッターウィジェット右表示

もう、お分かりかと思いますが、ソースコードの‘footer-○○’を、それぞれ、「left」「center」「right」に変えるだけです。

ちなみに、3つとも表示させたい場合は、元のコードからこうなります。

 <?php //フッターにウィジェットが一つも入っていない時は表示しない
   if ( is_active_sidebar('footer-left') ||
     is_active_sidebar('footer-center') ||
     is_active_sidebar('footer-right') ) : ?>
   <div id="footer-widget">
     <div class="footer-left">
     <?php if ( dynamic_sidebar('footer-left') ) : else : ?>
     <?php endif; ?>
     </div>
     <div class="footer-center">
     <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('footer-center') ) : else : ?>
     <?php endif; ?>
     </div>
     <div class="footer-right">
     <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('footer-right') ) : else : ?>
     <?php endif; ?>
     </div>
   </div>
 <?php endif; ?>

 <div class="clear"></div>
 <div id="copyright" class="wrapper">
 <?php //フッターメニューの設定

※モバイルで3つのフッターウィジェット表示

パソコンとモバイルで分ける必要が無いので、!is_mobile()を消してます。is_mobile()はWordPressでモバイルを判別する関数です。

まあ、これが難しく感じるなら元のソースコードから!is_mobile()をis_mobile()に変更するだけで良い。「!」を消すだけで良い、これでもフッターウィジェット3つ表示できる。

ちなみに、確認していないのでモバイル表示でのレイアウトがどうなるか分かりせん。

スポンサーリンク

まとめ

スマートフォンでフッターウィジェットに入れたブログパーツを表示させるには、PHPの知識が少しあると簡単にできます。「!」の意味など細かいことは省きますが、この記事を参考にしてくれたら、嬉しいです。^^

タイトルとURLをコピーしました