Cómo agregar una búsqueda a un tema de WordPress

Ahora abordemos la tarea de agregar un cuadro de búsqueda a nuestro tema personalizado de WordPress. La función de búsqueda incorporada de WordPress, que es parte del núcleo de WordPress, es bastante capaz en comparación con lo que era cuando WordPress era solo un nuevo CMS. En este tutorial, aprenderemos cómo agregar un campo de búsqueda en algún lugar del área superior derecha del sitio. Además de esto, aprenderemos cómo dar formato a los resultados de búsqueda relevantes que WordPress nos proporciona al realizar una consulta de búsqueda.

Agregar cuadro de búsqueda a Header.php

Mencionamos que nos gustaría agregar ese campo de búsqueda en el área superior derecha del sitio, entonces, ¿a qué archivo de tema crees que podríamos apuntar para hacer modificaciones? Así es, tendremos que abrir el archivo header.php y encontrar una manera de agregar alguna funcionalidad de búsqueda. Podemos hacer esto con la función get_search_form () incorporada, y también agregando solo un poco de reglas de estilo CSS a nuestro archivo style.css. Aquí está nuestro header.php actualizado y el fragmento relevante del archivo style.css.

header.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
 
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <title><?php bloginfo( 'name' ); ?></title>
	<?php wp_head() ?>
</head>
 
<body <?php body_class(); ?>>
<div class="container">
    <header class="site-header">
        <div class="header-search">
			<?php get_search_form(); ?>
        </div>
        <h1><a href="<?php echo home_url(); ?>"><?php bloginfo( 'name' ); ?></a></h1>
        <h4><?php bloginfo( 'description' ); ?></h4>
        <nav class="navigation-menu">
			<?php $args = [ 'theme_location' => 'primary' ]; ?>
			<?php wp_nav_menu( $args ) ?>
        </nav>
    </header>
	<?php if ( is_page( 'about-us' ) ) : ?>
    <h3>Thanks for visiting our page!</h3>
<?php endif ?>

style.css

1
2
3
.header-search {
    float: right;
}

Aquí está nuestra forma resultante hasta ahora.
salida de la función get_search_form

¡Lo conseguimos funcionando! Bueno, ahora al menos tenemos un cuadro de búsqueda que se muestra en la página. Así que observe cómo hicimos esto. Configuramos un elemento div envolvente que tiene una clase de 'búsqueda de encabezado', de esa manera podríamos apuntar a ese elemento para el estilo CSS. Luego, en nuestro archivo style.css agregamos esa regla de hacer flotar el cuadro de búsqueda a la derecha. Como podemos ver en la captura de pantalla, parece que ahora tenemos un cuadro de búsqueda de aspecto decente en el área superior derecha de nuestro tema.

Cómo personalizar el formulario de búsqueda de WordPress

¿Qué pasa si prefiere tener más control sobre el html que obtiene la salida de la función get_search_form ()? Bueno, en primer lugar, echemos un vistazo al html que aparece en la pantalla cuando simplemente llamamos a esa función como lo hicimos anteriormente.

Salida predeterminada de la función get_search_form ()

1
2
3
4
5
6
7
<form role="search" method="get" id="searchform" class="searchform" action="http://wordpresstutorial.dev/">
  <div>
    <label class="screen-reader-text" for="s">Search for:</label>
    <input value="" name="s" id="s" type="text">
    <input id="searchsubmit" value="Search" type="submit">
  </div>
</form>

Podemos ver que la función get_search_form () crea automáticamente una etiqueta de formulario de apertura y cierre. El from tiene una función de 'búsqueda', su método se establece en 'obtener', tiene un 'id' de 'formulario de búsqueda', una clase de 'formulario de búsqueda' y una acción de 'http://wordpresstutorial.dev/ '. Todos estos parecen valores predeterminados razonables. Dentro de la etiqueta de formulario, se configura una etiqueta div de envoltura que contiene dos etiquetas de entrada y una etiqueta de etiqueta. La etiqueta de etiqueta tiene una clase de 'screen-reader-text' y es para el atributo establecido en 's'. Esto significa que esta etiqueta apunta al elemento con una identificación de 's'. Esto tiene sentido ya que la etiqueta de entrada con un tipo de 'texto' tiene una identificación y un nombre de 's'. Finalmente, un botón de búsqueda se configura automáticamente para nosotros con la etiqueta de entrada que tiene una identificación de 'searchsubmit', un valor de 'Search' y un tipo de 'submit'. Para que puedas ver

Reemplazo de la salida HTML predeterminada de la función get_search_form () con searchform.php

Continúe y cree un nuevo archivo de tema en su carpeta de tema personalizado y asígnele el nombre searchform.php . Si regresa y vuelve a cargar su conjunto de WordPress, ¡ahora notará que su formulario de búsqueda ha desaparecido de la página! ¿Que pasó? Esto se debe a que, si hay un archivo de searchform.php en su tema, WordPress usará el contenido de ese archivo para manejar la salida de la función get_search_form () en lugar de usar la salida predeterminada.

Agreguemos algo de código a nuestro archivo searchform.php ahora. De hecho, usaremos el mismo código que usa WordPress por defecto, pero también necesitaremos usar una función especial llamada home_url ().
searchform.php

1
2
3
4
5
6
7
<form role="search" method="get" id="searchform" class="searchform" action="<?php echo home_url( '/' ); ?>">
    <div>
        <label class="screen-reader-text" for="s">Search for:</label>
        <input value="" name="s" id="s" type="text">
        <input id="searchsubmit" value="Search" type="submit">
    </div>
</form>

También hagamos que el botón se vea un poco mejor con un CSS personalizado. Aquí están las reglas de CSS que podemos aplicar a style.css para que nuestro formulario de búsqueda y nuestro botón se vean un poco menos suaves.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#searchsubmit {
    background-color: #00a0d2;
    color: white;
    padding: 5px 8px;
    font-size: 15px;
    line-height: 1.3;
    border-radius: 6px;
    cursor: pointer;
}
 
#s {
    height: 18px;
    padding: 5px 8px;
    font-size: 15px;
    line-height: 1.1;
    border-radius: 6px;
}

¡Se ve bastante bien ahora!

¿Cómo gestiona WordPress los resultados de búsqueda?

Ahora que nuestro cuadro de búsqueda se ve bastante bien en nuestro sitio, hablemos un poco sobre cómo WordPress realmente maneja la consulta de búsqueda y los resultados. Arriba, notamos que el atributo 'acción' de la etiqueta de formulario para nuestro formulario de búsqueda tenía su valor establecido en la URL de inicio de nuestro sitio. En nuestro caso, eso es http://wordpresstutorial.dev/. Puede generar su URL de inicio con la función home_url () como también aprendimos. Ahora bien, ¿qué significa realmente ese atributo de acción? Bueno, cuando un usuario envía una consulta de búsqueda, aquí es donde se envía la búsqueda. Específicamente en WordPress, se realiza una solicitud 'get' de la URL de inicio. Ahora continúe y haga una búsqueda, buscaremos 'blog JavaScript' en nuestro ejemplo.

Obtenemos un resultado razonable. Sin embargo, queremos centrarnos en la mecánica de cómo funcionó esto. Inspeccionemos la URL que ve en la ventana del navegador después de completar la búsqueda.

Acción:

Nombre:

Buscar texto:

Puede ver fácilmente qué partes del código contenidas en searchform.php corresponden a cómo se llena la URL durante una consulta de búsqueda de WordPress que usa una solicitud GET. Ahora que vemos cómo se construye la URL de búsqueda de wordpress, ¿qué pasa con cómo se muestran los resultados en la página? Bueno, tal como está ahora en nuestro tema personalizado, no tenemos un archivo especial que maneje la salida de los resultados de búsqueda de una consulta de WordPress. ¿Desea adivinar qué archivo maneja esos resultados de búsqueda? ¡Sí, es cierto! Es nuestro archivo workhorse index.php el que se encarga de mostrar los resultados en este caso. Por supuesto, como todo lo demás en WordPress, podemos crear nuestro propio archivo para manejar esto también si lo deseamos. Podemos hacer esto creando un archivo llamado search.phpen nuestra carpeta de temas. Un enfoque común a usar es copiar el contenido de lo que tiene actualmente en su archivo index.php en el archivo search.php y luego personalizar ese archivo search.php para que los resultados de la búsqueda se vean exactamente como usted desea.

Mostrar el término de búsqueda que ingresó el usuario

Una cosa realmente interesante para agregar a su página de resultados de búsqueda es algún texto tipo encabezado que le diga al usuario lo que buscó. Entonces, para nuestra última consulta, sería bueno que se muestre al usuario la cadena de algo como Resultados de búsqueda para la consulta: "Blog de JavaScript" . Podemos hacer precisamente eso con la función proporcionada por WordPress llamada the_search_query (). Creo que también usaremos PHP para completar el formulario de búsqueda con la consulta que escribimos. Necesitaremos personalizar search.php para mostrar la cadena de búsqueda que queremos y searchform.php para completar el área de texto con la consulta. Aquí están esos fragmentos resaltados.

search.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<?php
 
get_header();
 
if ( have_posts() ) :
	?>
    <h2>Search results for query: "<?php the_search_query(); ?>"</h2>
	<?php
	while ( have_posts() ) : the_post(); ?>
 
        <article class="post">
			<?php if ( has_post_thumbnail() ) { ?>
                <div class="small-thumbnail">
                    <a href="<?php the_permalink() ?>"><?php the_post_thumbnail( 'small-thumbnail' ); ?></a>
                </div>
			<?php } ?>
            <h2><a href="<?php the_permalink() ?>"><?php the_title() ?></a></h2>
            <p class="post-meta"><?php the_time( 'F jS, Y' ); ?> | <a
                        href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ), get_the_author_meta( 'user_nicename' ) ); ?>"><?php the_author(); ?></a>
                | <?php
				$categories = get_the_category();
				$comma      = ', ';
				$output     = '';
				
				if ( $categories ) {
					foreach ( $categories as $category ) {
						$output .= '<a href="' . get_category_link( $category->term_id ) . '">' . $category->cat_name . '</a>' . $comma;
					}
					echo trim( $output, $comma );
				} ?>
            </p>
            <p>
				<?php echo get_the_excerpt() ?>
                <a href="<?php the_permalink() ?>">Read more &raquo</a>
            </p>
        </article>
	
	<?php endwhile;
 
else :
	echo '<p>No search results found!</p>';
 
endif;
 
get_footer();
 
?>

searchform.php

1
2
3
4
5
6
7
<form role="search" method="get" id="searchform" class="searchform" action="<?php echo home_url( '/' ); ?>">
    <div>
        <label class="screen-reader-text" for="s">Search for:</label>
        <input value="" name="s" id="s" type="text" placeholder="<?php the_search_query(); ?>">
        <input id="searchsubmit" value="Search" type="submit">
    </div>
</form>

Sigamos adelante e intentemos la misma consulta y veamos si estamos obteniendo los resultados que buscamos. Parece que todo funciona perfectamente. El usuario escribe el texto de la consulta y hace clic en enviar, la solicitud de obtención está formateada correctamente en la URL y obtenemos los resultados que queremos con un buen resultado en la pantalla y nos informa lo que buscamos.

No se repita (DRY) con get_template_part ()
Este es un buen momento para presentar la función get_template_part () que ayuda a los desarrolladores a reducir la duplicación de código en sus temas. Es posible que haya notado que el código que tenemos en search.php, index.php, single.php y archive.php tienen un código casi idéntico en el ciclo. En otras palabras, la parte de nuestro marcado que comienza y termina con la etiqueta <article> se repite en todos estos archivos. ¿Existe una forma mejor? Sí hay. Continúe y cree un nuevo archivo llamado 'theposts.php'. Podemos agregarle el siguiente código:

theposts.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<article class="post">
	<?php if ( has_post_thumbnail() ) { ?>
        <div class="small-thumbnail">
            <a href="<?php the_permalink() ?>"><?php the_post_thumbnail( 'small-thumbnail' ); ?></a>
        </div>
	<?php } ?>
    <h2><a href="<?php the_permalink() ?>"><?php the_title() ?></a></h2>
    <p class="post-meta"><?php the_time( 'F jS, Y' ); ?> | <a
                href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ), get_the_author_meta( 'user_nicename' ) ); ?>"><?php the_author(); ?></a>
        | <?php
		$categories = get_the_category();
		$comma      = ', ';
		$output     = '';
		
		if ( $categories ) {
			foreach ( $categories as $category ) {
				$output .= '<a href="' . get_category_link( $category->term_id ) . '">' . $category->cat_name . '</a>' . $comma;
			}
			echo trim( $output, $comma );
		} ?>
    </p>
    <p>
		<?php echo get_the_excerpt() ?>
        <a href="<?php the_permalink() ?>">Read more &raquo</a>
    </p>
</article>

Con ese archivo en su lugar, ahora podemos hacer uso de get_template_part () en nuestro archivo search.php. ¡Veamos cómo!
search.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?php
 
get_header();
 
if ( have_posts() ) {
	?>
    <h2>Search results for query: "<?php the_search_query(); ?>"</h2>
	<?php
	while ( have_posts() ) {
		the_post();
		get_template_part( 'theposts' );
	}
} else {
	echo '<p>No search results found!</p>';
}
 
get_footer();
 
?>

Prueba de nuevo la función de búsqueda y verá que todo sigue funcionando muy bien. Ahora, también podemos simplificar tanto el archivo index.php como el archivo archive.php ya que ambos usan el mismo código repetitivo. Veamos esos archivos actualizados ahora.

index.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?php
 
get_header();
 
if ( have_posts() ) {
	while ( have_posts() ) {
		the_post();
		get_template_part( 'theposts' );
	}
} else {
	echo '<p>There are no posts!</p>';
}
 
get_footer();
 
?>

archive.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<?php
 
get_header();
 
if ( have_posts() ) {
	?>
    <h2><?php
		if ( is_category() ) {
			single_cat_title( 'Category Archive: ' );
		} elseif ( is_tag() ) {
			single_tag_title( 'Tag Archive: ' );
		} elseif ( is_author() ) {
			the_post();
			echo 'Author Archives: ' . get_the_author();
			rewind_posts();
		} elseif ( is_day() ) {
			echo 'Daily Archives: ' . get_the_date();
		} elseif ( is_month() ) {
			echo 'Monthly Archives: ' . get_the_date( 'F Y' );
		} elseif ( is_year() ) {
			echo 'Yearly Archives: ' . get_the_date( 'Y' );
		} else {
			echo 'Archives: ';
		}
		?></h2>
	<?php
	while ( have_posts() ) {
		the_post();
		get_template_part( 'theposts' );
	}
} else {
	echo '<p>There are no posts!</p>';
}
 
get_footer();
 
?>

Creo que estaría de acuerdo en que estos archivos ahora están más optimizados y simplificados. Cada vez que necesitemos generar las publicaciones dentro del bucle de wordpress ahora, podemos simplemente hacer referencia a esa función get_template_part () para obtener el código necesario para nosotros. Observe que la cadena que pasa como argumento a get_template_part () es el nombre real del archivo que desea incluir. Puede hacer tanto o tan poco uso de esta función como desee. Algunas personas prefieren mantenerlo SECO, mientras que a otras les gusta tener un archivo dedicado al que saben buscar si necesitan hacer un cambio en su tema.

Cómo agregar una búsqueda a un resumen de tema de WordPress

En este tutorial, vimos bien cómo agregar un cuadro de búsqueda simple a nuestro tema de WordPress. Colocamos nuestro formulario de búsqueda en el archivo header.php con la ayuda de la función get_search_form () y algunos estilos CSS personalizados. Vimos que puede personalizar la salida html del formulario de búsqueda si lo desea creando un archivo searchform.php en su tema. Los resultados de su búsqueda se muestran a través del archivo index.php, a menos que decida agregar un archivo search.php a su tema para manejar los resultados de la consulta de búsqueda por usted. Por último, nos tomamos un tiempo para secar nuestro código haciendo uso de la función get_template_part ().

Header Ads Widget

Cómo agregar una búsqueda a un tema de WordPress

Agregar cuadro de búsqueda a Header.php

Cómo personalizar el formulario de búsqueda de WordPress

Salida predeterminada de la función get_search_form ()

Reemplazo de la salida HTML predeterminada de la función get_search_form () con searchform.php

¿Cómo gestiona WordPress los resultados de búsqueda?

Mostrar el término de búsqueda que ingresó el usuario

Cómo agregar una búsqueda a un resumen de tema de WordPress

Publicar un comentario

0 Comentarios

Random Posts

Información relevante

Colaboraciones

Menu Footer Widget