header.php 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187
  1. <?php
  2. /**
  3. * Header file for the Twenty Twenty WordPress default theme.
  4. *
  5. * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
  6. *
  7. * @package WordPress
  8. * @subpackage Twenty_Twenty
  9. * @since Twenty Twenty 1.0
  10. */
  11. ?><!DOCTYPE html>
  12. <html class="no-js" <?php language_attributes(); ?>>
  13. <head>
  14. <meta charset="<?php bloginfo( 'La Mine' ); ?>">
  15. <meta name="viewport" content="width=device-width, initial-scale=1.0" >
  16. <link rel="profile" href="https://gmpg.org/xfn/11">
  17. <?php wp_head(); ?>
  18. </head>
  19. <body <?php body_class(); ?>>
  20. <?php
  21. wp_body_open();
  22. ?>
  23. <header id="site-header" class="header-footer-group" role="banner">
  24. <div class="header-inner section-inner">
  25. <div class="header-titles-wrapper">
  26. <?php
  27. // Check whether the header search is activated in the customizer.
  28. $enable_header_search = get_theme_mod( 'enable_header_search', true );
  29. if ( true === $enable_header_search ) {
  30. ?>
  31. <button class="toggle search-toggle mobile-search-toggle" data-toggle-target=".search-modal" data-toggle-body-class="showing-search-modal" data-set-focus=".search-modal .search-field" aria-expanded="false">
  32. <span class="toggle-inner">
  33. <span class="toggle-icon">
  34. <?php twentytwenty_the_theme_svg( 'search' ); ?>
  35. </span>
  36. <span class="toggle-text"><?php _e( 'Search', 'twentytwenty' ); ?></span>
  37. </span>
  38. </button><!-- .search-toggle -->
  39. <?php } ?>
  40. <div class="header-titles">
  41. <?php
  42. // Site title or logo.
  43. twentytwenty_site_logo();
  44. // Site description.
  45. twentytwenty_site_description();
  46. ?>
  47. </div><!-- .header-titles -->
  48. <button class="toggle nav-toggle mobile-nav-toggle" data-toggle-target=".menu-modal" data-toggle-body-class="showing-menu-modal" aria-expanded="false" data-set-focus=".close-nav-toggle">
  49. <span class="toggle-inner">
  50. <span class="toggle-icon">
  51. <?php twentytwenty_the_theme_svg( 'ellipsis' ); ?>
  52. </span>
  53. <span class="toggle-text"><?php _e( 'Menu', 'twentytwenty' ); ?></span>
  54. </span>
  55. </button><!-- .nav-toggle -->
  56. </div><!-- .header-titles-wrapper -->
  57. <div class="header-navigation-wrapper">
  58. <?php
  59. if ( has_nav_menu( 'primary' ) || ! has_nav_menu( 'expanded' ) ) {
  60. ?>
  61. <nav class="primary-menu-wrapper" aria-label="<?php esc_attr_e( 'Horizontal', 'twentytwenty' ); ?>" role="navigation">
  62. <ul class="primary-menu reset-list-style">
  63. <?php
  64. if ( has_nav_menu( 'primary' ) ) {
  65. wp_nav_menu(
  66. array(
  67. 'container' => '',
  68. 'items_wrap' => '%3$s',
  69. 'theme_location' => 'primary',
  70. )
  71. );
  72. } elseif ( ! has_nav_menu( 'expanded' ) ) {
  73. wp_list_pages(
  74. array(
  75. 'match_menu_classes' => true,
  76. 'show_sub_menu_icons' => true,
  77. 'title_li' => false,
  78. 'walker' => new TwentyTwenty_Walker_Page(),
  79. )
  80. );
  81. }
  82. ?>
  83. </ul>
  84. </nav><!-- .primary-menu-wrapper -->
  85. <?php
  86. }
  87. if ( true === $enable_header_search || has_nav_menu( 'expanded' ) ) {
  88. ?>
  89. <div class="header-toggles hide-no-js">
  90. <?php
  91. if ( has_nav_menu( 'expanded' ) ) {
  92. ?>
  93. <div class="toggle-wrapper nav-toggle-wrapper has-expanded-menu">
  94. <button class="toggle nav-toggle desktop-nav-toggle" data-toggle-target=".menu-modal" data-toggle-body-class="showing-menu-modal" aria-expanded="false" data-set-focus=".close-nav-toggle">
  95. <span class="toggle-inner">
  96. <span class="toggle-text"><?php _e( 'Menu', 'twentytwenty' ); ?></span>
  97. <span class="toggle-icon">
  98. <?php twentytwenty_the_theme_svg( 'ellipsis' ); ?>
  99. </span>
  100. </span>
  101. </button><!-- .nav-toggle -->
  102. </div><!-- .nav-toggle-wrapper -->
  103. <?php
  104. }
  105. if ( true === $enable_header_search ) {
  106. ?>
  107. <div class="toggle-wrapper search-toggle-wrapper">
  108. <button class="toggle search-toggle desktop-search-toggle" data-toggle-target=".search-modal" data-toggle-body-class="showing-search-modal" data-set-focus=".search-modal .search-field" aria-expanded="false">
  109. <span class="toggle-inner">
  110. <?php twentytwenty_the_theme_svg( 'search' ); ?>
  111. <span class="toggle-text"><?php _e( 'Search', 'twentytwenty' ); ?></span>
  112. </span>
  113. </button><!-- .search-toggle -->
  114. </div>
  115. <?php
  116. }
  117. ?>
  118. </div><!-- .header-toggles -->
  119. <?php
  120. }
  121. ?>
  122. </div><!-- .header-navigation-wrapper -->
  123. </div><!-- .header-inner -->
  124. <?php
  125. // Output the search modal (if it is activated in the customizer).
  126. if ( true === $enable_header_search ) {
  127. get_template_part( 'template-parts/modal-search' );
  128. }
  129. ?>
  130. </header><!-- #site-header -->
  131. <?php
  132. // Output the menu modal.
  133. get_template_part( 'template-parts/modal-menu' );