Incluye marcadores o anclas en tus post de #Wordpress #Blogger y #GoogleSites

Es posible que te hayas preguntado alguna vez si es posible incluir marcadores o anclas (anchor link) internas en un post de Blogger, Wordpress o de un Sites de Google. La respuesta es que sí que se puede, aunque el proceso no es para nada intuitivo y nos obliga a seguir unas pautas un tanto engorrosas. No obstante, si alguna persona se ha asustado, que se esté tranquila, porque no es difícil, aunque tediosa.

Como este post va precisamente de marcadores, a través del índice de contenidos que se pone a continuación podréis acceder directamente al tema que os interese, simplemente haciendo click.

Índice de contenidos:

• 0. Para qué sirven los marcadores o anclas internos en un post/página web
• 1. Incluir marcadores (anclas) en Blogger
• 2. Incluir marcadores (anclas) en Wordpress
• 3. Incluir marcadores (anclas) en Google Sites
• 4. Bibliografía

0. Para qué sirven los marcadores o anclas (anchors)

Los marcadores o anclas (en inglés anchor links) son hyperlinks (hiperenlaces o hipervínculos) internos de una página.

En otras palabras, así como un hipervínculo convencional nos lleva a otra página o elemento web externo a la página o post que estemos visitando, los marcadores o anclas nos llevan a una zona diferente de la propia página o post.

Por ejemplo, si hacéis click aquí, os llevará a la zona de bibliografía de esta página, Pero si hacéis click en  ◄ Volver al índice os retornará al índice de contenidos de esta web.

En definitiva, los marcadores nos hace la navegación interna de una página o post mucho más cómoda y directa, sin tener que obligar al lector a leerse todo el contenido.

Os invito que utilicéis este sistema cuando escribáis post o página muy largas, como por ejemplo, ésta.

1. Incluir marcadores (anclas) en Blogger

1.1. Con estilos de párrafo

1) Vamos al editor HTML.

2) Si utilizamos estilos de formato, deberemos escribir lo siguiente (**tener en cuenta que puede tratarse de un h1, h2, h3... ):

<h2 id=”nombredelmarcador” style=”text-align: left;”> Texto a enzalar </h2> 

<h3 id=”nombredelmarcador” style=”text-align: left;”> Texto a enzalar </h3>

*se recomienda que el nombre del marcador no tenga espacios y sea simple de recordar, porque lo tendremos que meter a mano  (ver siguiente paso)

1.2. Sin estilo de párrafo (texto normal)

1) Vamos al editor HTML como en el apartado anterior.

2) Sin estilo de párrafo (texto normal), escribimos lo siguiente para crear el marcador (o ancla)

<a id=”nombredelmarcador”> Texto a enlazar </a> 

*se recomienda que el nombre del marcador no tenga espacios y sea simple de recordar, porque lo tendremos que meter a mano  (ver siguiente paso)

1.3. Enlazar el marcador

1) Para enlazar el marcador, volveremos al editor visual, seleccionamos la(s) palabra(s) que queramos y escribimos lo siguiente en la dirección URL (como veis, el marcador siempre va precedido de unas almohadillas # ):

NOMBREdetuBLOG.blogspot.com.es/nombre-del-post.html#NOMBREdelMARCADOR

2) Para sacar la dirección de nuestros post tan sólo deberemos ir al menú vertical derecho de blogger, donde se indica el link del post. Peor no os olvidéis de escribir al final de la URL que copiéis  un .html seguirdo de la almohadilla y el nombre del marcador:

NOMBREdetuBLOG.blogspot.com.es/nombre-del-post.html#NOMBREdelMARCADOR

Haceis click encima y os aparecerá el enlace permanente

◄ Volver al índice

2. Incluir marcadores (anclas) en WordPress

2.1. Crear el marcador cuando usamos estilos de párrafo

1) Como en el caso de blogger, iremos al editor HTML.

2) Si utilizamos estilos de formato, deberemos escribir lo siguiente:

<h2 id=”nombredelmarcador” style=”text-align: left;”> Texto a enzalar </h2> 

*se recomienda que el nombre del marcador no tenga espacios y sea simple de recordar, porque lo tendremos que meter a mano  (ver siguiente paso)

2.2. Crear el marcador cuando NO utilizamos estilos de párrafo (texto normal)

1) Vamos al editor HTML

2) En el caso de no utilizar estilos de párrafo, en el editor HTML escribiremos lo siguiente:

<a id=”nombredelmarcador”> Texto a enlazar </a> 

*se recomienda que el nombre del marcador no tenga espacios y sea simple de recordar, porque lo tendremos que meter a mano  (ver siguiente paso)

2.3. Enlazar el marcador

Para enlazar el marcador, volveremos al editor visual, seleccionamos la(s) palabra(s) que queramos y escribimos lo siguiente en la dirección URL (como veis, el marcador siempre va precedido de unas almohadillas # ):

NOMBREdetuPÁGINA.com/nombre-del-post/#NOMBREdelMARCADOR

Fuente: blogtimenow.com/

2.4. Incluir marcadores mediante apps

@Sureyea. nos recomienda dos apps por si no queremos hacer todo el proceso de edición del hml de nuestra página web:

• Better anchor links

• Ultimate TinyMCE: un apps que nos permite reconvertir nuestro editor de posts de wordpress en una interface visual e intuitiva. (No lo he probado, pero tiene muy buena pinta).

◄ Volver al índice

3. Incluir marcadores (anclas) en Google Sites

3.1. Con la función del índice de contenidos

■ Cuestiones previas

* Todo lo que se explica a continuación ha de hacerse el el modo de edición de la página (click en el icono del lapiz de la parte superior derecha del sites)

1) Para poder utilizar la opción de tabla de contenidos, primeramente deberemos editar nuestra página del sites utilizando los estilos de párrafo (en el menú FORMATO), a saber, cuando pongamos un título aplicarle formato T1 (h1 en html), T2 (h2) etc., tal y como se puede observar en la siguiente imagen:

2) Una vez escrita la página con la utilización de estilos de formato (T1, T2...), crearemos en índice o la tabla de contenidos. 

Para crear el índice iremos al menú INSERTAR > ÍNDICE DE CONTENIDO

3) Nos saldrá un índice automático, al estilo de éste:

■ Crear marcadores con el índice de contenidos

1) Creamos un índice de contenidos

2) Una vez creado, salimos del modo de edición.

Nnos situamos sobre el elemento elegido para ser marcador y hacemos click con e botón derecho del ratón y copiamos el link/enlace:

3) Volvemos al modo de edición.
Nos situamos sobre el elemento deseado y hacemos click en el icono para agregar un enlace:

4) pegamos el enlace del paso 2, que tendrá una forma así:

https://sites.google.com/site/NOMBREdelSITES/home/NOMBREsdelaPÁGINA#TOC-NOMBREMARCADOR

3.2. Creando un marcador en cualquier lugar del texto

Al igual que hemos hecho en el caso de Blogger y WordPress, si queremos incluir un marcador interno dentro del texto de nuetsro sites, tendremos que ir al editor HTML e incluir las siguientes etiquetas HTML sobre la(s) palabra(s) deseadas:

 <a name="nombredelmarcador"> Texto a enlazar </a>. 

◄ Volver al índice

4. Bibliografía

• @Sureyea.(285/10/2013). How to create anchor links in wordpress & Blogger. Blog Time Now. <http://blogtimenow.com/how-to/create-anchor-links-wordpress-blogger-jump-links/>

• Universidad Popular Autónoma del Estado de Puebla. (2013). Cómo incluyo marcadores con nombre para establecer enlaces en una página. Página web oficial de la UPAEP. http://gapps.upaep.mx/inicio/googlesites/tips-de-google-sites/cmo-incluyo-marcadores-con-nombre-para-establecer-enlaces-en-una-pgina> (Consultado el 10/01/2014)

◄ Volver al índice