Twenty Fourteen: re-add the Header Text Customization Option. Props iamtakashi, fixes #26338; see #25540.

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


git-svn-id: http://core.svn.wordpress.org/trunk@26464 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Lance Willett 2013-12-03 18:27:10 +00:00
parent abfec528c3
commit 4d6ec7fa96
4 changed files with 89 additions and 9 deletions

View File

@ -36,16 +36,57 @@ function twentyfourteen_custom_header_setup() {
* }
*/
add_theme_support( 'custom-header', apply_filters( 'twentyfourteen_custom_header_args', array(
'header-text' => false,
'default-text-color' => 'fff',
'width' => 1260,
'height' => 240,
'flex-height' => true,
'wp-head-callback' => 'twentyfourteen_header_style',
'admin-head-callback' => 'twentyfourteen_admin_header_style',
'admin-preview-callback' => 'twentyfourteen_admin_header_image',
) ) );
}
add_action( 'after_setup_theme', 'twentyfourteen_custom_header_setup' );
if ( ! function_exists( 'twentyfourteen_header_style' ) ) :
/**
* Styles the header image and text displayed on the blog
*
* @see twentyfourteen_custom_header_setup().
*
*/
function twentyfourteen_header_style() {
$header_text_color = get_header_textcolor();
// If no custom options for text are set, let's bail
// $header_text_color options: HEADER_TEXTCOLOR is default, hide text (returns 'blank') or any hex value
if ( HEADER_TEXTCOLOR == $header_text_color )
return;
// If we get this far, we have custom styles. Let's do this.
?>
<style type="text/css">
<?php
// Has the text been hidden?
if ( 'blank' == $header_text_color ) :
?>
.site-title {
position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
}
<?php
// If the user has set a custom color for the text use that
else :
?>
.site-title a {
color: #<?php echo $header_text_color; ?> !important;
}
<?php endif; ?>
</style>
<?php
}
endif; // twentyfourteen_header_style
if ( ! function_exists( 'twentyfourteen_admin_header_style' ) ) :
/**
* Style the header image displayed on the Appearance > Header screen.
@ -60,14 +101,14 @@ function twentyfourteen_admin_header_style() {
.appearance_page_custom-header #headimg {
background-color: #000;
border: none;
max-width: 1230px;
max-width: 1260px;
min-height: 48px;
}
#headimg h1 {
font-family: lato, sans-serif;
font-family: Lato, sans-serif;
font-size: 18px;
line-height: 1.3333333333;
margin: 12px 0 12px 27px;
line-height: 48px;
margin: 0 0 0 30px;
}
#headimg h1 a {
color: #fff;
@ -95,7 +136,7 @@ function twentyfourteen_admin_header_image() {
<?php if ( get_header_image() ) : ?>
<img src="<?php header_image(); ?>" alt="">
<?php endif; ?>
<h1><a id="name" onclick="return false;" href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
<h1 class="displaying-header-text"><a id="name"<?php echo sprintf( ' style="color:#%s;"', get_header_textcolor() ); ?> onclick="return false;" href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
</div>
<?php
}

View File

@ -18,6 +18,21 @@ function twentyfourteen_customize_register( $wp_customize ) {
// Add postMessage support for site title and description.
$wp_customize->get_setting( 'blogname' )->transport = 'postMessage';
$wp_customize->get_setting( 'blogdescription' )->transport = 'postMessage';
$wp_customize->get_setting( 'header_textcolor' )->transport = 'postMessage';
// Rename the label to "Display Site Title & Tagline" in order to make this option extra clear.
$wp_customize->add_control( 'display_header_text', array(
'settings' => 'header_textcolor',
'label' => __( 'Display Site Title & Tagline', 'twentyfourteen' ),
'section' => 'title_tagline',
'type' => 'checkbox',
) );
// Rename the label to "Site Title Color" because this only effects the site title in this theme.
$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'header_textcolor', array(
'label' => __( 'Site Title Color', 'twentyfourteen' ),
'section' => 'colors',
) ) );
// Add custom description to Colors and Background sections.
$wp_customize->get_section( 'colors' )->description = __( 'Background may only be visible on wide screens.', 'twentyfourteen' );
@ -53,7 +68,7 @@ add_action( 'customize_register', 'twentyfourteen_customize_register' );
* @since Twenty Fourteen 1.0
*/
function twentyfourteen_customize_preview_js() {
wp_enqueue_script( 'twentyfourteen_customizer', get_template_directory_uri() . '/js/customizer.js', array( 'customize-preview' ), '20120827', true );
wp_enqueue_script( 'twentyfourteen_customizer', get_template_directory_uri() . '/js/customizer.js', array( 'customize-preview' ), '20131130', true );
}
add_action( 'customize_preview_init', 'twentyfourteen_customize_preview_js' );

View File

@ -15,4 +15,24 @@
$( '.site-description' ).text( to );
} );
} );
// Header text color.
wp.customize( 'header_textcolor', function( value ) {
value.bind( function( to ) {
if ( 'blank' == to ) {
$( '.site-title a, .site-description' ).css( {
'clip': 'rect(1px, 1px, 1px, 1px)',
'position': 'absolute'
} );
} else {
$( '.site-title a, .site-description' ).css( {
'clip': 'auto',
'position': 'relative'
} );
$( '.site-title a' ).css( {
'color': to,
} );
}
} );
} );
} )( jQuery );

View File

@ -3557,6 +3557,10 @@ a.post-thumbnail:hover {
margin: -3px 0 21px;
}
.site-description:empty {
margin: 0;
}
.secondary-navigation {
margin: 0 -30px 48px;
width: 182px;