Cómo integrar ChatGPT en WordPress Divi y Google Colab: Guía paso a paso
Manual: Conectar OpenAI desde Google Colab y WordPress (Divi Theme sin Child Theme)
1. Configurar cuenta y API Key en OpenAI
- Regístrate en openai.com y verifica tu correo.
- Accede a tu cuenta y ve a API Keys:
platform.openai.com/account/api-keys, y crea una nueva clave. Cópiala. - En Billing, añade tu método de pago.
gpt-3.5-turbo: $0.002 por cada 1.000 tokens- Consulta más precios en openai.com/pricing.
2. Google Colab: consola simple de chat
Copia y pega este código en un notebook de Google Colab para usar ChatGPT desde la consola:
!pip install --upgrade openai
import openai
openai.api_key = "TU_API_KEY" # Sustituye por tu clave real
def consulta_gpt(prompt):
resp = openai.ChatCompletion.create(
model="gpt-3.5-turbo",
messages=[{"role":"user","content":prompt}],
max_tokens=150,
temperature=0.7
)
usage = resp['usage']['total_tokens']
cost = round((usage * 0.002) / 1000, 6)
text = resp.choices[0].message.content.strip()
return f"{text}\n\n[Tokens: {usage}, Coste: ${cost}]"
print("Escribe 'salir' para terminar.")
while True:
q = input("Tu pregunta: ")
if q.lower() in ('salir', 'exit', 'quit'):
print("Adiós")
break
print(consulta_gpt(q), "\n")
📌 Explicación:
!pip install: instala la última versión del paquete OpenAI.openai.api_key: configura tu clave personal.- La función
consulta_gptenvía una pregunta y devuelve la respuesta, tokens usados y coste estimado. - El bucle
whilepermite interacción directa en la consola.
3. WordPress (Divi Theme sin Child Theme)
Para integrar un chat GPT en una página hecha con Divi sin usar Child Theme:
3.1. Guardar API Key
En tu archivo wp-config.php, justo antes de /* That’s all, stop editing! */, añade:
define('OPENAI_API_KEY','sk-tu_api_key_aquí');¿Para qué sirve? Guarda tu clave de forma segura y accesible desde el código PHP sin hardcodearla en cada función.
3.2. Añadir shortcode en functions.php
Abre el archivo functions.php de tu tema activo y al final pega este código:
// En wp-config.php (antes de "That’s all, stop editing!") define tu clave así:
// define('OPENAI_API_KEY', 'sk-TU_API_KEY_AQUÍ');
// functions.php de tu tema activo (Divi)
// Shortcode [chatgpt_divi] para integrar chat con OpenAI en Divi
function chatgpt_divi_shortcode() {
ob_start();
$hist = get_option('chatgpt_history', []);
$notif = '';
// Procesar formulario
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
// Reiniciar conversación
if ( isset($_POST['reset']) ) {
$hist = [];
update_option('chatgpt_history', $hist);
$notif = 'Conversación reiniciada.';
}
// Enviar nueva pregunta
elseif ( ! empty($_POST['prompt']) ) {
$p = sanitize_text_field($_POST['prompt']);
$hist[] = [
'role' => 'user',
'content' => $p,
'time' => current_time('mysql')
];
update_option('chatgpt_history', $hist);
// Llamada a OpenAI
$body = json_encode([
'model' => 'gpt-3.5-turbo',
'messages' => $hist,
'max_tokens' => 150,
'temperature' => 0.7
]);
$res = wp_remote_post(
'https://api.openai.com/v1/chat/completions',
[
'headers' => [
'Content-Type' => 'application/json',
'Authorization' => 'Bearer ' . OPENAI_API_KEY
],
'body' => $body,
'timeout' => 60
]
);
$json = json_decode(wp_remote_retrieve_body($res), true);
$reply = $json['choices'][0]['message']['content'] ?? 'Error: sin respuesta';
// Cálculo de tokens y coste
if ( isset($json['usage']['total_tokens']) ) {
$toks = $json['usage']['total_tokens'];
$cost = round(($toks * 0.002) / 1000, 6);
$reply .= "\n\n[Tokens: $toks, Coste: \$$cost]";
}
$hist[] = [
'role' => 'assistant',
'content' => $reply,
'time' => current_time('mysql')
];
update_option('chatgpt_history', $hist);
}
// Evitar reenvío al recargar
if ( ! headers_sent() ) {
wp_redirect( $_SERVER['REQUEST_URI'] );
exit;
}
}
// Mostrar historial con último mensaje primero
$rev = array_reverse($hist);
?>
Historial (último primero):
()
¿Para qué sirve? Este código crea un shortcode que puedes usar en cualquier página o entrada para mostrar un chat con historial y coste, sin plugin adicional.
3.3. Uso del shortcode
En Divi, añade un módulo de “Texto” o “Código” donde quieras que aparezca el chat y escribe:
[chatgpt_divi]🎉 Resultado: Tendrás un chat GPT integrado visualmente en tu web hecha con Divi, con historial de conversación, timestamps, tokens usados y cálculo de coste por interacción.
