Html página web

[plingen]

Hola alguien sabe el código para tener un programa en wordpress que inventé chistes?

 

Hola

W

CAMBIAR NOMBRE DE CATEGORIA Y ETIQUETA PRODUCTOS ? O SIMILAR?

[Cosmin Vladut]

¿Quieres un codigo para hacer un apartado en tu web que invente chistes?

 

[Cosmin Vladut]

Hola alguien sabe el código para tener un programa en wordpress que inventé chistes?

Prueba esto, te cree una app de chistes automáticos con IA :

CÓDIGO DE LA APP

import { useState, useEffect } from "react";
import { createRoot } from "react-dom/client";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Loader2 } from "lucide-react";

function ChistesApp() {
  const [chiste, setChiste] = useState("");
  const [loading, setLoading] = useState(false);

  const obtenerChiste = async () => {
    setLoading(true);
    try {
      const response = await fetch("https://v2.jokeapi.dev/joke/Any?lang=es&type=single");
      const data = await response.json();
      setChiste(data.joke);
    } catch (error) {
      setChiste("Error al obtener un chiste. Inténtalo de nuevo.");
    }
    setLoading(false);
  };

  useEffect(() => {
    obtenerChiste();
  }, []);

  return (
    <div className="flex flex-col items-center justify-center min-h-screen p-4">
      <h1 className="text-2xl font-bold mb-4">Generador de Chistes IA 🤣</h1>
      <Card className="w-full max-w-md text-center p-4">
        <CardContent>
          {loading ? (
            <Loader2 className="animate-spin mx-auto text-gray-500" size={32} />
          ) : (
            <p className="text-lg font-semibold">{chiste || "Presiona el botón para generar un chiste."}</p>
          )}
        </CardContent>
      </Card>
      <Button className="mt-4" onClick={obtenerChiste} disabled={loading}>
        {loading ? "Cargando..." : "Generar Chiste"}
      </Button>
    </div>
  );
}

const container = document.getElementById("chistes-root");
if (container) {
  const root = createRoot(container);
  root.render(<ChistesApp />);
}

CREAR PLUGIN EN WORDPRESS Y UN SHORTCODE PARA INTEGRARLO

• Crea una carpeta chistes-ia en wp-content/plugins/.
• Guarda este código como chistes-ia.php dentro de esa carpeta.

<?php
/**
 * Plugin Name: Chistes IA
 * Description: Un plugin para mostrar chistes diversos generados con IA.
 * Version: 1.0
 * Author: Tu Nombre
 */

// Registrar el shortcode
function chistes_ia_shortcode() {
    wp_enqueue_script('chistes-ia', plugin_dir_url(__FILE__) . 'chistes-app.js', array('react', 'react-dom'), null, true);
    return '<div id="chistes-root"></div>';
}
add_shortcode('chistes_ia', 'chistes_ia_shortcode');

// Incluir React y ReactDOM si no están presentes
function cargar_react_para_chistes() {
    if (!wp_script_is('react', 'enqueued')) {
        wp_enqueue_script('react', 'https://unpkg.com/react@17/umd/react.production.min.js', array(), null, true);
    }
    if (!wp_script_is('react-dom', 'enqueued')) {
        wp_enqueue_script('react-dom', 'https://unpkg.com/react-dom@17/umd/react-dom.production.min.js', array(), null, true);
    }
}
add_action('wp_enqueue_scripts', 'cargar_react_para_chistes');

• Guarda el archivo chistes-app.js con el código React en la misma carpeta.
• Activa el plugin en WordPress.
• Usa el shortcode [chistes_ia] en cualquier página o post para mostrar la app.