とあるサイトからお借りしたPHPのプログラムをフッターに入れて、ウィジェットを追加する。借りてきたPHPのプログラムとは以下のようなものです。(他function.php cssなどの追記はあり。)これをfooter.phpへ入れる。
<footer id="footer"> <?php if( is_active_sidebar('footer-left') || is_active_sidebar('footer-center') || is_active_sidebar('footer-right') ) { ?> <div id="footer-contents-wrapper"> <div class="footer-contents footer-left clearfix"> <?php dynamic_sidebar('footer-left') //フッター左ウィジェット ?> </div> <div class="footer-contents footer-center clearfix"> <?php dynamic_sidebar('footer-center') //フッター中央ウィジェット ?> </div> <div class="footer-contents footer-right clearfix"> <?php dynamic_sidebar('footer-right') //フッター右ウィジェット ?> </div> </div> <!--/footer-contents-wrapper--> <?php } ?> <div id="copyright"> <span> © <?php the_date('Y');?> <?php bloginfo('name');?> </span> </div> </footer>
するとウィジェットに左、中央、右と出て、そこに入れたいウィジェットを入れれば横3列に内容が表示される。はずなんですが、なぜかしら私のテーマではならなかったので、簡単にtableタグで囲ってやると綺麗に表示される。が、ブラウザのスクロールバーがカクカク。
以下は、テーブルの枠線を消すために必要な子テーマのcssやfooter.phpへ入れるコード、タグ。
table, th, td { border:none; }
<div id="table"> <div class="row"> <div> u1 </div> <div>u2 </div> </div> <div class="row"> <div> b1 </div> <div> b2</div> </div> </div> </body>
で、DIVで表を作ろうということになり、 u1 u2 b1にphpのプログラムを3分割して入れる。で、b2部分はいらないからオミットする。 しかし、縦3列になってカクカクはなおります。(レイアウトはよくなるが。) 結局サイト全体のレイアウトだけ良くなっただけ。 で、その後に、横3列カクカクtableタグを兼ね合わせる。こういうのを。
<table> <tr> <td> 1つ目 </td> <td> 2つ目 </td> <td> 3つ目 </td> </tr> </table>
すると、スクロールのカクカクは直る。あとは、少々サイドバー側から気に入らないところの修正を施して自己満足の世界で事態は収拾です。で、完成したDIVだらけのソースを見ていただければ、何の参考にもならないでしょうが、見ていただけると暇つぶしにはなるかもしれません。PC表示のみとしています。
<php if ( !is_mobile() ) : ?> <div id="table"> <div class="row"> <table> <tr> <td> <div> <div style=”border-style: solid; border-width: 1px; padding: 8px 5px 8px 20px;”> <div id="footer-contents-wrapper"> <footer id="footer"><?php if( is_active_sidebar('footer-left') || is_active_sidebar('footer-center') || is_active_sidebar('footer-right') ) { ?> <div class="footer-contents footer-left clearfix"> <?php dynamic_sidebar('footer-left') //フッター左ウィジェット ?> </div> </div> </td> <td> <div> <div class="footer-contents footer-center clearfix"> <?php dynamic_sidebar('footer-center') //フッター中央ウィジェット ?> </div> </div> </div> </td> <td> <div class="row"> <div> <div class="footer-contents footer-right clearfix"> <?php dynamic_sidebar('footer-right') //フッター右ウィジェット ?> </div> </div> </div> </div> </div> </div> </td> </tr> </table> </footer> <?php endif; ?>
後、追記としましてfooter.phpの一番上に以下のようなタグを入れ、後は、.site-footerで幅調整しています。
<style type="text/css"> <style type="text/css"> <!-- span { border-bottom:solid 2px #0000FF;} --> </style>
フッターの幅調整に関しては、こちらの方のサイトを参考にさせていただきました。
以上です。