Cómo crear un icono de búsqueda con efecto de alternancia en WordPress










  • ¿Desea agregar un ícono de búsqueda con un efecto de alternar a su sitio web de WordPress? Los íconos de búsqueda con un efecto de alternar son muy comunes en los sitios web. Quizás se pregunte cómo son exactamente estos, pero estoy seguro de que los ha visto antes. El ícono de búsqueda es una lupa y el efecto de alternar ocurre cuando hace clic en ellos.

    El efecto de alternar es un cuadro de búsqueda que aparece después de hacer clic en él. Es una excelente manera de liberar espacio que puede ocupar un cuadro de búsqueda. Esto es especialmente importante para los dispositivos móviles que ya tienen problemas con sus pantallas pequeñas. Hoy, demostraré cómo crear un ícono de búsqueda con efecto de alternar en WordPress usando código CSS.

    Por qué agregar un ícono de búsqueda con un efecto de alternancia

    Las barras de búsqueda son una gran herramienta para encontrar cosas en un sitio web sin problemas, pero ocupan espacio. Esto puede no ser un problema para la mayoría de los sitios web, pero algunos sitios web tienen muchos elementos de menú. Más elementos de menú significan menos espacio y es posible que las barras de búsqueda no tengan suficiente espacio. Una gran técnica para usar es el ícono de búsqueda con un efecto de alternancia. Ocupará menos espacio que una barra de búsqueda tradicional y seguirá proporcionando a los visitantes una barra de búsqueda.

    El espacio se ha convertido en un problema mayor a medida que los teléfonos inteligentes se hicieron populares. Más del 50% de las visitas al sitio web provienen de un dispositivo móvil. Los dispositivos móviles son mucho más pequeños que un monitor de computadora estándar y los sitios web deben ser aptos para dispositivos móviles . No ser compatible con dispositivos móviles es configurar su sitio web para el fracaso.

    Cómo crear un icono de búsqueda con efecto de alternancia en WordPress

    Hoy, demostraré cómo crear un ícono de búsqueda con efecto de alternar en WordPress usando código CSS. La mayoría de las opciones de diseño se pueden cambiar con código CSS y es fácil de agregar a WordPress. El problema con la mayoría de los CSS es que todos los temas no están codificados de la misma manera. Esto dará como resultado que CSS funcione en un sitio y no en otro. El problema en este caso es que algunos temas están codificados en HTML4 y otros en HTML5. Lo más probable es que su tema esté en HTML5, pero si está usando un tema anterior, es posible que esté usando HTML4.

    No se preocupe, no necesita saber HTML para este tutorial, pero sí necesita saber en qué versión se encuentra el tema. También puede usar prueba y error para verificar qué CSS funciona en su sitio web. Si no funciona, entonces tiene HTML4 y necesita agregar una línea de código.

    Comprobación de su versión HTML

    Lo más probable es que esté usando un tema HTML5 y simplemente puede usar prueba y error para determinarlo, pero si quiere estar seguro, necesitará acceso al cPanel de su sitio web . Su proveedor de alojamiento web le proporciona la información de inicio de sesión de cPanel . No necesitará editar ningún código a menos que esté usando HTML4. Todo lo que necesita hacer es encontrar una línea de código en el archivo functions.php de su tema para saberlo.

    Comencemos iniciando sesión en cPanel y haciendo clic en la opción Administrador de archivos. El Administrador de archivos le permitirá acceder a todos los archivos relacionados con su sitio web.

    Haga clic en la opción Administrador de archivos.

    Necesita ubicar el archivo functions.php de su tema. Haga clic en el directorio public_html, luego haga clic en la carpeta wp-content. Dentro de esta carpeta, encontrará todo el contenido relacionado con su sitio web. Haga clic en la carpeta de temas e ingrese a la carpeta del tema que está utilizando actualmente. Finalmente, haz clic derecho en el archivo functions.php y selecciona la opción Editar.

    Seleccione la opción "Editar".

    Aparecerá una ventana emergente. Este cuadro le advertirá que cree una copia de seguridad de sus archivos antes de editar cualquier cosa. Esto asegurará que pueda revertir su sitio web a cuando estaba funcionando si algo sale mal. Haga clic en el botón "Editar". Se abrirá una nueva pestaña que contiene todo el código del archivo.

    Haga clic en el botón "Editar".

    Presione CTRL+F en Windows o COMMAND+F en MAC y busque “add_theme_support(“, debería obtener algunos resultados. Busque la línea que se parece a: [ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ]add_theme_support( 'html5', array([/ht_message]

    Si es HTML5, cierre todas las pestañas y no guarde ningún cambio si lo hizo por error. Sin embargo, si dice HTML4, debe agregar la siguiente línea de código al archivo functions.php de su tema: [ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ]add_theme_support('html5', array('formulario de búsqueda'));[/ht_message]

    Una vez que haya insertado el código en el archivo functions.php, haga clic en el botón "Guardar cambios" para finalizar.

    Haga clic en el botón "Guardar cambios".

    Ahora es el momento de agregar algo de CSS personalizado.

    Agregar CSS personalizado

    Ahora que sabe que su tema usa HTML5, es tan simple como pegar algunas líneas de código. En el lado izquierdo, haz clic en Apariencia y selecciona la opción Personalizar.

    Seleccione la opción CSS adicional en la parte inferior izquierda. Esto abrirá un área donde puede insertar fácilmente CSS personalizado en WordPress.

    Antes de insertar el CSS, debe crear un icono de búsqueda. Puede usar un software de edición de fotos para crear uno propio o encontrar uno en Internet. Independientemente del método que utilice, colóquelo en la carpeta de imágenes de su tema y nombre el archivo "search-icon.png" y será reconocido por el CSS.

    Copie y pegue el siguiente CSS en el cuadro de texto: [ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ].site-header .search-form {

    position: absoluto;


    derecha: 200px;


    arriba: 200px;


    }

    .site-header .search-field {

    color de fondo: transparente;


    imagen de fondo: url(images/search-icon.png);


    posición de fondo: 5px centro;


    repetición de fondo: sin repetición;


    tamaño de fondo: 24px 24px;


    borde: ninguno;


    cursor: puntero;


    altura: 37px;


    margen: 3px 0;


    relleno: 0 0 0 34px;


    posición: relativa;


    -webkit-transition: ancho 400ms facilidad, fondo 400ms facilidad;


    transición: ancho 400ms facilidad, fondo 400ms facilidad;


    ancho: 0;


    }

    .site-header .search-field:focus {

    color de fondo: #fff;


    borde: 2px sólido #c3c0ab;


    cursor: texto;


    contorno: 0;


    ancho: 230px;


    }


    .search-form


    .search-submit {


    display:none;


    }[/ht_mensaje]

    Haga clic en el botón "Publicar" para guardar y aplicar sus cambios.

    Felicitaciones, ahora puede colocarlo y posicionarlo donde desee en su sitio web. Tenga en cuenta que puede editar el CSS en cualquier momento para cambiar el tamaño del icono. Si solo está utilizando esto para usuarios móviles, el tamaño es muy importante.

    Ahorre espacio siempre que sea posible

    No es ningún secreto que es difícil poner la cantidad correcta de contenido en un sitio web. A veces no hay suficiente y otras veces hay demasiado. Tener demasiado contenido dará como resultado una "página ocupada" y está muy mal visto. Reducir elementos como un cuadro de búsqueda en un ícono de búsqueda con un efecto de alternar es una excelente manera de ahorrar espacio.

    El espacio se ha vuelto especialmente valioso a medida que los teléfonos inteligentes han ganado popularidad. Hoy en día, casi nadie puede pasar un día sin visitar un sitio web en su teléfono. Las pantallas de los teléfonos vienen en todo tipo de tamaños y puede ser difícil hacer que un sitio web sea compatible con dispositivos móviles, pero si considera que la mitad de sus vistas provendrán de usuarios móviles, definitivamente vale la pena.

    ¿Tu tema ya usaba HTML5 o necesitabas cambiarlo? ¿Creaste tu propio ícono de búsqueda o usaste uno que encontraste en línea?










  • Subir