Cómo personalizar la página de error 404 en WordPress

El error 404 aparece cuando visitamos una página en WordPress que ya no existe. La plantilla que viene por defecto es un poco pobre. Hoy te enseñamos a personalizar la página de error 404 en WordPress.

Muchas veces, navegando por Internet nos encontramos con un enlace que es de nuestro interés y, al acceder a él, nos aparece una página de error con un número: 404. Si accedemos a la documentación de Internet veremos que el error 404 indica que el host ha sido capaz de comunicarse con el servidor, pero no existe el recurso que ha sido pedido. Es decir, por el motivo que sea, esa entrada no existe ya en el WordPress. Estamos accediendo a un contenido muerto, un enlace zombi del que solo queda el recuerdo en forma de enlace en algún buscador o en alguna otra entrada de nuestro blog.

Hay que saber tratar este tipo de errores para no asustar al usuario, es por eso que muchas páginas lo tratan de forma amigable mostrando un contenido simpático y agradable y ofreciéndole al internauta varias opciones para, o bien encuentre el contenido que estaba buscando, o bien sepa salir de allí. A nadie nos gustan las páginas de error 404 en WordPress pero, ya que son inebitables, ¿por qué no ponérselo sencillo al usuario para que sepa encontrar una salida?

Si sois administradores de WordPress, os habréis fijado que la plantilla que viene por defecto es un poco pobre. Solo ofrece un pequeño buscador y unas simples indicaciones sobre lo que ha ocurrido. El usuario que visite esta página, lo más probable es que se quede un poco a cuadros al ver semejante mensaje, y ya no digamos si es primerizo en esto de Internet. Hay muchas maneras de personalizar la página de error 404 en WordPress y hoy en WPDirecto, te enseñamos unas cuantas…

Si solo queremos cambiar textos y diseño…

Si solo quieres cambiar textos y diseños debes saber que, por norma general, los themes de WordPress disponen de una plantilla dedicada exclusivamente al error 404. Puedes acceder a ella a través de esta ruta:

/wp-content/themes/ELNOMBREDETUTHEME/404.php

Para acceder a este archivo, tenemos que tener instalado un nuestro equipo un cliente FTP como Filezilla o similares, y entrar con los datos FTP que nos tuvo que solicitar nuestra empresa de hosting web para WordPress. Una vez dentro podemos retocar los textos, imágenes y demás contenido de diseño. Ojo, recomendamos que para ello se tengan unos cuantos conocimientos de diseño y algo de programación. No toques nunca por tocar, estate seguro de lo que estás haciendo.

Si queremos mostrar las publicaciones recientes en la página de error 404 en WordPress

Esto ya es un poco más avanzado. Si quieres mostrar las publicaciones recientes de tu blog a aquellos usuarios que, por error, estén visualizando una página 404 hay que modificar el archivo que te hemos indicado antes, el 404.php. Allí añadiremos este trozo de código:

<h2>Publicaciones más recientes</h2>

<ul>
  <?php
     //Extraemos los posts más nuevos
     $recent_posts = wp_get_recent_posts( array('post_status' => 'publish') );
     //Los recorremos en un bucle
     foreach( $recent_posts as $recent ){
       //Y vamos mostrandolos
       echo '
       <li>
         <a href="' . get_permalink($recent["ID"]) . '" title="'.esc_attr($recent["post_title"]).'" >' .   $recent["post_title"].'</a>
       </li> ';
     }
  ?>
</ul>

Una vez añadido esto, en la página 404 deberían aparecer las últimas entradas publicadas en nuestro sitio web.

Si queremos mostrar publicaciones relacionadas con la url que estaba buscando el usuario

Esto ya es para usuarios avanzados. Es posible que el usuario haya dado con la página 404 en base a una url extinta y que a él le interesaba. Como la url la tenemos en el navegador, es posible mostrar entradas relacionadas según la url que quería el usuario. También hay que modificar el archivo 404.php y añadir estas líneas de código:

<?php
//Argumentos de la query para los cuales cogemos la actual url
$query_args = array( 's' => basename($_SERVER['REQUEST_URI']) );
//Hacemos la consulta
$query = new WP_Query( $query_args );
//Si ha dado resultado...
if($query->have_posts()){
  //Lo mostramos
  echo "<h2>Es posible que estuviese buscando:</h2>";
  echo '<ul>';
  //Recorremos la consulta en bucle
  while ( $query->have_posts() ) : $query->the_post();
    echo '<li>';
    ?>
    <a href="<?php the_permalink() ?>" title="Enlace a <?php the_title_attribute(); ?>"><?php the_title(); ?></a>
    <?php
    echo '</li>';
  endwhile;
  echo '</ul>';
// Limpiamos los datos del post
wp_reset_postdata();
}
?>

Así, si los usuarios se encuentran perdidos, pueden encontrar otros posts relacionados que también pueden ayudarle en lo que estaba buscando. Una gran idea que no es muy complicada de implementar.

Personalizar la página de error 404 en WordPress con plugins

Como siempre, existen plugins para WordPress que nos facilitan la tarea de personalizar la página 404. Te mostramos unos cuantos para que los pruebes tú mismo:

Custom 404 Error Page

Custom 404 Error Page es un plugin para WordPress el cual te da a elegir entre un multitud de diseños para páginas 404. Además, es 100% personalizable. Podemos cambiar la fuente, el tamaño de la letra, la disposición de los elementos, subir imágenes… Muy completo.

Custom Error Pages

Custom 404 Pro es otro plugin para WordPress que te permite editar el texto y algo de diseño de todas las páginas de error de tu sitio web. Desde la 401, a la 403 y, cómo no, la 404 también. Para ello se ayudará del editor wysiwig de WordPress con el que podremos modificar el contenido de dichas páginas.

Esperamos que estos consejos te hayan ayudado a crear una página 404 amigable y sobre todo con estilo para que no asuste a nadie más. En WPDirecto seguiremos ayudándote en todo lo que necesites siempre y cuando esté relacionado con WordPress.

¿Cómo consideras que debería ser la página de error 404 perfecta? ¿Cómo es tu página de error 404? ¿Es simpática?