Cómo crear una pagina de precarga para WordPress sin plugins

En este tutorial, te enseñaré cómo crear una página de precarga personalizada en WordPress sin la necesidad de usar plugins. La página de precarga es esa pantalla que los visitantes ven antes de que se cargue el contenido principal de tu sitio web. ¡Vamos a personalizarla a tu gusto!

Preparación

Antes de empezar, asegúrate de tener un tema hijo (child theme) configurado. Si no sabes cómo hacerlo, aquí te lo explico. Esto es esencial para no perder ninguna personalización.

Duplica el Archivo «head.php» del Tema Padre

Para crear la página de precarga, duplicaremos el archivo «head.php» del tema padre en el tema hijo. Puedes hacerlo a través de FTP o desde el administrador de archivos de tu cPanel. Yo lo explicaré desde el panel de control.

Accede al administrador de archivos y busca la carpeta de tu tema padre en «public_html/wp-content/themes».
Encuentra el archivo «head.php» y descárgalo.
Luego, cárgalo en la carpeta de tu tema hijo.

Inserta el Código de Precarga

En este punto, necesitas el código de precarga. Puedes encontrarlo en la página que enlazaré en la descripción del tutorial. Este código se agregará al archivo «head.php» del tema hijo, justo antes del cierre de la etiqueta PHP.

Selecciona una Imagen de Precarga

Busca una imagen que se mostrará como precarga. Asegúrate de definir un color de fondo en el archivo GIF si lo deseas.

Descarga la imagen y cámbiale el nombre si es necesario.
Sube la imagen a la biblioteca de medios de WordPress.
Copia la URL de la imagen.
Paso 5: Modifica la URL de la Imagen
Vuelve al editor de temas y modifica la URL de la imagen en el código que agregaste previamente. Asegúrate de que la URL apunte a la imagen que subiste a la biblioteca de medios.

Personaliza el Color de Fondo (Opcional)

Si deseas que la imagen de precarga tenga un fondo de color, modifica el código para definir el color de fondo.

¡Listo!
Ahora tienes una página de precarga personalizada en WordPress. Si te gustó este tutorial, no olvides darle like, suscribirte al canal y activar las notificaciones para futuros videos. Si tienes alguna pregunta, déjala en los comentarios, ¡estaré encantado de ayudarte! Nos vemos en próximos videos. ¡Hasta luego!

				
					<div class="loader" ></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$('.loader').fadeOut(3000);
}); });
</script>
<style>
.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('/wp-content/uploads/2021/05/34115-rocket-lunch.gif') 50% 50% no-repeat #fff; /* Change the #fff here to your background color of choice for the preloader fullscreen section */
}

</style>
				
			
Comparte en tus redes sociales

Deja un comentario