Twenty Fourteen: change to just one footer widget area and use Masonry JS to display the widgets in columns. Props Frank Klein, closes #24874.

Built from https://develop.svn.wordpress.org/trunk@25065


git-svn-id: http://core.svn.wordpress.org/trunk@25051 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Lance Willett 2013-08-20 17:53:09 +00:00
parent 3054d405e6
commit 0a85bdc7a1
5 changed files with 33 additions and 135 deletions

View File

@ -11,12 +11,14 @@
</div><!-- #main -->
<?php get_sidebar( 'footer' ); ?>
<footer id="colophon" class="site-footer" role="contentinfo">
<?php get_sidebar( 'footer' ); ?>
<div class="site-info">
<?php do_action( 'twentyfourteen_credits' ); ?>
<a href="<?php echo esc_url( __( 'http://wordpress.org/', 'twentythirteen' ) ); ?>" title="<?php esc_attr_e( 'Semantic Personal Publishing Platform', 'twentythirteen' ); ?>"><?php printf( __( 'Proudly powered by %s', 'twentythirteen' ), 'WordPress' ); ?></a>
<a href="<?php echo esc_url( __( 'http://wordpress.org/', 'twentyfourteen' ) ); ?>" title="<?php esc_attr_e( 'Semantic Personal Publishing Platform', 'twentyfourteen' ); ?>"><?php printf( __( 'Proudly powered by %s', 'twentyfourteen' ), 'WordPress' ); ?></a>
</div><!-- .site-info -->
</footer><!-- #colophon -->
</div><!-- #page -->

View File

@ -142,45 +142,13 @@ function twentyfourteen_widgets_init() {
'after_title' => '</h1>',
) );
register_sidebar( array(
'name' => __( 'Footer Widget Area One', 'twentyfourteen' ),
'name' => __( 'Footer Widget Area', 'twentyfourteen' ),
'id' => 'sidebar-3',
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h1 class="widget-title">',
'after_title' => '</h1>',
) );
register_sidebar( array(
'name' => __( 'Footer Widget Area Two', 'twentyfourteen' ),
'id' => 'sidebar-4',
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h1 class="widget-title">',
'after_title' => '</h1>',
) );
register_sidebar( array(
'name' => __( 'Footer Widget Area Three', 'twentyfourteen' ),
'id' => 'sidebar-5',
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h1 class="widget-title">',
'after_title' => '</h1>',
) );
register_sidebar( array(
'name' => __( 'Footer Widget Area Four', 'twentyfourteen' ),
'id' => 'sidebar-6',
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h1 class="widget-title">',
'after_title' => '</h1>',
) );
register_sidebar( array(
'name' => __( 'Footer Widget Area Five', 'twentyfourteen' ),
'id' => 'sidebar-7',
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h1 class="widget-title">',
'after_title' => '</h1>',
) );
}
add_action( 'widgets_init', 'twentyfourteen_widgets_init' );
@ -213,6 +181,9 @@ function twentyfourteen_scripts() {
if ( is_singular() && wp_attachment_is_image() )
wp_enqueue_script( 'twentyfourteen-keyboard-image-navigation', get_template_directory_uri() . '/js/keyboard-image-navigation.js', array( 'jquery' ), '20130402' );
if ( is_active_sidebar( 'sidebar-3' ) )
wp_enqueue_script( 'jquery-masonry' );
wp_enqueue_script( 'twentyfourteen-theme', get_template_directory_uri() . '/js/theme.js', array( 'jquery' ), '20130820', true );
}
add_action( 'wp_enqueue_scripts', 'twentyfourteen_scripts' );
@ -330,52 +301,6 @@ function twentyfourteen_the_attached_image() {
}
endif;
/**
* Count the number of footer sidebars to enable dynamic classes for the footer
*
*/
function twentyfourteen_footer_sidebar_class() {
$count = 0;
if ( is_active_sidebar( 'sidebar-3' ) )
$count++;
if ( is_active_sidebar( 'sidebar-4' ) )
$count++;
if ( is_active_sidebar( 'sidebar-5' ) )
$count++;
if ( is_active_sidebar( 'sidebar-6' ) )
$count++;
if ( is_active_sidebar( 'sidebar-7' ) )
$count++;
$class = '';
switch ( $count ) {
case '1':
$class = 'one';
break;
case '2':
$class = 'two';
break;
case '3':
$class = 'three';
break;
case '4':
$class = 'four';
break;
case '5':
$class = 'five';
break;
}
if ( $class )
printf( 'class="%s"', $class );
}
/**
* Gets recent formatted posts that are not featured in FC plugin.
*

View File

@ -125,6 +125,17 @@
}
} );
// Arranges footer widgets vertically.
if ( $.isFunction( $.fn.masonry ) ) {
$( '#footer-sidebar' ).masonry( {
itemSelector: '.widget',
columnWidth: 225,
gutterWidth: 27,
isRTL: $( 'body' ).is( '.rtl' )
} );
}
} );
} )( jQuery );

View File

@ -1,47 +1,21 @@
<?php
/**
* The Sidebar containing the main widget areas.
* The Sidebar containing the main widget area.
*
* @package WordPress
* @subpackage Twenty_Fourteen
*/
?>
<?php
if ( ! is_active_sidebar( 'sidebar-3' )
&& ! is_active_sidebar( 'sidebar-4' )
&& ! is_active_sidebar( 'sidebar-5' )
&& ! is_active_sidebar( 'sidebar-6' )
&& ! is_active_sidebar( 'sidebar-7' )
)
return;
if ( ! is_active_sidebar( 'sidebar-3' ) )
return;
?>
<div id="supplementary" <?php twentyfourteen_footer_sidebar_class(); ?>>
<div id="supplementary">
<?php if ( is_active_sidebar( 'sidebar-3' ) ) : ?>
<div id="footer-sidebar-one" class="widget-area" role="complementary">
<div id="footer-sidebar" class="widget-area" role="complementary">
<?php dynamic_sidebar( 'sidebar-3' ); ?>
</div><!-- #first .widget-area -->
</div><!-- #footer-sidebar -->
<?php endif; ?>
<?php if ( is_active_sidebar( 'sidebar-4' ) ) : ?>
<div id="footer-sidebar-two" class="widget-area" role="complementary">
<?php dynamic_sidebar( 'sidebar-4' ); ?>
</div><!-- #second .widget-area -->
<?php endif; ?>
<?php if ( is_active_sidebar( 'sidebar-5' ) ) : ?>
<div id="footer-sidebar-three" class="widget-area" role="complementary">
<?php dynamic_sidebar( 'sidebar-5' ); ?>
</div><!-- #third .widget-area -->
<?php endif; ?>
<?php if ( is_active_sidebar( 'sidebar-6' ) ) : ?>
<div id="footer-sidebar-four" class="widget-area" role="complementary">
<?php dynamic_sidebar( 'sidebar-6' ); ?>
</div><!-- #fourth .widget-area -->
<?php endif; ?>
<?php if ( is_active_sidebar( 'sidebar-7' ) ) : ?>
<div id="footer-sidebar-five" class="widget-area" role="complementary">
<?php dynamic_sidebar( 'sidebar-7' ); ?>
</div><!-- #fourth .widget-area -->
<?php endif; ?>
</div><!-- #supplementary -->

View File

@ -2339,10 +2339,15 @@ span > object {
/* =Footer Sidebar
----------------------------------------------- */
#supplementary .widget-area {
.site-footer .widget-area {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.site-footer .widget {
float: left;
padding-left: 27px;
width: 198px;
}
/* =Media Queries
----------------------------------------------- */
@ -2996,26 +3001,7 @@ span > object {
padding-right: 0;
padding-left: 0;
}
#supplementary .widget-area {
float: left;
padding: 0 27px;
padding: 0 2.7rem;
}
#supplementary.one .widget-area {
width: 100%;
}
#supplementary.two .widget-area {
width: 50%;
}
#supplementary.three .widget-area {
width: 33.33333333%;
}
#supplementary.four .widget-area {
width: 25%;
}
#supplementary.five .widget-area {
width: 20%;
}
}
@media screen and (min-width: 1150px) {