En la clase anterior estuvimos observando como se compone cada plantilla de WordPress, así que en vez de maquetar nuestra página de inicio en una sola página como si fuera un HTML común, arrancaremos utilizando 4 archivos PHP y la plantilla de estilos CSS por separado.
Dentro de nuestro directorio /wp-content/themes/, creamos un directorio llamado /themetaller/. Dentro de /themetaller/ colocaremos un subdirectorio /scripts/, que en principio estará vacío, y otro llamado /images/ en donde colocamos las imágenes recortadas en la clase anterior.
Creamos los siguientes archivos en nuestro directorio /themetaller/: index.php, footer.php, header.php, sidebar.php y style.css.
Y respetando la división de establecimos la clase pasada, comenzamos a crear el código del header.php. Vamos a agregar en el encabezado, entre etiquetas <head> el siguiente código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title>
<?php if ( is_home() ) { ?><?php bloginfo('name'); ?> | <?php bloginfo('description'); ?><?php } ?>
<?php if ( is_author() ) { ?><?php bloginfo('name'); ?> | Archivo por autor<?php } ?>
<?php if ( is_single() ) { ?><?php wp_title(''); ?> | <?php wp_title(''); ?><?php } ?>
<?php if ( is_page() ) { ?><?php bloginfo('name'); ?> | <?php wp_title(''); ?><?php } ?>
<?php if ( is_category() ) { ?><?php bloginfo('name'); ?> | Archivo por Categoria | <?php single_cat_title(); ?><?php } ?>
<?php if ( is_month() ) { ?><?php bloginfo('name'); ?> | Archivo por Mes | <?php the_time('F'); ?><?php } ?>
<?php if ( is_search() ) { ?><?php bloginfo('name'); ?> | Resultados<?php } ?>
<?php if (function_exists('is_tag')) { if ( is_tag() ) { ?><?php bloginfo('name'); ?> | Archivo por Tag | <?php single_tag_title("", true); } } ?>
</title>
<?php wp_head(); ?>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" media="screen" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
</head>El código para el encabezado contiene información sobre el DOCTYPE, HTML, los meta, el charset, se vincula la plantilla de estilos, se indican los links de los feeds y del pingback, se colocan varios condicionales para el title (dependiendo de la sección que se visualiza, mostrará un título diferente) y finalmente la función wp_head(), que es la función que utiliza la plataforma para cargar scripts desde plugins y otra información adicional.
Ahora si, maquetamos lo que vimos en la imagen de la clase pasada:
El código HTML será el siguiente:
<body>
<div id="content-wrapper">
<div id="header">
<div id="logo">
<img src="http://localhost/wp-content/themes/themetaller/images/logo.png" />
</div><!-- end of logo -->
<ul id="menu-top">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
<ul id="menu">
<li><a href="#">Inicio</a></li>
<li><a href="#">Página estática</a></li>
<li><a href="#">Categoría</a></li>
<li><a href="#">Contáctenos</a></li>
</ul>
</div> <!-- end of logo -->
Para esta primera etapa no utilizaremos funciones WordPress, por lo que la ruta al logo es una ruta absoluta y los links de nuestros menús totalmente inventados, a modo de relleno para que nuestro primer trabajo posea algo de contenido y podamos ver la forma que toma. Para las imágenes de relleno utilizaremos el servicio de lorempixum.com, que nos permite tomar imágenes al azar indicando en el link el tamaño de las mismas.
El index.php comprendía esta sección:
Al inicio de nuestro archivo vamos a “llamar” al header.php utilizando la función get_header(), y al final del mismo debemos insertar el archivo sidebar.php (con get_sidebar() ) y el archivo footer.php (con get_footer() ).
<?php get_header(); ?>
<div id="nivoslider">
<img src="http://lorempixum.com/g/920/310" />
</div><!-- end of nivoslider -->
<div id="featured">
<div class="item">
<h3>Quiere saber mas?</h3>
<p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</p>
</div><!-- end of item" -->
<div class="item">
<h3>Quiere saber mas?</h3>
<p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</p>
</div><!-- end of item" -->
<div class="item">
<h3>Quiere saber mas?</h3>
<p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</p>
</div><!-- end of item" -->
</div><!-- end of featured -->
<div class="news">
<img src="http://lorempixum.com/g/290/130" />
<h2>Un post que se destaca...</h2>
<p>Sed pharetra risus eu nisi molestie aliquet. Donec ipsum eros, sodales ut convallis ac, posuere vitae orci. <a href="#">Leer más</a></p>
</div>
<div class="news">
<img src="http://lorempixum.com/g/290/130" />
<h2>Un post que se destaca...</h2>
<p>Sed pharetra risus eu nisi molestie aliquet. Donec ipsum eros, sodales ut convallis ac, posuere vitae orci. <a href="#">Leer más</a></p>
</div>
<?php get_sidebar(); get_footer(); ?>
El código de sidebar.php:
<div id="sidebar">
<h3>Ultimas noticias</h3>
<ul>
<li>Una noticia en la sidebar<br />Por admin</li>
<li>Una noticia en la sidebar<br />Por admin</li>
<li>Una noticia en la sidebar<br />Por admin</li>
<li>Una noticia en la sidebar<br />Por admin</li>
</ul>
</div><!-- end of sidebar -->
Y el de footer.php, que llevará la función wp_footer(), similar a wp_header().
<div id="footer">
<ul class="social">
<li><a href="#"><img src="http://localhost/wp-content/themes/themetaller/images/skype.png" /></a></li>
<li><a href="#"><img src="http://localhost/wp-content/themes/themetaller/images/facebook.png" /></a></li>
<li><a href="#"><img src="http://localhost/wp-content/themes/themetaller/images/twitter.png" /></a></li>
<li><a href="#"><img src="http://localhost/wp-content/themes/themetaller/images/rss.png" /></a></li>
</ul>
</div><!-- end of footer -->
</div><!-- end of content-wrapper -->
<?php wp_footer(); ?>
</body>
</html>
Hasta aquí el resultado será una página con datos sin nada de estilo. Vale aclarar que todos los <div> que abrimos, llevan su correspondiente </div> de cierre con un comentario: <!– end of nombre-div –>. Esta práctica nos ayuda a tener mayor control sobre nuestras etiquetas, puesto que un sitio web puede volverse realmente complejo a medida que añadimos elementos. Cuantos mas comentarios tengamos, mas facil será para nosotros luego encontrar errores cuando surjan. Además recomendamos en todo momento hacer uso de la indentación, separando los bloques de código según corresponda.
Si colocamos themeTaller como el theme por defecto de nuestro WordPress en localhost ya deberíamos ver todos los datos e imágenes, uno debajo del otro. Para que realmente tome forma tenemos que añadir el estilo, al cual debemos colocarle los datos del theme y un reset de estilo.
/*Theme Name: themeTaller
Theme URI: www.summarg.com
Author: Nekko
Description: themeTaller
*/
/* RESET */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}Ahora si, procedemos a colocar el color de fondo de la página <body>, establecer las dimensiones, el color de fondo y los bordes redondeados de content-wrapper. Para este punto indicamos que nos ayudamos con aplicaciones online como css3generator.com para generar el código CSS3 correspondiente a cada motor de navegador.
body {
background-color: #2d435a;
font-family: arial, sans serif;
font-size:12px;
}
#content-wrapper {
width:960px;
margin: 10px auto;
background-color:white;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
overflow:hidden;
display:block;
}Escribimos el código para los elementos del header:
#header {
padding: 5px 20px;
}
#logo img {
float:left;
width: 261px;
height: 53px;
padding: 10px 0;
}
ul#menu-top {
height:25px;
width:220px;
margin-top:0;
float:right;
}
ul#menu-top li a {
list-style-type:none;
text-decoration:none;
float:left;
color: #7ec5ff;
font-weight:bold;
padding: 7px 10px;
}
ul#menu-top li a:hover {
text-decoration:none;
background-color: #7ec5ff;
color:#fff;
font-weight:bold;
padding: 7px 10px;
}
ul#menu {
float:left;
width: 920px;
margin: 0 auto;
height:30px;
background-image: url(images/menu_bg.png);
background-repeat: repeat-x;
background-color: #7ec5ff;
}
ul#menu li a{
float:left;
list-style-type:none;
text-decoration:none;
color:#fff;
font-weight:bold;
padding: 10px 20px;
border-left: 1px solid white;
}
ul#menu li a:hover {
text-decoration:none;
background-color: 8ed6ff;
color: #f4f4f4;
padding: 10px 20px;
}Vayan visualizando el sitio para confirmar que cada paso esté dado en la dirección correcta. Ahora procedemos a dar estilo al espacio del slider, los bloques de productos-servicios destacados y de las noticias.
#nivoslider {
float:left;
margin: 10px 20px;
width: 920px;
height: 310px;
}
#featured {
float:left;
width: 918px;
height: 100px;
margin: 0 20px;
border: 1px solid #7b7b7b;
border-right:none;
background-image: url(images/destacado_bg.png);
background-repeat: repeat-x;
background-color: #dedddd;
}
.item {
width: 295px;
padding: 5px;
height: 90px;
overflow:hidden;
border-right: 1px solid #7b7b7b;
float:left;
}
.item h3 {
font-family: arial, sans serif;
font-weight:bold;
font-size: 16px;
line-height:30px;
color: #7b7b7b;
text-align:center;
}
.item p {
font-family: arial, sans serif;
font-weight:bold;
font-size: 12px;
line-height:20px;
color: #7b7b7b;
text-align:center;
}Aquí hacemos un pequeño alto para introducir una aclaración. Si ustedes visualizan el theme hasta aquí, verán que la tipografía ya no se ve igual que en nuestro PSD, en donde utilizamos la fuente Myriad Pro. Vale aclarar que en clases futuras podemos introducir fuentes mucho más elegantes utilizando cufón o bien utilizar el servicio de fuentes de Google y @font-face. Seguimos con el estilo de la sección de noticias.
.news {
width: 293px;
padding: 20px 0 10px 20px;
float:left;
}
.news h2 {
font-family: arial, sans serif;
font-size: 22px;
margin-top:10px;
color: #7b7b7b;
}
.news p {
font-family: arial, sans serif;
font-size: 12px;
line-height:18px;
color: #7b7b7b;
}Pasamos a dar estilo a los elementos de la sidebar.
#sidebar {
width: 293px;
padding: 20px 20px 10px 0px;
float:right;
}
#sidebar h3 {
font-family: arial, sans serif;
font-size: 18px;
margin-bottom:10px;
color: #7b7b7b;
}
#sidebar ul {
list-style-type:none;
}
#sidebar ul li {
padding: 5px 10px;
border-bottom: 1px solid #7b7b7b;
color: #7b7b7b;
}Y finalmente el estilo del footer.
#footer {
float:left;
background: #e6e6e6;
width: 920px;
padding: 20px;
height:100px;
}
ul.social {
list-style-type:none;
float:right;
width:150px;
}
ul.social li{
float:left;
}Para ir viendo la evolución del trabajo instalamos un WordPress en SummArg en www.summarg.com/demos/themetaller. Les dejamos los archivos del ejercicio de hoy aquí ThemeTaller clase 3 (291)
Sientanse libres de plantear cualquier duda o comentarnos cómo lo harían ustedes tanto aquí como en nuestro foro. Nos vemos en la próxima clase!
Volver al temario del taller
14-9-11
Información Bitacoras.com…
Valora en Bitacoras.com: En la clase anterior estuvimos observando como se compone cada plantilla de WordPress, así que en vez de maquetar nuestra página de inicio en una sola página como si fuera un HTML común, arrancaremos utilizando 4 archivos PHP…..
17-9-11
Espero sigas con las clases, ya que he diseñado cosas en CSS, y entiendo cual es la idea para maquetar en WordPress, pero a veces me pierdo, de antemao muchas gracias por tu aporte.
19-9-11
Acabo de encontrar este tutorial que creo que es el más reciente.
Por ahí había leído que al último wordpress no se podría editar el theme o que habría que pagar para hacerlo. Espero que no sea cierto, seguiré éste con mucha atención.
GRACIAS
19-9-11
A cualquier WordPress descargado desde wordpress.org le podés modificar todo. Al que no podés tocarle muchas cosas es al servicio de wordpress.com. Saludos Frank!
19-9-11
Excelente! muchas gracias por compartir!
20-9-11
Empiezo hoy a seguir tu blog y el taller de temas WordPress. He leido poco del tema, pero ya me parece de lo más interesante que he encontrado.
Ánimo!
26-9-11
Muchas gracias por este curso.
Yo se css y html pero me falta php y aprender el codex y funciones de wordpress..
esto es bastante estudio pero tus tutoriales me están ayudando mucho y son 100% entendibles por cualquiera.
Los mejores tutoriales que hay ahora mismo en la web.
Espero que sigas explicando tan bién.
muchas gracias por tu trabajo.
29-9-11
hace mucho no me daba una vuela por summarg y hoy me encuentro gratamente sorprendido por este excelente tutorial que estas desarrollando. Realmente te felicito chechu, lo voy a seguir a full. !!!
29-9-11
Muchas gracias, data!!! Cualquier duda o sugerencia, ya sabés como ubicarme. Gracias por la buena onda che!
1-10-11
Gracias Nekko por tu ayuda, yo tambien como algunos me pierdo un poco aqui con la maquetación pero entiendo la idea, y sera cuestión de que practique mas css.
1-10-11
Gracias Antonio! Respecto de la maquetación si me comentan que es lo que les resulta dificultoso de entender puede hacer una clase orientada a ese tema. Dejenme sus comentarios/preguntas al mail o registrense en el foro y tratamos de armar algo!
1-11-11
Hola Nekko, te quiero comentar un duda que tengo, no se me ven los acentos bien me sale un caracter extraño en su lugar no se si es a mi solo o es un tema que comentaras mas adelante, me pasa en las opciones del menu, saludos y gracias de antemano.
Posdata:
Enhorabuena por el tutorial es muy interseante.
3-11-11
gracias nekko… me ayudates un resto.. no entendia muy bien esto, gracias de verdad.
18-11-11
muy bueno el trabajo, estoy esperando el resto de clases
23-4-12
todo muy bien, pero porque no explicas la parte de paginas, por lo que veo el tutorial solo explica como diseñar la pagina principal (aquella donde aparecen las entrada); pero en el caso que quiera una pagina wordpress con 3 o mas paginas ejm(about,contacto,etc). Como lo resuelves cuando lo empaquetas todo para ser usado como template?