• Saltar a la navegación principal
  • Saltar al contenido principal
Código Genesis

Código Genesis

Tutoriales de WordPress y Genesis Framework

  • Empieza aquí
  • Cuenta
    • Suscripción
    • Perfil
    • Actualizar tarjeta
    • Favoritos
    • Salir
  • Suscribirse
  • Acceder

Añadir un campo de búsqueda en la página de blog de Academy Pro

Aprende con este tutorial cómo colocar un campo de búsqueda en la página de blog en el child theme de Genesis Academy Pro mediante código.

Una de las ventajas de ser suscriptor de Código Genesis es que puedes hacer sugerencias de tutoriales. Por ejemplo, el otro día Miriam me comentaba:

Hola, ¿qué tal? Verás, me gustaría saber si es posible poner un buscador en la página del blog y que se pueda filtrar o puedan encontrar el contenido más fácilmente.

Estoy usando el theme Academy Pro.

Gracias,
Miriam 🙂

Por defecto, el child theme de Genesis Academy Pro no muestra ningún buscador en la página de blog.

Página de blog por defecto en Academy Pro.

Pero es cierto que tener una forma de buscar desde esta página puede ser muy interesante, especialmente si hay mucho contenido en ella.

Así me puse manos a la obra. 😉

Este sería el resultado final:

Y aquí tienes cómo conseguirlo.

Pasos para agregar una búsqueda al blog de Academy Pro

1. Introduce el campo de búsqueda

Añade el siguiente snippet al fichero functions.php o a tu plugin de funcionalidades:

Para ver este código y los otros 1805 snippets de esta web,
identifícate o suscríbete aquí.

Con este fragmento aprovechas el filtro genesis_before_content y la etiqueta condicional is_home para colocar el campo de búsqueda justo antes de los artículos del blog.

Ya tienes la parte estructural resuelta, ahora vamos a por el diseño. 😉

2. Personaliza los estilos del campo de búsqueda

Una vez añadido debes editar el CSS para que el nuevo campo se muestre de forma correcta en los distintos dispositivos.

Para ello, añade el siguiente snippet al final del fichero style.css:

Para ver este código y los otros 1805 snippets de esta web,
identifícate o suscríbete aquí.

Con este bloque de código consigues que se muestre el campo de búsqueda centrada.

En cambio, en dispositivos móviles, los dos campos se mostrarán centrados y ocupando el 100% del ancho.

Página de blog con búsqueda en Academy Pro en móvil.

Conclusiones

Si quieres añadir un campo de búsqueda en la página de blog en Academy Pro ahora ya sabes cómo hacerlo con un poco de código.

Aunque este snippet está pensado para una plantilla concreta, puede servirte de guía para modificar otros child themes de Genesis Framework.

¿Prefieres que lo adapte a alguno de ellos en particular? Envíame la propuesta a través del formulario de contacto y prepararé un tutorial a medida.

Ventajas de ser suscriptor. 😉

Academy Pro Búsqueda CSS Genesis Framework Infinity Pro PHP

Nahuai Badiola

Desarrollador web especializado en WordPress y Genesis Framework. CEO de Código Genesis y cofundador de OsomPress (temas y plugins para WordPress).

Para dejar dudas o preguntas sobre este código, puedes login o suscribirte.

  • Empieza aquí
  • Sobre Código Genesis
  • Preguntas frecuentes
  • Contacto

Aviso legal · Política de privacidad · Política de cookies · Condiciones de contratación
Copyright © 2023 · Código Genesis

¿Has olvidado tu contraseña?