TwitterBootstrapがキャンセルするTwentyThirteenのサイドバーとフッターの重なりを復元する

WordPressのバージョン3.6から登場した新テーマ Twenty Thirteen では其のレイアウトにかなりjQuery等、JavaScriptが活用されています。

TwentyThirteenに於けるサイドバーとフッターの関係

一昨日、2013年8月14日の本ブログの記事新テーマTwentyThirteenを有効化してTwitterBootstrapのグリッドシステムを使うでは其の一つ、サイドバーとフッターの関係を取り上げました。

新テーマではブレークポイントを超えるデスクトップ仕様の解像度に於いてはフッターのウィジェットが右にサイドバーの幅分の余白を開け、其処へコンテンツ量を超えるサイドバーの長さが喰い込んで来る塩梅となっていました。

Twitter Bootstrapがキャンセルするサイドバーのフッターへの喰い込み

手元の環境であるサウンド追っ掛け情報に於いては、しかしグリッドシステムを採用した旨記した14日の記事にもあるように此のサイドバーとフッターの関係をキャンセルしてしまいます。サイドバーの長さが如何にコンテンツエリアの高さより長かろうともフロートがクリアーされるが如く、サイドバーの終了した位置からフッターの描画は開始されるのでした。

此の問題について以下の如き対処法を挙げてみましたが 14日の時点では保留にする旨、記事に記した処です。

secondary をsidebar-main.php上に書き換えてしまい、新たにメディアクエリを書き直す
TwentyThirteenに沿ったサイドバーがフッターと重なり合う処理が優先されるようにJavaScriptを改変する
iPadでの表示に即した表示を得られる様にデスクトップ上の配置に相当する部分をJavaScriptを改変する

処で一日置いてみて矢張り新テーマの理解促進と好奇心も手伝い、上の3番目の方法と試してみることにしたのです。

TwentyThirteenでの実装

逸早く此のサイドバーの実装について取り上げている WordPress 不動産プラグインで不動産ホームページを参照してみれば、レイアウトはpositionで位置決めされ、フッター上部のマージンで調整、其のマージンを算出しているのが TwentyThirteenテーマフォルダ内のjsフォルダ内にある functions.js とされており、該当部分は以下となります。

$( function() {
  if ( body.is( '.sidebar' ) ) {
    var sidebar = $( '#secondary .widget-area' ),
        secondary = ( 0 == sidebar.length ) ? -40 : sidebar.height(),
        margin = $( '#tertiary .widget-area' ).height() - $( '#content' ).height() - secondary;
    if ( margin > 0 && _window.innerWidth() > 999 )
      $( '#colophon' ).css( 'margin-top', margin + 'px' );
  }
} );

PC画面が999px以上の時、サイドバーの高さがコンテンツ部分とフッター部分の高さを足したものより長い際に其の分だけマージンがフッター上に加えられるものとなっています。サイドバーがフッター部分の底を突き抜けて貫通してしまわないようになっているようです。

Bootstrapとの兼ね合いに於けるTwenty Thirteenの復元方針

此の functions.js が其の儘ではTwitter Bootstrapと組み合わせた時に、場合に因ってはサイドバーとフッターの間に見るからに無駄な余白を生む原因となっているのですから、此のJavaScriptファイルの当該部分を改変することで折り合いを付けるのが好ましいものと思われます。

但し此のファイルを直接改変するのは後々のバージョンアップ時の整合性などを考慮すれば避けたい処ですので、子テーマ sound フォルダ内に用意したjsフォルダ内にコピーして改変します。改変ファイルを読み込ませるには functions.phpファイル内で以下のようにするのが一つの手です。

remove_action( 'wp_enqueue_scripts', 'twentythirteen_scripts_styles' );
function sound_scripts_styles() {
  ...
  wp_enqueue_script( 'sound-script', get_bloginfo('stylesheet_directory') . '/js/functions.js', array( 'jquery' ), '2013-07-18', true );
  ...
}
add_action( 'wp_enqueue_scripts', 'sound_scripts_styles' );

今回はもう少し手軽に以下の緑字の如くfooter.phpファイルに書き加えることにしました。

<?php
  wp_deregister_script('twentythirteen-script');
  wp_enqueue_script('sound-script', get_bloginfo('stylesheet_directory') . '/js/functions.js');
  wp_footer();
?>

TwentyThirteen方式再現の実装

こうした段取りをした上で実装したJavaScriptコードが以下になります。

$( function() {
  if ( body.is( '.sidebar' ) ) {
    var sidebar = $( '#secondary .widget-area' ),
         secondary = ( 0 == sidebar.length ) ? -40 : sidebar.height(),
         content = $( '#content' ).height(),
         tertiary = $( '#tertiary .widget-area' ).height();
    if ( tertiary < content )
      var margin = 40;
    if ( tertiary > content && tertiary < content + secondary )
      var margin = content - tertiary;
    if ( tertiary > content + secondary )
      margin = -secondary;
    if ( _window.innerWidth() > 999 )
      $( '#colophon' ).css( 'margin-top', margin + 'px' );
  }
} );

考え方はTwenty Thirteenの実装より遥かに単純で、フッター上のマージンを負数も含め、サイドバーの高さがコンテンツ部分より短い時、コンテンツとフッター部分を足したものより短い時、及びコンテンツとフッター部分を足したものより長い時、の3つに場合分けしているだけです。ブレークポイントは前コードに習って999pxとしました。

オンライン結果表示

以上のコードを適用し以て下の図の表示がオンライン上で確認出来ました。

どうやらコードは適正に働いてくれたようで、想定通りの表示が得られました。此れはサイドバーがコンテンツとフッター部分を足したものより長い場合の表示で、サイドバーがフッターの底抜けをしないようにコンテンツとフッター間にマージンが然るべく取られています。またサイドバーの高さがコンテンツ部分より短い場合及びコンテンツとフッター部分を足したものより短い場合でも想定した表示が得られたことを最後に書き加えておきましょう。