Instructivo

Descripcin

Temas

17 Febrero 2015

Creacin de themes para

Wordpress
El siguiente instructivo muestra como desarrollar Themes
sencillos en Wordpress

Estructura de un Theme
El API de Wordpress
El loop de Wordpress

Estructura de un Theme
Wordpress es un CMS altamente flexible, con una curva de aprendizaje que permite
avanzar muy rpido hacia un conocimiento profundo del software y para los
desarrolladores web, resulta bastante amigable entrar en contacto con las funciones
del API de wordpress, ya que los nombres indican exactamente lo que el cdigo hace.
Para que la creacin de sitios web con wordpress pueda tener un alto grado de
personalizacin, resaltando el aspecto grfico como la primera lnea de contacto con
los usuario finales, es deseable que el diseo del sitio se pueda replicar
completamente en el CMS. En el mercado existe una gran variedad de Themes
gratuitos y comerciales, pero es probable que no se ajusten en un 100% a las
expectativas que tenemos. Por estas razones, la creacin, modificacin y adaptacin
de themes es una materia de gran inters para quienes han elegido Wordpress como
la herramienta para la creacin de su sitio.
Estructura de directorios y archivos
Los archivos esenciales para que un theme sea reconocido como tal en wordpress
son:

style.css
index.php
header.php
footer.php
sidebar.php
screenshot.png
functions.php

Ciertamente, es posible hacer themes extremadamente sencillos teniendo slo los

archivos style.css e index.php, pero ceirse a la estructura mencionada, nos permite
caminar hacia desarrollos mas elaborados.
Respecto a los directorios, los elementos mas bsicos son:

Languages
Images
Js (javascript)

Estructura de un Theme
Al igual que mencionbamos con los archivos, tambin es posible obviar estos
directorio o agregar mas en el caso de que alojen archivos importantes para el
theme, en este sentido, es frecuente que se incorporen directorio con frameworks
como Foundation o Bootstrap.
Finalmente, la estructura de archivos y directorios de nuestro theme, puede ser
similar a lo siguiente:

Descripcin de funciones
Mencionar algunas funciones de cada archivo para resaltar
su importancia.
Style.css: Permite sealar informacin de versin, autor,
sitio web del fabricante, etc. Estos datos aparecen en el
comentario que antecede las reglas de estilos.
Screenshot.png: Permite mostrar una miniatura de la
grfica del theme.
Index.php: Continen el cuerpo de la pgina o llamados a
incluir sus parte en el caso de haber separado enl header y
footer.
Functions.php: Define algunos elementos como
posiciones de los sidebars, mens, tipografas, etc.

las

En la imagen se omiten los archivos header, footer y

sidebar, ya que sern tratados con detalle mas adelante.

El API de Wordpress
Wordpres nos entrega una serie de funciones que permiten desde obtener
informacin del CMS hasta definir algunas funcionalidades del theme. Revisaremos
los mas importantes:

get_header
Incluye la plantilla de cabecera contenida por defecto en el fichero header.php del
directorio de nuestro theme actual
<?php get_header( nombre ); ?>
El parmetro nombre, est referido al nombre del archivo despus del guin. Esto
significa que si tenemos distintas cabeceras, podemos nombrarlas de la siguiente
forma: header-principal.php, header-secundaria.php, etc. Cuando hacemos la
invocacin basta con sealar el nombre que precede al guin, aplicado al ejemplo, si
queremos ver el archivo header-principal.php, llamamos de la siguiente forma:
<?php get_header( principal ); ?>
Si tenemos un nico archivo header.php, no es necesario sealar el parmetro y el
llamado puede quedar de la siguiente forma:
<?php get_header( ); ?>

get_sidebar
Incluye la plantilla para nuestra Barra Lateral que se encuentra por defecto en el
fichero sidebar.php del directorio de nuestro theme activo
<?php get_sidebar( nombre ); ?>
El parmetro nombre, opera con una lgica similar a la descrita en get_header. Si
tenemos varias cabeceras definidas le pasamos el nombre para obtener el
fichero sidebar[nombre].php.

El API de Wordpress
get_search_form
Muestra el formulario de bsqueda definido en el fichero searchform.php de nuestro
Theme:
<?php get_search_form(); ?>

comments_template
Carga la plantilla de comentarios del directorio de nuestro theme actual.
<?php comments_template( fichero, separador ); ?>
El parmetro fichero es el nombre del fichero con la plantilla que queremos cargar. El
parmetro separador, corresponde a un booleano que indica si se separan o no, los
comentarios por tipo de comentario, por defecto es false.

get_footer
Incluye la plantilla de Pie de Pgina de nuestro blog que por defecto se encuentra en
el fichero footer.php del directorio de nuestro theme actual
<?php get_footer( nombre ); ?>
El parmetro nombre indica si le pasamos el nombre para obtener el
fichero footer[nombre].php

El API de Wordpress
Etiquetas de Informacin del Blog
Bloginfo
Muestra informacin sobre nuestro blog, la cual suministramos en nuestro Perfil de
Usuario y Opciones Generales del Panel de Administracin.
<php bloginfo( mostrar ); ?>
Dependiendo de lo que queramos mostrar tenemos las siguientes opciones:
admin_mail: eMail del usuario Administrador
atom_url: URL de nuestro Feed Atom
comments_rss2_url: URL Feed RSS de Comentarios
description: Descripcin de nuestro blog
url: URL de nuestro blog
Name: Ttulo del blog
stylesheet_directory: Directorio de las hojas de estilo
template_directory: URL del directorio theme activo
Ejemplos:
1. Mostrar el ttulo de nuestro Blog y su descripcin
<h1><?php bloginfo(name); ?></h1>
<h2><?php bloginfo(description); ?></h2>
2. Mostrar un link a nuestro Feed
<a href=<?php bloginfo(atom_url); ?>>Sguenos en nuestro Feed</a>
<a href=http://example/home/feed/atom>Siguenos en nuestro Feed</a>

El API de Wordpress
get_bloginfo
Es igual que la etiqueta anterior, pero lo que nos devuelve al hacer la consulta de la
Informacin, lo podemos almacenar para seguir trabajando con ella en PHP.
<?php $info = get_bloginfo( mostrar ); ?>

Etiquetas de Listas
wp_list_authors
Muestra una lista con los usuarios del blog y si son autores de algn post en forma
de enlace a sus posts. Opcionalmente muestra el contador de posts de cada usuario.
<?php wp_list_authors( argumentos ); ?>
El parmetro argumentos permite enlazar varios argumentos aadiendo & entre
uno y otro. L lista de posibles argumentos es la siguiente:
optioncount: Nmero de post publicados del autor
exclude_admin: Excluir al usuario admin de la lista
show_fullname: Mostrar nombre completo del autor
hide_empty: No mostrar usuarios sin posts. Los parmetros tienen los posibles
valores a 0 (falso no activar) o 1 (verdad activar esta opcin)
Ejemplo:
1. Mostrar el nombre completo del usuario y el nmero de post publicados
<ul> <php wp_list_authors(show_fullname=1&optioncount=1); ?> </ul>
Julio Soler (34)
Arturo Mellado (23)
Marta Snchez (20)
Megan Fox (12)

El API de Wordpress
wp_list_categories
Muestra una lista de categoras como enlaces
<?php wp_list_categories( argumentos ); ?>
En este caso podemos enlazar varios argumentos aadiendo & entre uno y otro.
Los argumentos disponibles son:
orderby: Ordenar categoras alfabticamente (name), por ID (ID) o por nmero de
posts (count) de cada categora.
order: Orden Ascendente (ASC) o Descendente (DESC)
style: Formato de lista sin numerar (list) o sin formato
show_count: Mostrar no de posts de cada categora (1)
hide_empty :Mostrar categoras sin posts (1)
Exclude: Excluir categoras (separar ID por comas)
Include: Incluir solo las categoras indicadas (ID)
Number: Nmero de categoras a mostrar

Ejemplos:
1. Ordenar categoras por nombre e incluir los ID 1, 2, 3 y 8 nicamente
<ul><?php wp_list_categories(orderby=name&include=1,2,3,8); ?> </ul>
Diseo
Programacin
Web 2.0
WordPress
2. Excluir las categoras 1 y 2 y mostrar el nmero de post de cada una
<ul><?php wp_list_categories('exclude=1,2&show_count); ?></ul>
Diseo (3)
jQuery (12)

El API de Wordpress
wp_list_pages
Lista las pginas estticas en forma de link a su correspondiente web.
<?php wp_list_pages( argumentos ); ?>
Los argumentos disponibles son:
exclude: Excluir categoras (separar ID por comas)
include: Incluir solo las categoras indicadas (ID)
sort_column: Ordenar la lista de pginas de diferentes formas: Alfabeticamente
(post_title), Orden de Pgina (menu_order), Fecha (post_date), Identificador (ID)
title_li: Titulo cabecera de la lista a mostrar
number: Establece el nmero de pginas a mostrar
depth: Nivel de profundidad de las pginas a mostrar: 0 ( todas), 1 ( superiores)

Ejemplos:
1. Mostrar slo las pginas 5 y 23 y titular la lista como WordPress
<ul><?php wp_list_pages('include=5,23&title_li=<h2>'. __('WordPress') . '</h2>' ); ?
></ul>
WordPress
- Themes
- Plugins
2. Mostrar 2 pginas superiores
<ul><?php
wp_list_pages('number=2&depth=1&title_li=<h2>PginasSuperiores</h2>');
></ul>
Pginas Superiores
Blogger
Drupal

El API de Wordpress
Etiquetas de Login
wp_login_url
Devuelve la URL que permite a un usuario hacer login para entrar al sistema.
<?php wp_login_url( redirigir ); ?>
Si indicamos una URL en redirigir, despus de hacer login nos redirige a esa
direccin.

Ejemplos:
1. Uso por defecto:
<a href="<?php echo wp_login_url(); ?>" title="Login">Login</a>
2. Login y volver a la pgina en la que estaba
<a href="<?php echo wp_login_url( get_permalink() ); ?>" title="Login">Login</a>
3. Login e ir a la pgina principal
<a href="<?php echo wp_login_url(get_bloginfo('url')); ?>">Login</a>

wp_logout_url
Devuelve la URL que permite salir de WordPress al igual que se haca con
wp_login_url.
<?php wp_logout_url( redirigir); ?>

El API de Wordpress
wp_loginout
Es una combinacin de las dos funciones anteriores en la que si muestra un link para
hacer login, o si el usuario ya est dentro muestra un link para salir.
<?php wp_loginout( redirigir); ?>

Etiquetas de Posts
the_ID
Muestra el ID numrico del Post
<?php the_ID(); ?>

the_title
Muestra el Ttulo del Post.
<?php the_title(antes, despues); ?>
Los parmetros antes y despes, indican: Texto HTML a mostrar antes del ttulo y
Texto HTML a mostrar despus del ttulo, respectivamente.
Ejemplo:
<?php the_title('<h3>', '</h3>'); ?>

the_author
Muestra el autor del post.
<?php the_author(); ?>

El API de Wordpress
the_permalink
Muestra la URL del enlace permanente del post.
<?php the_permalink(); ?>
Ejemplo:
<a href=<?php the_permalink(); ?>><?php the_title(); ?></a>

the_content
Muestra el contenido del post actual.
<?php the_content( texto ); ?>
Si la etiqueta <!--more--> ha sido insertada en el contenido del post podemos definir
qu texto queremos que aparezca en ese punto, sealndolo en el parmetro texto.
Ejemplo:
1. Cuando termine de mostrarse el resumen del post aparecer Leer ms
<?php the_content('Leer ms...'); ?>

the_excerpt
Muestra un extracto del post (las 55 primeras palabras, pero terminndolo con [...] en
vez de un Leer ms.
<?php the_excerpt(); ?>

El API de Wordpress
the_category
Muestra una lista con los links a las categoras del post.
<?php the_category( separador ); ?>
El Separador lo utilizamos para separar las distintas categoras.

Ejemplos:
1. Separar con espacios
<p>Categoras: <?php the_category(' '); ?></p>
Categoras: Diseo Themes WordPress
2. Separar con comas
<p>Categoras: <?php the_category(', '); ?></p>
Categoras: Diseo, Themes, WordPress

the_tags
Mostrar un listado de enlaces a las etiquetas del post.
<?php the_tags(titulo, separador,terminar); ?>
El Titulo corresponde a la lista de etiquetas y separador, al separador de las etiquetas

Ejemplo:
1. Lista de etiquetas separadas por comas y al final una lnea en blanco
<?php the_tags(Etiquetas: , , , < br />); ?>
Etiquetas: Curso, Diseo, jQuery, Web 2.0

El API de Wordpress
Etiquetas de Comentarios
comments_number
Muestra el numero total de comentarios, Trackbacks y Pingbacks de un post.
<?php comments_number(cero,uno,muchos); ?>
Los parmetros indican
Cero: Texto a mostrar si no hay comentarios
Uno: Texto a mostrar si hay un comentario
Muchos: Texto para varios comentarios

Ejemplo:
<p>Este post tiene actualmente <?php comments_number('Sin comentarios','1
comentario','% comentarios'); ?>.</p>
Este post tiene actualmente 23 comentarios

comment_author
Muestra el autor del comentario.
<?php comment_author(); ?>

Ejemplo:
<div>Comentado por: <?php comment_author(); ?></div>
Comentado por: Julio Soler

El API de Wordpress
comment_author_email
Muestra el mail del autor del comentario.
<?php comment_author_email(); ?>

Ejemplo:
<div>Email del autor del comentario: <?php comment_author_email(); ?></div>
Email del autor del comentario: julio.soler@alu.um.es

comment_type
Mostrar solo un tipo de comentario: comentario normal, Trackbacks o Pingbacks.
<?php comment_type('Comentario', 'Trackback','Pingback'); ?>
Los parmetros definen el texto que aparece en cada caso segn el comentario.
Ejemplo:
<p><?php comment_type(1 Comentario,1 Trackback, 1 Pingback); ?>para <?
php the_title(); ?>: </p>
1 Comentario para Tema 1. WordPress por dentro (Core)

Comment_text
Muestra el contenido de un comentario
<?php comment_text(); ?>

El Loop de Wordpress
El Loop o bucle de WordPress es una estructura muy bsica (en PHP) que permite
mostrar los posts de nuestro blog accediendo para ello a la base de datos. (Lo
utilizaremos en el Tema de Diseo de Themes/Apariencia) Tiene un aspecto genrico
como este:
<?php
//El Bucle o Loop
if (have_posts()) : while(have_posts()) ; the_post();
...
endwhile; else;
...
endif;
?>
Explicando rpidamente el cdigo anterior, lo que hace es que si hay posts para
mostrar (have_posts()) entonces mientras (while) los haya, ir uno a uno mostrndolo
(the_post()).
Visto as puede parecer de nuevo un concepto muy abstracto, pero para los menos
entendidos no preocuparos, vamos a ver una explicacin paso a paso con un ejemplo
mucho ms grfico utilizando las funciones del apartado anterior, indicando primero
el cdigo en PHP del Loop y debajo su explicacin:
1. <?php if (have_posts()) : ?>
Comprueba si hay posts publicados en el blog. En caso de que haya se ejecuta lo
siguiente que viene debajo (de 2 a 13), sino saltamos a la 14.
2. <?php while (have_posts()) : the_post(); ?>
Ahora mientras haya posts, aunque slo sea uno, va a ir uno por uno y va a obtener
una instancia a ese, o lo que es lo mismo, va a apuntar a los datos de ese post
mientras no pase al siguiente de la base de datos, con lo que mientras est
apuntando a l, tiene disponible todos los datos necesario sobre el post, los cuales
vamos a utilizar seguidamente con funciones.

El Loop de Wordpress
3. <div class=post id=post<?php the_ID(); ?>>
Aqu forma una sentencia en html obteniendo, mediante una llamada a una funcin,
el ID del post con el que estamos trabajando.
4. <h2><a href=<?php the_permalink(); ?> rel=bookmark
Permanente a <?php the_title() ?>><?php the_title(); ?></a></h2>

title=Enlace

En este caso va a formar un enlace cuyo link ser el enlace permanente a ese post y
cuyo texto del enlace va a ser el ttulo del post.
5. <p class=meta>
6. <span>Posteado el </span><?php the_time(FjS, Y); ?> <span>por</span> <?php
the author(); ?> Obtiene la fecha del post y el autor que lo cre.
7. </p>
8. <?php the_content(Leer el resto del artculo); ?>
Muestra el contenido de la entrada. Si el post ha sido cortado en algn momento por
la etiqueta <!--more--> entonces mostrar hasta ah para terminar con el texto Leer
el resto del artculo.
9. <p><?php the_tags(Etiquetas: ,, , <br />); ?>
Muestra las etiquetas del post separadas por comas y con una lnea en blanco al final
de la lista.
10. Posteado en <?php the_category(); ?>
Indica en que categora ha sido aadido el post. Curso en lnea Avanzado de creacin
de sitios web con WordPress- 15 -Tema 1. WordPress por dentro (Core)

El Loop de Wordpress
11. <?php comments_popup_link(Sin
comentarios); ?></p>

comentarios,

comentario,

Muestra el nmero de comentarios y el texto que aparece segn la cantidad.

12. <?php next_posts_link(Antiguas entradas); ?>
Muestra un enlace a entradas anteriores. (Recordar que un blog va en orden inverso)
13. <?php previous_posts_link(Nuevas entradas); ?>
Muestra un enlace a nuevas entradas.
14. <?php else : ?>
15. <h2>No existen posts </h2>
En caso de que no existan posts publicados mostrar el mensaje No existen posts.
Es mejor avisarle a la gente de que no hay.
16. <?php endif; ?>