Cómo hacer un encabezado adhesivo en WordPress

En la última década más o menos, se ha puesto un énfasis cada vez mayor en la navegación del sitio web. Esto ha coincidido con el uso generalizado de teléfonos inteligentes que tienen opciones de navegación limitadas en comparación con la interfaz de escritorio tradicional. La diferencia en el diseño del sitio web es más que evidente si observa una comparación entre un sitio de 2011 y uno que se hizo ahora.

Uno de los principales métodos que se utilizaron para reconfigurar los diseños del sitio fueron los elementos fijos. Con nombres apropiados, estos elementos se adhieren a la página en sus bordes cuando se mueve por ella, es decir, mantienen su posición original (piense en los paneles congelados en Excel y tendrá una buena idea de cómo funciona).

Arriba, abajo, izquierda y derecha

Los elementos pegajosos generalmente se reservan para menús, encabezados y/o barras de estado; estos brindan una gran flexibilidad al visitante porque puede cambiar instantáneamente de una página a la siguiente sin tener que retroceder en absoluto. Además, para empezar, todos estos están colocados en los bordes superior e inferior de la página, lo que funciona muy bien con toda la premisa. Sería extremadamente difícil construir una página alrededor de un elemento adhesivo que se coloca en el centro de una página.

Rara vez se pueden encontrar también en los bordes izquierdo y derecho, con las mismas funciones, solo que con un diseño diferente. En estos casos, estarán ocultos hasta que pases el cursor sobre ellos o los toques en la pantalla.

ahorradores de espacio

Lo interesante de los elementos adhesivos es que le ahorran espacio en la página y en el sitio en general; en realidad, se pueden usar para reemplazar páginas completas. Esto se debe a que dejan intacto el cuerpo principal del sitio y hacen que los bordes sean herramientas multifuncionales que asumen muchas de las funciones de la página. Solo piense en el diseño promedio de su sitio por un momento.

La parte superior está reservada para los menús que implican páginas ordenadas a través de categorías designadas y una barra de búsqueda. Ambos están ocultos detrás de una barra mientras se desplaza y se expanden cuando es necesario. Si este no fuera el caso, solo el árbol del menú ocuparía toda la sección superior de su página y no "seguiría" al desplazarse hacia abajo, por lo que su visitante tendría que moverse constantemente hacia arriba y hacia abajo solo para navegar por las páginas. .

Por otro lado, un elemento inferior fijo puede reemplazar una página de soporte completa con bastante facilidad: solo agregue el correo electrónico y / o el número junto con un botón de chat, y estará listo para comenzar. Estás proporcionando a tus visitantes una forma constantemente presente de contactarte. Una vez más, la aplicación práctica es fantástica: un cliente se desplaza por las páginas de su producto, tiene una pregunta y puede averiguar instantáneamente lo que necesita haciendo clic en el botón de chat.

Creación de elementos adhesivos

Cuando hablamos de WordPress, siempre hay numerosas formas de hacer cualquier cosa que se te ocurra, y lo mismo ocurre aquí. Puede crear elementos adhesivos manualmente dentro del editor predeterminado, o puede usar un complemento que reemplace la necesidad de codificar con una interfaz amigable para principiantes. El contraste entre los resultados finales es mínimo, pero la forma en que llegas allí marca la diferencia. Para nuestro ejemplo, usaremos encabezados fijos ya que son, con mucho, el elemento más común que se hace para pegar.

Creación manual de un encabezado fijo

Crear un encabezado fijo manualmente en WordPress requiere el uso de código CSS. Sin ser demasiado técnico, el código CSS es algo que podemos agregar a prácticamente cualquier elemento de una página para modificar sus propiedades. Al codificar manualmente, este es nuestro principal método de personalización. El uso de CSS primero requiere que el encabezado esté presente en una página, así que asegúrese de que haya algo para personalizar en primer lugar. WordPress simplifica este proceso porque incluso el editor predeterminado da la opción de agregarlo con un clic.

Una vez que tenga un encabezado con el que trabajar, deberá acceder a la consola. Simplemente vaya a la sección de apariencia que se encuentra en el lado izquierdo de su tablero, elija "personalizar" y luego haga clic en "CSS adicional". Con la consola ahora abierta, debe ingresar el código que hace que su encabezado sea fijo:

 #website-navigation { background:#fff; height:60px; z-index:170; margin:0 auto; border-bottom:1px solid #dadada; width:100%; position:fixed; top:0; left:0; right:0; text-align: center; }

El código anterior es solo un ejemplo de cómo debería verse en general, no un comando definitivo. Tenga en cuenta que la primera línea siempre es específica para cada sitio: reemplace #website-navigation con la clase CSS o ID de su encabezado de navegación antes de volver al editor de página.

Una vez que haya verificado la funcionalidad dentro de la ventana de vista previa de la página/publicación, simplemente publique y obtendrá un encabezado fijo. Tenemos que señalar que probablemente querrá expandir el código CSS para abarcar más que solo el atributo "pegajoso" para un encabezado como este: se recomienda agregar elementos que enfaticen visualmente el encabezado, como fuentes de color, tamaño, sangría, etc. Debido a que es un accesorio permanente en una página, puede pasarse por alto fácilmente, por lo que debe intentar que se destaque.

Crear un encabezado adhesivo con un complemento

Hay una gran superposición entre aquellos que necesitan un sitio web para su negocio o blog y aquellos que simplemente no tienen el conocimiento para crear algo que se vea y se sienta profesional. Afortunadamente con WordPress, hay tantos complementos que hacen la vida más fácil para todos; prácticamente no hay necesidad de poseer nada más que conocimientos básicos de software para lograr sus objetivos. WP Sticky es un gran ejemplo de un complemento que reemplaza toda la codificación que hemos cubierto anteriormente con una interfaz fácil de usar que cualquiera puede obtener rápidamente. Al mismo tiempo, ofrece la misma cantidad de funcionalidad que tendría al crear un encabezado fijo manualmente. Vamos a desglosarlo.

Creando un elemento

Al igual que necesita tener un encabezado para comenzar cuando usa CSS, debe crear un elemento al que luego agregue el atributo fijo.

Hay dos formas distintas de seleccionar el elemento: puede ingresar la designación en el campo requerido, o puede elegir el elemento a través de una ventana de vista previa haciendo clic en él (esto funciona de maravilla si tiene problemas para averiguar las designaciones) . Al elegir su elemento en la ventana de vista previa, verá las designaciones cambiantes en la parte superior de su pantalla.

Descubrimos que después de trabajar con el complemento durante algún tiempo, se sentirá tan cómodo con él que casi nunca usará el selector visual. Las designaciones se volverán familiares, lo que lleva a ingresarlas de manera simple y manual, lo que le permite ahorrar tiempo. Hasta que esté familiarizado con esa medida, el selector visual será su mejor amigo. En última instancia, cualquiera de los métodos lo llevará al mismo lugar: un encabezado fijo en la interfaz.

haz que se vea bien

No todos los elementos adhesivos se crean de la misma manera, y el suyo tampoco debería ser un ejemplo común y corriente. La sección de configuración visual le proporcionará una gran cantidad de opciones de personalización con las que puede trabajar para hacer que su encabezado fijo sea único en todos los sentidos.

Lo primero que debe tener en cuenta es el posicionamiento de su elemento. Dado que estamos haciendo un encabezado, esta será una decisión fácil: lo pegaremos en la parte superior de la página. El posicionamiento es clave para un buen encabezado, por lo que si no desea que se ajuste a la parte superior de la página, puede moverlo un par de píxeles hacia abajo para que encaje mejor. Además, si su sitio usa una barra de herramientas de administración para usuarios registrados, puede hacer que el complemento lo verifique automáticamente y ajuste el encabezado en consecuencia.

Hemos mencionado un poco la necesidad de que un sitio sea totalmente receptivo, ya que hay muchas formas en que los visitantes potenciales tienen que navegar por la web. Para que su sitio sea totalmente adaptable, puede elegir en qué pantallas se pegará el encabezado.

Por lo general, las pantallas más pequeñas se benefician al máximo de los encabezados fijos, mientras que las más grandes que se usan en los escritorios tradicionales que tienen más opciones de navegación funcionan bien sin ellos. Los tamaños se dividen en cuatro grupos que cubren todos los tamaños de pantalla principales.

El índice Z es una configuración opcional que podría confundir a muchos a primera vista. Debido a esto y al hecho de que es una característica opcional, muchos probablemente la rechazarán y la ignorarán. Si todo funciona, probablemente ni siquiera mires atrás; sin embargo, si hay problemas con la pantalla, el índice Z podría ser una solución rápida. Esencialmente, piense en una página como una colección de pilas donde las pilas de arriba tienen números más altos que las de abajo. Por lo tanto, si algo oscurece su encabezado fijo, intente elevar el índice Z (se sugiere 99999 como un valor que funciona)

Con su encabezado fijo "top of the stacks", es hora de ser aún más creativo agregando efectos mientras se desplaza hacia abajo. Cuando ambas opciones están deshabilitadas, el encabezado simplemente mantendrá su posición en la parte superior como una pieza recortada de la página original. Puede agregar más destellos con efectos como aparición gradual o deslizamiento hacia abajo. Considere el diseño visual general de su sitio antes de optar por este tipo de efectos; sin embargo, a menudo, menos es más.

Los efectos visuales no se limitan solo a aquellos que están conectados con el movimiento. También puede personalizar el encabezado en sí (además de los movimientos que realizó al crear el encabezado). La opacidad es útil si no desea que el encabezado oculte ningún otro contenido de la página. Establecerlo en alrededor del 50% hará que tanto el encabezado como el contenido debajo sean relativamente visibles.

Una característica aún más útil que la opacidad es ajustar el rango de desplazamiento. En caso de que tenga páginas muy largas como las que suelen tener los blogs, hay un cierto punto en la navegación hacia abajo en el que tener un encabezado fijo ya no tiene sentido. Estos son los momentos en los que es una buena idea hacer que el encabezado se despegue después de que su visitante se haya desplazado lo suficiente.

Finalmente, hay una opción para cambiar el color de fondo del encabezado cuando está pegajoso, haciéndolo resaltar aún más, pero revirtiéndolo a sus valores originales cuando el encabezado ya no está pegajoso.

La última parte de la edición visual nos devuelve al círculo completo para editar manualmente el encabezado fijo a través de CSS.

Aunque realmente no necesita tener ningún conocimiento previo de codificación para usar con éxito WP Sticky, puede elevar su trabajo si lo usa. La función es opcional, por lo que depende totalmente de usted si desea usarla y en qué medida.

Opciones avanzadas

La sección de opciones avanzadas se trata básicamente de exclusión, es decir, en qué casos un encabezado fijo dejará de serlo y volverá a la "programación original".

Configurar manualmente el tamaño de la pantalla donde el encabezado no es fijo es un paso adelante en los cuatro tamaños predeterminados que se le presentan en la sección de configuración visual. Aquí, podrá ser tan específico como desee, por lo que si alguna vez hay una pantalla salvaje en el futuro que no se ajusta a ninguno de los tamaños predeterminados, puede crear reglas que funcionen para ella.

Hacer que un encabezado no sea pegajoso no se trata solo del tamaño de la pantalla, sino también del contenido de su sitio, más específicamente de la categorización. Puede hacer que su encabezado no se pegue en páginas designadas, publicaciones y tipos de publicaciones, categorías específicas o contenido con ciertas etiquetas. Todas estas condiciones se pueden mezclar y combinar para hacer el compendio perfecto cuando se usa el encabezado fijo y cuando no.

De manera similar a como eligió el elemento adhesivo (en nuestro caso, el encabezado) al principio, también puede elegir un elemento push-up en la parte inferior de la página en la que desea que se empuje el encabezado. Básicamente, esto hará que su encabezado se mueva hasta el borde de este elemento sin relleno ni ningún tipo de espacio entre ellos.

Para terminar, cuando esté harto y ya no quiera su elemento fijo, siempre existe la opción final de eliminarlo por completo. Tenga en cuenta que se trata de una acción permanente y se perderá toda la personalización que haya realizado en el elemento (en este caso, el encabezado).

Resumen

Es difícil decir qué forma de hacer las cosas es mejor. Definitivamente tiene más opciones a su disposición usando CSS, pero esa es una solución para muy pocas personas en general. Por otro lado, un complemento como WP Sticky combina la facilidad de uso con una funcionalidad aún robusta que lo convierte en una opción perfecta para principiantes o para aquellos que aún no están seguros de codificar desde cero. Probablemente la mejor manera de hacer un encabezado de trabajo pegajoso es comenzar con el último y avanzar hasta el primero.

Autor: Matej Milohnoja

Solía ​​escribir sobre juegos y juegos en general, pero desde entonces ha cambiado a probar y escribir sobre software de desarrollo web. Todavía juega muchos juegos, solo por diversión.