custom-header.php 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356
  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. background: url(<?php header_image(); ?>) no-repeat 50% 50%;
  126. -webkit-background-size: cover;
  127. -moz-background-size: cover;
  128. -o-background-size: cover;
  129. background-size: cover;
  130. }
  131. @media screen and (min-width: 59.6875em) {
  132. body:before {
  133. background: url(<?php header_image(); ?>) no-repeat 100% 50%;
  134. -webkit-background-size: cover;
  135. -moz-background-size: cover;
  136. -o-background-size: cover;
  137. background-size: cover;
  138. border-right: 0;
  139. }
  140. .site-header {
  141. background: transparent;
  142. }
  143. }
  144. <?php
  145. endif;
  146. // Has the text been hidden?
  147. if ( ! display_header_text() ) :
  148. ?>
  149. .site-title,
  150. .site-description {
  151. clip: rect(1px, 1px, 1px, 1px);
  152. position: absolute;
  153. }
  154. <?php endif; ?>
  155. </style>
  156. <?php
  157. }
  158. endif; // twentyfifteen_header_style
  159. /**
  160. * Enqueues front-end CSS for the header background color.
  161. *
  162. * @since Twenty Fifteen 1.0
  163. *
  164. * @see wp_add_inline_style()
  165. */
  166. function twentyfifteen_header_background_color_css() {
  167. $color_scheme = twentyfifteen_get_color_scheme();
  168. $default_color = $color_scheme[1];
  169. $header_background_color = get_theme_mod( 'header_background_color', $default_color );
  170. // Don't do anything if the current color is the default.
  171. if ( $header_background_color === $default_color ) {
  172. return;
  173. }
  174. $css = '
  175. /* Custom Header Background Color */
  176. body:before,
  177. .site-header {
  178. background-color: %1$s;
  179. }
  180. @media screen and (min-width: 59.6875em) {
  181. .site-header,
  182. .secondary {
  183. background-color: transparent;
  184. }
  185. .widget button,
  186. .widget input[type="button"],
  187. .widget input[type="reset"],
  188. .widget input[type="submit"],
  189. .widget_calendar tbody a,
  190. .widget_calendar tbody a:hover,
  191. .widget_calendar tbody a:focus {
  192. color: %1$s;
  193. }
  194. }
  195. ';
  196. wp_add_inline_style( 'twentyfifteen-style', sprintf( $css, $header_background_color ) );
  197. }
  198. add_action( 'wp_enqueue_scripts', 'twentyfifteen_header_background_color_css', 11 );
  199. /**
  200. * Enqueues front-end CSS for the sidebar text color.
  201. *
  202. * @since Twenty Fifteen 1.0
  203. */
  204. function twentyfifteen_sidebar_text_color_css() {
  205. $color_scheme = twentyfifteen_get_color_scheme();
  206. $default_color = $color_scheme[4];
  207. $sidebar_link_color = get_theme_mod( 'sidebar_textcolor', $default_color );
  208. // Don't do anything if the current color is the default.
  209. if ( $sidebar_link_color === $default_color ) {
  210. return;
  211. }
  212. // If we get this far, we have custom styles. Let's do this.
  213. $sidebar_link_color_rgb = twentyfifteen_hex2rgb( $sidebar_link_color );
  214. $sidebar_text_color = vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.7)', $sidebar_link_color_rgb );
  215. $sidebar_border_color = vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.1)', $sidebar_link_color_rgb );
  216. $sidebar_border_focus_color = vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.3)', $sidebar_link_color_rgb );
  217. $css = '
  218. /* Custom Sidebar Text Color */
  219. .site-title a,
  220. .site-description,
  221. .secondary-toggle:before {
  222. color: %1$s;
  223. }
  224. .site-title a:hover,
  225. .site-title a:focus {
  226. color: %1$s; /* Fallback for IE7 and IE8 */
  227. color: %2$s;
  228. }
  229. .secondary-toggle {
  230. border-color: %1$s; /* Fallback for IE7 and IE8 */
  231. border-color: %3$s;
  232. }
  233. .secondary-toggle:hover,
  234. .secondary-toggle:focus {
  235. border-color: %1$s; /* Fallback for IE7 and IE8 */
  236. border-color: %4$s;
  237. }
  238. .site-title a {
  239. outline-color: %1$s; /* Fallback for IE7 and IE8 */
  240. outline-color: %4$s;
  241. }
  242. @media screen and (min-width: 59.6875em) {
  243. .secondary a,
  244. .dropdown-toggle:after,
  245. .widget-title,
  246. .widget blockquote cite,
  247. .widget blockquote small {
  248. color: %1$s;
  249. }
  250. .widget button,
  251. .widget input[type="button"],
  252. .widget input[type="reset"],
  253. .widget input[type="submit"],
  254. .widget_calendar tbody a {
  255. background-color: %1$s;
  256. }
  257. .textwidget a {
  258. border-color: %1$s;
  259. }
  260. .secondary a:hover,
  261. .secondary a:focus,
  262. .main-navigation .menu-item-description,
  263. .widget,
  264. .widget blockquote,
  265. .widget .wp-caption-text,
  266. .widget .gallery-caption {
  267. color: %2$s;
  268. }
  269. .widget button:hover,
  270. .widget button:focus,
  271. .widget input[type="button"]:hover,
  272. .widget input[type="button"]:focus,
  273. .widget input[type="reset"]:hover,
  274. .widget input[type="reset"]:focus,
  275. .widget input[type="submit"]:hover,
  276. .widget input[type="submit"]:focus,
  277. .widget_calendar tbody a:hover,
  278. .widget_calendar tbody a:focus {
  279. background-color: %2$s;
  280. }
  281. .widget blockquote {
  282. border-color: %2$s;
  283. }
  284. .main-navigation ul,
  285. .main-navigation li,
  286. .secondary-toggle,
  287. .widget input,
  288. .widget textarea,
  289. .widget table,
  290. .widget th,
  291. .widget td,
  292. .widget pre,
  293. .widget li,
  294. .widget_categories .children,
  295. .widget_nav_menu .sub-menu,
  296. .widget_pages .children,
  297. .widget abbr[title] {
  298. border-color: %3$s;
  299. }
  300. .dropdown-toggle:hover,
  301. .dropdown-toggle:focus,
  302. .widget hr {
  303. background-color: %3$s;
  304. }
  305. .widget input:focus,
  306. .widget textarea:focus {
  307. border-color: %4$s;
  308. }
  309. .sidebar a:focus,
  310. .dropdown-toggle:focus {
  311. outline-color: %4$s;
  312. }
  313. }
  314. ';
  315. wp_add_inline_style( 'twentyfifteen-style', sprintf( $css, $sidebar_link_color, $sidebar_text_color, $sidebar_border_color, $sidebar_border_focus_color ) );
  316. }
  317. add_action( 'wp_enqueue_scripts', 'twentyfifteen_sidebar_text_color_css', 11 );