• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Themes / Archivo HTML como página de inicio en WordPress

Archivo HTML como página de inicio en WordPress

Archivo HTML como página de inicio en WordPress

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

mejoras

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

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.

Plantilla de página para el inicio

 

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

Suscríbete a DecodeCMS:  

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Página estática y entradas recientesPágina estática y entradas recientes en el inicio de WordPress
  • Página de inicio y página de entradasPágina de inicio y Página de entradas en WordPress
  • Mostrar subcategorías listado entradasMostrar subcategorías de una categoría en listado de entradas
  • Efecto Lock-in en WordPress¿Se puede evitar el efecto Lock-in en WordPress?
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (5 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. Leonard

    28 julio, 2021

    Muy Buen trabajo! Me sirvió mucho, pero..

    ¿Como hago para poner la barra de navegación de WordPress?

    Pero solo la barra xD, lo intente con y trae la barra pero tambien el header del tema padre =(

    • Jhon Marreros Guzmán

      30 julio, 2021

      El archivo es un archivo .php, un archivo de plantilla de página, por lo que esta dentro de WordPress, tendrías que usar las funciones de WordPress para mostrar el menú, revisa el punto 4 de este artículo: https://decodecms.com/anadir-una-nueva-ubicacion-de-menu-a-un-theme-wordpress/#Mostrar_el_men%C3%BA_en_el_Theme

  2. Hernan Felipe Rodriguez Peinado peinado

    4 enero, 2022

    Es posible que este contenido (t_page_HTML-inicio.php) sea actualizable? en wordpress, alguien me podria indicar como poner este contenido HTML que pase a PHP lo pueda modificar desde el administrador de wodpress.

    • Jhon Marreros Guzmán

      9 enero, 2022

      Hola, si quieres hacer modificaciones sólo al contenido si (lo pondrías como página de inicio), pero entiendo que quieres modificar más cosas y eso de momento no es posible con WordPress.

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social woocommerce

Populares

Deshabilitar el editor de bloques para Widgets en WordPress

Contenidos de texto a voz en WordPress

Guía visual de Hooks para StoreFront y WooCommerce

Exportar / importar la configuración del personalizador de temas en WordPress

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados