There is no doubt that most Internet users are put off by the familiar 404 Page not found mensaje de error. Es probable que haya sido bombardeado por este molesto mensaje al menos una vez este mes cuando hizo clic en un link roto.

A Error 404 es una respuesta HTTP estándar a una solicitud de página Web que el server no pudo cumplir por varias razones. De forma predeterminada, el mensaje de error se muestra como texto sin formato sobre un fondo blanco. Si odias este mensaje cursi, no querrás que los visitantes de tu sitio web al mismo tiempo lo vean. Entonces, ¿por qué no hacerlo menos irritante por medio de un mensaje personalizado?

In this tutorial, I'll walk you through the steps to create a Page not found message so your website visitors feel less irritated when they go blank. However, first, let's better understand why you can go blank when trying to access a web page.

How and why 404 Page not found Errors occur

When you click on a link and get a 404 error, it means that your page request to the server was successful, but the server did not find the particular page you were trying to access. There are many causes for this.

As an example, if the web page that the link was connecting to was deleted, a 404 error will be displayed. A typical scenario leading to this is when an outdated page that contained popular content but had many links is removed. pointed to it from other websites. Big news websites are likely to blame for this if site administrators do not take precautionary measures to prevent missing links to pages.

Al mismo tiempo puede ocurrir un error de página 404 si la página solicitada se reubicó a un nuevo nombre de domain. Si el problema está en el servidor (el servidor está inactivo o es inaccesible por algún motivo), es factible que obtenga un error de DNS. Los cortafuegos, los filters de contenido y otras formas de bloqueo de contenido al mismo tiempo pueden causar enlaces rotos.

La conclusión es que los enlaces rotos son comunes en la web. Depende de los propietarios o administradores de sitios web hacer que la experiencia sea más llevadera para los usuarios. Recuerde, los usuarios de Internet generalmente son impacientes cuando buscan información en un sitio web. Un Username no perderá tiempo en buscar otro sitio web para obtener lo que quiere si todo lo que encontraron en el suyo fue un simple e irritante Error 404.

An easy-to-use error message

As I've already mentioned, most web servers are configured to return a basic 404 error page displaying an apology.–a breve descripción de por qué no pudo tener acceso a la página solicitada. En algunos casos, es factible que al mismo tiempo se le presente un enlace al correo electrónico de un webmaster (si necesita más asistencia técnica) o un enlace a un Search Engine para continuar con su búsqueda.

While this default error message is polite, it is fairly straightforward and generally discourages most website visitors. This is why serious webmasters customize this message so that blank visitors can see a more user-friendly (and less irritating) 404 error page.

All the default themes that ship with WordPress have a basic 404 error page template called 404.php. Sure, this default template works amazingly, but it probably won't say what you want to say to your visitors. Luckily, customizing the message in the template is extremely easy. Just open the page template in a code editor and change the message text to your own. Save the changes later.

The structure of the default error page template shipped with the Two thousand and thirteen El tema se compone de etiquetas para mostrar el encabezado, el pie de página y una barra de búsqueda. Así es como se ve en acción (simplemente escriba una dirección de página falsa en la barra de direcciones del browser):

If you examine the code of your 404 page template, you will see the page header Lost inside header tag

<h1>, junto con una _me function that actually displays the result on the page. This is what you'll want to edit first when customizing your 404 page. Then you can go ahead and add more user-friendly text on the labels.

and

below. Please note that you may or may not change the Lost header, but in general it is good to put a custom header that does not disturb your visitors, along with custom text in the paragraphs.

At the same time you may notice that the title appears inside the huge 404 number on the page. When you do a page inspection of your error page using Firebug, you will see that the huge 404 is inserted by a pseudo-element (.error404 .page-title: before). This opens the 404.php template and replace the default text in labels

,

and

so you want to tell your visitors. At the same time, edit the previously mentioned pseudo-element to your liking or remove it (comment on the stylesheet). I have changed mine to this:

Even though you can say what you want directly to your visitors here, it's always good to keep it short and concise. At the same time, try to tell or highlight to the visitor what they might have been looking for in the first place. And that's pretty much all you need to do to make your 404 page easier to use. Inspect the page and then change the styles as you see fit.

At the same time, depending on the WordPress theme you are using, the developer may have included custom support for 404 pages. In our Total WordPress theme We created a custom 404 page theme option that makes it easy to add a custom 404 redirect, or custom page title and content right from the WordPress dashboard.

Screenshot of the custom 404 page editor in Total

the .Htaccess file is where the magic happens

Once your 404.php is customized, all that's left is for WordPress to display it when the situation is appropriate, when it can't find a specific page. This is the default process. However, there are times when the web server may encounter problems before WordPress knows about them, which means that visitors may not be able to access some pages. In that case you have to make sure the web server can redirect them to your 404.php page and this is where the .htcaccess enter the file.

the .htcaccess El archivo se encuentra en la carpeta raíz de su instalación de WordPress. Para el caso de WordPress, se genera automáticamente cuando cambia su estructura de enlace permanente de forma predeterminada. Todo lo que necesita hacer para asegurarse de que el servidor encuentre su página 404 personalizada es agregar una sola línea al archivo por lo tanto:

ErrorDocument 404 /index.php?error=404

Como puede ver, esta Url comienza en la raíz (/), lo que significa que para usar este formato de URL, su instalación de WordPress debe estar en la raíz de su servidor. De lo contrario, si WordPress está instalado en un subdirectorio, la ruta de redirect debería ser:

ErrorDocument 404 /yourfolder/index.php?error=404

This way, even if you change your topic, index.php it will always call the correct 404 file for your new theme.

Ending

By reading this quick tutorial, hopefully you can now create a complete custom 404 page with an easy to use custom message. At the same time you can set the .htcaccess to make sure your website visitors are always redirected to the correct 404 page by the server in situations where WordPress can't or when you change the theme.

If you want to attract loyal visitors who will always return to your website, it is important to personalize your 404 page with a less irritating message. And of course, at the same time it's a good idea to try to limit the number of times a visitor lands on a 404 page.

Have a great idea for a custom 404 message? What are you using right now on your 404 page? I'd love to hear your ideas in the comments below!