Crear enlaces a una línea específica en WordPress

Viernes, julio 5th, 2013

[ATENCIÓN, ÉSTE NO ES UN TRUCO PARA USUARIOS DE NIVEL BÁSICO, EL RESTO DE LAS LECCIONES SÍ]

Si bien crear hiperenlaces a otras páginas es bastante sencillo en WordPress, cuando se quiere tener un enlace que apunte dentro de la propia página hacia una línea determinada, o apuntar a un sitio específico en otra página, es entonces cuando se comprueba que no hay botón o menú para hacerlo.

En realidad puede hacerse, aunque es un poco más laborioso, ya que hay que trabajar directamente con el código de la página; pero que nadie se asuste, porque ni siquiera hace falta tener conocimientos sobre este tema para crear semejantes hiperenlaces.

·

Lo primero es cambiar de la pantalla de edición Visual a Text.

En Visual se oculta el código, para que pueda verse el texto de forma muy parecida a como aparecerá una vez publicado en el blog. Por el contrario, en Text se ve todo el código necesario que se aplica para dar formato a un texto.

Modo de edición en “Visual” (que es el que carga WordPress por defecto)

·

Modo de edición “Text”

·

·

SALTO DENTRO DE UNA PÁGINA

Es el más sencillo de realizar.

Se necesitan 2 líneas de código:

  1. La primera, indica cuál es el hiperenlace y muestra la palabra clave hacia la que apuntará. IMPORTANTE: la palabra clave no debe tener ningún espacio de separación entre sus letras.
  2. La segunda, es la palabra clave que se ha elegido en la primera línea de código, y que allí donde se coloque será hacia donde redirigirá el hiperenlace.

·

Línea 1 de código

  • <a href=”#NOMBRE-CLAVE“>TEXTO DEL HIPERENLACE</a>

Línea 2 de código

  • <a id=”NOMBRE-CLAVE“></a>

·

Por ejemplo, si quiero saltar hasta el último titular de este artículo desde la siguiente frase: Salto al final

sólo debo colocar esta línea de código   <a href=”#saltar“>Salto al final</a>   justo detrás del texto de la frase “Por ejemplo, si quiero saltar hasta el último titular de este artículo desde la siguiente frase:”

y después poner esta línea de código   <a id=”saltar“></a>   en la línea de texto a donde quiero que redirija el hiperenlace.

Esa última línea de código no la verá el lector del blog, aunque sí aparece en la pantalla de edición puesta en Text, y también puede verse como una pequeña ancla  en la pantalla de edición en modo Visual.

Símbolo del ancla para indicar dónde está colocada la línea 2 de código, que será el destino de la línea 1 de código

·

·

SALTO HACIA UNA LÍNEA DE OTRA PÁGINA

Sólo hay que cambiar ligeramente el código, indicando en la primera línea de código hacia qué página apunta, y colocar la segunda línea de código en la línea de la página de destino.

·

Línea 1 de código

  • <a href=“http://DIRECCION-WEB-DESTINO/”#NOMBRE-CLAVE“>TEXTO DEL HIPERENLACE</a>

Línea 2 de código

  • <a id=”NOMBRE-CLAVE“></a>

·

Siguiendo los mismos pasos que en el ejemplo anterior, pero poniendo ahora la dirección de la página web de destino, la siguiente frase lleva a un sitio determinado de otra página: Salto a la línea de otra página

La línea 1 de código del ejemplo es:

  • <a href=”http://curso8informatica8basica.wordpress.com/2013/06/01/el-teclado/#SaltarTeclado“>Salto a la línea de otra página</a>

La línea 2 de código se ha colocado en una línea de la página sobre “El teclado” de este mismo Blog.

<a id=”SaltarTeclado“></a>

·

·

SALTO A OTRA PÁGINA EN UNA NUEVA PESTAÑA DEL NAVEGADOR

Es posible darle aún una vuelta más tuerca al asunto si se quiere que un enlace no sólo apunte a una línea de otra página, sino que además la abra en una pestaña nueva.

·

En tal caso, la línea 1 de código debería ser de la siguiente manera (la línea 2 de código no recibe cambio alguno):

  • <a href=”http://DIRECCION-WEB-DESTINO/#NOMBRE-CLAVE” target=”_blank”>TEXTO DEL HIPERENLACE</a>

·

Repito el ejemplo anterior, pero ahora saltando a otra página y abriéndola en otra pestaña al hacer clic en:
Salto a la línea de otra página en una nueva pestaña

La línea 1 de código es:

  • <a href=”http://curso8informatica8basica.wordpress.com/2013/06/01/el-teclado/#SaltarTeclado” target=”_blank”>Salto a la línea de otra página en una nueva pestaña</a>

La línea 2 de código, igual que en el otro ejemplo, se ha colocado en una línea de la página sobre “El teclado”.

  • <a id=”SaltarTeclado“></a>

·

·

CONSEJOS VARIOS

Es posible dar formato (negrita, cursiva, color, etc.) al texto de los hiperenlaces al igual que el resto del texto, pero para evitar complicaciones, recomiendo crear primero los hiperenlaces, y después cambiar a la pantalla de edición del blog en modo Visual y ya desde este modo, simplemente seleccionar los enlaces y darles formato.

Mucha gente (yo mismo), lee los blogs de WordPress con su cuenta activada, lo que trae un pequeño problema, ya que si no se coloca la línea 2 de código un par de líneas por encima de donde se quiera que redirija el hiperenlace, la pequeña franja negra superior de la pantalla de la cuenta de WordPress tapará la primera o dos primeras líneas del texto del blog mostrado.

Editar texto en el modo Text puede ser complicado debido a que una gran cantidad de código puede dificultar el hacerse una idea clara de dónde está cada línea. Aconsejo primero entrar en modo Visual, copiar parte de la frase de detrás o delante donde se quiera colocar la línea de código, cambiar al modo Text, activar la búsqueda dentro de la página por parte del navegador de Internet (generalmente funciona con la combinación CTRL + F), pegar la porción de frase copiada, y entonces el sistema de búsqueda señalará exactamente en que parte del texto está la línea buscada.

·

·

ENLACES CON INFORMACIÓN DETALLADA SOBRE ESTE TIPO DE HIPERENLACES (EN INGLÉS)

WordPress.com Support – Page Jumps

wordpress tips – Links to specific points on a page

·

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: