homefinance blog
Si tiene una página larga en su sitio, los visitantes vinculantes directamente a una sección de esa página pueden ser más útil que un enlace normal. Afortunadamente, el editor Gutenberg lo ha hecho fácil y no tiene que instalar nuevos complementos. Y para ser claros, estoy hablando de un enlace como este que lo llevará al título a continuación: se ejecuta en el próximo título. Aprenderá cómo crear dichos enlaces en este tutorial, que pueden enviar a la misma página o a una página separada. Este tutorial también incluye pasos para el editor clásico, pero lea el resto de la publicación para averiguar cómo conectarse correctamente.
Cómo conectarse a una parte de una página Si prefiere tutoriales de video, puede seguir este paso a paso en lugar de leer las instrucciones en esta publicación.
Suscríbase a temas de competencia en YouTube para conectarse a una determinada parte de una página, debe hacer dos cosas.
Agregue un ancla para hacer la conexión
Enlace al ancla
En primer lugar, necesita una forma de designar el elemento en el que iniciará sesión. Este puede ser cualquier elemento, pero usaremos un título, porque es el elemento más común para conectarse. Una vez que se agrega el ancla, todo lo que tiene que hacer es conectarse a él usando el editor de enlaces normales y un formato URL ligeramente diferente.
Será fácil de entender en la práctica, así que comencemos. Cómo agregar un ancla a un título Comienza seleccionando un bloque de título en el editor. Verá una sección avanzada en la barra lateral derecha, que es predeterminada.
Abra la sección avanzada y lo primero que verá es la opción de anclaje HTML.
WordPress llama a esto un ancla, pero los desarrolladores se refieren a esto como la identificación del elemento en el campo de anclaje HTML, le da al título un nombre corto y descriptivo. No puede tener espacios, pero puede usar guiones para separar las palabras. Por ejemplo, una sección de dieta del artículo de cuidado de un perro podría tener un ancla como “dieta” o “dieta para perro”. Después de agregar el ancla, está listo para hacer un enlace a él. Cómo conectarse a un ancla Los pasos son ligeramente diferentes dependiendo del hecho de que el enlace está en la misma página. Comencemos con los enlaces en la misma página. Para conectarse a un ancla en la misma página, resalte el texto que desea conectarse y haga clic en el icono del enlace (o use CMD+K).
Luego, en el campo URL, ingrese a un hashtag seguido del ancla.
WordPress incluso agrega una etiqueta para anunciar que este es un enlace “interno”. Una vez presionando Enter, se agregará el enlace. Puede obtener una vista previa del elemento para probarlo de inmediato.
Para usar esta técnica para un ancla en otra página, la URL requiere un pequeño cambio. La única diferencia es que primero agregará la URL completa seguida de hashtag y ancla, como sigue:
El enlace puede no funcionar sin la barra oblicua al final de la URL antes del ancla, así que asegúrese de incluirlo cada vez. También puede hacer que su sitio se cargue más rápido, omitiendo la redirección automática a la barra oblicua.
Probablemente cubra todo lo que necesita saber sobre cómo agregar enlaces de anclaje internos a WordPress, pero tengo algunos consejos para mentes curiosas.
Cómo hacer un enlace desde su menú Puede usar la misma técnica para crear un sitio web de una sola página. Con un sitio de una sola página, solo tiene una página de inicio, y el menú conecta a los visitantes a diferentes secciones en la página respectiva, en lugar de páginas completamente nuevas. Para crear este tipo de sitio, creará un ancla utilizando el mismo método que acaba de aprender. Luego, puede abrir su menú en la aduana y puede usar la sección de enlaces personalizados para conectarse al ancla. Si utiliza esta técnica para un sitio web de varias páginas, asegúrese de incluir URL completa antes de hashtag.
Cómo conectarse con otros elementos Los títulos no son los únicos elementos que incluyen la opción de anclaje HTML. También puede agregar ancla a:
Párrafos
Imágenes
liza
Galería
Comidas
citado
De hecho, mientras navegaba por los bloques de Gutenberg, no pude encontrar uno que no aceptara la opción de anclaje HTML. Dicho esto, si usa un bloque agregado por un complemento, esta opción puede faltar. Además, la opción de anclaje no está disponible si usa el editor clásico, por lo que aquí puede editar el código HTML para agregar un ancla a cualquier elemento en su sitio.
Cómo agregar enlaces de anclaje HTML Si usa el editor clásico (o un bloque que carece del campo de anclaje HTML), hay algunos pasos para agregar el enlace. La forma en que se conecta al ancla es la misma. La única diferencia es la forma en que agrega el ancla del elemento. Para agregar ancla, debe editar el código HTML. En el editor de Gutenberg, puede abrir el menú de opción de bloque y seleccionar Editar como HTML. En el editor clásico, use las pestañas superior derecha para cambiar de visualización visual a vista de texto. Al ver el código HTML, verá que sus títulos están empaquetados con etiquetas HTML como esta:
Este es un encabezado
Para agregar un ancla, debe agregar el atributo de ID de título. Aquí hay un ejemplo que le da al título un ancla llamada “Dieta para perros”:
Este es un encabezado
Cada elemento HTML puede usar el atributo de identificación, para que no se limite a los títulos. En el editor clásico, gran parte del código HTML en realidad no aparece, pero siempre puede incluir una sección en “div” para agregar un ancla, como este:
Este es un párrafo
Este es otro párrafo de div
Agregar el elemento DIO no hará ninguna diferencia visual en la página, pero le permitirá vincularse directamente a estos párrafos.
La edición HTML funciona exactamente igual, ya sea que use Gutenberg o el editor clásico. Una vez que el ancla está en su lugar, todo lo que tiene que hacer es conectarse con él utilizando el método descrito anteriormente. Continúe aprendiendo WordPress con conocimiento sobre enlaces de anclaje y un poco de HTML, puede vincular a cualquier sección de cualquier página en cualquier lugar de su sitio. Si aprender nuevas técnicas de WordPress es interesante y satisfactorio para usted, probablemente le gustará mi correo electrónico de WordPress gratuito Curso: siga el curso de WordPress Mastery de 7 días que no le gusta, puede darse de baja con un solo clic, pero estoy seguro de que obtendrá al menos un nuevo consejo valioso. El curso de correo electrónico de 7 días ofrece tácticas de diseño, marketing y rendimiento para crear un mejor sitio web. Gracias por leer esta guía sobre cómo hacer enlaces a partes de las páginas de WordPress y considerarlo con otra persona que usa los botones sociales a continuación.