Archivo HTML como página de inicio en WordPress

[ 12 noviembre 2019 ] [ Autor: Jhon Marreros Guzmán ][ Themes - Intermedio] [ ]

En algunos casos es posible que quieras tener como página de inicio de tu sitio web una página HTML estática, que sea independiente del theme de WordPress, y desde allí crear enlaces a los diferentes apartados de tu web o incluso a otros sitios web.

Resultado final

Al final lo que queremos obtener es que al ingresar al front-end del sitio ver una página de inicio HTML similar a la siguiente imagen.

Pagina estática HTML como página de inicio

Puedes descargar la página de ejemplo HTML desde el siguiente enlace

1- Creando una plantilla de página

En un artículo anterior ya habíamos visto Cómo crear una Plantilla de Página en WordPress.

Primero Creamos un nuevo archivo como parte de los archivos del theme, llamado por ejemplo: t_page_HTML-inicio.php

Luego agregamos el siguiente código en la cabecera del archivo y al final del mismo irá el código HTML

<?php
/*
Template Name: Página HTML inicio
*/
?>
<!-- Aqui irá el código HTML -->

Si el archivo HTML hace referencia a imágenes u otros archivos, tendrías que copiar igual estos archivos como parte de los archivos de tu sitio web WordPress, ver el punto 4.

Es recomendable agregar este archivo de plantilla de página en un child-theme

2- Asignando la plantilla de página

Una vez tienes la plantilla de página creada, entonces tienes que crear o editar una página de inicio desde el backend de WordPress.

Tienes que seleccionar en la sección de atributos la nueva plantilla de página creada, en nuestro ejemplo se llama: Página HTML inicio, tal como se muestra en la siguiente imagen.

3- Configurando una página para el inicio

Finalmente tienes que configurar el sitio para mostrar una página como inicio, desde Ajustes > Lectura, tal como se muestra en la siguiente imagen.

En nuestro ejemplo la página que hemos modificado se llama Bienvenida

4- Corrección de rutas

Es posible que si tu archivo HTML tiene dependencias, entonces será necesario copiar esas dependencias a tu sitio web WordPress, usualmente todas las dependencias estarán dentro de una carpeta, puedes copiarlas directamente a la raíz de tu sitio.

La otra opción es copiar las dependencias a la misma carpeta del theme, en este caso tendrías que hacer modificaciones a las rutas de los archivos, por ejemplo usando la función get_stylesheet_directory_uri()


<img src="<?= get_stylesheet_directory_uri() ?>/assets-home/mi-imagen.jpg" />

Conclusión

Tener un diseño totalmente diferente del theme para la página de inicio es posible gracias a la funcionalidad de Plantilla de Página. A través de esta funcionalidad de WordPress puedes agregar código HTML personalizado para construir una página completa.

¿Aún con dudas?, en el siguiente video se detallan los puntos anteriores