Los blogueros de comida a menudo nos preguntan sobre las funciones que marcan la mayor diferencia para sus lectores.
Después de observar muchos blogs de comida a lo largo de los años, hemos descubierto que agregar un botón para saltar a la receta es una de las mejoras más efectivas que puedes hacer.
Es un pequeño cambio que ayuda enormemente a los visitantes a encontrar rápidamente lo que buscan. Además, es fácil de configurar en cualquier sitio de WordPress.
Probamos diferentes soluciones y encontramos dos métodos confiables que funcionan consistentemente bien. Ambos métodos son fáciles para principiantes y tendrán tu botón de saltar a la receta funcionando en solo unos minutos.
💡 Puntos Clave: Añadir un botón de Saltar a la Receta
Aquí tienes las 2 formas más fáciles de añadir un botón de Saltar a la Receta en WordPress:
1. El Método del Plugin (Recomendado): Usar Tasty Recipes es la solución más fácil. Añade automáticamente un botón de “Saltar a la Receta” con desplazamiento suave y maneja el esquema de recetas para SEO. Ideal para blogueros de comida serios.
2. El Método del Código (Gratis): Usar WPCode te permite crear un botón personalizado sin comprar un plugin de recetas específico. Es completamente gratis pero requiere configuración manual para cada publicación y carece de funciones como desplazamiento suave o generación automática de esquema.
¿Por qué agregar un botón para saltar a la receta en las publicaciones de blogs de comida?
Un botón de “Saltar a la Receta” es un enlace de navegación colocado en la parte superior de una publicación de blog. Técnicamente, funciona como una ancla HTML que desplaza instantáneamente el navegador hacia la tarjeta de la receta, omitiendo el contenido introductorio.
Los lectores a menudo se quejan de tener que desplazarse por largas historias y anuncios para encontrar los ingredientes. Si bien el contenido extenso ayuda a la monetización, muchos visitantes necesitan acceso inmediato a las instrucciones mientras cocinan o compran.
Añadir este botón te permite servir a ambos tipos de lectores. Puedes mantener tu narración personal para tus fans leales mientras proporcionas un acceso rápido para los usuarios que necesitan respuestas rápidamente.
Esto mejora la experiencia general del usuario (UX) en tu sitio. Cuando los usuarios pueden encontrar lo que necesitan fácilmente, es menos probable que vuelvan a los resultados de búsqueda.
Con esto en mente, te mostraremos 2 formas sencillas de agregar un botón de Saltar a la receta a tu blog de cocina: usando un plugin de creador de recetas para WordPress y código personalizado. Puedes usar los enlaces rápidos a continuación para saltar a tu método preferido:
Método 1: Usa WP Tasty Recipes para agregar un botón de "Saltar a la receta" (Recomendado)
La forma más fácil de agregar un botón "Saltar a la receta" en WordPress es usando WP Tasty Recipes.
Este plugin de creador y tarjeta de recetas ha sido probado exhaustivamente por nosotros, y hemos descubierto muchas características que lo convierten en uno de los favoritos entre los blogueros de cocina.
Más allá del botón "Saltar a la receta", Tasty Recipes te permite hacer que tus recetas sean imprimibles y las convierte a la unidad de medida preferida del lector sin esfuerzo.
Además, puedes mostrar claramente datos nutricionales, tiempo de cocción, tamaño de la porción y calificaciones de los usuarios, todo de una manera ordenada y organizada.
Si te interesa aprender más sobre las capacidades del plugin y cómo puede beneficiar a tu blog, asegúrate de consultar nuestra reseña completa de WP Tasty.
Una desventaja de este plugin de recetas es que no viene con una versión gratuita, pero es una gran inversión para blogueros de comida serios que quieren ganar dinero en línea.
Ahora, para usar el plugin, primero necesitas comprar un plan de pago. Puedes optar por el paquete WP Tasty All Access o el plugin independiente Tasty Recipes.
Una vez que hayas realizado una compra, puedes descargar el plugin e instalarlo en tu sitio web de WordPress. Puedes leer nuestra guía sobre cómo instalar un plugin de WordPress para más información.
Después de eso, ve a WP Tasty » Dashboard desde tu administrador de WordPress y haz clic en ‘Enter License.’
A continuación, inserta la clave de licencia de tu plugin, la cual WP Tasty debería haberte enviado a tu correo electrónico después de realizar una compra.
Luego, selecciona 'Todos los plugins' o 'Tasty Recipes' en el menú desplegable 'Plugin(s) a activar'. Haz clic en 'Guardar licencia'.
Hecho esto, ve a la página WP Tasty » Tasty Recipes desde tu panel de WordPress y cambia a la pestaña 'Configuración'.
Por defecto, las opciones para los botones 'Saltar a la receta' y 'Imprimir receta' estarán marcadas, así que puedes dejarlas como están.
Una cosa que puedes cambiar sobre los botones es el Estilo de enlaces rápidos.
WP Tasty también puede mostrar la opción 'Saltar a la receta' como un enlace de texto normal en lugar de botones. Si lo prefieres, puedes seleccionar 'Enlaces'.
Pero por supuesto, también puedes simplemente elegir la opción Botones si esa es tu preferencia.
La opción de Botones también se ve más llamativa, lo que facilita que los lectores la detecten.
En realidad, hay muchas más configuraciones para experimentar aquí, como habilitar casillas de verificación para la lista de ingredientes y la escala de la receta. Asegúrate de marcar las opciones que mejor se adapten a tu blog.
Una vez hecho esto, simplemente desplázate hacia abajo en la página y haz clic en 'Guardar cambios'.
Ahora, cada vez que uses la tarjeta de receta de WP Tasty, aparecerán los botones 'Saltar a la receta' e 'Imprimir receta' en la parte superior.
Para usar la tarjeta de receta, puedes crear una nueva publicación de receta o editar una existente usando el editor de bloques de Gutenberg. Luego, puedes seguir esta guía paso a paso sobre cómo agregar un bloque de tarjeta de receta en WordPress para más información.
Un beneficio de usar Tasty Recipes para agregar el enlace de salto es el efecto de desplazamiento suave. De esta manera, los lectores pueden navegar directamente a las instrucciones de la receta sin saltos bruscos en la página.
Usar código personalizado para lograr este efecto es complicado porque generalmente requiere JavaScript o editar archivos del tema. Es por eso que recomendamos el método del plugin para la mayoría de los usuarios.
Dicho esto, si quieres agregar un botón de Saltar a la receta gratis, puedes probar este siguiente método.
Consejo profesional: ¿Quieres optimizar tus publicaciones de recetas para SEO y obtener más tráfico? Simplemente usa el plugin All in One SEO para agregar esquema de recetas amigable con SEO y hacer que tus publicaciones de blog sean más visibles en la búsqueda de Google.
Método 2: Usa código personalizado para agregar un botón de Saltar a la receta (Gratis)
Agregar un botón de Saltar a la receta manualmente puede sonar intimidante para los principiantes totales, pero no te preocupes, ya que te guiaremos cuidadosamente en cada paso.
Si es la primera vez que agregas código personalizado a WordPress, te sugerimos usar un plugin de fragmentos de código como WPCode.
Hemos probado el plugin exhaustivamente y ofrece una forma segura y sencilla de insertar fragmentos de código sin editar los archivos del tema. Esto minimiza el riesgo de romper accidentalmente el diseño o la funcionalidad de tu sitio web.
¿Tienes curiosidad sobre qué más puede hacer WPCode? Echa un vistazo a nuestra reseña fácil de seguir donde desglosamos sus características y explicamos por qué es una gran herramienta para los usuarios de WordPress.
Para usar WPCode, procede a instalar el plugin en tu panel de administración de WordPress. Puedes leer nuestra guía paso a paso sobre cómo instalar un plugin de WordPress para más detalles.
Nota: WPCode también tiene una versión gratuita, que es excelente si tienes un presupuesto limitado. Dicho esto, recomendamos actualizar a la versión de pago si deseas utilizar funciones avanzadas como probar tu código antes de que se publique.
A continuación, ve a Fragmentos de código » + Agregar fragmento. Aquí, selecciona ‘Agregar tu código personalizado (Nuevo fragmento)’ y haz clic en ‘Usar fragmento’.
Hay dos fragmentos de código que necesitas agregar por separado en WPCode. Vamos a revisarlos uno por uno:
Agrega un código para insertar automáticamente el botón "Saltar a la receta"
El primer fragmento de código agregará automáticamente el botón Saltar a la receta en todas las publicaciones de blog que contengan una sección de receta. Para esto, puedes nombrar tu fragmento 'Agregar botón Saltar a la receta automáticamente'.
Luego, selecciona 'Fragmento de PHP' en el menú desplegable Tipo de código.
En el cuadro Vista previa del código, procede a insertar las siguientes líneas de código:
/**
* Check if the post content contains a heading with the #recipe anchor
*/
function has_recipe_anchor($content) {
$pattern = '/<h[1-6].*?id\s*=\s*["\']?recipe["\']?[^>]*>/i';
return preg_match($pattern, $content) === 1;
}
/**
* Add "Jump to Recipe" button to posts
*/
function add_jump_to_recipe_button($content) {
if (has_recipe_anchor($content)) {
$jump_button = '<div class="jump-to-recipe-container"><a href="#recipe" class="jump-to-recipe-button">Jump to Recipe</a></div>';
$content = $jump_button . $content;
}
return $content;
}
add_filter('the_content', 'add_jump_to_recipe_button');
Vamos a repasar cómo funciona este código.
La primera parte del código verifica el contenido de tu publicación de blog. Busca específicamente una etiqueta de encabezado (H1 a H6) que tenga un ID de ancla configurado como 'recipe'.
La segunda parte, la función llamada add_jump_to_recipe_button, es responsable de agregar el botón real a tu publicación.
Si el código encuentra el ID de ancla 'recipe', crea el código HTML para el botón de salto. Luego, inserta este código justo antes del contenido de tu publicación de blog.
De esta manera, el código puede verificar automáticamente el encabezado de la receta y agregar el botón si es necesario.
Dicho esto, tendrás que agregar un ancla #recipe a la sección de recetas de tu publicación de blog. No te preocupes, te mostraremos cómo hacerlo más adelante.
Ahora, desplázate hacia abajo hasta la sección 'Inserción' y asegúrate de que esté seleccionado el método 'Insertar automáticamente'. En cuanto a la Ubicación, puedes elegir 'Solo frontend' para que el código solo se ejecute en la parte frontal de tu sitio web de WordPress.
Luego, activa el botón en la esquina superior derecha para que el código esté 'Activo' y haz clic en 'Guardar fragmento'.
Agrega un fragmento de código para estilizar el botón "Saltar a la receta"
Ahora agregaremos código CSS personalizado para estilizar tu botón de llamada a la acción. Continúa y repite los pasos para crear un nuevo fragmento de código personalizado en WPCode y dale un nombre sencillo, como 'Estilo Botón Saltar a Receta'.
En cuanto al Tipo de Código, selecciona ‘Fragmento CSS’.
Ahora, hemos creado un código CSS que hará que nuestro botón sea verde y el texto en él blanco. Así:
.jump-to-recipe-button {
display: inline-block;
padding: 10px 20px;
background-color: #4CAF50;
color: #ffffff;
text-decoration: none;
border-radius: 5px;
}
.jump-to-recipe-button:hover {
background-color: #45a049;
}
Si deseas usar colores diferentes, simplemente puedes reemplazar los códigos hexadecimales en el código anterior.
Una vez que hayas insertado el código, desplázate hacia abajo hasta la sección de Inserción y selecciona 'Inserción automática' como Método de inserción. Luego, elige 'Encabezado de todo el sitio' como Ubicación.
Todo lo que necesitas hacer a continuación es activar el fragmento de código y hacer clic en 'Guardar Fragmento'.
Agrega el Ancla #recipe a las Publicaciones de Tu Blog de Recetas
A pesar de que hayas activado los dos fragmentos de código, el botón de salto no aparecerá a menos que agregues un ancla #recipe a la sección de recetas de las publicaciones de tu blog de WordPress. Así que eso es lo que vamos a hacer ahora.
Primero, crea una nueva publicación de blog de recetas o abre una existente en el editor de bloques.
Ahora, en nuestro ejemplo, estamos usando una etiqueta de encabezado (H2) para indicar la sección de recetas de nuestra publicación de blog. Te sugerimos que hagas lo mismo para que sea más fácil para los usuarios encontrarla cuando lean tu publicación. Los motores de búsqueda también aprecian cuando el contenido de tu blog tiene una estructura organizada.
Haz clic en el bloque de Encabezado de tu sección de receta. Luego, en la barra lateral de configuración del Bloque, abre el menú 'Avanzado'. A continuación, escribe 'recipe' en el campo Ancla HTML. Asegúrate de usar solo letras minúsculas.
Esto servirá como un enlace de anclaje para el botón de salto.
Hecho esto, haz clic en 'Publicar' o 'Actualizar'.
Si previsualizas tu sitio web en móvil o escritorio, ahora deberías ver un botón Saltar a la receta en la parte superior del contenido de tu blog después del título de la publicación.
Consejos adicionales para mejorar la experiencia del usuario de tu blog de comida
Más allá del botón Saltar a la receta, existen otros elementos de diseño que puedes usar para hacer tu blog de cocina más fácil de usar. Aquí tienes algunas mejoras de alto impacto:
| Elemento de Diseño | Beneficio de la experiencia del usuario |
|---|---|
| Texto resaltado | Atrae la atención a información crítica como tiempos de cocción, ingredientes alternativos o advertencias de seguridad. |
| Notas al pie | Te permite elaborar sobre un paso específico sin interrumpir el flujo de las instrucciones principales. |
| Diseño adaptable a dispositivos móviles | Asegura que las recetas se formateen correctamente para los usuarios que cocinan en su cocina con teléfonos o tabletas. |
| Navegación de migas de pan | Ayuda a los usuarios a comprender la estructura de tu sitio y a navegar fácilmente hacia atrás para encontrar categorías de recetas relacionadas. |
Preguntas frecuentes sobre los botones de WordPress
Aquí tienes algunas preguntas que nuestros lectores han hecho con frecuencia sobre cómo agregar botones en WordPress:
¿Cómo agrego enlaces a botones en WordPress?
Para agregar un enlace, selecciona el bloque de Botones dentro del editor de WordPress. Haz clic en el ícono de enlace en la barra de herramientas que aparece encima del botón, luego pega tu URL de destino en el campo.
¿Cómo agrego un botón "Ir arriba" en WordPress?
El método más fácil es instalar un plugin como WPFront Scroll Top. Una vez activado, agrega automáticamente un botón que aparece cuando un usuario se desplaza hacia abajo, permitiéndole regresar rápidamente a la parte superior de la página.
Para empezar, consulta nuestro tutorial sobre cómo agregar un efecto de desplazamiento suave hacia arriba en WordPress.
¿Cómo agrego un botón de seguir en un blog de WordPress?
Puedes agregar botones de seguir usando el bloque incorporado de Iconos Sociales en el editor de bloques. Simplemente busca "Iconos Sociales", agrega el bloque y haz clic en el ícono de "más" para seleccionar las plataformas de redes sociales a las que deseas enlazar.
Para más información, consulta nuestra guía sobre cómo agregar un botón de seguir de Facebook para autores en WordPress.
¿Cómo pongo un popup en WordPress?
Recomendamos usar OptinMonster para agregar popups. Te permite diseñar popups personalizados usando un constructor de arrastrar y soltar y controlar exactamente cuándo aparecen, como cuando un usuario está a punto de abandonar tu sitio.
Esperamos que este tutorial te haya ayudado a aprender cómo agregar un botón de Saltar a la receta en WordPress. También puedes consultar nuestra guía sobre elementos clave de diseño para un sitio web efectivo en WordPress y cómo configurar pedidos de comida en línea en WordPress.
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.
Kzain
Este es un artículo genial, estoy aprendiendo a mejorar blogs de recetas y esto es de gran ayuda. Definitivamente usaré WP Tasty para todos mis blogs de recetas. Gracias por esta gran guía.