Modelos de Temas: Search.php

Nesta lição, vamos aprender a criar um modelo de template que é bastante usado em diversos temas do WordPress, o famoso search.php.

É ele que irá receber todas as pesquisas que seu visitante realiza dentro do seu tema, a fim de mostrar todos os conteúdos relacionados com os termos pesquisados.

Mas antes disso, você precisa aprender a criar um formulário de pesquisa no seu tema 🔎

Criando um formulário de pesquisa para o seu tema

Existem duas formas de se criar um formulário de pesquisa dentro do seu tema.

A primeira delas, envolve a importação de uma função do WordPress chamada de get_search_box().

Essa função irá adicionar o layout necessário para que haja um campo de texto atrelado a um botão de pesquisar.

Se você está comigo desde o início desta jornada, vai saber que dentro do arquivo header.php, não temos nenhuma estrutura que comporte uma área de busca.

Sem problema! Nós vamos resolver isso agora criando uma nova section logo abaixo de links-area, chamada de search-area:

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
 <head>
 <meta charset="<?php bloginfo('charset') ?>">
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <meta name="description" content="<?php bloginfo( 'description' ); ?>">
 <?php wp_head(); ?>
 </head>
 <body <?php body_class(); ?>>
 <header>
 <section class="logo-area">
 <img src="./logo.png" />
 </section>
 <section class="links-area">
 <?php wp_nav_menu(array(
 'theme_location' => 'wp_micilini_header_menu',
 'depth' => 1,
 )); ?>
 </section>
 <section class="search-area">
 <?php get_search_form(); ?>
 </section>
 </header>

O segundo método, envolve a criação manual de uma estrutura HTML, com um campo de texto onde contenha a tagname="s", junto a um formulário que leve o usuário para a URL principal do seu tema.

No meu caso, a URL principal do meu tema é esta: http://localhost/minha-primeira-aplicacao/

O resultado deve ficar mais ou menos assim:

<form role="search" method="get" id="searchform" class="searchform" action="http://localhost/minha-primeira-aplicacao/">
	<div>
		<label class="screen-reader-text" for="s">Pesquisar por:</label>
		<input type="text" value="" name="s" id="s">
		<input type="submit" id="searchsubmit" value="Pesquisar">
	</div>
</form>

É importante ressaltar que existe um problema quanto a inserir a URL do seu tema de maneira estática dentro do action do formulário, tal problema que veremos sua resolução mais a diante.

Você sabia que a função get_search_form() pode carregar um modelo de template chamado searchform.php, quando ele existe dentro da pasta raiz do seu tema?

Não, então vamos aprender a como fazer isso 🙃

Criando o searchform.php

Dentro da pasta raiz do seu tema, crie um novo arquivo chamado de searchform.php:

<form role="search" method="get" id="searchform" class="searchform" action="<?php echo esc_url(home_url('/')); ?>">
	<div>
		<label class="screen-reader-text" for="s">Pesquisar por:</label>
		<input type="text" value="<?php echo get_search_query(); ?>" name="s" id="s">
		<input type="submit" id="searchsubmit" value="Pesquisar">
	</div>
</form>

Como mostrado acima, temos um código comum de pesquisa feito em HTML, onde contém duas funções importantíssimas do WordPress, que são:

home_url('/'): Usado para retornar a URL principal do site onde o tema está instalado.

get_search_query(): Usado para retornar o valor pesquisado no campo de pesquisa. Isso faz com que o valor que você pesquisou, fique armazenado dentro do campo de texto.

Um ponto interessante, é o fato da tag action não estar estática (como apresentado no segundo método), pois caso um dia você instale esse tema em outro site do WordPress, você não precisaria ficar mudando o valor do action para a URL do site atual.

E você não quer ficar fazendo isso toda hora, não é verdade? Ou pior... falar para seu usuário fazer isso por você 🫣

Ainda falando sobre este modelo de template, é possível passar junto ao formulário, um campo de texto do tipo hidden, onde informa ao wordpress os tipos de posts que devem ser retornados na pesquisa:

<input type="hidden" value="post" name="post_type" id="post_type" /><!-- Para posts -->

<input type="hidden" name="page_type" value="page" /><!-- Para páginas -->

Ambos os inputs podem coexistir dentro de um mesmo formulário, ok?

Criando o Search.php

Dentro da pasta raiz do seu tema, vamos precisar criar um modelo de template que irá lidar com os resultados de pesquisa do nosso tema, o modelo é chamado de search.php:

<?php
/**
 * O template para exibir páginas de pesquisa.
 *
 * @link https://codex.wordpress.org/Template_Hierarchy
 *
 * @package WPMicilini
 * @since 1.0
 */

get_header(); 

?>

<!-- Insira os comandos necessários para buscar suas postagens -->

<?php
get_footer();
?>

Como podemos ver, o conteúdo inicial sempre começa com a abertura das tags PHP, onde inserimos algumas informações relevantes sobre o arquivo em formato de comentários, e é claro, importamos o cabeçalho e o rodapé por meio das funções get_header() e get_footer().

No local onde está escrito , é onde faremos a mágica acontecer, inserindo um punhado de código, como estes que estamos vendo abaixo:

<div class="data-div">

<h1>Resultado Para: <?php echo get_search_query(); ?></h1>

<?php if ( have_posts() ) : ?>

<!-- Inicio Formulário de Pesquisa -->
<?php get_search_form(); ?>
<!-- Fim Formulário de Pesquisa -->

<!-- Inicio Carregamento de Posts -->
<?php while(have_posts()): the_post(); ?>
<article id="post-<?php the_ID();?>" <?php post_class(); ?>>
 <header>
 <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
 <?php if( 'post' == get_post_type() ): ?>
 <div class="dados-info">
 <p>Postado em: <?php echo get_the_date(); ?> by <?php the_author_posts_link(); ?></p>
 <p>Categorias: <?php the_category( ' ' ); ?></p>
 <p>Tags: <?php the_tags( '', ', ' ); ?></p> 
 </div>
 <?php endif; ?>
 </header>
 <div class="dados-conteudo">
 <?php the_excerpt(); ?>
 </div>
</article>
<?php endwhile; ?>
<!-- Fim Carregamento de Posts -->

<!-- Fim Paginação do Conteúdo -->
<?php the_posts_pagination(); ?>
<!-- Fim Páginação do Conteúdo -->

<?php else : ?>
<p>Termos pesquisados não encontrados.</p>
<?php endif;?>

</div>

No comando acima, começamos definindo uma div que vai encapsular todo o conteúdo que será mostrado dali em diante.

Começamos fazendo a validação com a função have_posts(), para checar se existem postagens a serem mostradas relacionadas a pesquisa, caso negativo, a execução do código pula para o else, que por sua vez, mostra a mensagem: Termos pesquisados não encontrados.

No bloco [Formulário de Pesquisa], estamos seguindo uma recomendação do próprio WordPress, onde ele nos recomenda inserir um campo de busca também nesta página, mesmo que exista um campo de busca no header.php.

get_search_form(): Função responsável por importar o formulário de pesquisa existente no arquivo searchform.php.

No bloco [Carregamento de Posts], estamos usando as funções necessárias para carregar todas as informações relacionadas a aquele post.

the_ID(): Função usada para retornar o ID relacionado aquela postagem.

post_class(): Retorna o formato de conteúdo daquela postagem, aqui ele vai adicionar automaticamente classes como "post", "type-post" (para postagens padrão), "category-nome-da-categoria" (para a categoria da postagem), "tag-nome-da-tag" (para cada tag da postagem) e outras classes relevantes.

É utilizada para adicionar classes CSS a um elemento que exibe uma postagem no loop de postagens, permitindo a flexibilização e estilização da tag HTML.

the_permalink(): Função usada para retornar o link que vai direto ao Post. Ou seja, leva o usuário para a página de single.php.

the_title(): Função usada para retornar o título do Post.

get_the_date(): Função usada para retornar a data da publicação do Post.

the_author_posts_link(): Função usada para exibir um link para a página do autor que contém uma lista de todas as postagens publicadas por um autor específico. Ou seja, leva o usuário para a página de author.php.

the_category(): Função que retorna todas as categorias daquele post.

the_tags(): Função que retorna todas as tags daquele post separadas por vírgulas.

the_excerpt(): Função que retorna uma pequena descrição relacionada a aquele post.

No bloco [Paginação do Conteúdo], estamos fazendo o uso do comando the_posts_navigation(), que é usada para exibir a navegação entre as páginas de postagens, quando há mais de uma página de resultados em um conjunto de postagens.

Veja como ficou o resultado final do arquivo search.php:

<?php
/**
 * O template para exibir páginas de pesquisa.
 *
 * @link https://codex.wordpress.org/Template_Hierarchy
 *
 * @package WPMicilini
 * @since 1.0
 */

get_header(); 

?>

<div class="data-div">

<h1>Resultado Para: <?php echo get_search_query(); ?></h1>

<?php if ( have_posts() ) : ?>

<!-- Inicio Formulário de Pesquisa -->
<?php get_search_form(); ?>
<!-- Fim Formulário de Pesquisa -->

<!-- Inicio Carregamento de Posts -->
<?php while(have_posts()): the_post(); ?>
<article id="post-<?php the_ID();?>" <?php post_class(); ?>>
 <header>
 <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
 <?php if( 'post' == get_post_type() ): ?>
 <div class="dados-info">
 <p>Postado em: <?php echo get_the_date(); ?> by <?php the_author_posts_link(); ?></p>
 <p>Categorias: <?php the_category( ' ' ); ?></p>
 <p>Tags: <?php the_tags( '', ', ' ); ?></p> 
 </div>
 <?php endif; ?>
 </header>
 <div class="dados-conteudo">
 <?php the_excerpt(); ?>
 </div>
</article>
<?php endwhile; ?>
<!-- Fim Carregamento de Posts -->

<!-- Fim Paginação do Conteúdo -->
<?php the_posts_pagination(); ?>
<!-- Fim Páginação do Conteúdo -->

<?php else : ?>
<p>Termos pesquisados não encontrados.</p>
<?php endif;?>

</div>

<?php
get_footer();
?>

Como acessar a página de pesquisa

Para acessar a página de pesquisa como um visitante, basta abrir qualquer página do seu tema, inserir no campo de busca o termo e clicar no botão de [Pesquisar].

Automaticamente você será direcionado a página de search.php (/?s=termo), com os possíveis posts que foram encontrados.

Variações do search.php

Sim, o search.php assim como outros modelos de temas, também conta com algumas variações, vejamos cada uma delas a seguir:

search-{term}.php: Permite que você crie modelos personalizados para resultados de pesquisa associados a termos de pesquisa específicos. Por exemplo: search-banana.php, que será carregado quando o usuário escrever banana na pesquisa.

search-{search_type}.php: Permite que você crie modelos personalizados para resultados de pesquisa associados ao tipo de busca realizada. Por exemplo: search-products.php para resultados de pesquisa específicos de produtos.

search-{post_type}.php: Permite que você crie modelos personalizados para resultados de pesquisa associados com o formato de post. Por exemplo: search-movies.php para resultados de pesquisa específicos de filmes.

É importante ressaltar que ao usar as variações ditas acima, o WordPress automaticamente vai reconhecer esses modelos específicos ao exibir postagens buscadas.

Caso não exista tais arquivos, o wordpress seguirá a hierarquia de modo a abrir o arquivo mais genérico que é o search.php.

E caso ele não exista, o wordpress vai parar no index.php.

Conclusão

Nesta lição você aprendeu sobre o modelo de tema search.php e suas variações.

Até a próxima 😁

Modelos de Temas: Search.php