• Ir a navegación principal
  • Ir al contenido principal
  • Ir a la barra lateral primaria

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
Inicio / Tutoriales / Themes / Archivo HTML como página de inicio en WordPress
Anuncio banner webservi

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
  • Cambiar logo version móvilCambiar el logo en la versión móvil de tu sitio Web
  • Centrar Logo en Menú WordPressCentrar Logo en Menú Principal
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (4 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

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

*

* Gravatar habilitado

Barra lateral primaria

Presentación

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
Los 5 posibles errores que estas cometiendo cuando trabajas con código en WordPress

Niveles

Básico Intermedio Avanzado

Etiquetas

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

Populares

Actualizar el stock de productos usando la API de WooCommerce

Generador de plugins base para WordPress

Desactivar las notificaciones de actualización en WordPress

Contenido de relleno en WordPress

Recientes

  • Leer datos desde otra base de datos en WordPress
  • Crear un sitio One Page en WordPress
  • Mostrar lista de autores en WordPress
  • Añadir código de Google Tag Manager sin plugins en WordPress
alojamiento wordpress

© logo decode pie Copyright 2021 | Todos los derechos reservados | Política de Privacidad