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

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 cuando se cambia a WordPress. Puede convertir su HTML a WordPress y ejecutar su sitio web (ahora más potente) en la plataforma dinámica de WordPress.

O tal vez no lo sea. 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 que sea su razón para estar aquí hoy, este tutorial de WordPress lo guiará a través de 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 WPExplorer tema de inicio 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 en cambio aprende leyendo código, descargue el tema de inicio, omita la guía y vea cómo funcionan las cosas … Si no, consiga un editor de código (yo uso y recomiendo Bloc de notas ++, o Texto sublime) y un navegador listo, luego siga esta sencilla guía hasta el final.

Nombra tu tema de WordPress

En primer lugar, debemos darle a su tema un nombre único, que no es necesario si está creando un tema solo para su sitio web. De cualquier manera, necesitamos nombrar su tema para que sea fácilmente identificable durante la instalación.

Supuestos generales en esta etapa:

  • Su index.html y hoja de estilo CSS están 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 en la que 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 elementos adicionales como este. La parte importante es el nombre del tema, que le permite elegir y activar su tema a través del panel de WP.

Divida su plantilla HTML en archivos PHP

Este tutorial asume además que su plantilla HTML se presenta 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 es 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 punto, 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

<!DOCTYPE html>
	<head>
		<meta charset="UTF-8">
		<title>How To Convert HTML Template to WordPress Theme - WPExplorer</title>
		<link rel="stylesheet" type="text/css" media="all" href="style.css"/>
	</head>
	<body>
		<div id="wrap">
			<header class="header">
				<p>This is header section. Put your logo and other details here.</p>
			</header><!-- .header -->
			<div class="content">
				<p>This is the main content area.</p>
			</div><!-- .content -->
			<div class="sidebar">
				<p>This is the side bar</p>
			</div><!-- .sidebar -->
			<footer class="footer">
				<p>And this is the footer.</p>
			</footer><!-- .footer -->
		</div><!-- #wrap -->
	</body>
</html>

HOJA DE ESTILO 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 recuperar 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 de WordPress existente, navegue hasta Apariencia – >> Editor y abrir header.php. Copia todo el código entre las 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:

<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<meta name="viewport" content="width=device-width">
	<title><?php wp_title( '|', true, 'right' ); ?></title>
	<link rel="profile" href="http://gmpg.org/xfn/11">
	<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
	<!--[if lt IE 9]>
	<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
	<![endif]-->
	<?php wp_head(); ?>
</head>

Entonces abre tu index.html y copie el código del encabezado (es decir, el código de la sección

) en su header.php justo debajo de las etiquetas Como se muestra abajo:

<html>
	<head>
		<meta charset="<?php bloginfo( 'charset' ); ?>">
		<meta name="viewport" content="width=device-width">
		<title><?php wp_title( '|', true, 'right' ); ?></title>
		<link rel="profile" href="http://gmpg.org/xfn/11">
		<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
		<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />
		<!--[if lt IE 9]>
		<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
		<![endif]-->
		<?php wp_head(); ?>
	</head>
	<body>
		<header class="header">
		<p>This is header section. Put your logo and other details here.</p>
	</header>

Luego añade …

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />

… En cualquier lugar entre las etiquetas en el archivo header.php para vincular su hoja de estilo. Además, no olvide poner las etiquetas de apertura. y en el header.php como se muestra arriba. Guarde todos los cambios.

Copie la segunda sección (p. Ej.

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

<?php get_header(); ?>

… Todo el camino hacia arriba y …

<?php get_sidebar(); ?>
<?php get_footer(); ?>

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

<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

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

Agregar mensajes

Su plantilla HTML está a punto de convertirse 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”? Está utilizando un tipo especial de función PHP conocida como Lazo. El bucle es solo un fragmento de código especializado que muestra sus publicaciones y comentarios donde sea que los coloque.

Ahora para ver 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:

<div class="content">
	<?php if ( have_posts() ) : ?>
		<?php while ( have_posts() ) : the_post(); ?>
			<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
				<div class="post-header">
					<div class="date"><?php the_time( 'M j y' ); ?></div>
					<h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
					<div class="author"><?php the_author(); ?></div>
				</div><!--.post-header-->
				<div class="entry clear">
					<?php if ( function_exists( 'add_theme_support' ) ) the_post_thumbnail(); ?>
					<?php the_content(); ?>
					<?php edit_post_link(); ?>
					<?php wp_link_pages(); ?>
				</div><!--. entry-->
				<footer class="post-footer">
					<div class="comments"><?php comments_popup_link( 'Leave a Comment', '1 Comment', '% Comments' ); ?></div>
				</footer><!--.post-footer-->
			</div><!-- .post-->
		<?php endwhile; /* rewind or continue if all posts have been fetched */ ?>
			<nav class="navigation index">
				<div class="alignleft"><?php next_posts_link( 'Older Entries' ); ?></div>
				<div class="alignright"><?php previous_posts_link( 'Newer Entries' ); ?></div>
			</nav><!--.navigation-->
		<?php else : ?>
	<?php endif; ?>
</div><!--.content-->

Se encargará de tus mensajes. Fácil como ABC. En este punto (y usando los archivos de muestra proporcionados en este tutorial), su header.php debería verse así:

<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<meta name="viewport" content="width=device-width">
	<title><?php wp_title( '|', true, 'right' ); ?></title>
	<link rel="profile" href="http://gmpg.org/xfn/11">
	<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
	<!--[if lt IE 9]>
	<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
	<![endif]-->
	<?php wp_head(); ?>
</head>

Su sidebar.php debería verse así:

<?php dynamic_sidebar( 'sidebar' ); ?>

Su footer.php debería verse así:

<footer class="footer">
    <p>And this is the footer</p>
</footer>
<?php wp_footer(); // Crucial core hook! ?>
</body>
</html>

¿Has notado las etiquetas de cierre? y 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 así:

<?php get_header(); ?>
<div class="content">
	<?php if ( have_posts() ) : ?>
		<?php while ( have_posts() ) : the_post(); ?>
			<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
				<div class="post-header">
					<div class="date"><?php the_time( 'M j y' ); ?></div>
					<h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
					<div class="author"><?php the_author(); ?></div>
				</div><!--.post-header-->
				<div class="entry clear">
					<?php if ( function_exists( 'add_theme_support' ) ) the_post_thumbnail(); ?>
					<?php the_content(); ?>
					<?php edit_post_link(); ?>
					<?php wp_link_pages(); ?>
				</div><!--. entry-->
				<footer class="post-footer">
					<div class="comments"><?php comments_popup_link( 'Leave a Comment', '1 Comment', '% Comments' ); ?></div>
				</footer><!--.post-footer-->
			</div><!-- .post-->
		<?php endwhile; /* rewind or continue if all posts have been fetched */ ?>
			<nav class="navigation index">
				<div class="alignleft"><?php next_posts_link( 'Older Entries' ); ?></div>
				<div class="alignright"><?php previous_posts_link( 'Newer Entries' ); ?></div>
			</nav><!--.navigation-->
		<?php else : ?>
	<?php endif; ?>
</div><!--.content-->
<?php get_sidebar(); ?>
<?php wp_footer(); // Crucial footer hook! ?>
<?php get_footer(); ?>

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!

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

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Ir arriba