Wordpress: Adicionar uma pesquisa em overlay (sem plug-in)

Neste tutorial, aprenderemos como criar ou adicionar uma caixa de pesquisa de sobreposição de tela inteira no Wordpress.

Ao longo de todo o código, usaremos algum código PHP, Jquery e CSS.

Criando uma pesquisa em tela cheia no Wordpress
A primeira coisa que você precisa fazer é adicionar algum código PHP em seu functions.php arquivo de temas.

add_filter( 'wp_nav_menu_items', 'wg_theme_menu_extras', 10, 2 );

function wg_theme_menu_extras( $menu, $args ) {
   if ('primário'!== $args->theme_location)
   	retornar $menu;

   ob_start();
       $search = '';
   $menu .= '<li class="nav-link-search"><a href="#search" class="toggle-search-box"><i class="fas fa-search"></i> </a></li>' . $search . '</li>';

   retornar $menu;
}

if (! is_admin()){

   // Registra o arquivo javascript customizado
   wp_register_script( 'custom-js', get_stylesheet_directory_uri().'/js/search.js', array('jquery'), NULL, true);

   // Enfileira o arquivo JavaScript
   wp_enqueue_script('custom-js');

   $wnm_custom = array( 'stylesheet_directory_uri' => get_stylesheet_directory_uri() );

   // Agora inclua os dados localizados em todas as páginas
   wp_localize_script( 'custom-js', 'directory_uri', $wnm_custom );

   // Adicionar formulário de pesquisa ao rodapé
   add_action( 'wp_footer', 'ult_fs_search' );

}

function ult_fs_search() {

   ?>
   <div id="ult-fs-search">
   	<button type="button" class="close">×</button>
   	<form role="search" class="form-search" method="get" id="searchform" action="<?php echo home_url( '/' );?>" >
   		<input type="text" value="" name="s" placeholder="Digite suas palavras-chave aqui" />
   		<button type="submit" class="btn btn-primary">Pesquisar</button>
   	</form>
   </div>
   <?php

}

Depois de colocar o código acima no arquivo de funções, precisamos adicionar algum CSS à folha de estilo . O CSS está abaixo.

#ult-fs-search {
    posição: fixa;
    topo: 0px;
    esquerda: 0px;
    largura: 100%;
    altura: 100%;
    cor de fundo: rgba(0, 0, 0, 0,7);
    webkit-transition: todos os 0,5s de facilidade de entrada e saída;
    -moz-transition: todos os 0,5s de facilidade de entrada e saída;
    -o-transition: todos os 0,5s de facilidade de entrada e saída;
    -ms-transition: todos os 0,5s de facilidade de entrada e saída;
    transição: todos os 0,5s de facilidade de entrada e saída;
    -webkit-transform: translate(0px, -100%) scale(0, 0);
    -moz-transform: translate(0px, -100%) scale(0, 0);
    -o-transform: translate(0px, -100%) scale(0, 0);
    -ms-transform: translate(0px, -100%) scale(0, 0);
    transform: translate(0px, -100%) scale(0, 0); opacidade: 0;
}

#ult-fs-search.open {
    -webkit-transform: translate(0px, 0px) scale(1, 1);
    -moz-transform: translate(0px, 0px) scale(1, 1);
    -o-transform: translate(0px, 0px) scale(1, 1);
    -ms-transform: translate(0px, 0px) scale(1, 1);
    transform: translate(0px, 0px) scale(1, 1);
    opacidade: 1;
    plano de fundo: rgba(27, 220, 186, 0,95);
}
#ult-fs-search input[type="text"] {
    posição: absoluta;
    superior: 50%;
    largura: 100%;
    cor: rgb(0, 0, 0);
    plano de fundo: rgba(0, 0, 0, 0);
    tamanho da fonte: 60px;
    peso da fonte: 300;
    alinhamento de texto: centro;
    borda: 0px;
    margem: 0px automático;
    margem superior: -51px;
    padding-left: 30px;
    padding-right: 30px;
    contorno: nenhum;
}

#ult-fs-search .btn {
    posição: absoluta;
    superior: 50%;
    esquerda: 50%;
    margem superior: 61px;
    margem esquerda: -45px;
}

#ult-fs-search .close {
    posição: fixa;
    superior: 15px;
    direita: 15px;
    cor: #fff;
    cor de fundo: #428bca;
    cor da borda: #357ebd;
    opacidade: 1;
    preenchimento: 10px 17px;
    tamanho da fonte: 27px;
}

Depois de tudo isso, você precisa adicionar o código Jquery. Primeiro, navegue até wp-content>>themes>>your-theme .

No arquivo de temas, você deve ver uma pasta js . Se não, então você precisa criar a pasta js .

Depois disso, crie um arquivo chamado a search.jse adicione o seguinte código a ele.

jQuery( função () {
	jQuery('a[href="#search"]').on('click', function(event) {
		event.preventDefault();
		jQuery('#ult-fs-search').addClass('open');
		jQuery('#ult-fs-search > form > input[type="text"]').focus();
	});
	jQuery('#ult-fs-search, #ult-fs-search button.close').on('click keyup', function(event) {
		if (event.target == this || event.target.className == 'fechar' || event.keyCode == 27) {
			jQuery(this).removeClass('abrir');
		}
	});
});