Cómo agregar un botón 'Saltar a la receta' en WordPress (2 formas fáciles)

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.

¿Por qué agregar un botón para saltar a la receta en las publicaciones de blogs de comida?

Una de las quejas más comunes que hemos visto en los blogs de comida es que los lectores tienen que desplazarse por largas historias y anuncios antes de llegar a la receta real.

Si bien estas historias ayudan con el SEO y la monetización, y a muchos lectores leales les gusta el toque personal, no todos tienen tiempo para leerlo todo.

Piénsalo: alguien podría estar en el supermercado revisando ingredientes, o en su cocina listo para empezar a cocinar. Solo quieren acceso rápido a las instrucciones de la receta.

Ahí es donde un botón de Saltar a la receta resulta útil. Brinda a los visitantes apurados una forma rápida de saltar a la receta, al tiempo que te permite mantener el estilo narrativo y la estrategia de monetización de tu blog.

De esta manera, mantienes contentos a ambos tipos de lectores: aquellos que disfrutan de tu contenido y aquellos que solo necesitan la receta rápidamente.

Agregar este botón puede mejorar la experiencia del usuario en tu sitio y, potencialmente, mantener a los visitantes interesados por más tiempo, aumentando tus visitas a la página y reduciendo las tasas de rebote.

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 para agregar un botón de Saltar a la receta (Recomendado)
• Método 2: Usa código personalizado para agregar un botón de Saltar a la receta (Gratis)
• Consejos adicionales para mejorar la experiencia de usuario de tu blog de cocina

Método 1: Usa WP Tasty para agregar un botón de Saltar a la receta (Recomendado)

La forma más fácil de agregar un botón de Saltar a la receta en WordPress es usando WP Tasty.

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 de Saltar a la receta, WP Tasty 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 de WP Tasty y cómo puede beneficiar a tu blog, asegúrate de consultar nuestra reseña completa del plugin.

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 WP Tasty, primero necesitas comprar un plan de pago. Puedes optar por el paquete WP Tasty All Access Bundle o el plugin independiente WP Tasty 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 WP Tasty 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 un poco más complicado, especialmente para principiantes.

Dicho esto, si quieres agregar un botón de Saltar a la receta gratis, puedes probar este siguiente método.

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.

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:

Agregar un código para insertar automáticamente el botón Saltar a la receta en todas las publicaciones de recetas

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, la función llamada has_recipe_anchor, verifica si hay una etiqueta de encabezado (H1 a H6) en tu publicación de blog que tenga una ancla configurada como 'recipe'. La función preg_match busca en tu texto este patrón específico.

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 la función has_recipe_anchor del paso anterior encontró un encabezado con el ancla de receta, 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.

La última línea de código, add_filter('the_content', 'add_jump_to_recipe_button');, esencialmente le dice a WordPress que ejecute la función add_jump_to_recipe_button cada vez que recupere el contenido de una 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'.

Agregar un 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, puedes simplemente reemplazar los códigos hexadecimales en background-color (para el color del botón), color (para el texto), y background-color bajo .jump-to-recipe-button:hover (para el color del botón cuando el cursor se posa sobre él).

Una vez que hayas insertado el código, desplázate hacia abajo hasta la sección de Inserción y selecciona 'Insertar automáticamente' como Método de Inserción. Luego, elige 'Pie de página en 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 la sección de tu receta. Luego, en la barra lateral de configuración del bloque, abre el menú 'Avanzado' y escribe 'receta' en el campo Ancla HTML.

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

Aparte del botón Saltar a la receta, existen otros elementos de diseño de WordPress que puedes usar para mejorar la experiencia del usuario en tu blog de cocina.

Por ejemplo, resaltar texto en tus publicaciones puede ser una excelente manera de llamar la atención sobre información importante o consejos de cocina. Podrían ser ingredientes específicos, tiempos de cocción o sustituciones alternativas.

Las notas al pie son otra herramienta útil. Te permiten detallar un paso o ingrediente particular de la receta sin interrumpir el flujo de tus instrucciones principales.

Muchos usuarios verán tus recetas desde sus teléfonos o tabletas. Un diseño amigable para móviles asegura que tu contenido esté formateado correctamente y sea fácil de leer en varios tamaños de pantalla.

Finalmente, los enlaces de navegación tipo "breadcrumb" pueden mejorar la navegación del sitio web. Estos pequeños enlaces en la parte superior de la página muestran a los usuarios su ubicación actual dentro de la jerarquía de tu sitio web. Esto les facilita encontrar el camino de regreso a secciones anteriores o explorar recetas relacionadas.

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.