Cómo crear temas de WordPress a partir de HTML

Cómo crear temas de WordPress a partir de HTML

¿Me creerías si te dijera que puedes crear tu propio tema de WordPress sin tener que aprender PHP primero? ¿Qué pasa si te digo que no tomará una eternidad, solo 15 minutos? ¿Me creerías todavía?

Suponga que ya tiene un sitio web HTML que desea migrar a WordPress porque ha escuchado muchas cosas buenas sobre la plataforma. No tiene que empezar desde cero, puede migrar fácilmente todo su sitio.

cómo-crear-diseños-de-wordpress-desde-html

a través de lmonk72

Quizás ese no sea el caso. Quizás uno de sus clientes quiere que convierta su sitio web HTML a WordPress y se pregunta cómo hacerlo fácilmente. O tal vez solo desee aprender una nueva habilidad para su arsenal de desarrollo de temas de WordPress.

Cualquiera que sea la razón por la que estás aquí, cuando hayamos terminado tendrás los antecedentes que necesitas para crear temas perfectos de WordPress a partir de HTML. Tomaremos prestado un poco de código PHP aquí y allá para ponerlo todo junto, pero básicamente deberías esperar trabajar con HTML y, lo más importante, divertirte.

Sin perder un segundo más, empecemos.

Que necesitas

  • Una plantilla HTML completa con su hoja de estilo CSS (puedes descargar la mía y usarla si no tienes nada con qué trabajar)
  • Una instalación de WordPress que funcione con al menos un tema de WordPress. Vamos a pedir prestados algunos códigos PHP de Twenty Fifteen.
  • Un editor de código (yo uso y recomiendo Notepad ++, aunque Sublime Text también es una gran opción)
  • Da o tómate 15 minutos de tu tiempo

Lo importante primero …

Cree una carpeta en su escritorio para guardar su tema de WordPress. Llámalo como quieras. Llamaré a mi clarityoneaudioe. Todos los archivos que creamos se guardarán en esta carpeta. Es la misma carpeta que comprimimos y luego cargamos a nuestra instalación de WordPress como nuestro nuevo tema.

Estas son también las plantillas HTML que usaremos para este tutorial:

Index.html

<!DOCTYPE html>
	<head>
		<meta charset="UTF-8">
		<title>How To Create WordPress Themes from HTML - clarityoneaudio</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. We will replace this with blog posts.</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>

Style.css

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

Nombra tu tema de WordPress

WordPress necesita reconocer su tema durante la instalación. Por lo tanto, necesitamos nombrar su tema apropiadamente o nunca lo activaremos. Usando su editor de código, cree un nuevo archivo style.css y guárdelo en su carpeta de temas.

Pegue el contenido del style.css existente (que vino con la plantilla HTML) en su nuevo style.css, luego agregue el siguiente código en la parte superior:

/*
Theme Name: Your theme's name e.g. clarityoneaudioe
Theme URI: Your theme's URL e.g. http://yoursite.com
Description: A brief description of your theme
Version: 1.0 or any other version you fancy
Author: Your name or WordPress.org's username
Author URI: Your web address e.g. http://yousite.com
Tags: Tags to locate your theme in the WordPress theme repository e.g. clarityoneaudioe, HTML, theme etc
License: GNU General Public License v2.0
*/

Esta información le dice a WordPress todo lo que necesita para identificar su nuevo tema de WordPress. Sin esta información, no podrá seleccionar y activar su tema desde el panel de WordPress.

La parte importante es el nombre del tema, pero siempre es una buena idea incluir todos los demás detalles.

Rompiendo Index.html en archivos PHP

Ahora, con el nombre del tema de WordPress, dividamos la plantilla HTML principal (index.html) en varios archivos PHP. Todo lo que necesita para tener un tema completo de WordPress es index.php y style.css.

Vamos a dividir nuestra plantilla HTML en cuatro archivos de plantilla, a saber, index.php, header.php, sidebar.php y footer.php. Estos archivos PHP contienen las secciones correspondientes de nuestro nuevo tema, es decir, el contenido principal, el encabezado, la barra lateral y el pie de página en ese orden.

Header.php

Comenzaremos con header.php solo para tomar algo de impulso. Usando su editor de código, cree un nuevo archivo y asígnele el nombre header.php. ¡Siempre asegúrese de que las extensiones (por ejemplo, .php, .css, etc.) sean correctas! De lo contrario, terminarás creando archivos de texto inútiles. Elige tus extensiones Guardar como tipomi Box al guardar sus archivos.

A continuación, debemos completar este archivo con el código relevante de un tema de WordPress creíble. El código que tomaremos prestado es similar en la mayoría de los temas, pero usaremos Twenty Fifteen.

Inicie sesión en su instalación de WordPress en funcionamiento y navegue hasta Apariencia -> Editor. Esto debería abrir el Editar temas Pantalla. Debería ver el style.css de su tema activo actualmente. Si Twenty Fifteen no es su tema activo, no se preocupe. En el lado derecho del Editar temas Pantalla, deberías ver Seleccione el tema a editar:.

Haz clic en el menú desplegable para seleccionar Twenty Fifteen, que te llevará al style.css de Twenty Fifteen. No estamos interesados ​​en este archivo.

Desplácese hacia abajo hasta header.php (que se muestra como Encabezamiento) entre plantillas, y una vez que este archivo esté cargado en el Bloc de notas, copie el código de en la apertura > etiqueta.

El día de la inauguración puede verse diferente según el tema que estés usando, pero si estás usando Twenty Fifteen como el tuyo, deberías obtener el código de arriba. Aquí está el código completo que obtuve del archivo de encabezado en Twenty Fifteen solo para ahorrarle tiempo:


<!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js">
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php%20bloginfo(%20'pingback_url'%20);%20?>">
<!--[if lt IE 9]>
<script src="<?php%20echo%20esc_url(%20get_template_directory_uri()%20);%20?>/js/html5.js"></script>
<![endif]-->
<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>

Pegue este código en su header.php y guarde los cambios. Luego añade:


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

… en algún lugar entre el Etiquetas para obtener su archivo de hoja de estilo style.css para diseñar. También agregue:


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

… bajo el código anterior para mantener el título de su sitio. Este es el título que aparecerá en la pestaña o ventana del navegador cuando se cargue su sitio. No se preocupe si todo esto se siente extraño y confuso, le prometo que todo tendrá sentido en poco tiempo.

Guarde todos los cambios. Su header.php ahora debería verse así:


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

<body <?php body_class(); ?>>

Nuestro header.php ahora está listo. Es hora de crear el siguiente archivo index.php.

Index.php

Creemos el archivo de plantilla principal, index.php, que es básicamente el archivo que compone los otros archivos PHP para crear un tema completo.

En nuestra plantilla index.html, notará que tenemos el área de encabezado en la parte superior, el área de contenido principal directamente debajo, la barra lateral a la derecha y el pie de página en la parte inferior.

Nuestro tema tendrá la misma estructura y luego agregaremos nuestras publicaciones de blog en el área de contenido principal. Pero primero creemos la estructura principal de index.php.

Abra index.php en su editor de código y agregue estas tres líneas:

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

Vamos a agregar algo de código entre las dos primeras líneas, pero primero averigüemos qué significan esas tres líneas. El primero obtiene el header.php que ya ha sido creado, el segundo sidebar.php y el tercero footer.php. Esto volverá a juntar nuestros archivos de plantilla y creará una página completa.

El código que agregaremos entre las dos primeras líneas se ocupa de las publicaciones de blog que los otros archivos de plantilla no tienen en cuenta.

Cómo agregar publicaciones

Para mostrar publicaciones usamos una función especial de PHP conocida como bucle. No es nada grande, solo un código especial que rastrea su base de datos de WordPress en busca de publicaciones y luego las enumera en su blog. Vamos a agregar el bucle intermedio y Solo para aclarar. Pega el siguiente código:

<?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%20the_permalink();%20?>" 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; ?>

Tenga en cuenta que tenemos que rodear el bucle con él.

Contenedor de index.html para un estilo posterior. Por lo tanto, el index.php final debería verse así:

<?php get_header(); ?>
<div id="wrap">
<header class="header">
<p>This is header section. Put your logo and other details here.</p>
</header><!--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%20the_permalink();%20?>" 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(); ?>
</div><!--.wrap>

Eso es todo al respecto. Ahora creemos las plantillas de barra lateral y pie de página.

Sidebar.php

Es un trabajo fácil. Simplemente copie el código de

para

a su sidebar.php de la siguiente manera:

<div class="sidebar">
<p>This is the side bar</p>
</div><!--.sidebar-->

Guarde sus cambios.

Footer.php

Del mismo modo, copie el código de

para

en su footer.php así:

<footer class="footer">
<p>And this is the footer.</p>
</footer><!--.footer-->

Luego agregue las siguientes líneas debajo de la conclusión

Etiqueta:

<?php wp_footer(); //Crucial footer hook! ?>
</body>
</html>

Tenga en cuenta el cierre y Etiquetas en footer.php. Sí, no olvide agregar estos. En este punto, su footer.php debería verse así:

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

Tu index.php debería verse así parecerse a:

<?php get_header(); ?>
<div id="wrap">
<header class="header">
<p>This is header section. Put your logo and other details here.</p>
</header><!--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%20the_permalink();%20?>" 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(); ?>
</div><!--.wrap>

Y su nuevo style.css debería verse así:

/*
Theme Name: Your theme's name e.g. clarityoneaudioe
Theme URI: Your theme's URL (http://yoursite.com)
Description: A brief description of your theme
Version: 1.0 or any other version you fancy
Author: Your name or WordPress.org's username
Author URI: Your web address (http://yousite.com)
Tags: Tags to locate your theme in the WordPress theme repository e.g. clarityoneaudioe, HTML, theme etc
License: GNU General Public License v2.0
*/
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;
}

Captura de pantalla

Ahora tomemos una captura de pantalla para su nuevo tema de WordPress. Puede ser cualquier cosa, pero es mejor tomar una captura de pantalla de tu tema en acción.

Captura de pantalla

Una captura de pantalla que puedes usar

Dicho esto, hay algunas cosas a tener en cuenta. En primer lugar, su captura de pantalla debe ser una imagen PNG. En segundo lugar, debe tener 600 píxeles de ancho y 450 píxeles de alto. En tercer lugar, guarde la imagen como screenshot.png en su carpeta de temas.

Poner todo junto

A estas alturas, debería tener un tema de WordPress que funcione, aunque sea simple. Puede agregar el estilo que desee, pero ahora debería poder crear un tema de WordPress que funcione a partir de HTML.

En la segunda parte de esta publicación agregaremos menús de navegación, widgets y hablaremos sobre el archivo functions.php, entre otras cosas. En otras palabras, la mayoría de las funciones que amamos en WordPress están inactivas en nuestro nuevo tema, ya que este tutorial es solo lo básico.

Mientras tanto, guarde todos sus archivos, incluida la captura de pantalla, en la carpeta de su tema, comprima la carpeta en un archivo .ZIP y cargue su nuevo tema. ¡Puede obtener una vista previa o habilitar el tema para verlo en acción!

Ultima palabra

Si ha seguido estos pasos con éxito, nada le impedirá crear temas de WordPress a partir de HTML. Demonios, nada le impide pasar a un desarrollador de WordPress completo en poco tiempo.

PHP no es difícil, su sintaxis es un poco diferente de HTML. Una vez que haya aprendido los conceptos básicos, especialmente cómo funcionan juntas las diferentes partes de un tema de WordPress, estará tema por tema en poco tiempo.

¡Le deseamos mucho éxito en sus esfuerzos y no cambie la esfera del reloj!

Por cierto, aquí están los archivos nuevamente:

  • Plantillas HTML y CSS
  • El tema completo de clarityoneaudioe

¡Aplausos!

¡Si te ha gustado no dudes en compartirlo!

Deja un comentario

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Más información
Privacidad