{"id":5017,"date":"2022-03-01T09:00:00","date_gmt":"2022-03-01T08:00:00","guid":{"rendered":"https:\/\/www.vadavo.com\/blog\/?p=5017"},"modified":"2024-08-26T15:34:43","modified_gmt":"2024-08-26T15:34:43","slug":"crear-saltos-de-enlaces-wordpress","status":"publish","type":"post","link":"https:\/\/www.vadavo.com\/blog\/crear-saltos-de-enlaces-wordpress\/","title":{"rendered":"\u00bfC\u00f3mo crear Saltos de Enlaces en WordPress?"},"content":{"rendered":"\n<p>Los <strong>saltos de enlace<\/strong> o tambi\u00e9n conocidos como <strong>enlaces ancla<\/strong>, son muy \u00fatiles y f\u00e1ciles de implementar en nuestra p\u00e1gina web. Son v\u00ednculos que se emplean para llevarte a una parte espec\u00edfica de una determinada p\u00e1gina, post, texto, o incluso a una p\u00e1gina externa. En este art\u00edculo te vamos a explicar c\u00f3mo usarlos para que te lleven a una zona de la misma p\u00e1gina.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><img decoding=\"async\" src=\"https:\/\/www.vadavo.com\/blog\/wp-content\/uploads\/2019\/11\/arrow-pointing-right-in-a-circle-1.png\" alt=\"\" style=\"width: 35px;\"> <strong>Cu\u00e1ndo utilizar enlaces ancla, ventajas e inconvenientes<\/strong><\/h2>\n\n\n\n<p>Es interesante utilizar enlaces ancla en <strong>p\u00e1ginas o entradas de contenido muy extenso<\/strong>, porque diriges al usuario a las partes m\u00e1s importantes, mejorando de esta forma la experiencia de usuario.&nbsp;<\/p>\n\n\n\n<p>Por otro lado, tambi\u00e9n conviene utilizarlos si estamos realizando una <strong><a href=\"https:\/\/www.vadavo.com\/blog\/search-intent-intencion-busqueda-seo\/\">estrategia SEO<\/a><\/strong> de contenidos, ya que los enlaces ancla pueden convertirse en <em>featured snippets<\/em> en la p\u00e1gina de <em>resultados de Google<\/em>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><img decoding=\"async\" src=\"https:\/\/www.vadavo.com\/blog\/wp-content\/uploads\/2019\/11\/arrow-pointing-right-in-a-circle-1.png\" alt=\"\" style=\"width: 35px;\"> <strong>Pasos a seguir para crear saltos de enlaces<\/strong><\/h2>\n\n\n\n<p>Ahora que ya conocemos lo que es un <strong>salto de enlace<\/strong> procedemos a crear uno en nuestra <strong>p\u00e1gina web<\/strong>. Debemos tener algo similar a la imagen que se muestra m\u00e1s abajo:<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-2 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-1 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/www.vadavo.com\/blog\/wp-content\/uploads\/2022\/02\/Captura-de-pantalla-2022-02-28-a-las-12.13.05-633x1024.png\" alt=\"\" class=\"wp-image-5026\"\/><\/figure><\/div><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<p>Bien, a modo de ejemplo crearemos un enlace que nos lleve desde la palabra <em><a href=\"https:\/\/www.vadavo.com\/blog\/wp-admin\/post.php?post=4989&amp;action=edit\">hosting<\/a><\/em> que se encuentra al inicio del art\u00edculo, hasta la secci\u00f3n <em>\u00bfQu\u00e9 es un hosting?<\/em><\/p>\n\n\n\n<p><strong>La<\/strong> <strong>finalidad de crear este enlace<\/strong> es que nos sea de utilidad para aquellos que no conozcan la terminolog\u00eda y quieran acceder a ella r\u00e1pidamente sin tener que recurrir a sitios externos.<\/p>\n\n\n\n<p>Existen muchos otros <strong>motivos por los que querr\u00edamos crear saltos de enlace<\/strong> como pueden ser:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Una p\u00e1gina con \u00edndice que contenga enlaces ancla para llevarte a cada encabezado<\/li>\n\n\n\n<li>Notas a pie de p\u00e1gina<\/li>\n\n\n\n<li>Volver al inicio cuando te encuentras al final del art\u00edculo<\/li>\n\n\n\n<li>Crear webs de una sola p\u00e1gina y que los men\u00fas lleven directamente a cada secci\u00f3n\u00a0<\/li>\n<\/ul>\n\n\n\n<p>Es muy importante tener claro y diferenciar que el <em><strong>\u201cenlace\u201d<\/strong><\/em> es la parte de la p\u00e1gina donde se establece el enlace y el <em><strong>\u201ctexto de destino\u201d<\/strong><\/em> es la parte de la p\u00e1gina a la que nos env\u00eda el enlace. Una vez entendamos esto ya podemos comenzar a crear nuestro salto de enlace en cuatro sencillos pasos:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong><img decoding=\"async\" src=\"https:\/\/www.vadavo.com\/blog\/wp-content\/uploads\/2019\/11\/idea.svg\" style=\"width: 35px;\" alt=\"\"> Paso 1. Localizar el punto de inicio y crear el punto de destino&nbsp;<\/strong><\/h3>\n\n\n\n<p>Primero tenemos que ir a la parte superior de la p\u00e1gina y localizar el <strong>texto que deseamos convertir a enlace<\/strong> para que nos lleve a una secci\u00f3n distinta de nuestra p\u00e1gina. Despu\u00e9s m\u00e1s abajo en el cuerpo de la p\u00e1gina tendremos distintos subt\u00edtulos o partes del texto a los que enlazarnos.&nbsp;<\/p>\n\n\n\n<p>Como hemos mencionado vamos a vincular la palabra <em>hosting<\/em> con el subt\u00edtulo correspondiente. Para esto debemos comenzar desde el subt\u00edtulo que va a ser enlazado.&nbsp;&nbsp;&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong><img decoding=\"async\" src=\"https:\/\/www.vadavo.com\/blog\/wp-content\/uploads\/2019\/11\/idea.svg\" alt=\"\" style=\"width: 35px;\"> Paso 2. Ubicar el punto final del salto en HTML<\/strong><\/h3>\n\n\n\n<p>Como sabes en <a href=\"https:\/\/www.vadavo.com\/blog\/wp-admin\/post.php?post=4728&amp;action=edit\">WordPress<\/a> existen dos formas para editar el contenido; Visual o Texto. Ahora vamos a pasar a trabajar con la vista HTML, es decir, entramos en la parte de texto.&nbsp;<\/p>\n\n\n\n<p>Una vez hecho esto podemos ver que el texto de nuestro art\u00edculo sigue igual solo que intercalado entre distintas etiquetas de HTML. Lo que debemos hacer es <strong>encontrar el subt\u00edtulo al que nos va a llevar nuestro salto de enlace<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><img decoding=\"async\" src=\"https:\/\/www.vadavo.com\/blog\/wp-content\/uploads\/2019\/11\/idea.svg\" alt=\"\" style=\"width: 35px;\"> <strong>Paso 3. Agregar el atributo ID<\/strong><\/h3>\n\n\n\n<p>Cuando conseguimos ubicar el subt\u00edtulo pasamos a <strong>agregarle el atributo ID<\/strong>, esto es simplemente un \u00fanico identificador que act\u00faa como etiqueta para el texto de destino. Este ID puede ser cualquier texto, pero evitemos usar espacios y caracteres especiales.<\/p>\n\n\n\n<p>Por ejemplo tenemos el siguiente c\u00f3digo:&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/www.vadavo.com\/blog\/wp-content\/uploads\/2022\/02\/Captura-de-pantalla-2022-02-28-a-las-12.00.05.png\" alt=\"\" class=\"wp-image-5021\" style=\"width:277px;height:20px\"\/><\/figure>\n\n\n\n<p>Y lo convertimos en lo siguiente:&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/www.vadavo.com\/blog\/wp-content\/uploads\/2022\/02\/Captura-de-pantalla-2022-02-28-a-las-12.02.24.png\" alt=\"\" class=\"wp-image-5022\" style=\"width:410px;height:20px\"\/><\/figure>\n\n\n\n<p>Recuerda que hay que dejar un espacio antes del id, pero no debe haber separaci\u00f3n entre las comillas (\u201c) de cierre y el s\u00edmbolo de mayor que (&gt;)<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><img decoding=\"async\" src=\"https:\/\/www.vadavo.com\/blog\/wp-content\/uploads\/2019\/11\/idea.svg\" alt=\"\" style=\"width: 35px;\"> <strong>Paso 4. Crear el salto de enlace<\/strong><\/h3>\n\n\n\n<p>Ahora <strong>procedemos a crear el enlace ancla<\/strong>, para esto podemos volver a la vista de dise\u00f1o visual y asegurarnos que el texto y el subt\u00edtulo est\u00e1n correctamente. Una vez revisado seleccionamos el texto inicial y aparecer\u00e1 una ventana emergente para a\u00f1adir el enlace.&nbsp;<\/p>\n\n\n\n<p>Dado que el<strong> contenido <\/strong>al que queremos vincularnos se encuentra <strong>en la misma p\u00e1gina<\/strong>, debemos colocar una almohadilla (#) seguido del identificador (id) que hemos creado antes (#hosting).<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/www.vadavo.com\/blog\/wp-content\/uploads\/2022\/02\/image-1.png\" alt=\"\" class=\"wp-image-5020\"\/><\/figure><\/div>\n\n\n<p>Finalmente hacemos clic en el bot\u00f3n de <em>\u201cA\u00f1adir enlace\u201d<\/em> para guardar el v\u00ednculo. Ahora deber\u00edamos comprobar que funciona correctamente. Tan sencillo como comprobarlo haciendo clic en la palabra enlazada, si nos lleva a la secci\u00f3n que queremos, \u00a1ya lo tenemos!&nbsp;&nbsp;<\/p>\n\n\n\n<p>Esperamos que os haya resultado muy \u00fatil este art\u00edculo, cualquier duda o aporte, \u00a1Os leemos en los comentarios!&nbsp;\ud83d\ude0a<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Los saltos de enlace o tambi\u00e9n conocidos como enlaces ancla, son muy \u00fatiles y f\u00e1ciles de implementar en nuestra p\u00e1gina web. Son v\u00ednculos que se emplean para llevarte a una parte espec\u00edfica de una determinada p\u00e1gina, post, texto, o incluso a una p\u00e1gina externa. En este art\u00edculo te vamos a explicar c\u00f3mo usarlos para que [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":6531,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6,35],"tags":[140,141,34],"class_list":["post-5017","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","category-seo","tag-enlaces","tag-saltos-de-enlaces","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/www.vadavo.com\/blog\/wp-json\/wp\/v2\/posts\/5017","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vadavo.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.vadavo.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.vadavo.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vadavo.com\/blog\/wp-json\/wp\/v2\/comments?post=5017"}],"version-history":[{"count":1,"href":"https:\/\/www.vadavo.com\/blog\/wp-json\/wp\/v2\/posts\/5017\/revisions"}],"predecessor-version":[{"id":6532,"href":"https:\/\/www.vadavo.com\/blog\/wp-json\/wp\/v2\/posts\/5017\/revisions\/6532"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.vadavo.com\/blog\/wp-json\/wp\/v2\/media\/6531"}],"wp:attachment":[{"href":"https:\/\/www.vadavo.com\/blog\/wp-json\/wp\/v2\/media?parent=5017"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vadavo.com\/blog\/wp-json\/wp\/v2\/categories?post=5017"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vadavo.com\/blog\/wp-json\/wp\/v2\/tags?post=5017"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}