Indice
- Cronicas de la creación de un theme (I)
- Cronicas de la creación de un theme (II)
- Cronicas de la creación de un theme (III)
- Cronicas de la creación de un theme (IV)
- Cronicas de la creación de un theme (V)
Bueno, ya tenemos creado el esqueleto de nuestra web, con un poco de imaginación y aplicando las pautas que pensamos en los pasos anteriores, conseguiremos montar un diseño a nuestro gusto, solo nos falta un par de remates como el colocar dentro de las secciones de la web el contenido que deseemos.
Vamos a coger el theme por defecto y vamos a colocarlo en nuestra estructura (va a quedar muy feo mientras no pongamos colores ni imagenes, pero nos servirá para tener montada la base).
Ficheros:
- header.php
- index.php
- footer.php
- sidebar.php
Por ahora vamos a montar estos ficheros, con los datos que tenemos.
header.php
En el fichero header.php colocaremos lo referente a la cabecera, y asi tendremos el código separado de forma que a la hora de realizar modificaciones tendremos el código más separado y facil de entender.
<!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">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php bloginfo('name'); ?> <?php wp_title(); ?></title>
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_head(); ?>
</head>
<body>
<div id="page">
<div id="header">
<h1><a href="<?php bloginfo('url'); ?>/"><?php bloginfo('name'); ?></a></h1>
<div class="description"><?php bloginfo('description'); ?></div>
</div>
<hr />
Esto podría ser un ejemplo claro de un header.php, en el cual hacemos las llamadas necesarias a los meta,el charset, y demás tags del head. Tambien hay que destacar la llamada a la funcion bloginfo, funcion implementada por WordPress que devuelven una serie de datos dependiendo de nuestro busqueda. En nuestro caso montaremos un sistema que nos linkara al pusar sobre el nombre de nuestro blog al index del blog. Además mostraremos debajo la descripción que tenemos en configurada para nuestro blog.
index.php
Fichero más importante del theme, es el más importante por que es el que se lanza al cargar la página y se encarga de llamar a los demás componentes de theme. Este fichero además de ser el que muestra la portada de nuestro blog puede ser montado de tal forma que el mismo sirva para mostrar entradas concretas prescindiendo del single.php.
<?php get_header(); ?>
<?php get_sidebar(); ?>
<div id="content" class="narrowcolumn">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>
<div class="entry">
<?php the_content('Read the rest of this entry »'); ?>
</div>
<p class="postmetadata">Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?> <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?></p>
</div>
<?php endwhile; ?>
<div class="navigation">
<div class="alignleft"><?php next_posts_link('« Previous Entries') ?></div>
<div class="alignright"><?php previous_posts_link('Next Entries »') ?></div>
</div>
<?php else : ?>
<h2 class="center">Not Found</h2>
<p class="center">Sorry, but you are looking for something that isn't here.</p>
<?php include (TEMPLATEPATH . "/searchform.php"); ?>
<?php endif; ?>
</div>
<?php get_footer(); ?>
De este fichero hay muchas cosas que vale la pena comentar, ya que es la piedra angular del theme.
<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Estas funciones implementadas en el WordPress, se encargan de llamar las secciones de la web, los nombre son bastantes explicitos asi que no hace falta decir para que siver cada uno, pero ha de quedar claro que ha de seguir un orden lógico ya que no sería correcto usar por el sidebar antes que el header, hay que pensar que el theme al final va a llegar al usuario como un html con todas las secciones en un fichero.
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
Otra función realmente importante, se encarga de devolvernos el número correcto de posts a mostrar, ella se encarga de mostrar el número de posts que el usuario desea mostrar por página y controla que si llegamos al final de los mensajes muestre solo los que seamos. Incluso evita que salgan los no públicados. De esta forma mostramos posts mientras haya posts, tambien llamado Loop de WordPress.
Una vez dentro de este loop, solo podemos hacer una cosa, mostrar los posts. Y para ello usamos los siguiente tags.
the_content(‘Read the rest of this entry »’); nos muestra el contenido del post, el texto que pasamos como parametro es el texto que queremos colocar en lugar del Read More…
Post tags
- the_ID, nos devuelve el ID del post actual
- the_title, nos devuelve el título del post actual
- single_post_title, nos muestra el título cuando es una página
- the_title_rss, este se usa para mostrar el título cuando lo piden por RSS
- the_content, nos devuelve el contenido del post
- the_content_rss, el contenido del post cuando es requerido por RSS
- the_excerpt, obtenemos el resumen del contenido de la entrada
- the_excerpt_rss, resumen para RSS
- previous_post, nos devuelve el enlace al post anterior
- next_post, nos devuelve el enlace al post siguiente
- posts_nav_link, nos devuelve la barra de navegación
- the_meta, nos muestra la información meta del post
No voy a entrar en parametros que aceptan todas las funciones, por que en la página de WordPress estan bastante bien comentados (lo único :D).
12 comentarios, 15 referencias
+
#