() translation by (you can also view the original English article)
Continuando desde el artículo reciente sobre "PSD a HTML", este tutorial echará un vistazo a una plantilla HTML/CSS y cómo convertirla en un tema WordPress en funcionamiento. Hay tanto que usted puede hacer cuando crea su propio tema que casi no podríamos cubrirlo todo. Así que vamos a echar un vistazo a como están estructurados los temas, la creación de los archivos principales y a separar ese archivo index.html.
Descripción - La Estructura de un Tema
La estructura de un tema WordPress es bastante simple, me gusta empezar con el archivo CSS. Este detalla todo lo que se tiene que usar acerca del tema para WordPress. Luego tiene el archivo index.php -éste es solo el archivo de la plantilla que usted está usando con las etiquetas de las plantillas PHP incluidas. Incluidas con lo que son los archivos header.php & footer.php que son utilizados a través de todo el sitio. Aunque la mayoría de los temas no usan solamente cuatro archivos y es porque WordPress le permite usar archivos de plantillas para diseñar diferentes contenidos. Hay archivos de diseño definidos, tales como archives.php y single.php. Sin embargo, usted puede crear los suyos, digamos que usted quiere hacer una página que tenga una composición totalmente diferente a la predeterminada.
Debido a que esto es un tema enorme que lo estamos dividiendo en una serie de dos partes -esta parte se trata de hacer un simple, pero funcional tema desde una plantilla estándar HTML & CSS, y la segunda parte examinará cómo añadir más de las características avanzadas.
Yo estaré trabajando en la activación de la plantilla estupenda llamada "Typography Paramount" creada por Six Shooter Media en un simple tema WordPress.
Paso 1 - style.css
La hoja de estilo es el archivo definido del tema para WordPress. Hay algunas cosas que usted necesita hacer. Y la primera es cambiar el nombre del archivo principal (si es que usted tiene más de uno) a style.css, después necesita añadir algunos comentarios al archivo.
1 |
|
2 |
/*
|
3 |
Theme Name: Typography Paramount
|
4 |
Theme URI: http://www.sixshootermedia.com/
|
5 |
Description: An image-less template focusing on Typography.
|
6 |
Author: Sam Parkinson
|
7 |
Author URI: http://xseria.com
|
8 |
Version: 1.0
|
9 |
.
|
10 |
General comments/License Statement if any.
|
11 |
.
|
12 |
*/
|
El código anterior está contenido todo en un comentario, así que no afectará las definiciones de los estilos. Yo la he completado con algunos detalles, éstos serán utilizados por WordPress para mostrar los detalles del tema para admins. Asegúrese de añadirlo en la parte de arriba del archivo sin espacios antes.
Ya he cambiado el nombre del archivo de la hoja de estilo de la plantilla, se llamo 1.css. Además, he hecho una carpeta nueva a la que llame typography-paramount, que será la que subiré para la carpeta del tema para WordPress. Ponga la hoja de estilo en esta carpeta, pero no debajo de otro directorio, de lo contrario no puede ser visto por WordPress.
Paso 2 - El Header y el Footer
En este paso vamos a crear dos archivos: header.php y footer.php. Aunque son opcionales los dos son utilizados en la mayoría de los temas, pero tampoco son difíciles de usar.
header.php
Empezando con el encabezado; header, va a crear un archivo nuevo en la carpeta del tema, al que llamará header.php, luego abrirá el archivo index.php desde la plantilla y copiará el siguiente código desde él. Esto será el header y será mostrado en cada página del sitio, pero tenga en mente eso cuando esté haciendo otras plantillas.
1 |
|
2 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
|
3 |
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> |
4 |
<head>
|
5 |
<title>-</title> |
6 |
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> |
7 |
<link rel="stylesheet" href="css/1.css" type="text/css" media="screen,projection" /> |
8 |
|
9 |
</head>
|
10 |
|
11 |
<body>
|
12 |
|
13 |
<div id="wrapper"> |
14 |
|
15 |
<div id="header"> |
16 |
|
17 |
<p class="description"> |
18 |
|
19 |
An imageless template focusing on Typography. |
20 |
|
21 |
</p>
|
22 |
|
23 |
<h1><a href="#">Typography Paramount</a></h1> |
24 |
|
25 |
<ul id="nav"> |
26 |
|
27 |
<li><a href="#">Link Here</a></li> |
28 |
|
29 |
<li><a href="#" class="active">Link Here</a></li> |
30 |
|
31 |
<li><a href="#">Link Here</a></li> |
32 |
|
33 |
<li><a href="#">Link Here</a></li> |
34 |
|
35 |
<li><a href="#">Link Here</a></li> |
36 |
|
37 |
</ul>
|
38 |
|
39 |
</div>
|
Ahora vamos a añadir las etiquetas de la plantilla WordPress para el archivo header.php, éstas le dicen a WordPress donde introducir varios contenidos en el tema. Además, recuerde cambiar ese enlace a la hoja de estilo.
1 |
|
2 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
|
3 |
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes() ?>> |
4 |
<head profile="http://gmpg.org/xfn/11"> |
5 |
<title><?php bloginfo('name'); ?> <?php wp_title(); ?></title> |
6 |
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" /> |
7 |
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen,projection" /> |
8 |
|
9 |
<?php wp_head(); ?> |
10 |
|
11 |
</head>
|
12 |
|
13 |
<body>
|
14 |
|
15 |
<div id="wrapper"> |
16 |
|
17 |
<div id="header"> |
18 |
|
19 |
<p class="description"><?php bloginfo('description'); ?></p> |
20 |
|
21 |
<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1> |
22 |
|
23 |
<ul id="nav"> |
24 |
<?php wp_list_pages('sort_column=menu_order&title_li='); ?> |
25 |
</ul>
|
26 |
|
27 |
</div>
|
Ya ha añadido bastante, aunque todo es bastante simple cuando usted mira a través de lo que ha hecho. Todas las etiquetas anteriores están bien documentadas en el Codex de WordPress. Solamente voy a repasar lo que cada función hace.
language_attributes() - Imprime el tipo de idioma para la etiqueta <html>
.bloginfo() - Empleada para imprimir información sobre el sitio, los parámetros
están disponibles en el Codex, "name", por ejemplo, retorna el título del blog.wp_title() - Simplemente retorna el título de la página.wp_head() - Imprime los enlaces javascript y otras cosas del header.get_option() - Saca un valor desde las opciones de la base de datos.wp_list_pages() - Muestra una lista de las páginas del sitio, los tipos de parámetros
las páginas de forma correcta y también, impide que WordPress continúe imprimiendo un título predeterminado.
footer.php
Ahora va a crear el archivo footer.php y copie todo en la plantilla desde el <div id="header"> hacia abajo y empújelo en el archivo nuevo. Un footer dinámico que muestra el archivo correcto, el título del sitio y, también un enlace de un feed son comunes colocar en los temas, así que vamos a añadir uno.
1 |
|
2 |
<div id="footer"> |
3 |
|
4 |
<!-- Please leave this line intact -->
|
5 |
<p>Template design by <a href="http://www.sixshootermedia.com">Six Shooter Media</a><br /> |
6 |
<!-- you can delete below here -->
|
7 |
|
8 |
© <?php the_time('Y'); ?> <?php bloginfo('name'); ?><br /> |
9 |
<a href="<?php bloginfo('rss2_url'); ?>">Grab the feed</a></p> |
10 |
|
11 |
</div>
|
12 |
|
13 |
</div>
|
14 |
|
15 |
< ?php wp_footer(); ?> |
16 |
|
17 |
</body>
|
18 |
</html>
|
Yo he cambiado el footer para mostrar el icono de los derechos intelectuales seguido por el año actual (<?php the_time('Y'); ?>) y el nombre del sitio (<?php bloginfo('name'); ?>) luego, en una línea nueva ponga un enlace hacia el alimentador de comentarios rss (<?php bloginfo('rs2_url'); ?>).
wp_footer() es lo que WordPress usa para añadir cosas al fondo del
sitio, muy a menudo no se usa plugins para añadir cosas como el código para el seguimiento del sitio.
Paso 3 - El archivo central
Ahora vamos a crear index.php
index.php
Este es uno de los dos archivos que requiere un tema de WordPress (siendo el otro style.css), así que comencemos. Crear el archivo y ponerlo junto con el resto, luego añada lo siguiente.
1 |
|
2 |
<?php get_header(); ?> |
3 |
|
4 |
<?php get_footer(); ?> |
Esto simplemente le dice a WordPress dónde incluir los archivos header.php y footer.php. Ya que ésta es una serie de dos partes, vamos a incluir la creación de una barra lateral en el siguiente artículo. Usted puede elegir entre escoger dejar éste div como un objeto html estático o simplemente dejarlo fuera, y eso es lo que precisamente vamos a hacer. Añadir lo siguiente entre las dos etiquetas anteriores.
1 |
|
2 |
<div id="content"> |
3 |
|
4 |
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> |
5 |
|
6 |
<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2> |
7 |
|
8 |
<?php the_content(); ?> |
9 |
|
10 |
<p><?php the_time('F j, Y'); ?> at <?php the_time('g:i a'); ?> | <?php the_category(', '); ?> | <?php comments_number('No comment', '1 comment', '% comments'); ?></p> |
11 |
|
12 |
<?php endwhile; else: ?> |
13 |
|
14 |
<h2>Woops...</h2> |
15 |
|
16 |
<p>Sorry, no posts we're found.</p> |
17 |
|
18 |
<?php endif; ?> |
19 |
|
20 |
<p align="center"><?php posts_nav_link(); ?></p> |
21 |
|
22 |
</div>
|
Esto es lo que WordPress llama el Ciclo de WordPress. La primera linea de código PHP inicia este ciclo, endwhile es el que lo termina. WordPress completa el ciclo para cada artículo del sitio y, si no hay nada que mostrar excepto el contenido "Woops…". Además he agregado un enlace de navegación que colocará enlaces hacia más artículos así que los visitantes pueden echar un vistazo al contenido anterior sin usar el archivo.
En el siguiente artículos vamos a redactar single.php, éste sería lo que va a mostrar si los visitantes hacen clic en el título de una publicación. Éste incluirá el sistema de comentarios, a diferencia del archivo index.php.
Evaluación - ¿Funciona?
Por ahora tenemos cuatro archivos en el tema, suponiendo que usted no olvido actualizar su archivo index.php (¡correcto!) entonces debería de funcionar como un tema sencillo pero funcional.
Pruebe que el tema nuevo puede ser previsualizado y que se ha puesto en el último WordPress, después de echar un vistazo ahí solamente parece ser que hay un problema con los títulos largos, algo que se puede arreglar fácilmente añadiendo el siguiente #content h2 en la hoja de estilo.
1 |
|
2 |
line-height: 30px; |
