custom-header.php 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
  1. <?php
  2. /**
  3. * Implement Custom Header functionality for Twenty Fourteen
  4. *
  5. * @package WordPress
  6. * @subpackage Twenty_Fourteen
  7. * @since Twenty Fourteen 1.0
  8. */
  9. /**
  10. * Set up the WordPress core custom header settings.
  11. *
  12. * @since Twenty Fourteen 1.0
  13. *
  14. * @uses twentyfourteen_header_style()
  15. * @uses twentyfourteen_admin_header_style()
  16. * @uses twentyfourteen_admin_header_image()
  17. */
  18. function twentyfourteen_custom_header_setup() {
  19. /**
  20. * Filter Twenty Fourteen custom-header support arguments.
  21. *
  22. * @since Twenty Fourteen 1.0
  23. *
  24. * @param array $args {
  25. * An array of custom-header support arguments.
  26. *
  27. * @type bool $header_text Whether to display custom header text. Default false.
  28. * @type int $width Width in pixels of the custom header image. Default 1260.
  29. * @type int $height Height in pixels of the custom header image. Default 240.
  30. * @type bool $flex_height Whether to allow flexible-height header images. Default true.
  31. * @type string $admin_head_callback Callback function used to style the image displayed in
  32. * the Appearance > Header screen.
  33. * @type string $admin_preview_callback Callback function used to create the custom header markup in
  34. * the Appearance > Header screen.
  35. * }
  36. */
  37. add_theme_support( 'custom-header', apply_filters( 'twentyfourteen_custom_header_args', array(
  38. 'default-text-color' => 'fff',
  39. 'width' => 1260,
  40. 'height' => 240,
  41. 'flex-height' => true,
  42. 'wp-head-callback' => 'twentyfourteen_header_style',
  43. 'admin-head-callback' => 'twentyfourteen_admin_header_style',
  44. 'admin-preview-callback' => 'twentyfourteen_admin_header_image',
  45. ) ) );
  46. }
  47. add_action( 'after_setup_theme', 'twentyfourteen_custom_header_setup' );
  48. if ( ! function_exists( 'twentyfourteen_header_style' ) ) :
  49. /**
  50. * Styles the header image and text displayed on the blog
  51. *
  52. * @see twentyfourteen_custom_header_setup().
  53. *
  54. */
  55. function twentyfourteen_header_style() {
  56. $text_color = get_header_textcolor();
  57. // If no custom color for text is set, let's bail.
  58. if ( display_header_text() && $text_color === get_theme_support( 'custom-header', 'default-text-color' ) )
  59. return;
  60. // If we get this far, we have custom styles.
  61. ?>
  62. <style type="text/css" id="twentyfourteen-header-css">
  63. <?php
  64. // Has the text been hidden?
  65. if ( ! display_header_text() ) :
  66. ?>
  67. .site-title,
  68. .site-description {
  69. clip: rect(1px 1px 1px 1px); /* IE7 */
  70. clip: rect(1px, 1px, 1px, 1px);
  71. position: absolute;
  72. }
  73. <?php
  74. // If the user has set a custom color for the text, use that.
  75. elseif ( $text_color != get_theme_support( 'custom-header', 'default-text-color' ) ) :
  76. ?>
  77. .site-title a {
  78. color: #<?php echo esc_attr( $text_color ); ?>;
  79. }
  80. <?php endif; ?>
  81. </style>
  82. <?php
  83. }
  84. endif; // twentyfourteen_header_style
  85. if ( ! function_exists( 'twentyfourteen_admin_header_style' ) ) :
  86. /**
  87. * Style the header image displayed on the Appearance > Header screen.
  88. *
  89. * @see twentyfourteen_custom_header_setup()
  90. *
  91. * @since Twenty Fourteen 1.0
  92. */
  93. function twentyfourteen_admin_header_style() {
  94. ?>
  95. <style type="text/css" id="twentyfourteen-admin-header-css">
  96. .appearance_page_custom-header #headimg {
  97. background-color: #000;
  98. border: none;
  99. max-width: 1260px;
  100. min-height: 48px;
  101. }
  102. #headimg h1 {
  103. font-family: Lato, sans-serif;
  104. font-size: 18px;
  105. line-height: 48px;
  106. margin: 0 0 0 30px;
  107. }
  108. #headimg h1 a {
  109. color: #fff;
  110. text-decoration: none;
  111. }
  112. #headimg img {
  113. vertical-align: middle;
  114. }
  115. </style>
  116. <?php
  117. }
  118. endif; // twentyfourteen_admin_header_style
  119. if ( ! function_exists( 'twentyfourteen_admin_header_image' ) ) :
  120. /**
  121. * Create the custom header image markup displayed on the Appearance > Header screen.
  122. *
  123. * @see twentyfourteen_custom_header_setup()
  124. *
  125. * @since Twenty Fourteen 1.0
  126. */
  127. function twentyfourteen_admin_header_image() {
  128. ?>
  129. <div id="headimg">
  130. <?php if ( get_header_image() ) : ?>
  131. <img src="<?php header_image(); ?>" alt="">
  132. <?php endif; ?>
  133. <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>
  134. </div>
  135. <?php
  136. }
  137. endif; // twentyfourteen_admin_header_image