「WordPress 新テーマ Twenty Thirteen をチェックしました①」での ぐぬぬ感を取り払うべく、フッターへ突き刺さるのは わざと なのかどうか? という事から調べました。

【twentythirteen/js/functions.js】

/**
 * Adds a top margin to the footer if the sidebar widget area is
 * higher than the rest of the page, to help the footer always
 * visually clear the sidebar.
 */
adjustFooter : function() {
	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' );
},

コメント部分にらしい事が書いてありますが具体的に見ると、、

secondary はフッターの高さが入ります。
$( '#content' ).height()はコンテント部分の高さが入ります。
$( '#tertiary .widget-area' ).height()はサイドバー部分の高さが入ります。

と言う事で

margin = サイドバーの高さ - コンテントの高さ - フッターの高さ

で計算されて、フッター部分の margin-top が margin になり、サイドバー高さがコンテント高さより長い場合はサイドバーがフッター部分に被った状態で表示されます。
レイアウトは position を使っていますので、このやり方は致し方ないかと思います。



スポンサードリンク




フッター部分のウィジェットは jquery-masonry を利用しています。
微調整する場合はCSSと共にこちらを触ってもいいと思います。

【twentythirteen/functions.php】
	// Adds Masonry to handle vertical alignment of footer widgets.
	if ( is_active_sidebar( 'sidebar-1' ) )
		wp_enqueue_script( 'jquery-masonry' );
【twentythirteen/js/functions.js】
	/**
	 * Arranges footer widgets vertically.
	 */
	if ( $.isFunction( $.fn.masonry ) ) {
		var columnWidth = body.is( '.sidebar' ) ? 228 : 245;

		$( '#secondary .widget-area' ).masonry( {
			itemSelector: '.widget',
			columnWidth: columnWidth,
			gutterWidth: 20,
			isRTL: body.is( '.rtl' )
		} );
	}
*あれ? いつから WordPress に jquery-masonry が組み込まれてたのだろ? これからはjquery-masonryを使う時は楽になると、覚えておきましょう。




組込みWEBフォント「flexible icon-font」はどれだけあるか見てみました。

表示例
<span class="f100">f100</span>
<style type="text/css">
.f100:before {
     font:16px/1 Genericons;
     content: "\f100";
     margin-right: 5px; 
}
</style>
*font 指定をお忘れなく。





Media Queries はこのようになっています。
@media (max-width: 1599px) {}
@media (max-width: 1069px) {}
@media (max-width: 999px) {}
@media (max-width: 767px) {} /* Collapse oversized image and pulled images after iPad breakpoint. */
@media (max-width: 643px) {}
@media (max-width: 359px) {} /* Mobile devices */




以上、WordPress3.6 beta1より、新しいデフォルトテーマ「Twenty Thirteen」チェックをしました。
今後、公開版リリースまで変更されるかも知れませんのでご了承ください。



■「WordPress 新テーマ Twenty Thirteen をチェックしました①」へ



スポンサードリンク

Posted by on 2016/05/02



不動産プラグインポータル