Esta es la segunda parte del tutorial para crear una plantilla WordPress implementando el Framework 960, en el cual en esta etapa profundizaremos en la programación en cada archivo que compone la estructura de la plantilla.
En la Parte I vimos:
- Estructura Base de archivos de una Plantilla WordPress
- Estrucutura Base XHTML de la plantilla
- Aplicando el sistema de grillas 960 a la estructura XHTML
- Estructura de archivos Base de Wordpress más los arhivos del framework 960
Continuando con el desarrollo la Parte II tendrá lo siguientes tópicos.
- Creación del archivo header.php
- Creación del archivo index.php
- Creación del archivo sidebar.php
- Creación del archivo footer.php
- Creación del archivo functions.php
- Creación del archivo style.css
Comenzaremos como visualmente se vería el sitio, desde arriba hacia abajo en nuestro sitio, o sea, header, menu, posts, sidebar, footer y finalmente los estilos.
1. Creación del archivo header.php
Cabecera XHTML en el cual van las etiquetas <meta> como el author, keywords, description, etc. más el titulo del sitio y de las páginas visitadas.
<!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>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php bloginfo('name'); ?> <?php wp_title(); ?></title>
Declaramos los estilos necesarios de manera ordenada junto los archivos de Framework 960 G.S.
<!-- Estilos -->
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('template_directory'); ?>>/css/reset.css" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('template_directory'); ?>/css/text.css" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('template_directory'); ?>/css/960.css" />
<link rel="stylesheet" type="text/css" media="screen" href="<?php bloginfo('stylesheet_url'); ?>" />
<?php wp_head(); ?>
</head>
En esta parte abrimos nuestro contenedor de contenido (#wrapper), el cual incluiera todos los bloques que darán forma al sitio, como el header, menu, sidebar, content, footer, pero en este caso solo incluiremos el header y el menu.
<body>
<div class="container_16" id="wrapper">
<div class="grid_16" id="header">
<h1><?php bloginfo('name'); ?></h1>
<p><?php bloginfo( 'description' ); ?></p>
</div> <!-- Fin header -->
<div class="clear"></div>
<div class="grid_16 clearfix" id="menu">
<ul class="menu">
<li><a href="<?php echo get_option('home'); ?>/">Home</a></li>
<?php wp_list_pages('title_li='); ?>
</ul>
</div><!-- Fin menu -->
<div class="clear"></div>
Visualmente en esta parte solo irán los bloques de header y menu
2. Creación del archivo index.php
El archivo index.php vendría siendo el mas importante, ya que une todas partes de la plantilla
<?php get_header(); ?>
<div id="content" class="clearfix">
<div class="grid_12 alpha" id="post">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div id="post-content">
<a class="post-title" href="<?php the_permalink(); ?>"><h2><?php the_title(); ?></h2></a>
<div class="date">Escrito el <?php the_time('j \d\e F \d\e Y'); ?> a las <?php the_time() ?>, por <?php the_author(); ?> <small><?php edit_post_link('(Editar este contenido?)','',''); ?></small></div>
<?php the_content(__('Seguir leyendo'));?>
<div id="postmeta">
<p>Categoría: <?php the_category(', ');?></p>
</div><!-- Fin #postmeta -->
</div><!-- Fin #post-content -->
<?php endwhile; else: ?>
<p><strong>Ups! Aqui no hay nada.</strong></p>
<?php endif; ?>
</div> <!-- Fin #post -->
<?php get_sidebar(); ?>
</div><!-- Fin #content -->
<?php get_footer(); ?>
Como vimos, tiene incluido el header, el loop de entradas, el sidebar y el footer.
3. Creación del archivo sidebar.php
Esta es la configuración de nuestro sidebar el cual se cargaran las “entradas recientes” y “archivo” de manera automática hasta que se agregue algún widget en el panel de administración.
<div class="grid_4 omega" id="sidebar">
<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('sidebar')) : else : ?>
<h4>Entradas recientes</h4>
<ul>
<?php get_archives('postbypost', 10); ?>
</ul>
<h4>Archivo</h4>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
<?php endif; ?>
</div>
Se comprueba si en la zona widget creada existe algún widget sino se carga la configuración por defecto.
4. Creación del archivo footer.php
El footer es el ultimo bloque en el cual puede ir alguno tipo de información de sitio, contacto, etc. Terminamos cerrando el contenedor #wrapper
<div class="clear"></div>
<div id="footer">
<div class="grid_16">
<p>Copyright © 2010 <?php bloginfo('name'); ?></p>
</div>
<div class="clear"></div>
</div><!-- Fin footer-->
</div><!-- Fin wrapper-->
<?php wp_footer(); ?>
</body>
</html>
Este un ejemplo simple de footer, pueden existir muchas variaciones a gusto e imaginación de los diseñadores.
5. Creación del archivo functions.php
En el archivo functions.php crearemos una zona widget para el sidebar.
<?php
if ( function_exists('register_sidebar') ):
register_sidebar(array(
'name' => 'Sidebar',
'id' => 'sidebar',
'description' => 'Sidebar Widget',
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h4>',
'after_title' => '</h4>'
));
endif;
?>
En sidebar.php se hace la llamada correspondiente a la zona widget tal como lo hemos hicimos anteriormente.
6. Creación del archivo style.css
Al fin hemos llegado a la parte artística, donde empesaremos a darle estilo a nuestra plantilla.
Empezaremos con la cabecera de archivo style.css, en el cual va información de la plantilla, como el nombre, descripción, nombre del autor, etc.
/* Theme Name: Mi Theme WP Theme URI: http://jcabezas.net Description: Theme basico hecho con el framework 960 Grid System. Version: 0.1 Author: Jose Cabezas Lucero Author URI: http://jcabezas.net */
Nuestro contenedor y header
#wrapper{ background:#ffffff;}
/* Header */
#header{height:100px;}
#header h1{font-size:36px;color:#666666;font-family:Georgia, "Times New Roman", Times, serif;margin:0;}
#header p{font-style:italic;}
Estilo de la barra de menu
/* Menu */
#menu{text-align:center;height:50px;}
.menu, .menu * {margin:0;padding:0;list-style:none;}
.menu {line-height:14px;font-size:14px;float:left;margin-bottom:1em;width:100%;border-top:1px solid #fff;border-bottom:1px solid #ffffff;background:#666666;}
.menu a {display:block;position:relative;color:#ffffff;border-right:1px solid #ffffff;padding:10px 30px;text-decoration:none;}
.menu li:hover {visibility:inherit;background:#000000;}
.menu li {float:left;position:relative;background:#666666;}
.menu li:hover ul{left:-1px;top:2.5em; }
.menu ul {position:absolute;top:-999em;width:10em;}
.menu ul li {width:100%;}
.menu ul li a {border-left:1px solid #ffffff;}
Este bloque include a post y sidebar
/* Content */
#content{padding:10px 0;}
#content a{color:#999999;}
#content a:hover{color:#333333;}
/* Posts */
#post{background:#ffffff;text-align:justify;}
#post-content{margin-bottom:15px;padding:0 0 10px 10px;}
#post-content a.post-title{text-decoration:none;}
#post-content h2{background:#666666;color:#ffffff;margin:0 0 10px 0;}
#post-content h2:hover{background:#999999;}
#post-content .date{margin-bottom:10px;color:#666666;font-style:italic;}
#postmeta{color:#999999;}
#postnavigation{color:#999999;}
Estilos del sidebar o barra lateral
/* Sidebar */
#sidebar{ background:none;}
#sidebar h4{color:#ffffff;background:#666666;;margin:0;padding:3px;}
#sidebar ul li a{display:block;position:relative;color:#333333;}
#sidebar ul li{margin:0;padding:5px 10px;list-style:none;display:block;background: #dddddd;border-bottom:1px solid #ccc;border-top:1px solid #ffffff;}
#sidebar ul li:hover{background: #cccccc;}
#sidebar ul li a{display:block;color:#000;text-decoration:none;}
#sidebar ul li a:hover{color:#ffffff;}
Un simple retoque para nuestro footer.
/* Footer */
#footer{ background: #333333;text-align:center;color:#999999;}
Estos estilos están solo de manera monocromática, para no extender demasiando el tutorial y la hoja de estilos con imágenes y colores.
Conclusión
Hemos terminado la primera etapa de nuestra plantilla, con los archivos básicos pero que ya nos permite gestionar de manera fácil nuestro contenido.
Como resultado tenemos esta plantilla:
Descargar Código Fuente
En la parte III independizaremos la carga de paginas y post en sus archivos page.php y single respectivamente, también agregaremos el formulario de comentarios para nuestros post, un buscador y pagina de errores.
Saludos Jose
Primero que nada, te felicito por el tutorial. Es bien facil de seguir.
Una observacion:
En la parte 1 refieres a crear un directorio llamado 960,
960/
960.css
reset.css
text.css
Pero en la parte 2, paso 1 lo estariamos buscando en el directorio erroneo.
<link rel="stylesheet" type="text/css" media="all" href=">/css/reset.css" />
<link rel="stylesheet" type="text/css" media="all" href="/css/text.css" />
<link rel="stylesheet" type="text/css" media="all" href="/css/960.css" />
otra forma para omitir este paso y llamar el CSS del grid seria importar los css directamente desde el archivo style.css
ej.
/*
Theme Name: Mi Theme WP
Theme URI: http://jcabezas.net
Description: Theme basico hecho con el framework 960 Grid System.
Version: 0.1
Author: Jose Cabezas Lucero
Author URI: http://jcabezas.net
*/
@import url("960/reset.css");
@import url("960/960.css");
@import url("960/text.css");
Saludos!
@mauri.. muchas gracias por tu comentario.. efectivamente hay un error en el nombre del directorio.. preferí dejarlo con el nombre css en vez de 960 , ya que es mas generico y permite alojar otros estilos si es necesario.
saludos