mirror of
https://github.com/WordPress/WordPress.git
synced 2024-08-21 05:12:59 +02:00
a3a61c5a3e
Role="navigation" was required for assistive technology to recognize HTML5 element's native ARIA roles while HTML5 and ARIA were being introduced. With the deprecation of IE11, the role attribute is only required when mapping elements that don't have native role. Props costdev, mukesh27. Fixes #54054. Built from https://develop.svn.wordpress.org/trunk@51967 git-svn-id: http://core.svn.wordpress.org/trunk@51556 1a063a9b-81f0-0310-95a4-ce76da25c4cd
188 lines
5.0 KiB
PHP
188 lines
5.0 KiB
PHP
<?php
|
|
/**
|
|
* Header file for the Twenty Twenty WordPress default theme.
|
|
*
|
|
* @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
|
|
*
|
|
* @package WordPress
|
|
* @subpackage Twenty_Twenty
|
|
* @since Twenty Twenty 1.0
|
|
*/
|
|
|
|
?><!DOCTYPE html>
|
|
|
|
<html class="no-js" <?php language_attributes(); ?>>
|
|
|
|
<head>
|
|
|
|
<meta charset="<?php bloginfo( 'charset' ); ?>">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
|
|
|
|
<link rel="profile" href="https://gmpg.org/xfn/11">
|
|
|
|
<?php wp_head(); ?>
|
|
|
|
</head>
|
|
|
|
<body <?php body_class(); ?>>
|
|
|
|
<?php
|
|
wp_body_open();
|
|
?>
|
|
|
|
<header id="site-header" class="header-footer-group" role="banner">
|
|
|
|
<div class="header-inner section-inner">
|
|
|
|
<div class="header-titles-wrapper">
|
|
|
|
<?php
|
|
|
|
// Check whether the header search is activated in the customizer.
|
|
$enable_header_search = get_theme_mod( 'enable_header_search', true );
|
|
|
|
if ( true === $enable_header_search ) {
|
|
|
|
?>
|
|
|
|
<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">
|
|
<span class="toggle-inner">
|
|
<span class="toggle-icon">
|
|
<?php twentytwenty_the_theme_svg( 'search' ); ?>
|
|
</span>
|
|
<span class="toggle-text"><?php _ex( 'Search', 'toggle text', 'twentytwenty' ); ?></span>
|
|
</span>
|
|
</button><!-- .search-toggle -->
|
|
|
|
<?php } ?>
|
|
|
|
<div class="header-titles">
|
|
|
|
<?php
|
|
// Site title or logo.
|
|
twentytwenty_site_logo();
|
|
|
|
// Site description.
|
|
twentytwenty_site_description();
|
|
?>
|
|
|
|
</div><!-- .header-titles -->
|
|
|
|
<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">
|
|
<span class="toggle-inner">
|
|
<span class="toggle-icon">
|
|
<?php twentytwenty_the_theme_svg( 'ellipsis' ); ?>
|
|
</span>
|
|
<span class="toggle-text"><?php _e( 'Menu', 'twentytwenty' ); ?></span>
|
|
</span>
|
|
</button><!-- .nav-toggle -->
|
|
|
|
</div><!-- .header-titles-wrapper -->
|
|
|
|
<div class="header-navigation-wrapper">
|
|
|
|
<?php
|
|
if ( has_nav_menu( 'primary' ) || ! has_nav_menu( 'expanded' ) ) {
|
|
?>
|
|
|
|
<nav class="primary-menu-wrapper" aria-label="<?php echo esc_attr_x( 'Horizontal', 'menu', 'twentytwenty' ); ?>">
|
|
|
|
<ul class="primary-menu reset-list-style">
|
|
|
|
<?php
|
|
if ( has_nav_menu( 'primary' ) ) {
|
|
|
|
wp_nav_menu(
|
|
array(
|
|
'container' => '',
|
|
'items_wrap' => '%3$s',
|
|
'theme_location' => 'primary',
|
|
)
|
|
);
|
|
|
|
} elseif ( ! has_nav_menu( 'expanded' ) ) {
|
|
|
|
wp_list_pages(
|
|
array(
|
|
'match_menu_classes' => true,
|
|
'show_sub_menu_icons' => true,
|
|
'title_li' => false,
|
|
'walker' => new TwentyTwenty_Walker_Page(),
|
|
)
|
|
);
|
|
|
|
}
|
|
?>
|
|
|
|
</ul>
|
|
|
|
</nav><!-- .primary-menu-wrapper -->
|
|
|
|
<?php
|
|
}
|
|
|
|
if ( true === $enable_header_search || has_nav_menu( 'expanded' ) ) {
|
|
?>
|
|
|
|
<div class="header-toggles hide-no-js">
|
|
|
|
<?php
|
|
if ( has_nav_menu( 'expanded' ) ) {
|
|
?>
|
|
|
|
<div class="toggle-wrapper nav-toggle-wrapper has-expanded-menu">
|
|
|
|
<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">
|
|
<span class="toggle-inner">
|
|
<span class="toggle-text"><?php _e( 'Menu', 'twentytwenty' ); ?></span>
|
|
<span class="toggle-icon">
|
|
<?php twentytwenty_the_theme_svg( 'ellipsis' ); ?>
|
|
</span>
|
|
</span>
|
|
</button><!-- .nav-toggle -->
|
|
|
|
</div><!-- .nav-toggle-wrapper -->
|
|
|
|
<?php
|
|
}
|
|
|
|
if ( true === $enable_header_search ) {
|
|
?>
|
|
|
|
<div class="toggle-wrapper search-toggle-wrapper">
|
|
|
|
<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">
|
|
<span class="toggle-inner">
|
|
<?php twentytwenty_the_theme_svg( 'search' ); ?>
|
|
<span class="toggle-text"><?php _ex( 'Search', 'toggle text', 'twentytwenty' ); ?></span>
|
|
</span>
|
|
</button><!-- .search-toggle -->
|
|
|
|
</div>
|
|
|
|
<?php
|
|
}
|
|
?>
|
|
|
|
</div><!-- .header-toggles -->
|
|
<?php
|
|
}
|
|
?>
|
|
|
|
</div><!-- .header-navigation-wrapper -->
|
|
|
|
</div><!-- .header-inner -->
|
|
|
|
<?php
|
|
// Output the search modal (if it is activated in the customizer).
|
|
if ( true === $enable_header_search ) {
|
|
get_template_part( 'template-parts/modal-search' );
|
|
}
|
|
?>
|
|
|
|
</header><!-- #site-header -->
|
|
|
|
<?php
|
|
// Output the menu modal.
|
|
get_template_part( 'template-parts/modal-menu' );
|