heightLine.js X ウィジェット
前回ご紹介したboxの高さを揃えるjs「heightLine.js」を今度はwordpressのウィジェットに反映させる場合の方法です。
私がウィジェットでよく使うプラグインが「Image Widget」なので、今回はこのプラグインを使った場合の方法ですw
とても便利ですよ
Image Widget
このプラグインの設定方法は検索すれば詳しいサイトなど出てくるのですが、まあここでもさわりだけでも。。
function.phpに以下ソースを追記します。
//ウィジェット
if (function_exists('register_sidebar')) { //ここの設定は任意の名前で
register_sidebar(array(
'name' => 'test',//任意のname
'id' => 'test',//任意のid
'description' => '任意の説明文',
'before_widget' => '<section class="heightLine">',
'after_widget' => '</section>',
'before_title' => '<h2 class="heightLine-title">',
'after_title' => '</h2>'
));
//_widgetと_titleのタグはお好きなもので
}
ここで注意したいのは、クラス名は必ず「heightLine」（8行目）、子要素にもつける場合は「heightLine-（任意の名前）」（10行目）に設定することです。
これでwidget部分にも適用されますよ！
heightLine-xxxはここに書き込むだけで、あとはcssでデザイン設定している場合はcssに追記が必要ですが基本的にそれだけでOKです。
‘before_widget”after_widget”before_title”after_title’以外にfunction.phpで設定できるのであれば、さらに応用ができるんでしょうが今のところ親要素（_widget）と子要素（_title）の設定でどうにかしています。
しかしコーディングやっていると、高さを何がなんでも揃えるという発想がナンセンスと思うようになりがちですが（笑）、やはりディレクターさんは気になる人はこういうの気になるんですよね＾＾； サイトの性質によっては説得（笑）することもありますが、譲れない人、サイトの性質によってはやはり多少強引にでもこういう対応が必要になるので、覚えておくと便利なスクリプトです！