DaCh

Un tema es un conjunto de archivos de PHP, imágenes y CSS contenidos en una carpeta, esta carpeta esta a dentro de /wp_content/themes/ y tiene el nombre del tema. WordPress viene con dos temas instalados classic y default.

El tema se compone de dos partes, del diseño y del contenido que genera wordpress, por lo tanto el contenido y el diseño son distintos.

Para que trabajen juntos es necesario colocar el código de wordpress, en sitios específicos dentro del diseño. Por esta razón un tema esta dividido en diferentes archivos.

Si vemos dentro del tema default ó classic veremos que hay varios archivos, estos archivos son necesarios para que un tema funciones correctamente, aunque se puede crear un tema con solo index.php y style.css, pero no es conveniente, el tema seria demasiado inestable y si quisieras instalar algún plugin no seria compatible.

Los archivos principales que componen el tema son.

index.php
footer.php
header.php
sidebar.php
single.php
comments.php
archive.php
search.php
404.php
page.php
functions.php
style.css
screenshot.jpg (es la imagen previa del tema)
/images (la carpeta que contiene todas las imágenes del diseño del tema)

cuando abrimos la pagina principal de nuestro blog en wordpress, por ejemplo http://localhost/wordpress/ (cuando lo tenemos instalado localmente).

Pensaríamos que solo el archivo index.php es el que se muestra.

Pero en realidad lo que se muestra son los archivos index.php, header.php, sidebar.php y footer.php.

index.php es el archivo que contiene o carga a header.php, sidebar.php y footer.php.
En donde header.php seria el archivo que contiene todo el documento de la cabecera, sidebar.php contiene los elementos de la barra lateral y footer.php contiene el pie de pagina e index.php aparte de incluir o carga a estos archivos, también tiene código php para poder mostrar el contenido de wordpress.

Podríamos decir que index.php es el cuerpo y los archivos header.php, sidebar.php y footer.php son los miembros del cuerpo y asi como index.php existen otros archivos que cargan las partes del cuerpo como es el caso de single.php, 404.php, search.php, page.php, archive.php. Dependiendo el caso.

Por ejemplo cuando se accede al blog lo primero que muestra es la pagina principal, y la pagina principal es index.php que carga a los demás archivos que forman las parte del cuerpo, como lo vimos en la imagen.
Cuando se accede a un post o entrada, el archivo que se muestra es single.php que carga a los demás archivos incluyendo a comments.php. Cuando se accede auna pagina se carga el archivo page.php que carga a los demás archivos, lo mismo pasa con los 404.php, archive.php, search.php según en su caso y que veremos a su tiempo.
El archivo functions.php es el archivo que contiene las funciones que podemos usar dentro de nuestro tema, también en este archivo se declara el o los sidebar que usara el tema.

Espesando a crear nuestro tema.

Instalando el tema

1.- Nosotros debemos de crear una carpeta y llamarla con el nombre de nuestro tema simplech (en mi caso) y deben estar los archivos index.html (que después lo vamos a cambiar por index.php), el archivo de style.css y la carpeta de images/ (con todas las imágenes que utiliza el tema), Los archivos index.html y style.css son archivos básicos para el tema y de estos dos archivos crearemos los archivos restantes. Ahora solo copiamos nuestra carpeta y la pegamos dentro del directorio que contiene los temas, /wp_content/themes/simplech seria el directorio de nuestro tema en wordpress.

2.- Renombramos a index.html por index.php.

3.- Editamos el archivo style.css y al principio del documento le añadimos.

/*Theme Name: Simplech
   Theme URI: http://dach-dz.tuxpixel.net/
   Description: Este tema esta creado como una guía educativa paso a paso para enseñar
	a crear su propio tema.
   Version: 1.0
   Author: David Chay
   Author URI: http://dach-dz.tuxpixel.net
   El CSS, XHML y diseño es realizado bajo la licencia Creative Commons

http://creativecommons.org/licenses/by/2.5/mx/

*/

4.- Ahora dentro del área de administración de wordpress, vamos a la pestaña de apariencia/temas y activamos nuestro tema que creamos.

Incluyendo el contenido de WordPress.

Si vemos ahora la pagina principal de nuestro blog veremos que muestra un documento sin diseño y con contenido de html que le añadimos pero no muestra nada del contenido del WordPress.

Vamos a editar el archivo index.php para añadirle todo el contenido de WordPress y el diseño del tema.

Abrimos el archivo y lo primero que vamos a editar es la informacion del documento que se encuentra en la etiqueta <head>.

<head>
	<title>SimpleCH</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<link rel="stylesheet" href="style.css"  type="text/css" />
	<link rel="shortcut icon" href="images/favicon.ico" />
</head>

Dentro de la etiqueta encontramos el titulo de la pagina, el metadato, la codificacion de caracteres, el enlace de nuestro de CSS y el favicon de nuestra pagina.

Ahora lo vamos a editar poniendo toda esta misma información pero desde WordPress por medio de la funcion bloginfo().

bloginfo

Es la función por la cual mandamos a llamar toda la información de nuestro blog, como es la url del sitio en que esta alojado, el titulo y su descripción así como también la definición del documento y de mas datos, mandándolos a llamar por medio de parámetros.

Si quieres conocer mas acerca de esta función y sus parámetros puedes acceder a http://codex.wordpress.org/Template_Tags/bloginfo.

Editando el titulo de la pagina.

La primer etiqueta que vemos es <title></title> dentro de esta etiqueta pusimos simplech pero esto debe cambiar cuando el lector visite o navegue por el blog, aqui pondremos el nombre del blog seguido por el titulo.

<title>?php bloginfo('name');?> <?php wp_title();?></title>

La función bloginfo manda a llamar el nombre que le pusimos a nuestro blog desde /opciones/general dentro de wordpress y wp_title mostrara el nombre de la pagina que se esta visualizando en ese momento, si es un post o un archivo o lo que se este viendo.

Información de la pagina.

Ahora modificamos la meta información de nuestra pagina, con la función bloginfo mandamos a llamar la codificación de caracteres de la pagina, el metadato y añadimos el generador de contenidos con la versión de wordpress.

<meta http-equiv="content-type" content="<?php bloginfo('html_type');?>;charset=<?php bloginfo('charset');?>" />
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />

Stylesheets y RSS

Aquí añadimos la dirección de nuestra hoja de estilo, la cual nos la proporciona la misma función con el parámetro ‘stylesheets_url’.

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url');?>"  type="text/css" media="screen"/>

A continuación añadimos el RSS, de la misma forma pero ahora con el parámetro ‘rss2_url’.

<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />

Trackbacks

Pingbacks (o vínculos de referencia o LinkBacks como a veces se le llama)
son importantes en la creación de conexiones entre blogs. Pingbacks permite que el autor sepa cuándo otro sitio ha mencionado la URL de cualquier página de su blog.

<link rel="pingback" href="<?php bloginfo('pingback_url');?>" />

Añadiendo la imagen de Favicon.

Para añadir la url donde se encuentra el favicon de nuestro blog debemos de conocer en donde esta alojado el templante del tema, la direccion fisica seria /wp_content/themes/simplech/images/faviicon.ico pero no es comodo usar toda esta dirección así que le volvemos a pedir a la función bloginfo cual es la url del templante con el parámetro ‘template_
directory’.

<link rel="shortcut icon" href="<?php bloginfo('template_directory');?>/images/favicon.ico" />

Dejando espacio para Plugins.

La pieza final de código que vamos a añadir es una parte vital de cualquier tema para WordPress.

<?php wp_head(); ?>

Cuando el tema se procesa. WordPress sustituye esta etiqueta con un código adicional necesario para ejecutar algunos plugins que el usuario instale. Así que si usted instala un plugin que, por ejemplo, necesite ejecutar algunos códigos de Javascript. Al abrir el sitio en un navegador y al comprobar el código fuente y consultamos la etiqueta, veremos que a sido sustituido por un conjunto de secuencias de comandos. Igualmente, algunos plugins necesite agregar código CSS, HTML extra, meta tags o fragmentos de otros códigos. Sin wp_head su tema simplemente no sera compatible con muchos plugins de WordPress.

El código final de <head>.

El código para la etiqueta <head> nos quedaría de la siguiente forma.

<head>
	<title><?php bloginfo('name');?> <?php wp_title();?></title>
	<meta http-equiv="content-type" content="<?php bloginfo('html_type');?>;charset=<?php bloginfo('charset');?>" />
	<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
	<link rel="stylesheet" href="<?php bloginfo('stylesheet_url');?>"  type="text/css" 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');?>" />
	<?php wp_head(); ?>
	<link rel="shortcut icon" href="<?php bloginfo('template_directory');?>/images/favicon.ico" />
</head>

Formulario de búsqueda.

El próximo código html que vamos a sustituir es el formulario que se encuentra dentro de la etiqueta <div id=”form-header-search”>

<div id="form-header-search">
	<form action=" " method="post">
		<div>
			<input class="inptxt" type="text" name="s" value="" /><input class="btn" type="submit" value="Buscar" />
		</div>
	</form>
</div>

Como el formulario de búsqueda lo usamos no solamente en la cabecera del diseño sino que también lo podemos agregar en el archivo 404.php o en la barra lateral sidebar.php, entonces nos combine hacer un archivo en donde este el código del formulario de búsqueda así lo podremos agregar en cualquier parte de nuestro tema. Este archivo sera searchform.php
.

creamos el archivo searchform.php y en el archivo ponemos el siguiente código.

<form id="searchform" action="<?php bloginfo('home');?>/" method="get">
	<div>
		<input class="inptxt" type="text" name="s" id="s" value="<?php echo wp_specialchars($s, 1); ?>" /><input class="btn" type="submit" id="search_submit" value="Buscar"  />
	</div>
</form>

En la etiqueta <form> hemos definido dos cosas importantes. La primera es que la forma se publicará sus resultados mediante el método GET. El segundo es que en el atributo action mandamos la consulta a la URL principal del blog. También en el campo de entrada de texto agregamos el id con la letra ‘s’.

Por último en la etiqueta <input> en el atrubuto value tiene un valor de referencia a:

<?php echo wp_specialchars($s, 1); ?>

En PHP echo simplemente significa imprimir el texto siguiente. wp_specialchars esta declaración es una función para quitar algún carácter especial que dentro del campo es pasado.

Ahora simplemente incluimos el formulario a la etiqueta <div id=”form-header-search”&gt..

<div id="form-header-search">
	<?php include(TEMPLATEPATH.'/searchform.php'); ?>
</div>

Menú de navegación.

La próxima etiqueta a modificar es el menú <div id=”menu”> lo que esta dentro de esta etiqueta lo sustituimos por el siguiente código.

<ul>
	<li><a href="<?php bloginfo('url'); ?>" title="Inicio">Inicio</a></li>
	<?php wp_list_pages('title_li='); ?>
</ul>

la primer <li> es simplemente un enlace a nuestra pagina de inicio. Esta url nos la proporciona la función bloginfo() con el parámetro ‘url’.

La segunda le pedimos a WordPress que nos de una lista de las paginas que tenga el blog, esto lo hacemos con la función wp_list_pages y dentro de esta función pasamos un valor con el atributo ‘title_li=’ que le dice a wordpress que queremos el titulo de las paginas envuelto por la etiqueta <li></li>.

Si quieres ver las demás opciones o parámetros que que nos proporciona la funcion wp_list_pages() visita http://codex.wordpress.org/Template_Tags/wp_list_pages.

El Contenido de la pagina.

Lo siguiente es añadirle a nuestra plantilla el código de wordpress que nos proporciona el contenido de la pagina, a este código se le conoce comúnmente como “the loop” o el bucle en español.

El bucle es una parte esencial del tema de WordPress. Muestra el contenido en orden cronológico y permite definir las propiedades personalizadas con diferentes funciones de wordpress envueltos en etiquetas de código XHTML.

Hay diferentes formas de crear el bucle según el diseño que se le de. Si quieres ver algunos ejemplos puedes visitar http://codex.wordpress.org/The_Loop

Lo primero que aremos es eliminar el contenido html que esta en la etiqueta <div id=”contenido”> y lo sustituimos por.

<?php if(have_posts()) : while(have_posts()) : the_post(); ?>
		<h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
		<small>El <?php the_time('j'); echo ' de '; the_time(' M ');echo ' del ';the_time('Y');  ?>, en <?php the_category(', '); ?> categoria <?php the_tags(''); ?> por <?php the_author_posts_link(); ?></small>
		<?php the_content(); ?>
		<div class="separador"></div>
	<?php endwhile ?>
	<div id="navi">
		<div style="float:left;"><?php previous_posts_link(); ?></div>
		<div style="float:right;"><?php next_posts_link(); ?></div>
		<div style="clear:both;"></div>
	</div>
	<?php else : ?>
		<h2 class="center">No Encontrado</h2>
			<p class="center">Losiento, Pero lo que estas buscando ya no se encuentra aqui.</p>
			<?php include (TEMPLATEPATH . '/searchform.php'); ?>
<?php endif; ?>

Si sabes un poco de programación no se te ara muy difícil entenderle, la estructura de este código es simple.

Primero empieza con una condicion preguntando si hay post o entradas.

if(have_posts()) :

Si lo hay entonces empieza un ciclo que carga todas las entradas.

while(have_posts()) : the_post();

Dentro del while podemos ver la etiqueta <h2>. Dentro de la etiqueta <h2> esta el enlace a la entrada, la cual proporciona la funcion the_permalink() y para obtener el titulo usamos la funcion the_title().

<h2>
   <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
      <?php the_title(); ?>
   </a>
</h2>

Debajo del titulo esta la meta información del post, en la etiqueta <small>, se encuentra la fecha, categoría y las etiquetas así como su autor.

<small>
   El <?php the_time('j'); echo ' de '; the_time(' M ');echo ' del ';the_time('Y');  ?>, en <?php the_category(', '); ?> categoria <?php the_tags(''); ?> por <?php the_author_posts_link(); ?>
</small>

Por ultimo encontramos la función que carga el contenido del post.

<?php the_content(); ?>

Es se cierra el ciclo con.

<?php endwhile ?>

Ahora encontramos la navegación de las paginas.

<div id="navi">
		<div style="float:left;"><?php previous_posts_link(); ?></div>
		<div style="float:right;"><?php next_posts_link(); ?></div>
		<div style="clear:both;"></div>
	</div>

Después de la navegación encontramos la condición “else” que quiere decir “si no”, si no encuentra ni un post en esta pagina imprime una leyenda diciendo al usuario que no se encontró nada y se agrega el formulario de búsqueda.

<?php else : ?>
		<h2 class="center">No Encontrado</h2>
			<p class="center">Losiento, Pero lo que estas buscando ya no se encuentra aqui.</p>
			<?php include (TEMPLATEPATH . '/searchform.php'); ?>

Y por ultimo cerramos la condición “if”.

<?php endif; ?>

Creando la barra lateral (sidebar)

Ahora ya tenemos las entradas en nuestro blog solo nos resta hacer el contenido del sidebar o barra lateral.

La barra lateral puede contener una variedad de diferentes elementos y son una parte importante de nuestro blog.

La barra lateral la encontramos como <div id=”contenido_sidebar” class=”sidebar_bottom”>. Sustituimos todo lo que contenga por.

<ul>
	<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
		<li id="Ultimos_post" class="widget">
			<h2>Post Recientes</h2>
			<ul>
				<?php wp_get_archives('type=postbypost&limit=5'); ?>
			</ul>
		</li>
		<li id="Archivos" class="widget">
			<h2>Archivos</h2>
			<ul>
				<?php wp_get_archives('type=monthly&limit=5'); ?>
			</ul>
		</li>
		<li id="categorias" class="widget">
			<h2>Categorias</h2>
			<ul>
				<?php wp_list_categories('title_li=&orderby=name'); ?>
			</ul>
		</li>
	<?php endif; ?>
</ul>

Primero creamos una nueva lista no ordenada.

<ul>
</ul>

Una lista no ordenada es la mejor manera de organizar una barra lateral, simplemente hace cada parte de la barra lateral en un elemento de la lista.

Lo primero que encontramos es nuevamente una condición, esta condición comprueba si esta declarada el sidebar, si lo esta carga el contenido que el usuario agrega desde el panel de administración de wordpress en apariencia/widgets, sino carga el código que esta adentro de la condición.

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>

Dentro de la condición hay varios elementos de la lista, que a su vez contienen listas no ordenadas y dentro de estas listas están las diferentes funciones que cargan los widgets en nuestro caso podemos ver solamente tres.

<li id="Ultimos_post" class="widget">
			<h2>Post Recientes</h2>
			<ul>
				<?php wp_get_archives('type=postbypost&limit=5'); ?>
			</ul>
		</li>
		<li id="Archivos" class="widget">
			<h2>Archivos</h2>
			<ul>
				<?php wp_get_archives('type=monthly&limit=5'); ?>
			</ul>
		</li>
		<li id="categorias" class="widget">
			<h2>Categorias</h2>
			<ul>
				<?php wp_list_categories('title_li=&orderby=name'); ?>
			</ul>
		</li>

El primero es la función o widget wp_get_archives(), esta función carga una lista de los archivos que están en el blog y pasa como parámetro ‘type=postbypost&limit=5′, lo que se le pide a esta funcion es que la lista la muestre articulo por articulo o post por post y que sea una lista de los últimos 5 post.

El segundo es la misma función wp_get_archives(), pero pasa como parámetro ‘type=monthly&limit=5′, lo que se le pide ahora es que la lista sean los meses y que sea una lista de 5 elementos.

Si quieres saver mas de la funcion wp_get_archives consulta http://codex.wordpress.org/Template_Tags/wp_get_archives.

La ultima tenemos a la función o widget wp_list_categories(), esta otra función carga una lista de las categorías y le pasa como valor ‘title_li=&orderby=name’, aqui se le pide que pase el titulo en vuelto con la etiqueta <li> y que este ordenada alfabéticamente por nombre.

Si quieres saver mas de wp_list_categories consulta http://codex.wordpress.org/Template_Tags/wp_list_categories.

Haciendo el archivo functions.php

Para que el usuario pueda agregar sus propios widgets, debe de estar declarado el sidebar dentro de functions.php, este archivo se encarga de almacenar todas las funciones que se usen en el tema. Pero en nuestro caso solo declararemos el sidebar.

1.- Creamos el archivo functions.php dentro de la carpeta de nuestro tema.

2.- Añadimos el siguiente codigo.

<?php
     if ( function_exists('register_sidebar')){
	register_sidebar(array('name' => 'simplech'));
    }
?>

Listo ahora podemos agregar nuestros propios widgets desde aparencia/widgets en wordpress.

Pie de pagina

Por ultimo modificaremos el pie de pagina, que seria dentro de <div id=”footer” class=”margen”>, aquí por lo general se pone el nombre del tema y el diseñador.

<small>
  © 2010, Gestionado por WordPress, El tema es SimpleCH diseñado por <a href="http://dach-dz.tuxpixel.net/">DaCh</a>.
</small>

Y así es como quedaría el archivo index.php hasta este momento.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title><?php bloginfo('name');?> <?php wp_title();?></title>
	<meta http-equiv="content-type" content="<?php bloginfo('html_type');?>;charset=<?php bloginfo('charset');?>" />
	<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
	<link rel="stylesheet" href="<?php bloginfo('stylesheet_url');?>"  type="text/css" 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');?>" />
	<?php wp_head(); ?>
	<link rel="shortcut icon" href="<?php bloginfo('template_directory');?>/images/favicon.ico" />
</head>

<body>
	<div id="content-main" >
		<div id="header" class="margen">
			<div id="logo">
				<h1>SinpleCH</h1>
				<small>Diseño creado por David Chay</small>
			</div>
			<div id="form-header-search">
				<?php include(TEMPLATEPATH.'/searchform.php'); ?>
			</div>
		</div>
		<div id="menu" class="margen">
			<ul>
				<li><a href="<?php bloginfo('url'); ?>" title="Inicio">Inicio</a></li>
				<?php wp_list_pages('title_li='); ?>
			</ul>
		</div>
		<div id="content-body" class="margen">
				<div id="contenido">
					<?php if(have_posts()) : while(have_posts()) : the_post(); ?>
							<h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
							<small>El <?php the_time('j'); echo ' de '; the_time(' M ');echo ' del ';the_time('Y');  ?>, en <?php the_category(', '); ?> categoria <?php the_tags(''); ?> por <?php the_author_posts_link(); ?></small>
							<?php the_content(); ?>
							<div class="separador"></div>
						<?php endwhile ?>
							<div id="navi">
								<div style="float:left;"><?php previous_posts_link(); ?></div>
								<div style="float:right;"><?php next_posts_link(); ?></div>
								<div style="clear:both;"></div>
							</div>
						<?php else : ?>
							<h2 class="center">No Encontrado</h2>
							<p class="center">Losiento, Pero lo que estas buscando ya no se encuentra aqui.</p>
							<?php include (TEMPLATEPATH . '/searchform.php'); ?>
					<?php endif; ?>
				</div>
				<div id="sidebar">
					<div class="sidebar_top">
						<div id="contenido_sidebar" class="sidebar_bottom">
							<ul>
								<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
								<li id="Ultimos_post" class="widget">
									<h2>Post Recientes</h2>
									<ul>
										<?php wp_get_archives('type=postbypost&limit=5'); ?>
									</ul>
								</li>
								<li id="Archivos" class="widget">
									<h2>Archivos</h2>
									<ul>
										<?php wp_get_archives('type=monthly&limit=5'); ?>
									</ul>
								</li>
								<li id="categorias" class="widget">
									<h2>Categorias</h2>
									<ul>
										<?php wp_list_categories('title_li=&orderby=name'); ?>
									</ul>
								</li>

						<?php endif; ?>
							</ul>
						</div>
					</div>
				</div>
				<div style="clear:both;"></div>
			</div>
	</div>
	<div id="content-footer">
		<div id="footer" class="margen">
			<small>© 2010, Gestionado por WordPress, El tema es SimpleCH diseñado por <a href="http://dach-dz.tuxpixel.net/">DaCh</a>.</small>
		</div>
	</div>
</body>
</html>

Nota:
Tambien se le añade el siguiente codigo a style.css hasta lo ultimo del documento.

/**************Area de contenido**************/
#contenido h2 a{
	color:#000000;
}
#contenido .separador {
	border-top:1px solid #e3e3e3;
	margin-top:40px;
	padding-top:40px;
}
#contenido #navi{
	padding:30px;
}

En la próxima sesión dividiremos el archivo index.php, para crear los archivos header.php, sidebar.php y footer.php.