custom-header.php 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131
  1. <?php
  2. /**
  3. * Custom header implementation
  4. *
  5. * @link https://codex.wordpress.org/Custom_Headers
  6. *
  7. * @package WordPress
  8. * @subpackage Twenty_Seventeen
  9. * @since 1.0
  10. */
  11. /**
  12. * Set up the WordPress core custom header feature.
  13. *
  14. * @uses twentyseventeen_header_style()
  15. */
  16. function twentyseventeen_custom_header_setup() {
  17. /**
  18. * Filter Twenty Seventeen custom-header support arguments.
  19. *
  20. * @since Twenty Seventeen 1.0
  21. *
  22. * @param array $args {
  23. * An array of custom-header support arguments.
  24. *
  25. * @type string $default-image Default image of the header.
  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 $flex-height Flex support for height of header.
  29. * @type string $video Video support for header.
  30. * @type string $wp-head-callback Callback function used to styles the header image and text
  31. * displayed on the blog.
  32. * }
  33. */
  34. add_theme_support(
  35. 'custom-header',
  36. apply_filters(
  37. 'twentyseventeen_custom_header_args',
  38. array(
  39. 'default-image' => get_parent_theme_file_uri( '/assets/images/header.jpg' ),
  40. 'width' => 2000,
  41. 'height' => 1200,
  42. 'flex-height' => true,
  43. 'video' => true,
  44. 'wp-head-callback' => 'twentyseventeen_header_style',
  45. )
  46. )
  47. );
  48. register_default_headers(
  49. array(
  50. 'default-image' => array(
  51. 'url' => '%s/assets/images/header.jpg',
  52. 'thumbnail_url' => '%s/assets/images/header.jpg',
  53. 'description' => __( 'Default Header Image', 'twentyseventeen' ),
  54. ),
  55. )
  56. );
  57. }
  58. add_action( 'after_setup_theme', 'twentyseventeen_custom_header_setup' );
  59. if ( ! function_exists( 'twentyseventeen_header_style' ) ) :
  60. /**
  61. * Styles the header image and text displayed on the blog.
  62. *
  63. * @see twentyseventeen_custom_header_setup().
  64. */
  65. function twentyseventeen_header_style() {
  66. $header_text_color = get_header_textcolor();
  67. // If no custom options for text are set, let's bail.
  68. // get_header_textcolor() options: add_theme_support( 'custom-header' ) is default, hide text (returns 'blank') or any hex value.
  69. if ( get_theme_support( 'custom-header', 'default-text-color' ) === $header_text_color ) {
  70. return;
  71. }
  72. // If we get this far, we have custom styles. Let's do this.
  73. ?>
  74. <style id="twentyseventeen-custom-header-styles" type="text/css">
  75. <?php
  76. // Has the text been hidden?
  77. if ( 'blank' === $header_text_color ) :
  78. ?>
  79. .site-title,
  80. .site-description {
  81. position: absolute;
  82. clip: rect(1px, 1px, 1px, 1px);
  83. }
  84. <?php
  85. // If the user has set a custom color for the text use that.
  86. else :
  87. ?>
  88. .site-title a,
  89. .colors-dark .site-title a,
  90. .colors-custom .site-title a,
  91. body.has-header-image .site-title a,
  92. body.has-header-video .site-title a,
  93. body.has-header-image.colors-dark .site-title a,
  94. body.has-header-video.colors-dark .site-title a,
  95. body.has-header-image.colors-custom .site-title a,
  96. body.has-header-video.colors-custom .site-title a,
  97. .site-description,
  98. .colors-dark .site-description,
  99. .colors-custom .site-description,
  100. body.has-header-image .site-description,
  101. body.has-header-video .site-description,
  102. body.has-header-image.colors-dark .site-description,
  103. body.has-header-video.colors-dark .site-description,
  104. body.has-header-image.colors-custom .site-description,
  105. body.has-header-video.colors-custom .site-description {
  106. color: #<?php echo esc_attr( $header_text_color ); ?>;
  107. }
  108. <?php endif; ?>
  109. </style>
  110. <?php
  111. }
  112. endif; // End of twentyseventeen_header_style.
  113. /**
  114. * Customize video play/pause button in the custom header.
  115. *
  116. * @param array $settings Video settings.
  117. * @return array The filtered video settings.
  118. */
  119. function twentyseventeen_video_controls( $settings ) {
  120. $settings['l10n']['play'] = '<span class="screen-reader-text">' . __( 'Play background video', 'twentyseventeen' ) . '</span>' . twentyseventeen_get_svg( array( 'icon' => 'play' ) );
  121. $settings['l10n']['pause'] = '<span class="screen-reader-text">' . __( 'Pause background video', 'twentyseventeen' ) . '</span>' . twentyseventeen_get_svg( array( 'icon' => 'pause' ) );
  122. return $settings;
  123. }
  124. add_filter( 'header_video_settings', 'twentyseventeen_video_controls' );