wp/wp-content/themes/twentythirteen/inc/custom-header.php
changeset 7 cf61fcea0001
parent 5 5e2f62d02dcd
child 10 372f2766ea20
equal deleted inserted replaced
6:490d5cc509ed 7:cf61fcea0001
    11 
    11 
    12 /**
    12 /**
    13  * Set up the WordPress core custom header arguments and settings.
    13  * Set up the WordPress core custom header arguments and settings.
    14  *
    14  *
    15  * @uses add_theme_support() to register support for 3.4 and up.
    15  * @uses add_theme_support() to register support for 3.4 and up.
    16  * @uses twentythirteen_header_style() to style front-end.
    16  * @uses twentythirteen_header_style() to style front end.
    17  * @uses twentythirteen_admin_header_style() to style wp-admin form.
    17  * @uses twentythirteen_admin_header_style() to style wp-admin form.
    18  * @uses twentythirteen_admin_header_image() to add custom markup to wp-admin form.
    18  * @uses twentythirteen_admin_header_image() to add custom markup to wp-admin form.
    19  * @uses register_default_headers() to set up the bundled header images.
    19  * @uses register_default_headers() to set up the bundled header images.
    20  *
    20  *
    21  * @since Twenty Thirteen 1.0
    21  * @since Twenty Thirteen 1.0
    40 
    40 
    41 	/*
    41 	/*
    42 	 * Default custom headers packaged with the theme.
    42 	 * Default custom headers packaged with the theme.
    43 	 * %s is a placeholder for the theme template directory URI.
    43 	 * %s is a placeholder for the theme template directory URI.
    44 	 */
    44 	 */
    45 	register_default_headers( array(
    45 	register_default_headers(
    46 		'circle' => array(
    46 		array(
    47 			'url'           => '%s/images/headers/circle.png',
    47 			'circle'  => array(
    48 			'thumbnail_url' => '%s/images/headers/circle-thumbnail.png',
    48 				'url'           => '%s/images/headers/circle.png',
    49 			'description'   => _x( 'Circle', 'header image description', 'twentythirteen' )
    49 				'thumbnail_url' => '%s/images/headers/circle-thumbnail.png',
    50 		),
    50 				'description'   => _x( 'Circle', 'header image description', 'twentythirteen' ),
    51 		'diamond' => array(
    51 			),
    52 			'url'           => '%s/images/headers/diamond.png',
    52 			'diamond' => array(
    53 			'thumbnail_url' => '%s/images/headers/diamond-thumbnail.png',
    53 				'url'           => '%s/images/headers/diamond.png',
    54 			'description'   => _x( 'Diamond', 'header image description', 'twentythirteen' )
    54 				'thumbnail_url' => '%s/images/headers/diamond-thumbnail.png',
    55 		),
    55 				'description'   => _x( 'Diamond', 'header image description', 'twentythirteen' ),
    56 		'star' => array(
    56 			),
    57 			'url'           => '%s/images/headers/star.png',
    57 			'star'    => array(
    58 			'thumbnail_url' => '%s/images/headers/star-thumbnail.png',
    58 				'url'           => '%s/images/headers/star.png',
    59 			'description'   => _x( 'Star', 'header image description', 'twentythirteen' )
    59 				'thumbnail_url' => '%s/images/headers/star-thumbnail.png',
    60 		),
    60 				'description'   => _x( 'Star', 'header image description', 'twentythirteen' ),
    61 	) );
    61 			),
       
    62 		)
       
    63 	);
    62 }
    64 }
    63 add_action( 'after_setup_theme', 'twentythirteen_custom_header_setup', 11 );
    65 add_action( 'after_setup_theme', 'twentythirteen_custom_header_setup', 11 );
    64 
    66 
    65 /**
    67 /**
    66  * Load our special font CSS files.
    68  * Load our special font CSS files.
    86 function twentythirteen_header_style() {
    88 function twentythirteen_header_style() {
    87 	$header_image = get_header_image();
    89 	$header_image = get_header_image();
    88 	$text_color   = get_header_textcolor();
    90 	$text_color   = get_header_textcolor();
    89 
    91 
    90 	// If no custom options for text are set, let's bail.
    92 	// If no custom options for text are set, let's bail.
    91 	if ( empty( $header_image ) && $text_color == get_theme_support( 'custom-header', 'default-text-color' ) )
    93 	if ( empty( $header_image ) && $text_color == get_theme_support( 'custom-header', 'default-text-color' ) ) {
    92 		return;
    94 		return;
       
    95 	}
    93 
    96 
    94 	// If we get this far, we have custom styles.
    97 	// If we get this far, we have custom styles.
    95 	?>
    98 	?>
    96 	<style type="text/css" id="twentythirteen-header-css">
    99 	<style type="text/css" id="twentythirteen-header-css">
    97 	<?php
   100 	<?php
    98 		if ( ! empty( $header_image ) ) :
   101 	if ( ! empty( $header_image ) ) :
    99 	?>
   102 	?>
       
   103 	.site-header {
       
   104 		background: url(<?php header_image(); ?>) no-repeat scroll top;
       
   105 		background-size: 1600px auto;
       
   106 	}
       
   107 	@media (max-width: 767px) {
   100 		.site-header {
   108 		.site-header {
   101 			background: url(<?php header_image(); ?>) no-repeat scroll top;
   109 			background-size: 768px auto;
   102 			background-size: 1600px auto;
   110 		}
   103 		}
   111 	}
   104 		@media (max-width: 767px) {
   112 	@media (max-width: 359px) {
   105 			.site-header {
   113 		.site-header {
   106 				background-size: 768px auto;
   114 			background-size: 360px auto;
   107 			}
   115 		}
   108 		}
   116 	}
   109 		@media (max-width: 359px) {
       
   110 			.site-header {
       
   111 				background-size: 360px auto;
       
   112 			}
       
   113 		}
       
   114 	<?php
   117 	<?php
   115 		endif;
   118 		endif;
   116 
   119 
   117 		// Has the text been hidden?
   120 		// Has the text been hidden?
   118 		if ( ! display_header_text() ) :
   121 	if ( ! display_header_text() ) :
   119 	?>
   122 	?>
   120 		.site-title,
   123 	.site-title,
   121 		.site-description {
   124 	.site-description {
   122 			position: absolute;
   125 		position: absolute;
   123 			clip: rect(1px 1px 1px 1px); /* IE7 */
   126 		clip: rect(1px 1px 1px 1px); /* IE7 */
   124 			clip: rect(1px, 1px, 1px, 1px);
   127 		clip: rect(1px, 1px, 1px, 1px);
   125 		}
   128 	}
   126 	<?php
   129 	<?php
   127 			if ( empty( $header_image ) ) :
   130 	if ( empty( $header_image ) ) :
   128 	?>
   131 	?>
   129 		.site-header .home-link {
   132 	.site-header .home-link {
   130 			min-height: 0;
   133 	min-height: 0;
   131 		}
   134 	}
   132 	<?php
   135 	<?php
   133 			endif;
   136 		endif;
   134 
   137 
   135 		// If the user has set a custom color for the text, use that.
   138 		// If the user has set a custom color for the text, use that.
   136 		elseif ( $text_color != get_theme_support( 'custom-header', 'default-text-color' ) ) :
   139 		elseif ( $text_color != get_theme_support( 'custom-header', 'default-text-color' ) ) :
   137 	?>
   140 	?>
   138 		.site-title,
   141 		.site-title,
   159 		-moz-box-sizing:    border-box;
   162 		-moz-box-sizing:    border-box;
   160 		box-sizing:         border-box;
   163 		box-sizing:         border-box;
   161 		<?php
   164 		<?php
   162 		if ( ! empty( $header_image ) ) {
   165 		if ( ! empty( $header_image ) ) {
   163 			echo 'background: url(' . esc_url( $header_image ) . ') no-repeat scroll top; background-size: 1600px auto;';
   166 			echo 'background: url(' . esc_url( $header_image ) . ') no-repeat scroll top; background-size: 1600px auto;';
   164 		} ?>
   167 		}
       
   168 		?>
   165 		padding: 0 20px;
   169 		padding: 0 20px;
   166 	}
   170 	}
   167 	#headimg .home-link {
   171 	#headimg .home-link {
   168 		-webkit-box-sizing: border-box;
   172 		-webkit-box-sizing: border-box;
   169 		-moz-box-sizing:    border-box;
   173 		-moz-box-sizing:    border-box;
   171 		margin: 0 auto;
   175 		margin: 0 auto;
   172 		max-width: 1040px;
   176 		max-width: 1040px;
   173 		<?php
   177 		<?php
   174 		if ( ! empty( $header_image ) || display_header_text() ) {
   178 		if ( ! empty( $header_image ) || display_header_text() ) {
   175 			echo 'min-height: 230px;';
   179 			echo 'min-height: 230px;';
   176 		} ?>
   180 		}
       
   181 		?>
   177 		width: 100%;
   182 		width: 100%;
   178 	}
   183 	}
   179 	<?php if ( ! display_header_text() ) : ?>
   184 	<?php if ( ! display_header_text() ) : ?>
   180 	#headimg h1,
   185 	#headimg h1,
   181 	#headimg h2 {
   186 	#headimg h2 {
   225 		<div class="home-link">
   230 		<div class="home-link">
   226 			<h1 class="displaying-header-text"><a id="name" style="<?php echo esc_attr( $style ); ?>" onclick="return false;" href="#" tabindex="-1"><?php bloginfo( 'name' ); ?></a></h1>
   231 			<h1 class="displaying-header-text"><a id="name" style="<?php echo esc_attr( $style ); ?>" onclick="return false;" href="#" tabindex="-1"><?php bloginfo( 'name' ); ?></a></h1>
   227 			<h2 id="desc" class="displaying-header-text" style="<?php echo esc_attr( $style ); ?>"><?php bloginfo( 'description' ); ?></h2>
   232 			<h2 id="desc" class="displaying-header-text" style="<?php echo esc_attr( $style ); ?>"><?php bloginfo( 'description' ); ?></h2>
   228 		</div>
   233 		</div>
   229 	</div>
   234 	</div>
   230 <?php }
   235 <?php
       
   236 }