Cómo editar la barra de búsqueda en WordPress

Escrito por sara williams | Traducido por daniel cardona
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo editar la barra de búsqueda en WordPress
Usa "searchform.php" para editar barras de búsqueda en WordPress. (Jack Hollingsworth/Photodisc/Getty Images)

WordPress incluye un complemento de barra de búsqueda para su uso en la barra lateral y una etiqueta de plantilla, incorporando funciones de PHP, para hacer barras laterales en los archivos. Si bien es fácil agregar una barra de búsqueda a tu blog, no es obvio cómo modificar la apariencia de la barra de búsqueda. Se puede reemplazar el código predeterminado del motor de búsqueda mediante la creación de un archivo "searchform.php". Utiliza HTML para crear el formulario que desees y luego el estilo que utiliza código CSS. Debes utilizar un código especial en el formulario para hacer que funcione.

Nivel de dificultad:
Moderado

Otras personas están leyendo

Instrucciones

  1. 1

    Accede a tu panel de WordPress y ve a "Apariencia" en el menú de la izquierda. Haz clic en el "Editor" debajo de "Apariencia" para cargar la pantalla de edición de tema. Busca un archivo en el lado de la derecha llamado "searchform.php" y haz clic en su enlace. Crea un archivo y nómbralo "searchform.php" y luego súbelo a tu tema si no existe todavía. El archivo va en la siguiente ubicación:

    /public_html/wp-content/themes/theme-name/

    Reemplaza "theme-name" con el nombre del tema que utilizas. A veces "public_html" es "www".

  2. 2

    Edita o codifica el HTML de tu "searchform.php" para satisfacer tus necesidades. Este archivo también puede incluir código PHP. Aquí está un ejemplo:

    <form id="searchform" method="get" action="/index.php"> <input type="text" name="s" size="15" />

    <input type="submit" value="Search" /> </form>

    Utiliza la etiqueta <form> como se muestra arriba, incluyendo la identificación, el método y la acción para que funcione correctamente. También debes mencionar el campo de texto "s" para que pueda funcionar con WordPress. Agrega cualquier código HTML que te guste, y añade ID y nombres de clase a las etiquetas que necesitas para hacer referencia en el código CSS.

  3. 3

    Edita el archivo "style.css" usando el editor de temas de pantalla o edítalo en tu computadora y cárgalo en el servidor en el mismo directorio como "searchform.php". Utiliza el código CSS en "style.css" al estilo del buscador. Aquí está un ejemplo:

    searchfield {border: 1px solid #ccc; font-style: italic;}

    El código coloca un borde de un píxel de ancho, de color gris claro en todo el campo de búsqueda y hace que el texto quede en cursiva. También puedes editar el botón o el otro texto en el archivo "searchform.php".

Consejos y advertencias

  • Utiliza etiquetas condicionales de WordPress para mostrar distintos tipos de barras de búsqueda en función de lo que la página de la barra de búsqueda muestra. Esta técnica requiere algunos conocimientos de programación PHP.
  • Utiliza el nombre de la clase para tus barras laterales al estilo de la barra de búsqueda de forma diferente cuando aparece en las barras laterales. El código CSS puede tener este aspecto: .sidebars #searchfield {background: white;}
  • Siempre realiza una copia de seguridad de tus archivos de temas antes de editarlos.

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles