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:
- Añadir el link así: <a href="#mi-ancla">Palabras enlazadas</a>
- 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:
- Seleccionar la/s palabra/s que queremos que sean el enlace
- Pulsamos el botón de la cadenita (Añadir enlace)
- En el campo «URL», eliminamos «http://», añadimos el destino así: #mi-ancla y pulsamos el botón «Añadir enlace»
- 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.
- 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)
- 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
- Cómo añadir animaciones a los enlaces internos con jQuery (con y sin WordPress)
- 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)
Permalink
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.
Permalink
Usa el editor NiceEdit. Lo incrustas y puedes hacer todo lo que dices. Es muy comodo.
Permalink
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
Permalink
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
Permalink
En ese caso, lo mejor es empezar por aquí: Getting Started with WordPress => http://codex.wordpress.org/Getting_Started_with_WordPress
Permalink
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…
Permalink
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/
Permalink
Muchas gracias!! llevaba mucho tiempo buscando este «truco».
Permalink
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.
Permalink
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?
Permalink
@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.
Permalink
@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
Permalink
Hola Daniel!
He visto esta función en varias webs, xo sube más lentamente, con efecto rebote… ¿Como lo puedo hacer? Muchas gracias!
Permalink
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.
Permalink
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/
Permalink
Gracias! muy amable.
Permalink
Te felicito por este gran articulo.
Permalink
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!
Permalink
@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í:
Permalink
Gracias
Permalink
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?
Permalink
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
Permalink
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.
Permalink
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/
Permalink
Muchas gracias! Me ha servido mucho tu tutorial!
Permalink
Interesante!!!
Permalink
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
Permalink
un ejemplo de lo que te digo seria esta página:
https://www.zucaritas.com.co/
Permalink
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
Permalink
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ú.
Permalink
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
Permalink
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
Permalink
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
Permalink
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í.
Permalink
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. :-(
Permalink
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!!!
Permalink
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">
Permalink
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
Permalink
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.
Permalink
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.
Permalink
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
Permalink
Hola amigo. Dios te bendiga. Será que me puedes ayudar enviandome toda esta sección de comentario. Me gusta este estilo tuyo. Te dejo mi correo: pastorangel1880@gmail.com
Por favor, necesito tener un area de comentario como este.
Permalink
Gracias Daniel, me resultaron muy útiles tus consejos… Gracias…
Permalink
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: oscar.mena1405@gmail.com
Permalink
Hola, espero me puedas ayudar. Tengo la pag web de un cliente ya creada. Ésta tiene un botón de «news» el cual quieren direccionar a una plantilla de wordpress para ellos poder subir, editar o borrar noticias… tipo un newsletter…
Me preguntaba si es con «edit post link»
Permalink
Estoy haciendo una web con rss con imágenes. Todo va muy bien excepto que yo quiero que abra sin salirse de mi página, que no abra otra página, que mi dominio prevalezca. He visto que algunos lo han hecho?
Permalink
Hola! Tengo un blog en wordpress y lo que quiero es que al hacer click en una imagen se habrá una nueva página explicativa sobre esta imagen en concreto. El tema es que sólo se pueda acceder a esta nueva página mediante el link de la imagen, se puede?
Permalink
Muy buen artículo. Me fue de mucha utilidad
Gracias
Permalink
Excelente! totalmente util!
Permalink
Excelente información, me fue de gran ayuda. Muchas gracias por ayudar a los que no sabemos!
Permalink
Hola, quiero agregar un enlace en una página de registro, pero cuando le doy click me lleva al Index. Cuando sobrepaso el mouse si me reconoce la ruta del link. Ojala me puedas ayudar, estoy programando en Spring Tool + Java + html