bitkeyos
Cómo Configurar una Página 404 Personalizada en WordPress

Cómo Configurar una Página 404 Personalizada en WordPress

Angel Rojas's photo
Angel Rojas
·

2 min read

¿Alguna vez has llegado a una página de error 404 y te has sentido frustrado? Una página 404 personalizada no solo mejora la experiencia del usuario, sino que también puede mantener a los visitantes en tu sitio web. Aquí te explicamos cómo crearla en WordPress de manera sencilla.

¿Por qué personalizar tu página 404?

  • Mejora la experiencia del usuario: Un diseño atractivo y útil reduce la frustración.

  • Beneficios SEO: Mantiene a los usuarios en tu sitio, lo que es positivo para el posicionamiento.

  • Refuerza tu marca: Puedes incluir elementos visuales y enlaces que reflejen la identidad de tu sitio.

Pasos para crear una página 404 personalizada

  1. Crea un archivo 404.php:

    • Ve al directorio de tu tema y crea un archivo llamado 404.php.

    • Usa este código básico como punto de partida:

      php

      Copy

        <?php get_header(); ?>  
  <div id="content" class="site-content">  
      <header class="page-header">  
          <h1 class="page-title">Página no encontrada</h1>  
      </header>  
      <div class="page-content">  
          <p>Lo sentimos, pero la página que buscas no se pudo encontrar. Aquí hay algunas páginas útiles:</p>  
          <ul>  
              <li><a href="/">Página principal</a></li>  
              <li><a href="/contacto">Contacto</a></li>  
              <li><a href="/blog">Blog</a></li>  
          </ul>  
      </div>  
  </div>  
  <?php get_footer(); ?>

  2. Personaliza el contenido:

    • Añade imágenes, enlaces útiles, un formulario de búsqueda o cualquier elemento que consideres relevante.

  3. Añade estilo con CSS:

    • Usa el archivo style.css de tu tema o el personalizador de WordPress para mejorar el diseño. Aquí tienes un ejemplo:

      css

      Copy

        .page-404 {  
      text-align: center;  
      margin: 50px auto;  
  }  
  .page-404 h1 {  
      font-size: 36px;  
      color: #333;  
  }  
  .page-404 p {  
      font-size: 18px;  
      color: #666;  
  }  
  .page-404 ul {  
      list-style: none;  
      padding: 0;  
  }  
  .page-404 ul li {  
      display: inline-block;  
      margin: 0 10px;  
  }  
  .page-404 ul li a {  
      text-decoration: none;  
      color: #0073AA;  
  }  
  .page-404 ul li a:hover {  
      text-decoration: underline;  
  }

  4. Prueba tu página 404:

    • Visita una URL inexistente en tu sitio para asegurarte de que la página 404 personalizada se muestre correctamente.

Conclusión

Una página 404 personalizada no solo informa a los usuarios de que la página no existe, sino que también los guía hacia otros contenidos útiles en tu sitio. Sigue estos pasos para crear una página 404 que mejore la experiencia del usuario y refuerce tu marca.

Para más consejos sobre WordPress, visita: Consejo en WordPress: Configura una página 404 personalizada.

WordPress