{"id":28525,"date":"2019-01-08T17:11:20","date_gmt":"2019-01-08T15:11:20","guid":{"rendered":"https:\/\/www.hostinet.com\/formacion\/?p=28525"},"modified":"2019-01-08T17:11:20","modified_gmt":"2019-01-08T15:11:20","slug":"como-anadir-enlaces-ancla-en-wordpress-5","status":"publish","type":"post","link":"https:\/\/www.hostinet.com\/formacion\/wordpress\/como-anadir-enlaces-ancla-en-wordpress-5\/","title":{"rendered":"C\u00f3mo A\u00f1adir Enlaces Ancla en WordPress 5"},"content":{"rendered":"
<\/div>

\n\t\"C\u00f3mo\n<\/p>\n

\n\tUna de las características más habituales desde el principio de Internet son los enlaces<\/strong> o mejor hipervínculo<\/em>, vínculo, hiperenlace<\/em>, etc…\n<\/p>\n

\n\tLos enlaces en cualquier sitio web, nos llevan a otro contenido<\/strong> al que se hace referencia en sitio web en el que estamos.\n<\/p>\n

\n\tTodos hemos visto los típico Click Aquí<\/em> o Pulsa para Entrar<\/em> y generalmente nos llevan a otro sitio de la web o incluso a una web externa.\n<\/p>\n

\n\tPero si queremos que un enlace apunte a una parte en concreta del mismo documento se le conoce como enlaces ancla<\/strong>.\n<\/p>\n

\n\tEs decir, que haciendo click en una parte específica de una página, no llevará automáticamente a dicha parte, sin tener que hacer scroll<\/em> ni buscarla.\n<\/p>\n

\n\tEsto es bastante interesante si se trata de hacerle la vida más fácil al lector del artículo.\n<\/p>\n

\n\tSi estamos ante una información muy extensa, podemos ayudarle a encontrar la información que le interesa<\/strong> de forma precisa y veloz, lo que además de ayudar al usuario, mejora la usabilidad del sitio web, cosa que le gusta a los buscadores<\/strong>.\n<\/p>\n

\n\tEn contrapartida, el usuario se quedará menos tiempo en nuestro sitio web<\/strong> porque consigue la información que desea de una forma más rápida y si abandona muy rápido la web los buscadores pueden interpretar que el contenido que ofrecemos no es interesante y perjudicarnos en el posicionamiento<\/strong>.\n<\/p>\n

\n\tEn cualquier caso es un recurso que podemos usar, aunque como todo, no abusar.
\n\t \n<\/p>\n

\n\tCreando Enlaces Ancla en WordPress 5
\n<\/h2>\n

\n\tAntes de nada, hay que aclarar que los enlaces ancla no pertenecen a WordPress<\/strong>, si no al HTML con el que están realizado el sitio web.\n<\/p>\n

\n\tEsto quiere decir que cualquier sitio HTML puede añadir enlaces ancla<\/strong> y existen decenas de tutoriales si queréis hacerlo editando código HTML, pero aquí vamos a verlo cómo hacerlo con WordPress 5.x\n<\/p>\n

\n\tLa verdad es que con la llegada de Gutenberg<\/a> la forma de trabajar con el texto y los elementos en WordPress ha cambiado mucho, para bien o para mal es el editor por el que WordPress ha decidido apostar.\n<\/p>\n

\n\tUna de las cosas buenas que nos ha traído Gutenberg, es poder trabajar con los enlaces ancla de manera intuitiva<\/strong>.\n<\/p>\n

\n\tTenemos que tener en cuenta que los enlaces ancla se pueden añadir a los encabezados, es decir a las etiquetas h1, h2, h3<\/strong>, etc…\n<\/p>\n

\n\t\"cabeceras\n<\/p>\n

\n\tEn la barra lateral derecha del editor, veremos que tenemos las opciones de Bloque<\/strong> y Documento<\/strong>, debemos seleccionar Bloque<\/strong> y seleccionar la cabecera que queremosanclar<\/em>.\n<\/p>\n

\n\tEn la parte inferior tenemos la opción de Avanzado<\/strong>, la cual debemos desplegar, lo que dejará a la luz la opción que estamos buscando: Anclaje HTML<\/strong>.\n<\/p>\n

\n\t\"opcion\n<\/p>\n

\n\tEl texto que tenemos que poner aquí es que el queramos, una palabra identificativa del encabezado estaría bien, ya que es posible que tengamos varios y tengamos que identificarlos.\n<\/p>\n

\n\t\"anadir\n<\/p>\n

\n\tAhora solo nos queda añadir el enlace ancla en el sitio que queramos.\n<\/p>\n

\n\tEsto es muy versátil y podemos ponerlo donde queramos, pero es muy habitual añadir un índice al principio del artículo<\/strong> para que el lector puede elegir dónde quiera ir.\n<\/p>\n

\n\tEn cualquier caso, para conseguir que el texto enlace al ancla que hemos creado solo debemos añadir un enlace al texto<\/strong> con el ancla que hemos elegido, pero poniendo antes una almohadilla #<\/em>.\n<\/p>\n

\n\tPor ejemplo, si el texto ancla es: milpalabras<\/em>, debemos añadir un enlace en el texto que sea:\n<\/p>\n

\r\n#milpalabras\r\n<\/code><\/pre>\n
\n\tQuedando tal y como se muestra en la imagen:\n<\/p>\n
\n\t\"enlace\n<\/p>\n
\n\t¡Y ya esta!<\/strong> Si hacemos una vista previa del artículo o la página y hacemos click en el enlace, nos llevará automáticamente al ancla que hemos elegido.\n<\/p>\n
\n\t\"enlace\n<\/p>\n
\n\tCosas a Tener en Cuenta
\n<\/h2>\n
\n\tComo habéis visto, con el nuevo editor de WordPress Gutenberg, trabajar con enlaces ancla<\/strong> se ha convertido en algo muy sencillo.\n<\/p>\n
\n\tExisten otras opciones en forma de plugin si no estáis usando las versiones 5.x de WordPress que os pueden servir para realizar enlaces ancla sin tener que andar tocando código, como por ejemplo:\n<\/p>\n