Nociones básicas de HTML... y un poco de PHP

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.

Después, si queremos ir un paso más allá, podemos añadir desplazamiento suave vertical a los enlaces con jQuery.

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

NOTA: El plugin del botón “Anchor” de TinyMCE ya no viene incluído en las últimas versiones de WordPress (3.9, 4.0…), es decir que ya no es posible añadirlo con el método que se explica aquí (ni siquiera con el plugin “TinyMCE Advanced”). Más información

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

Comentarios

  1. Franco

    Amigo, como puedo insertar un editor de texto en mi pagina web… por ejemplo.. mi página es de un reportero.. por consiguiente quiero que lleve un editor de texto, para que las noticias puedan ser editas. por el mismo reportero.

  2. Daniel

    Lo suyo sería utilizar un gestor de contenidos. Hay muchos, entre los más populares, WordPress, Joomla, Drupal, ExpressionEngine… Aquí tienes una lista completa: http://en.wikipedia.org/wiki/List_of_content_management_systems

  3. Franco

    Pero Como utilizo eso o que hago.. esque soy nuevo en esto de wordpress.. y no se mucho.. Podria decirme que acer con esto..para que el editor aparesca en mi pagina web y el editor vaya, pueda editarla

  4. Daniel

    En ese caso, lo mejor es empezar por aquí: Getting Started with WordPress => http://codex.wordpress.org/Getting_Started_with_WordPress

  5. Txitxum

    Hola, como podria hacer varios enlaces en la misma pagina? estoy haciendo omo un submenu en la misma pagina pero me dirigen todos los enlaces al mismo punto…

  6. Daniel

    En ese caso, si hay varios enlaces en la misma página, cada uno tiene que apuntar a un único destino.

    Aquí tienes un ejemplo: http://jsfiddle.net/edzy8/

  7. Txitxu

    Muchas gracias!! llevaba mucho tiempo buscando este “truco”.

  8. Renée

    Hola. Tu blog es muy útil. Tengo una duda sobre este tema: sigo tus instrucciones para añadir el botón “Anchor” pero no lo consigo. No tengo idea qué puedo estar haciendo mal. He encontrado el archivo functions.php en el tema activo de mi wp y pego el código al final del texto pero no lo logro… qué hago? qué más te puedo contar? Saludos y otra vez gracias por tu trabajo.

  9. Milca

    Hola! Estoy buscando la forma de enlazar mi pagina (ya tengo el diseño) con el editor de wordpress.. ¿donde puedo leer más de esto? ¿Servirá para poder crear tablas de imágenes en forma dinámica? También preciso que estas imágenes se amplien tipo higslide.com y cómo haría la generación de dicho código en forma dinámica?

  10. Daniel

    @Renée:
    Sí, eso ya depende de cada tema. De todas formas, acabo de hacer una prueba con la última versión de WordPress (3.5.1) y sigue funcionando correctamente.

    Si no te funciona añadiendo el código al final de “functions.php”, prueba a ponerlo al principio, para asegurarte de que el código no llega demasiado tarde para lo que tiene que hacer.

  11. Daniel

    @Milca:
    No entiendo la pregunta. Si con “Enlazar mi página con el editor…” te refieres a añadir enlaces dinámicos en las páginas y entradas, para poder editarlas fácilmente, esta es tu función: http://codex.wordpress.org/Function_Reference/edit_post_link

    Sobre el resto de cuestiones, supongo que te refieres a la función de crear galerías en WordPress. Si es así, aquí tienes toda la información: http://codex.wordpress.org/Gallery_Shortcode

  12. Vicente

    Hola Daniel!
    He visto esta función en varias webs, xo sube más lentamente, con efecto rebote… ¿Como lo puedo hacer? Muchas gracias!

  13. Daniel

    Hola Vicente.
    En ese caso, para que el desplazamiento sea animado (en vez de ir directamente al enlace) es necesario añadir algo de Javascript.

    Prepararé una entrada explicando cómo hacerlo.

  14. Daniel

    Ya está publicado el tutorial que explica cómo animar con jQuery los enlaces internos con un desplazamiento suave vertical:

    http://www.danielnabil.com/blog/enlaces-internos-animacion-jquery-wordpress/

  15. Vicente

    Gracias! muy amable.

  16. Martin

    Te felicito por este gran articulo.

  17. Sergio

    Hola, gracias por la información!
    Sabrías cómo hacer un ancla pero que habra en otra página dentro del mismo sitio? Es posible eso?
    Quiero tener una lista de items, que al hacerles un clic, se habra la descripción que estará en otra página.
    Espero que sepas como hacerlo. :)
    Un abrazo!

  18. Daniel

    @Sergio: Para enlazar con otra página (esté o no dentro del mismo sitio) sólo tienes que añadir al final del link el símbolo “#” seguido por el nombre del ancla. Así:

    <a href="http://www.ejemplo.com/pagina.html#nombre-ancla">Descripción del enlace</a>
    
  19. Gracias

  20. Mari

    Muchas gracias por la información.
    He seguido el tutorial al dedillo, pero me ha sido imposible implementar el botón de ancla.
    He insertado el código PHP en el archivo “functions.php” de mi Theme sin resultado. He probado con el plugin “Snippets” también sin resultado.
    Tenga habilitado el TinyMCE Advanced, pero el botón de ancla no hay manera de que me aparezca en mi ventana de edición gráfica de WP. ¿Algún aporte o ayuda?

  21. Daniel

    Hola Mari. Efectivamente, el plugin del botón “Anchor” de TinyMCE ya no viene incluído en las últimas versiones de WordPress, o sea que ya no es tan fácil añadirlo (ni siquiera con el plugin “TinyMCE Advanced”).

    Para poder incluir el botón en el editor de WordPress ahora es necesario descargar primero la versión completa de TinyMCE e instalar los archivos necesarios.

    Aquí tienes más información: http://wordpress.stackexchange.com/questions/156386/tinymce-anchor-button-not-showing/158546#158546

  22. Patricia

    Hola Daniel, tengo una consulta muy específica, espero puedas ayudarme. Agregué un botón de novedades a mi página y me gustaría que cuando alguien lo clickea se abra un lightbox con imágenes. Actualmente lo hace, pero solo puedo poner una única imagen. Estoy usando el plugin Shortcode ¿Es posible? Desde ya muchas gracias.

  23. Daniel

    Hola Patricia.
    Una solución podría ser incluir el resto de imágenes en la página y ocultarlas con CSS, pero depende del sistema de Lightbox que utilices.

    Aquí tienes un ejemplo con Fancybox:
    http://jsfiddle.net/5tx4kaqh/1/

  24. Lucia

    Muchas gracias! Me ha servido mucho tu tutorial!

  25. Karen

    Interesante!!!

  26. David Gutiérrez

    Hola Daniel gracias por este articulo, bastante interesante.

    Tengo una inquietud adicional, como se puede hacer para que esta funcionalidad se haga desde la barra de navegación (Menu wordpress)

    quisiera poder ajustar una web para que tenga una sola pagina, y que al seleccionar alguno de los items del menú me lleve dentro a la sección que haya definido, tal cual como el ejemplo del articulo.

    adicional a ello como puede hacerse para que en la url al final de la página no me quede con esta estructura:

    http://emplomipagina.com/#mianlca

  27. David Gutiérrez

    un ejemplo de lo que te digo seria esta página:

    https://www.zucaritas.com.co/

  28. Carlos

    Me parece muy bueno el blog. Tengo una inquietud, cómo hago en wordpress para agregar páginas, sin que estas salgan en el menu o los botones de la página.

    Gracias por las respuestas

  29. Daniel

    Hola Carlos.
    En principio, las páginas no aparecen en los menús a no ser que esté activada la opción “Añade automáticamente nuevas páginas de nivel superior a este menú” en Apariencia > Menús > Opciones del menú.

  30. Israel

    Hola buen dia.
    Ando tratando de unir dos link en uno solo pero no me sale. Alguien me puede ayudar?
    Lo que quiero es visualizar las dos categorías en un solo link. Intenté realizando:

    http://www.ecoeedicionestienda.com/?product_cat=ciencias-basicas&&ciencias-de-la-salud

    Pero el resultado es: solo me muestra la de ciencias de la salud.

    Estos son los dos link que quiero unir:
    http://www.ecoeedicionestienda.com/?product_cat=ciencias-basicas
    http://www.ecoeedicionestienda.com/?product_cat=ciencias-de-la-salud

    PD: Espero su apollo

  31. Daniel

    Hola Israel.
    Puedes combinar dos o más categorías en una misma URL así, especificando el ID de cada una y separándolos con una coma:
    http://www.ejemplo.com/?cat=15,57

  32. Amparo

    Hola,
    De antemano darte las gracias por compartir tus conocimientos.
    Me gustaría crear una galería de wordpress con 10 imágenes más o menos, y que cada imagen enlace con una entrada diferente dentro del mismo blog. Es posible crear estos enlaces internos en cada imagen? Cómo lo puedo hacer?. Hace un tiempo instalé un plugin (Huge image) pero me dio problemas con el tema y tuve que quitarlo. Un saludo

  33. Daniel

    Hola Amparo.
    Precisamente estoy preparando una entrada explicando cómo montar galerías de WordPress con imágenes enlazadas. En cuanto lo termine lo publicaré aquí.

  34. Isabel

    Hola!! Soy nueva en este mundo de la programación web y tengo un problema que no se como resolverlo. Se supone que para que no puedan robarme mi código es conveniente poner mis archivos php, js y el html aparte, pero mi problema es que no se como enlazarlos para que al llenar los datos en mi formulario se hagan las funciones necesarias y se guarde en mi bd. :-(

  35. Natalia

    Buenos días! Quería consultarte si existe alguna posibilidad de hacer que todos los links externos a mi sitio web (paginas de otras empresas, por ej) linkeen en ventana aparte. Intenté hacerlo con <a href="#" rel="nofollow"> pero esto funciona en un lugar del sitio y en otra parte no. Existe alguna forma de hacerlo desde la administración o colocando algun plug in determinado?. Muchas gracias!!!

  36. Daniel

    Hola Natalia.
    Para que los enlaces externos se abran en una ventana o pestaña aparte, puedes incluir target=”_blank” en el mismo enlace, o bien utilizar jQuery:

    <script>
    jQuery(document).ready(function($){
    	$('a[rel="external"]').click(function(){
    		this.target = "_blank";
    	});
    });
    </script>
    

    Después puedes marcar los enlaces así:

    <a href="#" rel="external">

  37. Hola buenos días soy dominicano y mi pregunta es la siguiente, Como hacer o si se podrá hacer que cuando la visita que entre a mi pagina quiera descargar la música al hacer CLICK en el BOTON se habran dos ventanas al mismo tiempo.

    por favor darme repuesta a mi facebook
    https://www.facebook.com/francisco.belen.129?fref=ts

  38. Mikel

    Hola Daniel,
    Tengo una consulta que me está volviendo loco la solución. Tengo una página en PHP que contiene un catálogo de productos a los cuales se accede mediante una BBDD, el tema es que al hacer click en el menú de artículos (el cual es vertical) me saca los artículos de esa categoría pero me lleva al principio de la pagina. ¿Cómo hacer para que no me lleve al principio?

    El href seria este:
    <a href="index.php?catactu=”><?php if($row_Recordset1['idc']==$catactu) echo '’. utf8_encode($row_Recordset1[‘nomc’]).”;
    else echo utf8_encode($row_Recordset1[‘nomc’])?>

    He intentado poner en vez de index.php un ancla a un id (#artículos) pero nada.
    Gracias de antemano.

  39. Hairo

    Hola, estoy creando una página web y tengo un problema. Es que no puedo hacer que las entradas que hago vayan a las diferentes páginas, solo se quedan en la pagina principal.

  40. juan pedro

    NECESITO AYUDA : hize un menu en html ocupe una tabla en phpmyadmin y como puedo asignarle a cada boton por ejemplo QUIENES SOMOS , PRODUCTO , CODIGOS , a todos esos como los “mando a llamar” por asi decirlo yo se trabajar en java pero codigo de pagina web casi no , soy nuevo necesito ayuda como los mando a llamar y les asigno una funcion? AYUDA PORFAVOR ES UN PROYECTO DE UNIVERSIDAD

  41. Diego Cabral

    Gracias Daniel, me resultaron muy útiles tus consejos… Gracias…

  42. Oscar Mena

    Hola chavos, buen día. Necesito su ayuda.
    Tengo creada una tabla que se forma de manera dinámica segun el número de elementos que se le asignen y por tanto los contenidos de las pestañas de dicha tabla no son asignados directamente si no que estan dependientes de la pestaña. Mi duda es que al asinar con la funcion #href el id no me lo reconoce por que no es estático. Alguna forma para poder solucionar este problema?
    Por favor, se los agradeceria mucho.
    Anexo mi correo: [email protected]

Y tú qué opinas?

Las URLs se convertirán en enlaces automáticamente. Tu dirección de email no se publicará ni se utilizará para enviar ningún tipo de información. Los mensajes que no aporten nada al tema que se trata en esta entrada se borrarán. Las imágenes que aparecen al lado de cada autor utilizan el servicio de Gravatar. Recuerda que puedes usar etiquetas HTML como <a href>, <code>, <em> o <strong> en los comentarios.

(necesario)

(opcional)