Cómo crear desplazamiento de página a elementos de ID en WordPress










  • Los enlaces de anclaje son tan antiguos como la propia web, pero siguen siendo una herramienta organizativa muy útil. En este tutorial, modernizaremos el comportamiento de los enlaces de anclaje utilizando el complemento de WordPress "Desplazamiento de página a id".

    Los enlaces ancla difieren de los enlaces de página HTML estándar. Un enlace estándar lleva al visitante a la parte superior de la página de destino. Los enlaces de anclaje llevan al visitante a una ubicación específica en una página. Marcas esa ubicación en la página usando una etiqueta de anclaje.

    Entonces, un enlace ancla tiene dos partes: el enlace en sí y el ancla que le dice a dónde ir.

    En la mayoría de los navegadores web, al hacer clic en un enlace de anclaje, lo "salta" inmediatamente a la ubicación del anclaje. No hay nada de malo en eso, así es como fueron diseñados para funcionar.

    Pero, ¿y si pudiéramos reemplazar ese salto abrupto hacia abajo en la página de WordPress con un desplazamiento suave? El pergamino tiene una sensación más moderna y le permite al visitante saber que todavía está en la misma página, simplemente moviéndose a una nueva ubicación.

    Para lograr ese efecto, vamos a utilizar el complemento Page scroll to id .

    Instalación del complemento de desplazamiento de página a id

    Inicie sesión en su panel de administración de WordPress.

    En la navegación de la columna izquierda, pase el mouse sobre el enlace "Complementos" y haga clic en el enlace "Agregar nuevo".

    pase el mouse sobre el enlace "Complementos" y haga clic en el enlace "Agregar nuevo"

    En el cuadro "Buscar complementos...", ingrese "Desplazamiento de página a id".

    busque la página de WordPress desplácese hasta el complemento de identificación

    Una vez que haya localizado el complemento, haga clic en el botón "Instalar ahora".

    haga clic para instalar la página de WordPress desplácese hasta el complemento de identificación

    Haga clic en el botón "Activar".

    haga clic para activar la página de WordPress desplácese hasta el complemento de identificación

    Usando el complemento de desplazamiento de página a id

    El complemento funciona tan pronto como se activa. Sin embargo, hay algunas opciones de configuración, de las que hablaremos más adelante.

    Como mencioné, los enlaces ancla tienen dos partes, los enlaces y los objetivos. Puede reconocer un enlace ancla por el hashtag (#) en el enlace.

    Por ejemplo, este enlace apunta a un ancla llamada new-section :

    Pase a la <a href=” #new-section “>nueva sección</a> para continuar.

    La etiqueta de anclaje, que se coloca justo encima de la sección de la página a la que nos dirigimos, tiene este aspecto:

    <a id=” nueva-sección “></a>

    Echemos un vistazo a cómo creamos enlaces y anclas usando el complemento.

    Creación de un enlace de desplazamiento

    Creando un enlace en el editor de WordPress Gutenberg:

    Abra una página o una publicación en el editor.

    Seleccione el texto que se convertirá en el enlace.

    seleccionar texto para vincular

    Haga clic en el icono de enlace.

    haga clic en el icono de enlace

    Aparecerá el campo para ingresar la URL.

    Ingrese el nombre del ancla, comenzando con un hashtag.

    introduce el nombre del ancla

    Haga clic en el icono "Aplicar".

    haga clic en el icono de aplicar

    Creando un enlace en el editor “clásico” de WordPress:

    Abra una página o una publicación en el editor.

    Seleccione el texto que se convertirá en el enlace.

    seleccionar texto para vincular

    Haga clic en el icono "Insertar/editar página para desplazarse al enlace de identificación".

    haga clic en el icono "Insertar/editar página desplazarse al enlace de identificación"

    Aparecerá una ventana de "desplazamiento de la página al enlace de identificación".

    Ingrese el nombre del ancla, comenzando con un hashtag, en el campo "URL/id (por ejemplo, #my-id)".

    introduce el nombre del ancla

    Haga clic en el botón "Aceptar".

    haga clic en el botón "Aceptar"

    Creación de anclas (u objetivos)

    Crear una etiqueta de anclaje en el editor de WordPress Gutenberg:

    Abra una página o una publicación en el editor.

    Vaya a la ubicación en la página donde desea insertar el ancla.

    Encima del bloque al que desea vincular, haga clic en el icono "Agregar bloque".

    haga clic en el icono "Agregar bloque"

    En la sección "Elementos de diseño", haga clic en el bloque "Desplazamiento de página a id".

    haga clic en el bloque "Desplazamiento de página a id"

    Introduce el nombre del ancla. No agregues el hashtag aquí . Eso solo se usa para el enlace.

    Introduce el nombre del ancla

    Guarde o actualice la página o la publicación.

    Creando una etiqueta ancla en el editor “clásico” de WordPress:

    Abra una página o una publicación en el editor.

    Vaya a la ubicación en la página donde desea insertar el ancla.

    Coloque el cursor al principio del párrafo o la sección a la que desea vincular.

    Haga clic en el icono "Insertar/editar página para desplazarse hasta el objetivo de identificación".

    haga clic en el icono "Insertar/editar página desplácese hasta el objetivo de identificación"

    Aparecerá una ventana de "Desplazamiento de página a id de destino".

    Ingrese el nombre del ancla en el campo "id (por ejemplo, mi-id)". No uses un hashtag esta vez . Eso solo se usa en el enlace.

    introduce el nombre del ancla

    Haga clic en el botón "Aceptar".

    Guarde o actualice la página o la publicación.

    El enlace ancla en la página

    Ahora, cuando visita la página, el enlace de anclaje para desplazarse a la identificación está allí. Al hacer clic en él, se desplaza suavemente hacia abajo a la sección anclada.

    enlace de anclaje en la página

    Le demostraría la maravillosa acción de desplazamiento suave, pero aquí estamos trabajando dentro de las limitaciones de las imágenes estáticas.

    Cómo ajustar un sitio con una barra de navegación estática o un encabezado

    Si hay una barra de navegación u otro elemento en la parte superior de la página en su sitio, es posible que deba realizar un ajuste.

    Los enlaces de anclaje mostrarán el texto de destino en la parte superior de la ventana del navegador. Entonces, si usa, digamos, la barra de administración de WordPress, la primera línea de texto se puede cortar.

    cortar el texto de destino en la página

    Podemos arreglar eso configurando un "desplazamiento".

    En la navegación de la columna izquierda, pase el mouse sobre el enlace "Configuración" y haga clic en el enlace "Desplazar página a id".

    haga clic en el enlace "Desplazamiento de página a id"

    Desplácese hacia abajo hasta la sección "Compensación".

    Sé que la altura de la barra de administración de WordPress es de 32 píxeles, así que ingresaré 32 como la cantidad de píxeles que quiero compensar. Puede que tenga que experimentar para encontrar la compensación perfecta para su sitio.

    introduzca un valor de compensación en píxeles

    Desplácese hasta la parte inferior de la página y haga clic en el botón "Guardar cambios".

    haga clic en el botón "Guardar cambios"

    Ahora, cuando hago clic en el enlace de anclaje, todo el texto de destino está visible.

    texto de destino en la página

    Más opciones de configuración para desplazamiento de página a id

    Tus enlaces ancla deberían estar funcionando ahora. Pero hay un par de opciones de configuración interesantes.

    La sección Selector(es) debe dejarse como está a menos que sea bueno con CSS y tenga motivos para cambiar el valor predeterminado.

    Puede experimentar con la duración del desplazamiento , el tipo/aceleración del desplazamiento y el comportamiento del desplazamiento . ¿Quién sabía que había tantos tipos diferentes de desplazamiento?

    Si cambia la configuración de desplazamiento, intente no hacer nada demasiado extraño. Los usuarios de la web tienen ciertas expectativas cuando se trata de desplazarse y no desea distraerlos innecesariamente.

    Hay muchos otros ajustes de configuración, pero son principalmente para usuarios avanzados. Encontré que el complemento funciona muy bien usando la configuración predeterminada.

    Qué sucede si desinstala la página, desplácese hasta el complemento de identificación

    Si desinstala el complemento, las páginas y las publicaciones que usaron el complemento se verán afectadas.

    • Los enlaces y anclas creados por el complemento ya no funcionarán.
    • Los códigos cortos del complemento (no hablamos de códigos cortos, pero están disponibles) dejarán de funcionar, por lo que los códigos cortos se mostrarán en cualquier lugar donde se hayan utilizado.

    De vuelta a lo basico

    Puede parecer un poco desactualizado publicar un tutorial para un complemento de salto de página de WordPress. Los enlaces ancla son tecnología antigua, sí. Pero siguen siendo excelentes herramientas organizativas y no se usan con tanta frecuencia como en el último milenio.

    Entonces, ¿por qué alguien se molestaría?

    Bueno, hay muchas razones de usabilidad y experiencia de usuario. Pero como propietario de un sitio web, supongo que le preocupa el SEO. Y probablemente sepa que los enlaces internos (enlaces de su sitio a su sitio) contribuyen a un buen SEO .

    Ahí tienes Más enlaces internos = mejor SEO.

    Es posible que le resulte más fácil crear enlaces de anclaje que encontrar páginas relacionadas en su sitio a las que enlazar. Eso puede ser especialmente cierto si publicas mucho contenido largo.

    En cualquier caso, ahora sabe cómo hacer que esos enlaces de anclaje dejen de saltar y comiencen a deslizarse y deslizarse. Y ser suave siempre es algo bueno en mi libro.

    ¿Utiliza enlaces de anclaje en su sitio web? ¿Si no, porque no? ¿Crees que vale la pena instalar un complemento para modificar su comportamiento predeterminado? Házmelo saber en los comentarios.










  • Subir