Después de bastante tiempo sin postear, llego en gloria y majestad con la tercera parte del tutorial “Creando una plantilla WordPress con 960 Grid System”. Bueno, empezaremos.
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
En la Parte II vimos.
- 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
Ahora en la Parte III
Dividiremos la carga de index.php y dejaremos que solo en este se cargue el Home/Inicio
inde.php
|_ page.php : Para las Páginas
|_ single.php : Para las Entradas/Posts
|_ archive.php : Para todo lo que no es página ni post. Ej Categorías, Tags, etc.
y además creamos la plantilla de comentarios comments.php que se cargará desde single.php
Aquí vamos
page.php
Este archivo funcionará cuando queramos ver una página
<?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">
<h2><?php the_title(); ?></h2>
<div class="date">Escrito el <?php the_time('j \d\e F \d\e Y'); ?> a las <?php the_time() ?>, por <?php the_author() ?></div>
<?php the_content(__('Seguir leyendo'));?>
<small><?php edit_post_link('(Editar este contenido?)','',''); ?></small>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div> <!-- Fin #post -->
<?php get_sidebar(); ?>
</div><!-- Fin #content -->
<?php get_footer(); ?>
En el caso que quieras crear una página más personalizada o para un caso particular, puedes ocupar este mismo código en adaptarlo a tus necesidades.
No olvides añadir a tu página personalizada, el tag “Template Name” en la parte superior del archivo para identificarla cuando queramos ocuparla de plantilla.
Ejemplo
/* * Template Name: Mi Pagina */
single.php
En este archivo se cargara una entrada/post cuando, además cargaremos la plantilla de comentarios desde comments.php
<?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">
<h2><?php the_title(); ?></h2>
<?php the_content(); ?>
<?php wp_link_pages(array('before' => '<p><strong>Pagina:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
<div id="postmeta">
<p><?php comments_popup_link('No hay comentarios', '1 Comentario', '% Comentarios'); ?> | Categoria: <?php the_category(', ') ?> <small><?php edit_post_link('(Editar este contenido?)','',''); ?></small></p>
<p>Puede seguir los comentarios de esta entrada a traves de <?php comments_rss_link('RSS 2.0'); ?>.</p>
</div><!-- Fin #postmeta -->
</div>
<?php comments_template(); ?>
<?php endwhile; ?>
<?php endif; ?>
</div><!-- Fin #post -->
<?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>
archive.php
En este archivo veremos el listados de nuestros posts de una catagoría, tag, fecha, etc.
<?php get_header(); ?>
<div id="content" class="clearfix">
<?php is_tag(); ?>
<?php if (have_posts()) : ?>
<div class="grid_12" id="post">
<?php $post = $posts[0]; ?>
<?php /* Categorias */ if (is_category()) { ?>
<h2>Archivo de la categoría: ‘<?php single_cat_title(); ?>’ </h2>
<?php /* Tags */ } elseif( is_tag() ) { ?>
<h2>Posts etiquetados con ‘<?php single_tag_title(); ?>’</h2>
<?php /* Archivo diario */ } elseif (is_day()) { ?>
<h2>Archivo de <?php the_time('j \d\e F \d\e Y'); ?></h2>
<?php /* Archivo mensual */ } elseif (is_month()) { ?>
<h2>Archivo de <?php the_time('F \d\e Y'); ?></h2>
<?php /* Archivo anual */ } elseif (is_year()) { ?>
<h2>Archivo de <?php the_time('Y'); ?></h2>
<?php /* Archivo de autor */ } elseif (is_author()) { ?>
<h2>Author Archive</h2>
<?php /* Arhivo paginado */ } elseif (isset($_GET['paged']) && !empty($_GET['paged'])) { ?>
<h2>Archivos del blog</h2>
<?php } ?>
<?php while (have_posts()) : the_post(); ?>
<div id="post-content">
<a class="post-title" href="<?php the_permalink() ?>" rel="bookmark"><h2 id="post-<?php the_ID(); ?>"><?php the_title(); ?></h2></a>
<div class="date"><?php the_time('l, j \d\e F \d\e Y') ?> <?php edit_post_link('(Editar esta entrada)', '', ''); ?></div>
<?php the_excerpt() ?>
<div id="postmeta">
<p><?php comments_popup_link('No hay comentarios', '1 Comentario', '% Comentario'); ?> | Categoría: <?php the_category(', ') ?></p>
</div><!-- fin #postmeta -->
</div><!-- fin #post-content -->
<?php endwhile; ?>
<div id="postnavigation">
<p><?php next_posts_link('« Entradas Anteriores') ?> <?php previous_posts_link('Entradas posteriores »') ?></p>
</div> <!-- fin #postnavigation -->
</div> <!-- fin #post -->
<?php endif; ?>
<?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>
comments.php
Este archivo será nuestra plantilla de comentarios, el cual tiene la particularidad de mostrar el avatar alojando en gravatar.com en caso de que tengamos una cuenta allí, la cual la reconoce mediante el correo electrónico.
<div id="comentarios">
<?php
if(!empty($_SERVER['SCRIPT_FILENAME']) && 'comments.php' == basename($_SERVER['SCRIPT_FILENAME'])) : ?>
<?php die('Tu no tienes acceso a esta pagina directamente'); ?>
<?php endif; ?>
<?php if(!empty($post->post_password)) : ?>
<?php if($_COOKIE['wp-postpass_' . COOKIEHASH] != $post->post_password) : ?>
<p>Este contenido esta protegido con contraseña. Ingresa la contraseña para ver los comentarios.</p>
<?php endif; ?>
<?php endif; ?>
<?php if($comments) : ?>
<h2 id="num_comments"><?php comments_number(__('No hay comentarios'), __('1 Comentario'), __('% Comentarios')); ?></h2>
<ol class="comment-list">
<?php foreach($comments as $comment) : ?>
<li id="comment-<?php comment_ID(); ?>" >
<div class="grid_1">
<?php echo get_avatar(get_comment_author_email(), 48, $default_avatar ); ?>
</div>
<div class="grid_7 comentario">
<?php if ($comment->comment_approved == '0') : ?>
<p>Tu comentario esta a la espera de moderacion</p>
<?php endif; ?>
<?php comment_text(); ?>
<p class="meta">Comentado por <?php comment_author_link(); ?> el día <?php comment_date(); ?> a las <?php comment_time(); ?></p>
</div>
<div class="clear"></div>
</li>
<?php endforeach; ?>
</ol>
<?php else : ?>
<p>Todavía no hay comentarios</p>
<?php endif; ?>
<h2 id="num_comments">Deja tu comentario</h2>
<?php if(comments_open()) : ?>
<?php if(get_option('comment_registration') && !$user_ID) : ?>
<p>You must be <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?redirect_to=<?php echo urlencode(get_permalink()); ?>">Logueate </a> para comentar este post.</p><?php else : ?>
<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
<?php if($user_ID) : ?>
<p>Logueado como <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?action=logout" title="Log out of this account">Salir »</a></p>
<?php else : ?>
<p><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" tabindex="1" />
<label for="author"><small>Nombre <?php if($req) echo "(requerido)"; ?></small></label></p>
<p><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="22" tabindex="2" />
<label for="email"><small>Mail (no sera publicado) <?php if($req) echo "(requerido)"; ?></small></label></p>
<p><input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="22" tabindex="3" />
<label for="url"><small>Website</small></label></p>
<?php endif; ?>
<p><textarea name="comment" id="comment" cols="80" rows="10" tabindex="4"></textarea></p>
<p><?php do_action('comment_form', $post->ID); ?></p><div class="clear"></div><br />
<p><input name="submit" type="submit" id="submit" tabindex="5" value="Enviar Comentario" />
<input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" /></p>
</form>
<?php endif; ?>
<?php else : ?>
<p>Los comentarios estan cerrados.</p>
<?php endif; ?>
</div>
Esto es por ahora, trataré de ir documentando más el código para que se entienda mejor y en caso que tengan alguna duda, no olviden comentarla, saludos
