Cómo crear enlaces anclados internos (y añadir una función al editor de WordPress)

Los enlaces que más se utilizan son los que apuntan a otra dirección en Internet, sea dentro de nuestra propia web o hacia cualquier otra página. Pero el sistema de enlazado hipertextual (HTML) nos permite ir un paso más allá y enlazar directamente a un punto concreto de una página web o a una parte de un documento, es decir, crear enlaces internos.

Un enlace “normal” al artículo sobre HTML de la Wikipedia tiene esta forma:

<a href="http://es.wikipedia.org/wiki/HTML">Artículo sobre el HTML en la Wikipedia</a>

Pero hay veces que es muy útil enlazar directamente a un punto concreto de un documento, en vez de a la parte superior de una página. Por ejemplo, si queremos guiar a alguien a la misma página de la Wikipedia pero a la sección sobre nociones básicas de HTML, en vez de decirle que lo busque, como la página de destino es bastante larga, es mejor facilitarle la vida y ofrecerle un enlace directo a un ancla. Así:

<a href="http://es.wikipedia.org/wiki/HTML#Nociones_b.C3.A1sicas_de_HTML">Nociones básicas de HTML</a>

Un enlace anclado (enlaces ancla, o simplemente enlaces internos) no es más que un enlace normal y corriente al que añadimos el símbolo de la almohadilla “#” y el nombre de algún elemento de esa página, que puede ser un atributo “name” o “id”. Esto quiere decir que podemos dirigir al usuario a un punto concreto de cualquier página, incluso de la misma página en la que está. La Wikipedia, sin ir más lejos, hace un uso intensivo de este tipo de enlaces internos en sus artículos.

Vamos a ver paso a paso cómo hacer esto utilizando el editor de texto de WordPress (TinyMCE).

Cómo añadir un enlace anclado a un punto de una misma página

Si utilizamos la opción de código (la pestaña “HTML”), solo tenemos que hacer dos cosas:

1. Añadir el link así: <a href="#mi-ancla">Palabras enlazadas</a>
2. En el punto de destino, añadir el ancla, así: <a name="mi-ancla"></a> (no hace falta que haya nada dentro de las etiquetas, puede estar vacío)

Pero no es estrictamente necesario hacerlo a mano y arriesgarnos a cometer errores. Podemos añadir un botón al editor de contenido de WordPress para facilitar el trabajo (ver instrucciones más abajo). Si contamos con este nuevo botón, podremos utilizar la pestaña de edición “Visual”. El procedimiento entonces será un poco más largo, pero más fácil para quien no tenga unas nociones básicas de HTML:

1. Seleccionar la/s palabra/s que queremos que sean el enlace
2. Pulsamos el botón de la cadenita (Añadir enlace)
3. En el campo “URL”, eliminamos “http://”, añadimos el destino así: #mi-ancla y pulsamos el botón “Añadir enlace”
4. Después colocamos el cursor en el destino (el punto de la página donde queremos que nos lleve ese enlace). No hace falta seleccionar nada, solo situar el cursor.
5. Pulsamos el botón del ancla, en la primera fila de botones, al final (recuerda, este botón no aparece por defecto, hay que añadirlo siguiendo las instrucciones que ahora explicaremos)
6. Añadir el nombre del ancla, así: mi-ancla (sin el símbolo “#”, ni “http://” ni nada más) y pulsar “Insertar”

Cómo añadir el botón “Anchor” al editor de WordPress

El botón “Anchor” (ancla) no aparece por defecto en una instalación normal de WordPress. Es necesario especificar que lo queremos utilizar, añadiendo una función para ampliar las posibilidades del editor TinyMCE.

En el archivo functions.php del tema activo o en nuestro plugin de funciones, tenemos que añadir este código:

// Configurando TinyMCE editor
add_action('init', 'nueva_config_tinymce');
function nueva_config_tinymce() {

	// Si el usuario no tiene permiso para editar páginas o entradas
	// no aplicamos la nueva configuración
	if (!current_user_can('edit_posts') && !current_user_can('edit_pages'))
		return;
		
	// Si el usuario utiliza el modo visual (Rich Editor)
	if (get_user_option('rich_editing') == 'true') {

		// Recuperamos botones ocultos
		add_filter('mce_buttons', 'nuevos_botones_mce');
		function nuevos_botones_mce($buttons) {
			// Especificamos los botones que nos interesan. En nuestro caso, "anchor"
			// Posibilidades: anchor, backcolor, cleanup, code, copy, cut, fontselect, fontsizeselect, hr, paste, redo, styleselect, sub, sup, undo
			array_push($buttons, 'anchor');
			return $buttons; 
		}
	}
}

Este código nos da la posibilidad de añadir, además del botón para anclaje de enlaces, etiquetas y funciones muy útiles como HR, CODE, CUT, STYLESELECT y muchas más al editor de WordPress, facilitando así el trabajo de edición a nuestros clientes y usuarios.

Plugins de WordPress relacionados

• Better Anchor Links
  Sirve para crear índices de página (al estilo de la Wikipedia), añadiendo automáticamente enlaces anclados internos a las etiquetas de cabecera (H1, H2, H3…) que hayamos incluído.
• TinyMCE Advanced
  Un plugin muy completo que nos puede ayudar a mejorar la funcionalidad del editor de WordPress, activando características que no aparecen por defecto.

Más información

• Links in HTML documents (W3C Recomendation)
• Internal Links. Best Practices for SEO (SEOMoz)
• TinyMCE Custom Buttons (WordPress Codex)
• How to display hidden buttons in TinyMCE for WordPress (ilovecolors.com)