1. 主页
  2. 文档
  3. 2020主题解剖
  4. modal-模态框
  5. 模态框-搜索

模态框-搜索

header.php:

第一部分:

<?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 ) {
?>

<buftton 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 _e( 'Search', 'twentytwenty' ); ?></span>
							</span>
						</button><!-- .search-toggle -->

					<?php } ?>

第二部分

<?php
// Output the search modal (if it is activated in the customizer).
if ( true === $enable_header_search ) {
get_template_part( 'template-parts/modal-search' );
}
?>

template-parts/modal-search:

<div class="search-modal cover-modal header-footer-group" data-modal-target-string=".search-modal">

<div class="search-modal-inner modal-inner">
<div class="section-inner">
<?php
get_search_form(
array(
'label' => __( 'Search for:', 'twentytwenty' ),
)
);
?>
<button class="toggle search-untoggle close-search-toggle fill-children-current-color" data-toggle-target=".search-modal" data-toggle-body-class="showing-search-modal" data-set-focus=".search-modal .search-field" aria-expanded="false">
<span class="screen-reader-text"><?php _e( 'Close search', 'twentytwenty' ); ?></span>
<?php twentytwenty_the_theme_svg( 'cross' ); ?>
</button><!-- .search-toggle -->

</div><!-- .section-inner -->
</div><!-- .search-modal-inner -->
</div><!-- .menu-modal -->

这篇文章对您有用吗?

我们要如何帮助您?