Inicio » Apps y Software

Cómo editar la barra de búsqueda en WordPress (En 3 Pasos)

Por sara williams
Cómo editar la barra de búsqueda en WordPress (En 3 Pasos)
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.

Paso 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".

Paso 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:

Utiliza la etiqueta

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.

Paso 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".