Contactos

Crea una página 404 única. Cómo funciona

¿Por qué tienes que crear tu propia página 404?

La principal y única razón es no perder un visitante. Todos los usuarios probablemente tuvieron una situación de este tipo al hacer clic en enlaces en algún sitio, el navegador en lugar de la página solicitada mostró su página de error predeterminada. El error ocurre como resultado de una solicitud ingresada incorrectamente o la página solicitada fue eliminada por el propio webmaster. En este caso, todos los visitantes se comportan igual: cierran la página y abandonan su sitio.

¡Deja de verter agua! ¡Seamos específicos!

Creamos dos archivos - 404.html y .htaccess(este archivo no tiene nombre, pero tiene la extensión htaccess), que redirige automáticamente al visitante a 404.html, en caso de error. Para que la redirección funcione, debe agregar una sola línea a este archivo:

ErrorDocument 404 http://www.site.ru/404.html

Cuando ambos archivos estén listos, cárguelos en el servidor en la raíz del dominio.

Ya hemos creado un archivo vacío. 404.html y ahora llenaremos HTML el código en sí 404 página aplicando activamente HTML5 y CSS3... Se me ocurrió mi propia forma de hacer un sencillo y hermosa página 404.

El primer paso es elegir una imagen o foto grande y de alta calidad con un tamaño de al menos 1200x750 píxeles. Hay muchos sitios con licencia gratuita desde donde puede descargar fotos de muy alta calidad. Lo descargué gratis de un sitio popular pixabay.com esta es una imagen divertida.

Quiero colocar la imagen como fondo en toda la ventana del navegador y escribir en el centro del navegador: 404 página no encontrado y poner un enlace a la página principal. Echemos un vistazo más de cerca a los puntos más importantes.

Efecto de translucidez RGBA

La imagen seleccionada es demasiado brillante, debe oscurecerla ligeramente, entonces el texto será más legible. Se puede obtener un efecto de oscurecimiento semitransparente usando RGBA escribiendo la siguiente línea de código en los estilos de bloque:

Antecedentes: rgba (0, 0, 0, 0,7);

Las primeras tres letras denotan: rojo, verde, azul y son iguales a cero (es decir, obtenemos negro). Y la última letra "a" - representa el canal alfa, que es responsable de la translucidez del elemento. En nuestro caso, la figura 0.7 - habla de un 70% de oscurecimiento. La escala de transparencia total a opacidad total está entre cero y uno (0 ... 1).

Elementos de posicionamiento

Para el correcto diseño de mi ejemplo página 404 sin entender como funciona la propiedad posición, será difícil. Después de mirar el resultado final 404 páginas, necesitamos entender la estructura HTML documento. Aquí vemos tres capas superpuestas entre sí. capa inferior - la imagen en sí, el medio en la etiqueta

- bloque de atenuación translúcido y parte superior
- texto. Nuestra tarea es establecer el posicionamiento deseado del contenido de estas capas.

La capa intermedia tendrá un posicionamiento absoluto porque el elemento (cuadro de sombreado) está posicionado en relación con los bordes del navegador con relleno de cero.

Posición: absoluta;

Coloque la capa de texto superior en relación con el elemento de la capa intermedia.

Posición: relativa;

Código de página 404

Teniendo este código listo para usar y cambiando solo la imagen en sí, puede crear muchas páginas de "error" diferentes.





Código de página 404




404

Página no encontrada

Ir a la página de inicio..





Si planea crear sitios web personalizados, se le ayudará a comprender todas las complejidades del diseño utilizando HTML5 y CSS3.

¿Para qué sirve una página de error 404, cómo personalizarla y hacerla lo más atractiva posible para el usuario? Todas estas preguntas no dejan de ser relevantes para quien crea la suya, la personaliza de forma independiente y la mejora para sus clientes y usuarios.

La personalización de una página de WordPress 404 tiene algunos matices que se discutirán en este artículo. Entonces, ¿por qué perder un tiempo precioso y crear por separado una página de error para su sitio?

¿Qué hace una página de WordPress 404?

El error 404 significa que el servidor no pudo encontrar la página requerida en el segundo dado desde el enlace indicado por el usuario. Hay varias razones para la ausencia de una página en la dirección especificada. Nadie ha creado nunca una página de este tipo, ha seguido un enlace roto o se ha eliminado. En todos los casos, el sistema redirige al usuario a una página de error especialmente preparada.

Ejemplo:

Para no llevar al usuario a un callejón sin salida después de llegar a la página incorrecta, es importante organizarlo de la manera más clara y correcta posible. De lo contrario, simplemente abandonará su sitio para siempre.

Diseñada para el tema general del sitio, la página retiene la atención del usuario y puede recomendar el uso de enlaces adicionales que puedan interesarle.

Cómo hacer un WordPress de página 404

¿Cómo hacer una página 404 de WordPress según todas las reglas?

En la página de error que los usuarios dejan con menos frecuencia que la predeterminada:

- No debería haber redireccionamiento. Incluso si la página que necesita el usuario no está allí, los robots de búsqueda necesitan ver esta información. Por lo tanto, la página de error no se indexará.

- Como se mencionó anteriormente, se recomienda diseñar la página de error de acuerdo con el tema general del sitio.

- Pregunte a sus lectores, si encuentran enlaces imposibles de acceder a las páginas necesarias, que le informen sobre las coordenadas especificadas.

- En la página de error es imperativo indicar enlaces e información que pueda interesar al usuario. También se recomienda publicar un formulario de búsqueda para retener a sus clientes.

- No vale la pena señalar demasiados puntos técnicos en la página 404, es mejor organizar y explicar la situación a los usuarios de una forma sencilla y comprensible.

Digamos que ya está trabajando en el área de administración de WordPress. Para crear una página de error, vaya a su panel de control Apariencia - Editor.

Busque el archivo en la barra lateral derecha 404. php y haga clic en él para editarlo.

Paso 1.

La página de WordPress 404 no encontrada debe adaptarse para su usuario de habla rusa. Por lo tanto, puede reemplazar todos los mensajes dentro del código por los suyos. Las comillas y otros elementos presentes en el código, trate de no perderlos o eliminarlos accidentalmente.

Paso 2.

Presentamos un formulario de búsqueda.

Para hacer esto, solo necesita insertar el siguiente elemento de código en el código de la página:

Por cierto, también puede insertar scripts de Google o Yandex en la página de error. Con su ayuda, el usuario podrá realizar una solicitud al motor de búsqueda directamente desde su página 404.

Paso 3.

Si desea permitir que los usuarios salten directamente de la página de error a las secciones de su sitio, inserte las siguientes líneas adicionales en el código de la página principal.

Nuevos artículos del sitio

Seccionessitio

Archivo

Una imagen creativa agregada a la página de error junto con el texto de los fans y los enlaces del sitio con estilo hace que los 404 sean interesantes y mantiene a los usuarios con usted.

Por cierto, la página de error se puede crear utilizando complementos especiales. Sin embargo, algunos expertos creen que la forma más sencilla es agregar las líneas de código necesarias a mano y no cargar su recurso con extensiones de terceros.

  • Preste la debida atención a sus usuarios en la página de error, sea cortés y sereno;
  • No sobrecargue demasiado esta página con enlaces;
  • Intente ser creativo y gracioso al crear la página de error;
  • Invite a aquellos que accidentalmente accedieron a la página de error a intentar nuevamente encontrar la información que necesitan y ofrecerles para retener a los clientes, por ejemplo, un enlace a sus productos;
  • Sin embargo, trate de mantener la menor cantidad posible de enlaces de su sitio que estén rotos o incorrectos. En primer lugar, esto aumentará la calidad de su sitio y, en segundo lugar, tendrá un efecto positivo en la optimización de motores de búsqueda y SEO.

Tenga en cuenta que algunas plantillas de WordPress pueden no tener una página 404. Sin embargo, se recomienda crear una, porque en caso de error y el CNC está activado, el sistema de WordPress accede al archivo 404.php. En ausencia de ella, el usuario es devuelto a la página principal del sitio, lo que puede terminar confundiéndolo por completo.

Al crear una página de error, no sea aburrido y tal vez su 404 se convierta en un activo real en línea que todos querrán admirar.

¡Saludos a los lectores y visitantes del blog! Hoy quiero tocar una de las preguntas importantes para un blogger, a saber, cómo cambiar una página 404. Permítame explicarle de inmediato qué es una página 404. El error 404 (página 404) o No encontrado es el código de respuesta HTTP estándar. Probablemente todos o muchos han encontrado este error. Al ir a cualquier página, los usuarios ven que la página no existe. Esto se debe a enlaces "rotos", "inactivos", ortografía incorrecta al escribir manualmente y otros errores. El navegador web solicita un documento HTML (página web) y espera un código de respuesta numérico.

En el código 404, el primer dígito "4" indica un error del cliente, como un error tipográfico en la URL. Los siguientes dos números identifican el error específico. Para una comprensión humana de lo que vio, hay una explicación de la razón. La cuestión es que muchos blogueros utilizan plantillas gratuitas para sus blogs y sitios web. Las plantillas gratuitas a menudo no están escritas correctamente y muchos autores de 404 no prestan atención a la página. Como resultado, cuando un visitante llega a un blog y ve un texto en inglés que no entiende, simplemente se va. Para evitar que los visitantes se asusten y abandonen tu blog, basta con cambiar ligeramente la apariencia de la página.

Esto no es lo suficientemente difícil de hacer. Es necesario corregir el código de la página en el editor, agregar una descripción del problema en ruso, ofrecer permanecer en el blog y agregar algo divertido (por ejemplo, como al principio del artículo). Tengo una plantilla paga instalada en mi blog. Después de cambiar varios temas gratuitos, debido a problemas con la configuración, decidí quedarme con la versión paga. Por cierto, no es nada caro. Ahora no enumeraré los pros y los contras de las plantillas pagas y gratuitas, solo diré que en esta plantilla la página 404 ya tenía un aspecto bastante decente. Sin embargo, decidí "revivirla" un poco. Así es como se veía la página antes de los cambios:

En general, el visitante pudo darse cuenta de que la página no fue encontrada, por qué razones podría suceder y qué hacer en este caso. Es posible que tenga una página completamente diferente, con aproximadamente el mismo contenido.

¿Cómo crear una página 404?

Para editar la página 404, basta con realizar cambios en el archivo 404.php, que se encuentra en la carpeta con el tema de tu blog. La edición del archivo se puede hacer directamente en el panel de administración de Word Press de su blog. Vaya al panel de administración, "Apariencia" ===> subelemento "Editor".

En el lado derecho de la pantalla, en la lista de archivos, seleccione Error Template 404 (404. php).

Abre el archivo. En mi caso, se ve así:

Todo lo que necesita hacer es cambiar el texto en el valor del inglés al ruso. No daré ejemplos de cómo cambiar el código del archivo, para los principiantes esta es una tarea bastante difícil. Puedes solucionarlo con la ayuda de un autónomo, no es nada caro. Para aquellos que quieran experimentar, quiero recordarles: asegúrese de hacer una copia del archivo antes de cambiar, para que en caso de error, todo pueda volver a su estado original.

Insertar una imagen

Entre las líneas de texto, inserté la imagen que descargué y edité. La imagen se debe subir al hosting.



¿Te gustó el artículo? Compártelo