Instructivo 17 Febrero 2015

DescripciónCreación de themes para

Wordpress

El siguiente instructivo muestra como desarrollar Themes sencillos en Wordpress

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

Wordpress es un CMS altamente flexible, con una curva de aprendizaje que permite avanzar muy rápido 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 código hace.

Para que la creación de sitios web con wordpress pueda tener un alto grado de personalización, resaltando el aspecto gráfico como la primera línea de contacto con los usuario finales, es deseable que el diseño 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 creación, modificación y adaptación de themes es una materia de gran interés para quienes han elegido Wordpress como la herramienta para la creación 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 sólo los archivos style.css e index.php, pero ceñirse a la estructura mencionada, nos permite caminar hacia desarrollos mas elaborados.

Respecto a los directorios, los elementos mas básicos son:

● Languages● Images● Js (javascript)

Estructura de un Theme

Al igual que mencionábamos con los archivos, también 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:

Estructura de un Theme

Descripción de funcionesMencionaré algunas funciones de cada archivo para resaltar su importancia.

Style.css: Permite señalar información de versión, 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 gráfica del theme.

Index.php: Continen el cuerpo de la página o llamados a incluir sus parte en el caso de haber separado enl header y footer.

Functions.php: Define algunos elementos como las posiciones de los sidebars, menús, tipografías, etc.

En la imagen se omiten los archivos header, footer y sidebar, ya que serán tratados con detalle mas adelante.

Wordpres nos entrega una serie de funciones que permiten desde obtener información 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 parámetro nombre, está referido al nombre del archivo después del guión. Esto significa que si tenemos distintas cabeceras, podemos nombrarlas de la siguiente forma: header-principal.php, header-secundaria.php, etc. Cuando hacemos la invocación basta con señalar el nombre que precede al guión, 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 señalar el parámetro 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 parámetro nombre, opera con una lógica similar a la descrita en get_header. Si tenemos varias cabeceras definidas le pasamos el nombre para obtener elfichero sidebar [nombre].php.‐

El API de Wordpress

get_search_form

Muestra el formulario de búsqueda definido en el fichero searchform.php de nuestroTheme:

<?php get_search_form(); ?>

comments_template

Carga la plantilla de comentarios del directorio de nuestro theme actual.

<?php comments_template(‘ fichero, separador ’); ?>

El parámetro fichero es el nombre del fichero con la plantilla que queremos cargar. El parámetro 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 Página de nuestro blog que por defecto se encuentra en el fichero footer.php del directorio de nuestro theme actual

<?php get_footer(‘ nombre ’); ?>

El parámetro nombre indica si le pasamos el nombre para obtener elfichero footer [nombre].php‐

El API de Wordpress

Etiquetas de Información del Blog

Bloginfo

Muestra información sobre nuestro blog, la cual suministramos en nuestro Perfil de Usuario y Opciones Generales del Panel de Administración.

<¿php bloginfo(‘ mostrar ’); ?>

Dependiendo de lo que queramos mostrar tenemos las siguientes opciones:

admin_mail: eMail del usuario Administradoratom_url: URL de nuestro Feed Atomcomments_rss2_url: URL Feed RSS de Comentariosdescription: Descripción de nuestro blogurl: URL de nuestro blogName: Título del blogstylesheet_directory: Directorio de las hojas de estilotemplate_directory: URL del directorio theme activo

Ejemplos:

1. Mostrar el título de nuestro Blog y su descripción

<h1><?php bloginfo(‘name’); ?></h1> <h2><?php bloginfo(‘description’); ?></h2>

2. Mostrar un link a nuestro Feed

<a href=”<?php bloginfo(‘atom_url’); ?>”>Síguenos 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 laInformación, 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 algún post en forma de enlace a sus posts. Opcionalmente muestra el contador de posts de cada usuario.

<?php wp_list_authors(‘ argumentos ’); ?>

El parámetro argumentos permite enlazar varios argumentos añadiendo “&” entre uno y otro. L lista de posibles argumentos es la siguiente:

optioncount: Número de post publicados del autorexclude_admin: Excluir al usuario “admin” de la listashow_fullname: Mostrar nombre completo del autorhide_empty: No mostrar usuarios sin posts. Los parámetros tienen los posibles valores a 0 (falso – no activar) o 1 (verdad – activar esta opción)

Ejemplo:

1. Mostrar el nombre completo del usuario y el número de post publicados

<ul> <¿php wp_list_authors(‘show_fullname=1&optioncount=1’); ?> </ul> Julio Soler (34) Arturo Mellado (23) Marta Sánchez (20) Megan Fox (12)

El API de Wordpress

wp_list_categories

Muestra una lista de categorías como enlaces

<?php wp_list_categories(‘ argumentos ’); ?>

En este caso podemos enlazar varios argumentos añadiendo “&” entre uno y otro. Los argumentos disponibles son:

orderby: Ordenar categorías alfabéticamente (name), por ID (ID) o por número de posts (count) de cada categoría.order: Orden Ascendente (ASC) o Descendente (DESC)style: Formato de lista sin numerar (list) o sin formatoshow_count: Mostrar no de posts de cada categoría (1)hide_empty :Mostrar categorías sin posts (1)Exclude: Excluir categorías (separar ID por comas)Include: Incluir solo las categorías indicadas (ID)Number: Número de categorías a mostrar

Ejemplos:

1. Ordenar categorías 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>

DiseñoProgramaciónWeb 2.0WordPress

2. Excluir las categorías 1 y 2 y mostrar el número de post de cada una

<ul><?php wp_list_categories('exclude=1,2&show_count); ?></ul>

Diseño (3)jQuery (12)

El API de Wordpress

wp_list_pages

Lista las páginas estáticas en forma de link a su correspondiente web.

<?php wp_list_pages(‘ argumentos ’); ?>

Los argumentos disponibles son:

exclude: Excluir categorías (separar ID por comas)include: Incluir solo las categorías indicadas (ID)sort_column: Ordenar la lista de páginas de diferentes formas: Alfabeticamente (post_title), Orden de Página (menu_order), Fecha (post_date), Identificador (ID)title_li: Titulo cabecera de la lista a mostrarnumber: Establece el número de páginas a mostrardepth: Nivel de profundidad de las páginas a mostrar: 0 ( todas), 1 ( superiores)

Ejemplos:

1. Mostrar sólo las páginas 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 páginas superiores

<ul><?php wp_list_pages('number=2&depth=1&title_li=<h2>PáginasSuperiores</h2>'); ?></ul>

Páginas 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”, después de hacer login nos redirige a esa dirección.

Ejemplos:

1. Uso por defecto:

<a href="<?php echo wp_login_url(); ?>" title="Login">Login</a>

2. Login y volver a la página en la que estaba

<a href="<?php echo wp_login_url( get_permalink() ); ?>" title="Login">Login</a>

3. Login e ir a la página 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 hacía con wp_login_url.

<?php wp_logout_url( redirigir); ?>

El API de Wordpress

wp_loginout

Es una combinación 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 numérico del Post

<?php the_ID(); ?>

the_title

Muestra el Título del Post.

<?php the_title(‘antes’, ‘despues’); ?>

Los parámetros antes y despúes, indican: Texto HTML a mostrar antes del título yTexto HTML a mostrar después del título, 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, señalándolo en el parámetro texto.

Ejemplo:

1. Cuando termine de mostrarse el resumen del post aparecerá “Leer más”

<?php the_content('Leer más...'); ?>

the_excerpt

Muestra un extracto del post (las 55 primeras palabras, pero terminándolo con [...] en vez de un “Leer más”.

<?php the_excerpt(); ?>

El API de Wordpress

the_category

Muestra una lista con los links a las categorías del post.

<?php the_category(‘ separador ’); ?>

El Separador lo utilizamos para separar las distintas categorías.

Ejemplos:

1. Separar con espacios

<p>Categorías: <?php the_category(' '); ?></p>

Categorías: Diseño Themes WordPress©

2. Separar con comas

<p>Categorías: <?php the_category(', '); ?></p>

Categorías: Diseño, 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 línea en blanco

<?php the_tags(‘Etiquetas:’ , ‘,’ , ‘< br />’); ?>Etiquetas: Curso, Diseño, 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 parámetros 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 parámetros definen el texto que aparece en cada caso según 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 API de Wordpress

El Loop o bucle de WordPress es una estructura muy básica (en PHP) que permite mostrar los posts de nuestro blog accediendo para ello a la base de datos. (Lo utilizaremos en el Tema de Diseño de Themes/Apariencia) Tiene un aspecto genérico como este:

<?php //El Bucle o Loop if (have_posts()) : while(have_posts()) ; the_post(); ... endwhile; else; ... endif; ?>

Explicando rápidamente el código anterior, lo que hace es que si hay posts para mostrar (have_posts()) entonces mientras (while) los haya, ir uno a uno mostrándolo (the_post()).

Visto así puede parecer de nuevo un concepto muy abstracto, pero para los menos entendidos no preocuparos, vamos a ver una explicación paso a paso con un ejemplo mucho más gráfico utilizando las funciones del apartado anterior, indicando primero el código en PHP del Loop y debajo su explicación:

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 sólo 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 función, el ID del post con el que estamos trabajando.

4. <h2><a href=”<?php the_permalink(); ?>” rel=”bookmark” title=”Enlace Permanente a <?php the_title() ?>”><?php the_title(); ?></a></h2>

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 título 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 artículo’); ?>

Muestra el contenido de la entrada. Si el post ha sido cortado en algún momento por la etiqueta <!--more--> entonces mostrará hasta ahí para terminar con el texto “Leer el resto del artículo”.

9. <p><?php the_tags(‘Etiquetas: ‘,’, ‘, ‘<br />’); ?>

Muestra las etiquetas del post separadas por comas y con una línea en blanco al final de la lista.

10. Posteado en <?php the_category(); ?>

Indica en que categoría ha sido añadido el post. Curso en línea Avanzado de creación de sitios web con WordPress©- 15 -Tema 1. WordPress© por dentro (Core)

El Loop de Wordpress

11. <?php comments_popup_link(‘Sin comentarios’, ‘1 comentario’, ‘% comentarios’); ?></p>

Muestra el número de comentarios y el texto que aparece según 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; ?>

El Loop de Wordpress