Tutorial de WordPress: Cómo crear un tema de WordPress a partir de HTML (Parte 1)

Si comenzó con un sitio web HTML (+ CSS), no tiene que tirarlo todo al pasar a WordPress. Puede convertir su HTML en WordPress y ejecutar su sitio web (ahora más potente) en la plataforma dinámica de WordPress.

O tal vez ese no sea el caso. Quizás se esté preguntando cómo convertir el diseño HTML de un cliente en un tema de WordPress completo. O tal vez le gustaría aprender la programación básica de WordPress (+ PHP) desde el lado HTML más familiar.

Cualquiera sea la razón por la que está aquí hoy, este tutorial de WordPress le presentará los conceptos básicos para crear un tema de WordPress a partir de HTML. Puede seguir esta guía para crear su tema desde cero o puede dirigirse a Github y descargar el tema de inicio WPExplorer que proporciona un “lienzo vacío” para crear su tema con todos los archivos de plantilla y el código necesarios para comenzar. Entonces, si usted es una de esas personas que prefiere aprender leyendo el código, descargue el tema de inicio, omita la guía y vea cómo funcionan las cosas … De lo contrario, obtenga un editor de código (yo uso y recomiendo Notepad ++, o SublimeText) y un navegador listo , luego siga esta sencilla guía hasta el final.

Nombrar su tema de WordPress

Lo primero es lo primero, tenemos que darle a su tema un nombre único, que no es necesario si está creando un tema solo para su sitio web. Independientemente, necesitamos nombrar su tema para que sea fácilmente identificable en la instalación.

Supuestos generales en este punto:

  • Tiene su index.html y hoja de estilo CSS listos.
  • Tiene una instalación de WordPress en funcionamiento con al menos un tema, por ejemplo, Twenty Fourteen
  • Ya ha creado una carpeta de temas donde guardará su nuevo tema de WordPress 🙂

Volvamos a nombrar su tema de WordPress. Abra su editor de código y copie y pegue el contenido de su hoja de estilo en un nuevo archivo y guárdelo como style.css en su carpeta de temas. Agregue la siguiente información en la parte superior de la style.css recién creado:

/*
Theme Name: Your theme's name
Theme URI: Your theme's URL
Description: A brief description of your theme
Version: 1.0 or any other version you want
Author: Your name or WordPress.org's username
Author URI: Your web address
Tags: Tags to locate your theme in the WordPress theme repository
*/

No omita las etiquetas de comentario (/ *… * /). Guarde los cambios. Esta información le dice a WordPress el nombre de su tema, el autor y cosas complementarias como esa. La parte importante es el nombre del tema, que le permite elegir y activar su tema a través del panel de WP.

Dividiendo su plantilla HTML en archivos PHP

Este tutorial asume además que tiene su plantilla HTML organizada de izquierda a derecha: encabezado, contenido, barra lateral, pie de página. Si tiene un diseño diferente, es posible que deba jugar un poco con el código. Es divertido y superfácil.

El siguiente paso consiste en crear cuatro archivos PHP. Usando su editor de código, cree index.php, header.php, sidebar.php y footer.php, y guárdelos en su carpeta de temas. Todos los archivos están vacíos en este momento, así que no espere que hagan nada. Con fines ilustrativos, estoy usando los siguientes archivos de hoja de estilo index.html y CSS:

ÍNDICE.HTML


	
		
		How To Convert HTML Template to WordPress Theme - WPExplorer
		
	
	
		

This is header section. Put your logo and other details here.

This is the main content area.

And this is the footer.

HOJA DE ESTILOS CSS

#wrap{margin: 0 auto; width:95%; margin-top:-10px; height:100%;}
.header{width:99.8%; border:1px solid #999;height:135px;}
.content{width:70%; border:1px solid #999;margin-top:5px;}
.sidebar{float:right; margin-top:-54px;width:29%; border:1px solid #999;}
.footer{width:99.8%;border:1px solid #999;margin-top:10px;}

Puede obtener ambos códigos si no tiene nada con qué trabajar. Simplemente cópielos y péguelos en su editor de código, guárdelos, cree los cuatro archivos PHP que acabamos de mencionar y prepárese para la siguiente parte. Abra su recién creado (y vacío) header.php. Inicie sesión en su instalación existente de WordPress, navegue hasta Apariencia – >> Editor y abrir header.php. Copie todo el código entre los etiquetas y péguelo en su archivo header.php. El siguiente es el código que obtuve del archivo header.php en el tema Twenty Fourteen:


	
	
	<?php wp_title( '|', true, 'right' ); ?>
	
	
	
	

Entonces abre tu index.html archivo y copie el código de encabezado (es decir, el código en el

sección) a su header.php justo debajo de la etiquetas como se muestra a continuación:


	
		
		
		<?php wp_title( '|', true, 'right' ); ?>
		
		
		
		
		
	
	
		

This is header section. Put your logo and other details here.

Luego añade…

… en cualquier lugar entre el etiquetas en el archivo header.php para vincular su hoja de estilo. Recuerde también poner el y abriendo etiquetas en header.php como se muestra arriba. Guarde todos los cambios.

Copie la segunda sección (es decir

desde index.html al index.php recién creado , y añadir…

… en la parte superior y …


… Hasta el fondo absoluto. Estas tres líneas obtienen header.php, sidebar.php y footer.php (en ese orden) y las muestran en el index.php, que vuelve a unir el código. Guarde todos los cambios. En este punto, su archivo index.php debería verse así:



Luego copie el contenido de las secciones de la barra lateral y pie de página en su index.html a sidebar.php y footer.php respectivamente.

Agregar publicaciones

Su plantilla HTML está a punto de transformarse en un tema de WordPress. Solo necesitamos agregar tus publicaciones. Si tienes publicaciones en tu blog, ¿cómo las mostrarías en tu tema personalizado “HTML a WordPress”? Utiliza un tipo especial de función PHP conocida como Círculo. The Loop es solo un fragmento de código especializado que muestra sus publicaciones y comentarios donde sea que lo coloque.

Ahora, para mostrar sus publicaciones en el sección de contenido de la plantilla index.php, copie y pegue el siguiente código entre

y

etiquetas como se muestra a continuación:

>

Eso se encargará de tus publicaciones. Tan fácil como el abecedario. En este momento (y utilizando los archivos de muestra proporcionados en este tutorial), su header.php debería verse así:


	
	
	<?php wp_title( '|', true, 'right' ); ?>
	
	
	
	

Su sidebar.php debería verse así:

Su footer.php debería verse así:

And this is the footer

¿Notaste el cierre? y etiquetas en el pie de página? No olvide incluirlos también.

Su style.css debería verse así:

/*
Theme Name: Creating WordPress Theme from HTML
Theme URI: http://wpexplorer.com
Description: This theme shows you how to create WordPress themes from HTML
Version: 1.0
Author: Freddy for @WPExplorer
Author URI: http://WPExplorer.com/create-wordpress-theme-html-1/
Tags: wpexplorer, custom theme, HTML to WordPress, create WordPress theme
*/
body {
    font-family: arial, helvetica, verdana;
    font-size: 0.8em;
    width: 100%;
    height: 100%;
}

.header {
    background-color: #1be;
    margin-left: 14%;
    top: 0;
    border-width: 0.1em;
    border-color: #999;
    border-style: solid;
    width: 72%;
    height: 250px;
}

.content {
    background-color: #999;
    margin-left: 14%;
    margin-top: 5px;
    float: left;
    width: 46%;
    border-width: 0.1em;
    border-color: #999;
    border-style: solid;
}

.sidebar {
    background-color: #1d5;
    margin-right: 14%;
    margin-top: 5px;
    float: right;
    border-width: 0.1em;
    border-color: #999;
    border-style: solid;
    top: 180px;
    width: 23%;
}

.footer {
    background-color: red;
    margin-left: 14%;
    float: left;
    margin-top: 5px;
    width: 72%;
    height: 50px;
    border-width: 0.1em;
    border-color: #999;
    border-style: solid;
}

Y su index.php debería verse similar a:


>

Nuevamente, esto se basa en un sitio web de izquierda a derecha con un encabezado, contenido, barra lateral y diseño de pie de página. ¿Estás siguiendo? Los cinco archivos deben guardarse en su carpeta de temas. Nombra la carpeta como quieras y comprímela en un archivo ZIP usando WinRar o un programa equivalente. ¡Cargue su nuevo tema en su instalación de WordPress, actívelo y vea su tema convertido en acción!

Eso fue fácil, ¿verdad? Puede diseñar su tema como desee, pero la mayoría de las funciones que amamos en WordPress aún están inactivas ya que … este tutorial cubre los conceptos básicos de la conversión de plantillas HTML en WordPress y debería ser de gran valor para usted como principiante. En el siguiente tutorial, llevaremos las cosas un poco más arriba y jugaremos con otros aspectos de la programación de WordPress (como Archivos de plantilla y Etiquetas de plantilla) que le permitirán convertir sus plantillas HTML de la forma que desee. ¡Manténganse al tanto!

Publicaciones relacionadas

Botón volver arriba