WordPress y Seguridad

WordPress y Seguridad

🔐 WordPress y Seguridad en 2025: Informe actualizado  WordPress sigue siendo la plataforma líder en creación web, pero también uno de los principales objetivos de ciberataques. En 2025, la seguridad en WordPress ha evolucionado con nuevas medidas, herramientas y prácticas que buscan proteger millones de sitios en todo el mundo.

📊 Panorama actual de amenazas

  • Más de 8.000 nuevas vulnerabilidades fueron detectadas en el ecosistema WordPress durante 2024.
  • WordPress.com bloquea 12.000 ataques por segundo a nivel global, incluyendo tráfico malicioso y exploits.
  • En España, se registraron más de 15 millones de intentos de ataque en los últimos 12 meses.
  • Los plugins siguen siendo el principal vector de riesgo, especialmente aquellos desactualizados o mal mantenidos.

Medidas esenciales de seguridad

  • Actualizaciones constantes de WordPress, plugins y temas.
  • Autenticación reforzada: uso de contraseñas seguras y verificación en dos pasos (2FA).
  • Limitación de intentos de acceso para prevenir ataques de fuerza bruta.
  • Copias de seguridad automáticas y externas, preferiblemente en servicios cloud.
  • Hardening del servidor: desactivar funciones innecesarias, proteger archivos sensibles y usar HTTPS.

🔌 Plugins de seguridad recomendados en 2025

PluginFunciones clave
Wordfence SecurityCortafuegos, escaneo de malware, bloqueo de IP
iThemes Security Pro2FA, protección de login, detección de cambios
Sucuri Security CloudWAF, monitorización, respuesta ante incidentes
WP Activity LogRegistro detallado de actividad en el sitio

Sources: 

⚙️ Seguridad desde el diseño y hosting

  • Hosting seguro con SSL, protección DDoS y backups automáticos es clave.
  • Agencias como Zonsai integran seguridad desde el primer sprint de desarrollo.
  • La arquitectura web debe facilitar el rastreo, la indexación y la protección de datos.

Impacto en marketing y reputación

  • La seguridad no solo protege datos, también refuerza la confianza de los usuarios.
  • Un sitio comprometido puede afectar gravemente la imagen de marca y el SEO.

Conclusión

La seguridad en WordPress en 2025 ya no es opcional: es un requisito estratégico. La combinación de actualizaciones constantes, plugins confiables, buenas prácticas y un hosting robusto permite mantener los sitios protegidos frente a amenazas cada vez más sofisticadas.

Diferencias entre WordPress.com y WordPress.org

✅ WordPress.com es una plataforma alojada y gestionada por Automattic, mientras que WordPress.org es software libre que tú mismo instalas y gestionas en tu propio servidor. La diferencia clave está en el control, la personalización y los costes.

🆚 Comparativa WordPress.com vs WordPress.org

CaracterísticaWordPress.comWordPress.org
AlojamientoIncluido (Automattic lo gestiona)Lo gestionas tú en tu propio hosting
Coste inicialGratis (con limitaciones) o planes de pagoGratuito, pero necesitas pagar hosting y dominio
Control totalLimitadoCompleto: puedes modificar código, base de datos, etc.
PluginsSolo disponibles en planes de pagoPuedes instalar cualquier plugin
TemasLimitados en versión gratuitaPuedes instalar y editar cualquier tema
MonetizaciónRestringida (solo en planes premium)Libre: anuncios, afiliación, e-commerce
ActualizacionesAutomáticasTú decides cuándo y cómo actualizar
Seguridad y backupsIncluidos en planesTú los gestionas o contratas servicios externos
Ideal para…Blogs personales, sitios simplesEmpresas, tiendas online, proyectos avanzados

¿Cuál elegir?

WordPress.org es mejor si necesitas libertad total, personalización avanzada o monetización sin restricciones.

WordPress.com es ideal si no quieres preocuparte por mantenimiento técnico.

Vulnerabilidades de un sitio con WordPress.org

🔐 Las principales vulnerabilidades de un sitio WordPress.org en 2025 provienen de plugins inseguros, configuraciones débiles y falta de actualizaciones. Más de 8.000 nuevas brechas fueron detectadas en 2024, y muchas siguen activas en miles de sitios.

⚠️ Principales vulnerabilidades en WordPress.org

  • Plugins inseguros o desactualizados:
    • Más de 172 vulnerabilidades fueron detectadas en 142 plugins solo en abril de 2025.
    • Ejemplo crítico: el plugin Post SMTP permitía a atacantes cambiar contraseñas de administradores sin autenticación.
  • Temas vulnerables:
    • Algunos temas como Alone – Charity Multipurpose y Age Gate presentaron fallos de inclusión de archivos (LFI) y ejecución remota de código (RCE).
  • Cross-Site Scripting (XSS):
    • Permite a atacantes inyectar scripts maliciosos en formularios o comentarios.
  • Cross-Site Request Forgery (CSRF):
    • Manipula al usuario autenticado para realizar acciones no deseadas.
  • Inyección SQL:
    • Ataca la base de datos mediante formularios mal protegidos.
  • Carga de archivos maliciosos:
    • El plugin TI WooCommerce Wishlist permitía subir scripts peligrosos sin restricciones.
  • Fuerza bruta en el login:
    • Miles de intentos por segundo para adivinar contraseñas débiles.
  • Deserialización insegura y escalada de privilegios:
    • Plugins como GiveWP y OttoKit permitían a usuarios no autorizados obtener control total del sitio.

Cómo proteger tu WordPress.org

  • Actualiza WordPress, plugins y temas constantemente.
  • Elimina plugins que no uses y evita los que no se actualizan regularmente.
  • Instala plugins de seguridad como Wordfence, Sucuri o iThemes Security.
  • Activa autenticación en dos pasos (2FA) para todos los usuarios con acceso.
  • Usa un hosting seguro con cortafuegos, backups automáticos y protección DDoS.
  • Configura permisos de archivos correctamente (wp-config.php.htaccess, etc.).
  • Monitoriza actividad sospechosa con registros y alertas.

Datos clave en España

  • En 2025, se bloquearon más de 15 millones de intentos de ataque a sitios WordPress en España.
  • A nivel global, WordPress.com bloquea 12.000 solicitudes maliciosas por segundo.

Vulnerabilidades en un Sitio Web Personal con WordPress

El sitio WordPress.org asociado al dominio tusitio.es puede estar expuesto a vulnerabilidades comunes si no se aplican medidas de seguridad adecuadas. No se han detectado brechas públicas específicas en ese dominio, pero sí existen riesgos generales que deben ser gestionados.

⚠️ Vulnerabilidades comunes en sitios WordPress.org como tusitio.es

Según fuentes actualizadas en 2025, estas son las amenazas más frecuentes:

1. Plugins inseguros o desactualizados

  • El plugin TI WooCommerce Wishlist presentó una vulnerabilidad crítica (CVE-2025-47577) que permitía subir archivos maliciosos sin restricciones.
  • Muchos ataques se originan en extensiones mal mantenidas o abandonadas.

2. Temas vulnerables

  • Temas con código obsoleto pueden permitir ejecución remota de código o exposición de archivos sensibles.

3. Infecciones de malware

  • Scripts ocultos en archivos .php o .js pueden robar credenciales o redirigir tráfico.

4. Ataques de fuerza bruta

  • Bots automatizados intentan acceder al panel de administración usando contraseñas débiles.

5. Cross-Site Scripting (XSS)

  • Permite a atacantes inyectar código malicioso en formularios, comentarios o URLs.

6. Cross-Site Request Forgery (CSRF)

  • Manipula al usuario autenticado para realizar acciones no deseadas sin su consentimiento.

7. Inyección SQL

  • Formularios mal protegidos pueden permitir acceso directo a la base de datos.

8. Problemas de configuración

  • Permisos incorrectos en archivos como wp-config.php o falta de HTTPS pueden exponer el sitio.

Cómo proteger tusitio.es

  • Instala el plugin WPVulnerability para recibir alertas en tiempo real sobre riesgos en tu instalación.
  • Actualiza WordPress, plugins y temas regularmente.
  • Activa autenticación en dos pasos (2FA) para todos los usuarios con acceso.
  • Usa un firewall de aplicaciones web (WAF) como Wordfence o Sucuri.
  • Realiza escaneos periódicos con herramientas como MalCare o Virusdie.
  • Configura backups automáticos externos (por ejemplo, con UpdraftPlus).
  • Revisa los registros de actividad para detectar accesos sospechosos.

🧪 ¿Cómo comprobar si tusitio.es tiene vulnerabilidades?

Puedes hacer un análisis gratuito con herramientas como:

  • WPScan
  • Sucuri SiteCheck
  • SecurityHeaders.com

También puedes instalar el plugin WPVulnerability para recibir alertas directamente en el escritorio de WordPress

Instalar Roundcube en un VPS con Debian 12

Instalar Roundcube en un VPS con Debian 12

Para instalar Roundcube en un VPS con Debian 12 sin afectar tus sitios WordPress, debes usar una configuración separada dentro de tu servidor web (Apache o Nginx), asegurarte de no sobrescribir archivos de configuración existentes y mantener cada sitio en su propio VirtualHost o bloque de servidor.

🛠️ Pasos para instalar Roundcube en Debian 12 sin romper WordPress

1. Requisitos previos

  • VPS con Debian 12 actualizado.
  • Servidor web funcionando (Apache o Nginx).
  • PHP (preferiblemente PHP 8.2), MySQL/MariaDB, y IMAP server (como Dovecot).
  • Sitios WordPress ya configurados en sus propios VirtualHosts.

2. Instalar Roundcube desde repositorio

bash

sudo apt update
sudo apt install roundcube roundcube-core roundcube-mysql roundcube-plugins roundcube-plugins-extra

Esto instalará Roundcube y sus dependencias sin tocar tus sitios WordPress.

3. Configurar VirtualHost separado para Roundcube (Apache)

Crea un archivo como /etc/apache2/sites-available/roundcube.conf:

apache

<VirtualHost *:80>
    ServerName webmail.tudominio.com
    DocumentRoot /var/lib/roundcube

    <Directory /var/lib/roundcube>
        Options +FollowSymLinks
        AllowOverride All
        Require all granted
    </Directory>

    ErrorLog ${APACHE_LOG_DIR}/roundcube_error.log
    CustomLog ${APACHE_LOG_DIR}/roundcube_access.log combined
</VirtualHost>

Activa el sitio:

bash

sudo a2ensite roundcube.conf
sudo systemctl reload apache2

⚠️ No modifiques los VirtualHosts de tus sitios WordPress. Mantén cada dominio en su propio archivo de configuración.

4. Configurar base de datos

Roundcube necesita una base de datos MySQL/MariaDB:

bash

sudo mysql -u root -p
CREATE DATABASE roundcube CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;
GRANT ALL PRIVILEGES ON roundcube.* TO 'roundcubeuser'@'localhost' IDENTIFIED BY 'tu_contraseña_segura';
FLUSH PRIVILEGES;
EXIT;

5. Finalizar instalación desde navegador

Accede a http://webmail.tudominio.com/installer y sigue el asistente. Una vez terminado, elimina el instalador:

bash

sudo rm -rf /var/lib/roundcube/installer

6. Seguridad y compatibilidad

  • Asegúrate de que PHP y Apache/Nginx estén configurados correctamente para coexistir con WordPress.
  • Usa HTTPS con Let’s Encrypt para proteger el acceso a Roundcube.
  • Configura fail2ban y firewall para proteger tu servidor.

✅ Consejos para no romper WordPress

  • Nunca edites archivos como /etc/apache2/sites-enabled/000-default.conf si WordPress ya está funcionando.
  • Usa VirtualHosts separados para cada dominio y subdominio.
  • Verifica que no haya conflictos de puertos o rutas (DocumentRoot).
  • Haz una copia de seguridad antes de instalar Roundcube.

Configurar el subdominio webmail.tudominio.com

🌐 Crear subdominio para Roundcube

  1. Añade el subdominio en tu DNS:
    • En tu panel de control DNS, crea un registro tipo A o CNAME para webmail.tudominio.com apuntando a tu VPS.
  2. Configura VirtualHost para Apache (si usas Apache): Crea /etc/apache2/sites-available/webmail.conf:apache<VirtualHost *:80> ServerName webmail.tudominio.com DocumentRoot /var/lib/roundcube <Directory /var/lib/roundcube> Options +FollowSymLinks AllowOverride All Require all granted </Directory> ErrorLog ${APACHE_LOG_DIR}/webmail_error.log CustomLog ${APACHE_LOG_DIR}/webmail_access.log combined </VirtualHost> Luego activa el sitio:bashsudo a2ensite webmail.conf sudo systemctl reload apache2

🔐 Instalar certificado SSL con Let’s Encrypt

  1. Instala Certbot:bashsudo apt install certbot python3-certbot-apache
  2. Ejecuta Certbot para el subdominio:bashsudo certbot --apache -d webmail.tudominio.com
  3. Verifica que el acceso a https://webmail.tudominio.com funcione correctamente.

🧪 Verifica que WordPress no se vea afectado

  • Asegúrate de que cada dominio WordPress tenga su propio VirtualHost y no compartan rutas ni puertos con Roundcube.
  • No edites 000-default.conf si tus sitios WordPress ya están funcionando.
  • Usa apache2ctl -S para ver el mapa de VirtualHosts activos y confirmar que no hay conflictos.

Configuración completa para usar Nginx

1. Crear bloque de servidor para Roundcube

Edita o crea el archivo /etc/nginx/sites-available/webmail.tudominio.com:

nginx

server {
    listen 80;
    server_name webmail.tudominio.com;

    root /var/lib/roundcube;
    index index.php index.html;

    location / {
        try_files $uri $uri/ /index.php;
    }

    location ~ \.php$ {
        include snippets/fastcgi-php.conf;
        fastcgi_pass unix:/run/php/php8.2-fpm.sock;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        include fastcgi_params;
    }

    location ~* ^/(README|INSTALL|LICENSE|CHANGELOG|UPGRADING)$ {
        deny all;
    }

    location ~ /\. {
        deny all;
        access_log off;
        log_not_found off;
    }

    error_log /var/log/nginx/roundcube_error.log;
    access_log /var/log/nginx/roundcube_access.log;
}

2. Activar el sitio

bash

sudo ln -s /etc/nginx/sites-available/webmail.tudominio.com /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl reload nginx

🔐 Instalar SSL con Let’s Encrypt

  1. Instala Certbot para Nginx:

bash

sudo apt install certbot python3-certbot-nginx
  1. Ejecuta Certbot:

bash

sudo certbot --nginx -d webmail.tudominio.com
  1. Verifica acceso a https://webmail.tudominio.com

✅ Verifica que WordPress no se vea afectado

  • Tus sitios WordPress deben tener sus propios bloques server en Nginx, como tudominio.com o blog.tudominio.com.
  • No uses default_server en el bloque de Roundcube.
  • Usa nginx -T para ver toda la configuración activa y confirmar que no hay conflictos.
Generador de Metaetiquetas

Generador de Metaetiquetas

Un generador de metaetiquetas es una herramienta que crea automáticamente las etiquetas HTML que describen el contenido de una página web para mejorar su visibilidad en buscadores.

¿Qué son las metaetiquetas?

  • Son fragmentos de código HTML que no se muestran al usuario directamente, pero que aportan información a los motores de búsqueda y redes sociales.
  • Ejemplos comunes:
    • Meta title: el título que aparece en los resultados de Google.
    • Meta description: el resumen breve que acompaña al título en los buscadores.
    • Meta keywords: palabras clave relacionadas con el contenido (aunque hoy en día tienen poco peso en SEO).
    • Meta robots: indican a los buscadores si deben indexar o seguir enlaces de la página.
    • Etiquetas sociales (Open Graph, Twitter Card): definen cómo se verá tu página al compartirse en redes sociales.

⚙️ ¿Qué hace un generador de metaetiquetas?

  • Automatiza la creación de estas etiquetas a partir de datos básicos que introduces (título, descripción, palabras clave, idioma, autor, etc.).
  • Optimiza la longitud de los textos para que cumplan con los límites recomendados por Google (ej. título ≤ 60 caracteres, descripción ≤ 160 caracteres).
  • Facilita el SEO, ya que ayuda a que tu página aparezca mejor posicionada en los resultados de búsqueda.
  • Genera código listo para copiar y pegar en el <head> de tu página web.

Ejemplo de metaetiquetas generadas

html

<meta name="title" content="Blog de recetas fáciles y rápidas">
<meta name="description" content="Descubre recetas caseras, rápidas y deliciosas para cada ocasión.">
<meta name="keywords" content="recetas, cocina fácil, comida rápida, postres">
<meta name="robots" content="index, follow">
<meta property="og:title" content="Blog de recetas fáciles y rápidas">
<meta property="og:description" content="Descubre recetas caseras, rápidas y deliciosas para cada ocasión.">
<meta property="og:image" content="https://tusitio.com/imagen.jpg">
<meta property="og:url" content="https://tusitio.com">

🚀 Ventajas de usar un generador

  • Ahorra tiempo y evita errores de sintaxis.
  • Garantiza que las etiquetas cumplan con los estándares SEO.
  • Permite personalizar fácilmente la información para buscadores y redes sociales.

En resumen, un generador de metaetiquetas es como un asistente SEO que te da el código listo para mejorar la presencia de tu web en Google y en redes sociales.

Generador de Metaetiquetas Automático

Incluye etiquetas básicas (title, description, robots), canónica, Open Graph y Twitter Card. Copia el código en un archivo .html, súbelo o insértalo en tu sitio, y úsalo desde el navegador.

Generador Metaetiquetas Web

Cómo usarlo

  • Rellena los campos: título, descripción y la ruta dentro de ee3.es..
  • Genera y copia: pulsa “Generar metaetiquetas” y luego “Copiar” para pegar el bloque en el head de tu página.
  • Imágenes y canónica: usa URLs absolutas del dominio (por ejemplo, https://ee3.es/…); si no pones canónica, se construye con el dominio y la ruta.

Consejos rápidos

  • Título: claro y específico, idealmente bajo 60–70 caracteres.
  • Descripción: persuasiva y fiel al contenido, intenta mantenerla bajo 160–180 caracteres.
  • OG/Twitter: usa una imagen 1200×630 para buen aspecto en redes; la URL debe ser absoluta.
  • Robots: “index, follow” para páginas públicas; “noindex, nofollow” para páginas que no quieres posicionar.

¿Quieres que lo integre como componente (por ejemplo en Next.js/Vue) o adaptar los estilos al branding de ee3.es??

Diferencia entre una web HTML y una web PHP

Diferencia entre una web HTML y una web PHP

Una página web hecha solo con HTML es estática, mientras que una página web en PHP puede ser dinámica e interactiva. Aquí te explico las diferencias clave:

Diferencias entre HTML y PHP

CaracterísticaHTML (estático)PHP (dinámico)
🧱 Tipo de lenguajeDe marcadoDe programación del lado del servidor
🔄 InteractividadNo puede procesar formularios ni datosPuede manejar formularios, sesiones, bases de datos
📦 Generación de contenidoEl contenido es fijoEl contenido puede cambiar según el usuario o la base de datos
🗃️ Acceso a base de datosNo tiene capacidadPuede conectarse a MySQL, PostgreSQL, etc.
🔐 SeguridadNo puede proteger páginas ni gestionar usuariosPuede validar usuarios, proteger rutas, cifrar datos
🧠 Lógica de negocioNo permite lógicaPermite condicionales, bucles, funciones
📄 Extensión de archivo.html.php
🧰 Uso típicoLanding pages, portafolios simplesWebs profesionales, tiendas online, blogs, sistemas

🧪 Ejemplo comparativo

HTML simple:

html

<h1>Bienvenido</h1>
<p>Hoy es martes.</p>

PHP dinámico:

php

<h1>Bienvenido</h1>
<p>Hoy es <?php echo date("l"); ?>.</p>

➡️ El HTML siempre mostrará “Hoy es martes”, mientras que el PHP mostrará el día real según el servidor.

🧠 ¿Cuándo usar cada uno?

  • HTML: Ideal para sitios informativos simples, sin interacción.
  • PHP: Recomendado para sitios que requieren lógica, autenticación, formularios, paneles de control, etc.

Aquí tienes el código completo de una página web profesional en PHP con el estilo CSS integrado directamente en el archivo index.php. Esto facilita la visualización sin depender de archivos externos:

✅ index.php con CSS embebido

php

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Mi Web Profesional</title>
  <style>
    body {
      font-family: 'Segoe UI', sans-serif;
      margin: 0;
      background-color: #f9f9f9;
    }

    header {
      background-color: #2c3e50;
      color: white;
      padding: 1em;
      text-align: center;
    }

    nav ul {
      list-style: none;
      padding: 0;
      display: flex;
      justify-content: center;
      gap: 2em;
    }

    nav a {
      color: white;
      text-decoration: none;
      font-weight: bold;
    }

    main {
      padding: 2em;
      text-align: center;
    }

    .boton {
      display: inline-block;
      padding: 0.5em 1em;
      background-color: #3498db;
      color: white;
      text-decoration: none;
      border-radius: 5px;
      margin-top: 1em;
    }

    footer {
      background-color: #ecf0f1;
      text-align: center;
      padding: 1em;
      margin-top: 2em;
    }
  </style>
</head>
<body>
  <header>
    <h1>Mi Web Profesional</h1>
    <nav>
      <ul>
        <li><a href="#">Inicio</a></li>
        <li><a href="#">Servicios</a></li>
        <li><a href="#">Contacto</a></li>
        <li><a href="#">Acceso</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <section>
      <h2>Soluciones digitales para tu negocio</h2>
      <p>Desarrollamos sitios web modernos, seguros y optimizados para buscadores.</p>
      <a href="#" class="boton">Solicita presupuesto</a>
    </section>
  </main>

  <footer>
    <p>&copy; <?php echo date("Y"); ?> Mi Web Profesional. Todos los derechos reservados.</p>
  </footer>
</body>
</html>

Este archivo PHP ya incluye todo lo necesario para verse como una página profesional. Puedes guardarlo como index.php y abrirlo en tu servidor local (XAMPP, WAMP, etc.).

ara crear una página web profesional en PHP, necesitas una arquitectura modular, conexión a base de datos, seguridad, y diseño responsivo. Un buen ejemplo es una tienda online o sistema de gestión con PHP, MySQL, HTML, CSS y JavaScript.

Aquí tienes una estructura profesional básica con componentes clave:

🧱 Estructura de proyecto profesional

Código

/miweb-profesional
│
├── config/
│   └── db.php              # Conexión a base de datos
│
├── includes/
│   ├── header.php          # Encabezado común
│   ├── footer.php          # Pie de página común
│   └── functions.php       # Funciones reutilizables
│
├── public/
│   ├── index.php           # Página principal
│   ├── contacto.php        # Formulario de contacto
│   └── login.php           # Autenticación
│
├── assets/
│   ├── css/
│   │   └── style.css
│   └── js/
│       └── main.js
│
└── README.md

🔐 config/db.php – Conexión segura a MySQL

php

<?php
$host = 'localhost';
$db = 'miweb';
$user = 'usuario';
$pass = 'contraseña';

try {
    $pdo = new PDO("mysql:host=$host;dbname=$db;charset=utf8", $user, $pass);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
    die("Error de conexión: " . $e->getMessage());
}

🧠 includes/functions.php – Funciones reutilizables

php

<?php
function limpiarEntrada($data) {
    return htmlspecialchars(strip_tags(trim($data)));
}

📄 public/index.php – Página principal

php

<?php include('../includes/header.php'); ?>
<main>
  <h1>Bienvenido a Mi Web Profesional</h1>
  <p>Soluciones digitales con PHP y MySQL.</p>
</main>
<?php include('../includes/footer.php'); ?>

📄 public/contacto.php – Formulario con validación

php

<?php
include('../includes/header.php');
include('../config/db.php');

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $nombre = limpiarEntrada($_POST["nombre"]);
    $email = limpiarEntrada($_POST["email"]);
    $mensaje = limpiarEntrada($_POST["mensaje"]);

    $stmt = $pdo->prepare("INSERT INTO mensajes (nombre, email, mensaje) VALUES (?, ?, ?)");
    $stmt->execute([$nombre, $email, $mensaje]);

    echo "<p>Mensaje enviado correctamente.</p>";
}
?>

<form method="post">
  <input type="text" name="nombre" placeholder="Tu nombre" required>
  <input type="email" name="email" placeholder="Tu email" required>
  <textarea name="mensaje" placeholder="Tu mensaje" required></textarea>
  <button type="submit">Enviar</button>
</form>

<?php include('../includes/footer.php'); ?>

🎨 assets/css/style.css – Diseño responsivo

css

body {
  font-family: 'Segoe UI', sans-serif;
  margin: 0;
  padding: 0;
  background: #f4f4f4;
}

header, footer {
  background: #333;
  color: white;
  padding: 1em;
  text-align: center;
}

main {
  padding: 2em;
}

🛒 ¿Quieres algo más avanzado?

Puedes explorar este proyecto completo de tienda PHP avanzada en GitHub. Incluye gestión de productos, usuarios, carrito y panel de administración.

¿Te gustaría que te ayude a personalizar una plantilla profesional o integrar funciones como login, panel de control o pagos?

Popup en una entrada de WordPress

Popup en una entrada de WordPress

Como poner un Popup en una entrada de WordPress. Una forma directa y eficaz de crear un Popup (o Modal), en tu entrada de WordPress.

📄 Código paso a paso

1. Añadir el HTML del modal

Coloca este bloque en el archivo single.php de tu tema hijo, o bien mediante un hook en functions.php usando wp_footer. En este ejemplo, el modal solo se carga si la entrada tiene un ID concreto (ejemplo: 123).

php

<?php
// En functions.php o en single.php
function ee3_modal_single_entry() {
    if (is_single(123)) { // Cambia 123 por el ID de tu entrada
        ?>
        <!-- Modal HTML -->
        <div id="ee3Modal" class="modal">
          <div class="modal-content">
            <span class="close">&times;</span>
            <h2>Bienvenido a esta entrada</h2>
            <p>Este es un modal exclusivo para esta entrada en ee3.es.</p>
          </div>
        </div>

        <style>
          /* Estilos básicos del modal */
          .modal {
            display: none;
            position: fixed;
            z-index: 9999;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0,0,0,0.7);
          }
          .modal-content {
            background-color: #fff;
            margin: 10% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            max-width: 500px;
            border-radius: 8px;
          }
          .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
          }
          .close:hover {
            color: #000;
          }
        </style>

        <script>
          // Script para abrir y cerrar el modal
          document.addEventListener("DOMContentLoaded", function() {
            var modal = document.getElementById("ee3Modal");
            var span = document.getElementsByClassName("close")[0];

            // Mostrar modal al cargar la página
            modal.style.display = "block";

            // Cerrar modal al hacer clic en la X
            span.onclick = function() {
              modal.style.display = "none";
            }

            // Cerrar modal al hacer clic fuera del contenido
            window.onclick = function(event) {
              if (event.target == modal) {
                modal.style.display = "none";
              }
            }
          });
        </script>
        <?php
    }
}
add_action('wp_footer', 'ee3_modal_single_entry');

🔎 Explicación

  • is_single(123) → asegura que el modal solo se muestre en la entrada con ID 123.
  • El modal se abre automáticamente al cargar la página.
  • Se puede cerrar con la X o haciendo clic fuera del contenido.
  • Todo el código se inyecta en el footer de WordPress para no romper la estructura del tema.

📌 Conclusión: Con este snippet, tu modal aparecerá únicamente en la entrada que definas en ee3.es.

Agregarle una Imagen al Popup

Ejemplo con imagen en el modal

Dentro del bloque modal-content añade la imagen:

html

<div id="ee3Modal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <h2>Bienvenido a esta entrada</h2>
    <img src="https://tusitio.com/wp-content/uploads/imagen-modal.jpg" 
         alt="Imagen ilustrativa" 
         style="max-width:100%; height:auto; margin-bottom:1rem; border-radius:8px;">
    <p>Este es un modal exclusivo para esta entrada en ee3.es.</p>
  </div>
</div>

🔎 Detalles importantes

  • src → pon la URL de la imagen que quieras mostrar. Si la subes a la biblioteca de medios de WordPress, copia la URL completa.
  • style → con max-width:100% y height:auto aseguras que la imagen sea responsive y no se desborde.
  • margin-bottom → añade espacio debajo de la imagen.
  • border-radius → opcional, para esquinas redondeadas.

📌 En Divi

  • Si usas el módulo de código de Divi, pega el bloque completo del modal con la imagen incluida.
  • Si prefieres, puedes añadir la imagen desde la biblioteca de Divi y copiar su URL en el src.