custom-header.php 9.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370
  1. <?php
  2. /**
  3. * Custom Header functionality for Twenty Fifteen
  4. *
  5. * @package WordPress
  6. * @subpackage Twenty_Fifteen
  7. * @since Twenty Fifteen 1.0
  8. */
  9. /**
  10. * Set up the WordPress core custom header feature.
  11. *
  12. * @uses twentyfifteen_header_style()
  13. */
  14. function twentyfifteen_custom_header_setup() {
  15. $color_scheme = twentyfifteen_get_color_scheme();
  16. $default_text_color = trim( $color_scheme[4], '#' );
  17. /**
  18. * Filter Twenty Fifteen custom-header support arguments.
  19. *
  20. * @since Twenty Fifteen 1.0
  21. *
  22. * @param array $args {
  23. * An array of custom-header support arguments.
  24. *
  25. * @type string $default_text_color Default color of the header text.
  26. * @type int $width Width in pixels of the custom header image. Default 954.
  27. * @type int $height Height in pixels of the custom header image. Default 1300.
  28. * @type string $wp-head-callback Callback function used to styles the header image and text
  29. * displayed on the blog.
  30. * }
  31. */
  32. add_theme_support( 'custom-header', apply_filters( 'twentyfifteen_custom_header_args', array(
  33. 'default-text-color' => $default_text_color,
  34. 'width' => 954,
  35. 'height' => 1300,
  36. 'wp-head-callback' => 'twentyfifteen_header_style',
  37. ) ) );
  38. }
  39. add_action( 'after_setup_theme', 'twentyfifteen_custom_header_setup' );
  40. /**
  41. * Convert HEX to RGB.
  42. *
  43. * @since Twenty Fifteen 1.0
  44. *
  45. * @param string $color The original color, in 3- or 6-digit hexadecimal form.
  46. * @return array Array containing RGB (red, green, and blue) values for the given
  47. * HEX code, empty array otherwise.
  48. */
  49. function twentyfifteen_hex2rgb( $color ) {
  50. $color = trim( $color, '#' );
  51. if ( strlen( $color ) == 3 ) {
  52. $r = hexdec( substr( $color, 0, 1 ).substr( $color, 0, 1 ) );
  53. $g = hexdec( substr( $color, 1, 1 ).substr( $color, 1, 1 ) );
  54. $b = hexdec( substr( $color, 2, 1 ).substr( $color, 2, 1 ) );
  55. } else if ( strlen( $color ) == 6 ) {
  56. $r = hexdec( substr( $color, 0, 2 ) );
  57. $g = hexdec( substr( $color, 2, 2 ) );
  58. $b = hexdec( substr( $color, 4, 2 ) );
  59. } else {
  60. return array();
  61. }
  62. return array( 'red' => $r, 'green' => $g, 'blue' => $b );
  63. }
  64. if ( ! function_exists( 'twentyfifteen_header_style' ) ) :
  65. /**
  66. * Styles the header image and text displayed on the blog.
  67. *
  68. * @since Twenty Fifteen 1.0
  69. *
  70. * @see twentyfifteen_custom_header_setup()
  71. */
  72. function twentyfifteen_header_style() {
  73. $header_image = get_header_image();
  74. // If no custom options for text are set, let's bail.
  75. if ( empty( $header_image ) && display_header_text() ) {
  76. return;
  77. }
  78. // If we get this far, we have custom styles. Let's do this.
  79. ?>
  80. <style type="text/css" id="twentyfifteen-header-css">
  81. <?php
  82. // Short header for when there is no Custom Header and Header Text is hidden.
  83. if ( empty( $header_image ) && ! display_header_text() ) :
  84. ?>
  85. .site-header {
  86. padding-top: 14px;
  87. padding-bottom: 14px;
  88. }
  89. .site-branding {
  90. min-height: 42px;
  91. }
  92. @media screen and (min-width: 46.25em) {
  93. .site-header {
  94. padding-top: 21px;
  95. padding-bottom: 21px;
  96. }
  97. .site-branding {
  98. min-height: 56px;
  99. }
  100. }
  101. @media screen and (min-width: 55em) {
  102. .site-header {
  103. padding-top: 25px;
  104. padding-bottom: 25px;
  105. }
  106. .site-branding {
  107. min-height: 62px;
  108. }
  109. }
  110. @media screen and (min-width: 59.6875em) {
  111. .site-header {
  112. padding-top: 0;
  113. padding-bottom: 0;
  114. }
  115. .site-branding {
  116. min-height: 0;
  117. }
  118. }
  119. <?php
  120. endif;
  121. // Has a Custom Header been added?
  122. if ( ! empty( $header_image ) ) :
  123. ?>
  124. .site-header {
  125. /*
  126. * No shorthand so the Customizer can override individual properties.
  127. * @see https://core.trac.wordpress.org/ticket/31460
  128. */
  129. background-image: url(<?php header_image(); ?>);
  130. background-repeat: no-repeat;
  131. background-position: 50% 50%;
  132. -webkit-background-size: cover;
  133. -moz-background-size: cover;
  134. -o-background-size: cover;
  135. background-size: cover;
  136. }
  137. @media screen and (min-width: 59.6875em) {
  138. body:before {
  139. /*
  140. * No shorthand so the Customizer can override individual properties.
  141. * @see https://core.trac.wordpress.org/ticket/31460
  142. */
  143. background-image: url(<?php header_image(); ?>);
  144. background-repeat: no-repeat;
  145. background-position: 100% 50%;
  146. -webkit-background-size: cover;
  147. -moz-background-size: cover;
  148. -o-background-size: cover;
  149. background-size: cover;
  150. border-right: 0;
  151. }
  152. .site-header {
  153. background: transparent;
  154. }
  155. }
  156. <?php
  157. endif;
  158. // Has the text been hidden?
  159. if ( ! display_header_text() ) :
  160. ?>
  161. .site-title,
  162. .site-description {
  163. clip: rect(1px, 1px, 1px, 1px);
  164. position: absolute;
  165. }
  166. <?php endif; ?>
  167. </style>
  168. <?php
  169. }
  170. endif; // twentyfifteen_header_style
  171. /**
  172. * Enqueues front-end CSS for the header background color.
  173. *
  174. * @since Twenty Fifteen 1.0
  175. *
  176. * @see wp_add_inline_style()
  177. */
  178. function twentyfifteen_header_background_color_css() {
  179. $color_scheme = twentyfifteen_get_color_scheme();
  180. $default_color = $color_scheme[1];
  181. $header_background_color = get_theme_mod( 'header_background_color', $default_color );
  182. // Don't do anything if the current color is the default.
  183. if ( $header_background_color === $default_color ) {
  184. return;
  185. }
  186. $css = '
  187. /* Custom Header Background Color */
  188. body:before,
  189. .site-header {
  190. background-color: %1$s;
  191. }
  192. @media screen and (min-width: 59.6875em) {
  193. .site-header,
  194. .secondary {
  195. background-color: transparent;
  196. }
  197. .widget button,
  198. .widget input[type="button"],
  199. .widget input[type="reset"],
  200. .widget input[type="submit"],
  201. .widget_calendar tbody a,
  202. .widget_calendar tbody a:hover,
  203. .widget_calendar tbody a:focus {
  204. color: %1$s;
  205. }
  206. }
  207. ';
  208. wp_add_inline_style( 'twentyfifteen-style', sprintf( $css, $header_background_color ) );
  209. }
  210. add_action( 'wp_enqueue_scripts', 'twentyfifteen_header_background_color_css', 11 );
  211. /**
  212. * Enqueues front-end CSS for the sidebar text color.
  213. *
  214. * @since Twenty Fifteen 1.0
  215. */
  216. function twentyfifteen_sidebar_text_color_css() {
  217. $color_scheme = twentyfifteen_get_color_scheme();
  218. $default_color = $color_scheme[4];
  219. $sidebar_link_color = get_theme_mod( 'sidebar_textcolor', $default_color );
  220. // Don't do anything if the current color is the default.
  221. if ( $sidebar_link_color === $default_color ) {
  222. return;
  223. }
  224. // If we get this far, we have custom styles. Let's do this.
  225. $sidebar_link_color_rgb = twentyfifteen_hex2rgb( $sidebar_link_color );
  226. $sidebar_text_color = vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.7)', $sidebar_link_color_rgb );
  227. $sidebar_border_color = vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.1)', $sidebar_link_color_rgb );
  228. $sidebar_border_focus_color = vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.3)', $sidebar_link_color_rgb );
  229. $css = '
  230. /* Custom Sidebar Text Color */
  231. .site-title a,
  232. .site-description,
  233. .secondary-toggle:before {
  234. color: %1$s;
  235. }
  236. .site-title a:hover,
  237. .site-title a:focus {
  238. color: %1$s; /* Fallback for IE7 and IE8 */
  239. color: %2$s;
  240. }
  241. .secondary-toggle {
  242. border-color: %1$s; /* Fallback for IE7 and IE8 */
  243. border-color: %3$s;
  244. }
  245. .secondary-toggle:hover,
  246. .secondary-toggle:focus {
  247. border-color: %1$s; /* Fallback for IE7 and IE8 */
  248. border-color: %4$s;
  249. }
  250. .site-title a {
  251. outline-color: %1$s; /* Fallback for IE7 and IE8 */
  252. outline-color: %4$s;
  253. }
  254. @media screen and (min-width: 59.6875em) {
  255. .secondary a,
  256. .dropdown-toggle:after,
  257. .widget-title,
  258. .widget blockquote cite,
  259. .widget blockquote small {
  260. color: %1$s;
  261. }
  262. .widget button,
  263. .widget input[type="button"],
  264. .widget input[type="reset"],
  265. .widget input[type="submit"],
  266. .widget_calendar tbody a {
  267. background-color: %1$s;
  268. }
  269. .textwidget a {
  270. border-color: %1$s;
  271. }
  272. .secondary a:hover,
  273. .secondary a:focus,
  274. .main-navigation .menu-item-description,
  275. .widget,
  276. .widget blockquote,
  277. .widget .wp-caption-text,
  278. .widget .gallery-caption {
  279. color: %2$s;
  280. }
  281. .widget button:hover,
  282. .widget button:focus,
  283. .widget input[type="button"]:hover,
  284. .widget input[type="button"]:focus,
  285. .widget input[type="reset"]:hover,
  286. .widget input[type="reset"]:focus,
  287. .widget input[type="submit"]:hover,
  288. .widget input[type="submit"]:focus,
  289. .widget_calendar tbody a:hover,
  290. .widget_calendar tbody a:focus {
  291. background-color: %2$s;
  292. }
  293. .widget blockquote {
  294. border-color: %2$s;
  295. }
  296. .main-navigation ul,
  297. .main-navigation li,
  298. .secondary-toggle,
  299. .widget input,
  300. .widget textarea,
  301. .widget table,
  302. .widget th,
  303. .widget td,
  304. .widget pre,
  305. .widget li,
  306. .widget_categories .children,
  307. .widget_nav_menu .sub-menu,
  308. .widget_pages .children,
  309. .widget abbr[title] {
  310. border-color: %3$s;
  311. }
  312. .dropdown-toggle:hover,
  313. .dropdown-toggle:focus,
  314. .widget hr {
  315. background-color: %3$s;
  316. }
  317. .widget input:focus,
  318. .widget textarea:focus {
  319. border-color: %4$s;
  320. }
  321. .sidebar a:focus,
  322. .dropdown-toggle:focus {
  323. outline-color: %4$s;
  324. }
  325. }
  326. ';
  327. wp_add_inline_style( 'twentyfifteen-style', sprintf( $css, $sidebar_link_color, $sidebar_text_color, $sidebar_border_color, $sidebar_border_focus_color ) );
  328. }
  329. add_action( 'wp_enqueue_scripts', 'twentyfifteen_sidebar_text_color_css', 11 );