Taller Para Aprender a Crear Themes Wordpress Desde Cero

Taller para aprender a crear Themes WordPress desde cero

En 20 clases te explicamos la base para poder explotar todas las capacidades de esta potente y popular plataforma para gestionar contenidos.

2013 - Summarg.com

Introducción Este taller pretende introducir a la creación de themes WordPress a aquellos con poca experiencia en el tema, por ende utilizaremos un nivel básico en lo referente al tema. Apuntamos a que el lector aprenda a instalar un servidor local y pasar un diseño de PSD (Photoshop) a theme WordPress compuesto por diversos formatos de archivos (PHP, JS, CSS, imágenes, etc.). Para modificaciones de nivel medio y superior, pueden chequear nuestra sección de WordPress que continúa en constante actualización. Existen varios tutoriales en la red que ofrecen crear themes en pocos pasos, en 15 minutos o sin esfuerzo. Nosotros elaboramos un temario que consiste en varias clases puesto que nuestra intención es que el lector aprenda a crear los themes entendiendo cada paso del proceso para poder tener la libertad de iniciarse luego en temas mas complejos y para lograr resultados cada vez mas interesantes. Las siguientes herramientas serán necesarias para poder seguir el tutorial: • Notepad++ (gratuito) u otro editor de código como Dreamweaver. • Photoshop u otro editor de imágenes. • XAMPP (gratuito) servidor local. • FileZilla (opcional – gratuito) o cualquier aplicación FTP para subir tu trabajo a un servidor remoto. • JS Screen Ruler (opcional – gratuito) regla para tu pantalla, ayuda a ajustar detalles. Abarcaremos todos los temas listados de a uno por clase, insertando los enlaces en cada entrega semanal. El temario está sujeto a cambios según lo veamos conveniente.

2

Indice de clases Clase 1: Introducción: Instalar WordPress en un servidor local ------------- Pag 5 • XAMPP • Generar una base de datos desde PhpMyAdmin • Contenido de pruebas para la plataforma Clase 2: Cómo encarar el diseño a partir de un archivo PSD ----------------- Pag 8 • Presentamos nuestra plantilla. • Introducción a las partes de un theme. Clase 3: ¡Comenzamos a maquetar! --------------------------------------------------- Pag 11 • Comenzamos a maquetar el index.php • Funciones básicas de header.php • El archivo de estilos CSS Clase 4: El bucle y jerarquías de templates ----------------------------------------- Pag 21 • El bucle • Funcionamiento de la jerarquía de templates • El bucle en los templates Clase 5: El bucle avanzado: Query_posts ------------------------------------------- Pag 25 • Múltiples bucles en la misma página • Uso básico de the_post_thumbnail Clase 6: El archivo header.php y los menús en WordPress ------------------- Pag 29 • Función de wp_head() • Introducción a condicionales de template • Aplicaciones de bloginfo • Menús con wp_nav_menu Clase 7: Implementar Nivo-slider sin plugins --------------------------------------- Pag 36 • Trabajar con jQuery • Insertar Nivo-Slider y adaptarlo al theme Clase 8: Sidebar y widgets ---------------------------------------------------------------- Pag 40 • Qué son y cómo funcionan los widgets? • Añadir mas sidebars • Clase Anexo: Añadir una sidebar horizontal -------------------------------- Pag 45 Clase 9: El archivo footer.php ------------------------------------------------------------ Pag 48 • Función y usos frecuentes • Añadir área de widgets • Añadir menú secundario y link al inicio

3

Clase 10: La plantilla de entrada y de comentarios ------------------------------- Pag 54 • Single.php, layout y contenidos • Los comentarios Clase 11: La plantilla de página ---------------------------------------------------------- Pag 64 • Páginas personalizadas • Páginas y subpáginas • Plantilla de páginas con query_posts Clase 12: archive.php y plantillas por categoría, fecha, autor, taxonomía, etiqueta ---------------------------------------------------------------------------------------------- Pag 72 • Extra: Mostrar favicon y tags para Facebook • Template Conditionals: Categorías por id • Template Conditionals: Autor, Etiquetas Clase 13: Página de búsquedas: search.php e integración con Google CSE ------------------------------------------------------------------------------------------------------- Pag 80 • Search.php y personalización de la plantilla • Incorporar búsquedas con Google CSE Clase 14: Paginación, breadcrumbs y página de error 404.php -------------- Pag 85 • Snippets para paginar y para colocar breadcrumbs sin usar plugin Clase 15: Framework para opciones administrativas e inserción de anuncios ------------------------------------------------------------------------------------------------------- Pag 90 • Inserción de anuncios • Inserción de campos de texto Clase 16: Custom Post Types: Portfolio y plantilla single-cpt.php --------- Pag 97 • Metabox: Los custom fields de forma fácil • La plantilla single-cpt.php Clase 17: Custom Post Types: Portfolio y plantilla de taxonomía ---------- Pag 108 • Plantilla de Taxonomía • Página personalizada para el portfolio con jQuery Isotope Clase 18: Custom Post Types: Formulario de búsqueda ---------------------- Pag 116 Clase 19: Plugins y snippets recomendados -------------------------------------- Pag 121 Clase 20: Conclusiones y descarga del taller completo ----------------------- Pag 129

4

Clase 1: Instalar WordPress en XAMPP, un servidor local WordPress es un CMS que necesita de un servidor Apache y una base de datos MySQL para funcionar. Para aprender a construir themes WordPress servirá mucho poder instalar un servidor en nuestra propia PC, ya que nos ahorraremos el tiempo que demora en subir cada archivo modificado a un hosting y podremos llevar nuestro WordPress a todas partes sin necesidad de conexión a Internet.

5

Instalador de XAMPP Con esta finalidad instalaremos XAMPP, un servidor disponible para varios sistemas operativos y cuya instalación es muy sencilla. 1. Descargamos la versión de XAMPP que corresponda a nuestro sistema operativo desde aquí: http://sourceforge.net/projects/xampp/files/. El primer link que ofrecen es el del último instalador para Windows disponible. 2. Lo ejecutamos y corremos la instalación. Al finalizar, corremos la aplicación y nos aseguramos de que estén corriendo los servicios Apache y MySQL. Ingresamos a http://localhost/ en nuestro navegador.

Es necesario saber que XAMPP es un servidor pensado en desarrolladores y no es recomendable para producción (es decir, no se recomienda utilizar para abrir un website al público desde nuestra computadora). 3. phpMyAdmin es una aplicación que nos permite gestionar todo lo referente a nuestras bases de datos, es una de las mas populares y gran parte de los hostings generalmente la ofrecen en sus paneles, así que es buena idea familiarizarse con la misma. Primero cambiaremos la contraseña, por defecto el campo viene vacío. Abrimos con nuestro Notepad++ el archivo c:/xampp/ phpmyadmin/config.inc.php, colocamos un usuario, su contraseña y cambiamos el valor de AllowNoPassword a false. $cfg[‘Servers’][$i][‘user’] = ‘root’; $cfg[‘Servers’][$i][‘password’] = ‘****’; $cfg[‘Servers’][$i][‘AllowNoPassword’] = false; Ahora ingresamos a http://localhost/phpmyadmin y nos preparamos para crear una base de datos. Le asignaremos un nombre y cambiamos el cotejamiento de la base de datos a utf8_unicode_ci (es el último select de la lista).

4. Nuestra base de datos será ‘wordpress’, el usuario ‘root’ y la contraseña la que hayamos definido en el config.inc.php arriba mencionado. Con esto completado ya podemos descargar la última versión de WordPress desde el sitio oficial y descomprimirlo dentro del directorio c:/xampp/ htdocs/. Abrimos el archivo wp-config-sample.php y editamos los siguientes datos. /** El nombre de tu base de datos de WordPress */ define(‘DB_NAME’, ‘wordpress’); /** Tu nombre de usuario de MySQL */ define(‘DB_USER’, ‘root’); /** Tu contraseña de MySQL */ define(‘DB_PASSWORD’, ‘tucontraseña’); Guardamos el archivo con el nombre wp-config.php e ingresamos a http://localhost en nuestro navegador, nos llevará directo a la pantalla de instalación de WordPress, en donde completamos

6

con los datos requeridos y ya estaremos listos.

7

5. Para completar nuestra clase de hoy cargaremos algún contenido de pruebas en nuestro WordPress, de modo de que tengamos algunas entradas, categorías y páginas con diferentes formatos de texto para visualizar cuando trabajemos cada plantilla. En esta nota ya habíamos hablado de este recurso que pueden descargar directamente de aquí https://wpcom-themes.svn.automattic. com/demo/test-data.2011-01-17.xml En nuestro panel de administrador nos dirigimos a herramientas > importar > wordpress. Subimos el archivo y aceptamos. Con esto ya tendremos nuestro WordPress instalado en un servidor local y podremos empezar a trabajar en él en nuestra próxima clase.

Activar permalinks en XAMPP

La activación de los permalinks de WordPress en nuestro servidor local XAMPP, WAMPP o AppServ puede resultar fundamental para trabajar con comodidad. Por lo general bastará con activar los Permalinks desde Ajustes > Enlaces permanentes y crear el .htaccess con el contenido que WordPress nos facilita. En algunos casos el módulo rewrite no está activado por lo que tendremos que buscar el archivo httpd.conf dentro de apache/conf/. La carpeta apache puede llamarse apache2 dependiendo del software que utilicemos. Utilizamos un editor como Notepad++ y buscamos la siguiente línea: #LoadModule rewrite_module modules/mod_rewrite.so Removemos el signo #. Luego buscamos las siguientes líneas: AllowOverride All## Controls who can get stuff from this server.#Order allow,denyAllow from all Y nos aseguramos de que AllowOverride All no tenga numeral. Guardamos y reiniciamos XAMPP.

Clase 2: Cómo encarar el diseño a partir de un archivo PSD Bienvenidos a la segunda clase de Taller para crear un theme WordPress desde cero. En esta clase veremos como tomar un template en formato PSD (Adobe Photoshop) y convertirlo en un theme WordPress. Utilizaremos un template que hemos creado especialmente para este taller, lo bautizamos ThemeTaller. Está dividido en capas y agrupadas por secciones con un nombre descriptivo, pueden descargarlo y modificarlo libremente. Este template estará sujeto a modificaciones a lo largo del taller según lo veamos conveniente. Les mostramos y entregamos el home de nuestro diseño. Descargar ThemeTaller: ThemeTaller

8

El set de íconos sociales es Socialis21 y pueden encontrar el link de descarga aquí: Socialis21 En el pie de página pueden encontrar la paleta de colores utilizada para el theme y la compartimos para que puedan crear nuevas secciones dentro de la plantilla haciendo uso de la misma. Antes de empezar a maquetar conozcamos un poco lo que vamos a hacer. Los themes WordPress utilizan varios archivos a la vez para formar una página, que son llamados por funciones específicas de la plataforma para facilitar las cosas. Son similares a la función include de PHP y nos evitan tener que escribir la misma porción de código en varias plantillas. Por ejemplo, la sección del encabezado del sitio siempre es igual, llevará un logo y una botonera que no deseamos que cambie. En un sitio construido íntegramente en HTML deberíamos copiar este código en cada una de las páginas. Pero en WordPress bastará con escribir todo el código del encabezado dentro de header.php y luego solicitar el encabezado en cada sección que lo necesite-

mos. Lo mismo cuenta para la barra lateral (sidebar.php) y el pié de página (footer.php). De ese modo cuando se lista el index de un sitio WordPress, éste estará compuesto de los archivos header.php, index.php, sidebar.php y footer.php. Para el caso de listar una página los archivos serán: header.php, page.php, sidebar.php y footer.php. ¿Qué cambió? El inicio utiliza index. php para mostrar su contenido principal y una página utiliza el archivo page.php. Para “solicitar” desde el index.php los archivos en cuestión utilizaremos las funciones: get_header(); get_sidebar(); get_footer(); Entonces dividiremos el home (index.php) en 4 archivos que los marcamos a la derecha en la siguiente imagen (en el zip de descarga del theme encontrarán la imagen en tamaño grande).

9

A la izquierda indicamos los elementos que consideramos necesario nombrar, con sus respectivos atributos class e id. De este modo el archivo header.php contendrá, entre cosas, el elemento #header, que dentro de sí contendrá el un #menu-top, el #logo y el #menu. El contenido de la página (el fondo blanco con bordes redondeados) se llamará #content y el ancho del diseño será fijo (960px). Todos los colores y bordes pueden definirse directamente desde el CSS, aunque si quieren ser fieles al diseño sólo deberán recortar un rectángulo pequeño con el fondo de la barra del menú y el fondo gris de los productos destacados:

Para recortar las partes del theme en Photoshop, deberán utilizar la herramienta máscara y seleccionar la sección. En nuestro caso seleccionamos el logo. Luego seleccionan image > crop y guardan el resultado utilizando la opción save for web & devices (guardar optimizado para la web) como logo.png. También necesitarán repetir el proceso con los íconos sociales.

10 La clase que viene comenzamos a maquetar esta página. Descarguen el archivo PSD y empiecen a ver como está compuesto.

Clase 3: ¡Comenzamos a maquetar! En la clase anterior estuvimos observando como se compone cada plantilla de WordPress, así que en vez de maquetar nuestra página de inicio en una sola página como si fuera un HTML común, arrancaremos utilizando 4 archivos PHP y la plantilla de estilos CSS por separado. Dentro de nuestro directorio /wp-content/themes/, creamos un directorio llamado /themetaller/. Dentro de /themetaller/ colocaremos un subdirectorio /scripts/, que en principio estará vacío, y otro llamado /images/ en donde colocamos las imágenes recortadas en la clase anterior.

11

Creamos los siguientes archivos en nuestro directorio /themetaller/: index.php, footer.php, header. php, sidebar.php y style.css.

Y respetando la división de establecimos la clase pasada, comenzamos a crear el código del header.php. Vamos a agregar en el encabezado, entre etiquetas el siguiente código: ; charset=” /> | | Archivo por autor | | | Archivo por Categoria | | Archivo por Mes | | Resultados | Archivo por Tag | ” /> Quiere saber mas? ”Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...” Quiere saber mas?

”Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...” Quiere saber mas? ”Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...” Un post que se destaca... Sed pharetra risus eu nisi molestie aliquet. Donec ipsum eros, sodales ut convallis ac, posuere vitae orci. Leer más Un post que se destaca... Sed pharetra risus eu nisi molestie aliquet. Donec ipsum eros, sodales ut convallis ac, posuere vitae orci. Leer más El código de sidebar.php: Ultimas noticias Una noticia en la Una noticia en la Una noticia en la Una noticia en la

Y el de footer.php, que llevará la función wp_footer(), similar a wp_header(). Hasta aquí el resultado será una página con datos sin nada de estilo. Vale aclarar que todos los que abrimos, llevan su correspondiente de cierre con un comentario: . Esta práctica nos ayuda a tener mayor control sobre nuestras etiquetas, puesto que un sitio web puede volverse realmente complejo a medida que añadimos elementos. Cuantos mas comentarios tengamos, mas facil será para nosotros luego encontrar errores cuando surjan. Además recomendamos en todo momento hacer uso de la indentación, separando los bloques de código según corresponda. Si colocamos themeTaller como el theme por defecto de nuestro WordPress en localhost ya deberíamos ver todos los datos e imágenes, uno debajo del otro. Para que realmente tome forma tenemos que añadir el estilo, al cual debemos colocarle los datos del theme y un reset de estilo. /*Theme Name: themeTaller Theme URI: www.summarg.com Author: Nekko Description: themeTaller */ /* RESET */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } :focus { outline: 0; } body { line-height: 1; color: black; background: white;

15

} ol, ul { list-style: none; } table { border-collapse: separate; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; } blockquote:before, blockquote:after, q:before, q:after { content: “”; } blockquote, q { quotes: “” “”; } Ahora si, procedemos a colocar el color de fondo de la página , establecer las dimensiones, el color de fondo y los bordes redondeados de content-wrapper. Para este punto indicamos que nos ayudamos con aplicaciones online como css3generator.com para generar el código CSS3 correspondiente a cada motor de navegador. body { background-color: #2d435a; font-family: arial, sans serif; font-size:12px; } #content-wrapper { width:960px; margin: 10px auto; background-color:white; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; overflow:hidden; display:block; } Escribimos el código para los elementos del header: #header { padding: 5px 20px; } #logo img { float:left; width: 261px;

16

height: 53px; padding: 10px 0; } ul#menu-top { height:25px; width:220px; margin-top:0; float:right; } ul#menu-top li a { list-style-type:none; text-decoration:none; float:left; color: #7ec5ff; font-weight:bold; padding: 7px 10px; } ul#menu-top li a:hover { text-decoration:none; background-color: #7ec5ff; color:#fff; font-weight:bold; padding: 7px 10px; } ul#menu { float:left; width: 920px; margin: 0 auto; height:30px; background-image: url(images/menu_bg.png); background-repeat: repeat-x; background-color: #7ec5ff; } ul#menu li a{ float:left; list-style-type:none; text-decoration:none; color:#fff; font-weight:bold; padding: 10px 20px; border-left: 1px solid white; } ul#menu li a:hover { text-decoration:none; background-color: 8ed6ff; color: #f4f4f4; padding: 10px 20px; } Vayan visualizando el sitio para confirmar que cada paso esté dado en la dirección correcta.

17

Ahora procedemos a dar estilo al espacio del slider, los bloques de productos-servicios destacados y de las noticias. #nivoslider { float:left; margin: 10px 20px; width: 920px; height: 310px; } #featured { float:left; width: 918px; height: 100px; margin: 0 20px; border: 1px solid #7b7b7b; border-right:none; background-image: url(images/destacado_bg.png); background-repeat: repeat-x; background-color: #dedddd; } .item { width: 295px; padding: 5px; height: 90px; overflow:hidden; border-right: 1px solid #7b7b7b; float:left; } .item h3 { font-family: arial, sans serif; font-weight:bold; font-size: 16px; line-height:30px; color: #7b7b7b; text-align:center; } .item p { font-family: arial, sans serif; font-weight:bold; font-size: 12px; line-height:20px; color: #7b7b7b; text-align:center; } Aquí hacemos un pequeño alto para introducir una aclaración. Si ustedes visualizan el theme hasta aquí, verán que la tipografía ya no se ve igual que en nuestro PSD, en donde utilizamos la fuente Myriad Pro. Vale aclarar que en clases futuras podemos introducir fuentes mucho más elegantes utilizando cufón o bien utilizar el servicio de fuentes de Google y @font-face. Seguimos

18

con el estilo de la sección de noticias. .news { width: 293px; padding: 20px 0 10px 20px; float:left; } .news h2 { font-family: arial, sans serif; font-size: 22px; margin-top:10px; color: #7b7b7b; } .news p { font-family: arial, sans serif; font-size: 12px; line-height:18px; color: #7b7b7b; } Pasamos a dar estilo a los elementos de la sidebar. #sidebar { width: 293px; padding: 20px 20px 10px 0px; float:right; } #sidebar h3 { font-family: arial, sans serif; font-size: 18px; margin-bottom:10px; color: #7b7b7b; } #sidebar ul { list-style-type:none; } #sidebar ul li { padding: 5px 10px; border-bottom: 1px solid #7b7b7b; color: #7b7b7b; } Y finalmente el estilo del footer. #footer { float:left; background: #e6e6e6;

19

width: 920px; padding: 20px; height:100px; } ul.social { list-style-type:none; float:right; width:150px; } ul.social li{ float:left; } Para ir viendo la evolución del trabajo instalamos un WordPress en SummArg en www.summarg. com/demos/themetaller. Les dejamos los archivos del ejercicio de hoy aquí ThemeTaller clase 3. Sientanse libres de plantear cualquier duda o comentarnos cómo lo harían ustedes tanto aquí como en nuestro foro. Nos vemos en la próxima clase!

20

Clase 4: El bucle y jerarquía de plantillas El bucle (en inglés The Loop) es el proceso de efectuar búsquedas de determinados parámetros a través de ciertas condiciones. El bucle mas simple que existe en WordPress es el siguiente: Lo que hace es verificar que en la sección en donde se ejecuta existan entradas. En caso de ser positivo entonces se ejecuta la sentencia de PHP while, que se encarga de recorrer la base de datos en busca de nuestras entradas mientras have_posts() sea verdadero. Cuando have_posts() ya no encuentre entradas en la sección, termina el bucle. Cuando mencionamos “la sección”, nos referimos a si estamos en la página inicial de nuestro WordPress, una categoría, una búsqueda por fechas, por autor, o tags. Ahora veamos este mismo bucle en su forma completa. Código que se ejecuta mientras have_posts() sea verdadero. Código a ejecutarse para el caso de que have_posts() sea falso, es decir que no contenga entradas. Fin del bucle ¿Qué código podría ejecutarse mientras have_posts() sea verdadero? En el caso de que existan entradas, lo que podría interesarnos es, por ejemplo, obtener el título de la entrada con link a la misma, el contenido, la fecha de publicación y el autor. Para ello utilizamos las siguientes funciones: ”> Cada una de estas funciones posee su documentación en el Codex de WordPress.org, un documento fundamental para aprender a utilizar la enorme cantidad de funciones de la plataforma con sus respectivos parámetros (opciones). El bucle completo quedaría de la siguiente manera: ”> Lo sentimos, no se han encontrado entradas. La cantidad de entradas por página se pueden configurar desde Escritorio > Opciones > Lectura. El bucle expuesto si es ejecutado en la plantilla de inicio de nuestro sitio, arrojará la información indicada (título, link, contenido, fecha y autor) de las últimas 10 entradas, de cualquier categoría, una debajo de la otra y de la mas reciente a la mas antigua. Este mismo bucle en otras plantillas, arrojará diferentes resultados. Por ejemplo, para el caso de

21

ser ejecutado el bucle en una plantilla de categoría, buscará las últimas entradas de esa categoría específica. El mismo caso se dará en la plantilla de archivo por fecha (date), archivo por autor (author), etc. Un dato interesante es que WordPress tiene un sistema de jerarquía de plantillas, en donde primero busca una plantilla específica y si no la encuentra cae en buscar una plantilla mas general para esa misma sección. En caso de no existir una plantilla determinada, finalmente utilizará la plantilla index.php para mostrar el resultado del bucle de esa sección.

22

Este esquema es una versión muy simplificada del complejo sistema de plantillas que posee WordPress 3.0 y que pueden visualizar aquí. Para poner en práctica lo visto hoy, insertaremos en nuestro ThemeTaller un bucle sencillo en la plantilla archive.php y veremos como reacciona cuando solicitamos diferentes categorías, archivos por fecha, por autor y tags. Mas adelante nos ocuparemos de personalizar algunas categorías en particular, hacer dos o tres templates diferentes para páginas y varias cuestiones mas. Para poder probar la efectividad del ejercicio tenemos que tener contenidos cargados en nuestro WordPress (en la primer clase vimos como importar algunos contenidos de prueba). Creamos el archivo archive.php y dentro colocaremos: ”> | No encontrado Lo sentimos, intente utilizar nuestro formulario de búsquedas.

En este código hemos cambiado the_content() que lista el contenido completo de una página, por the_excerpt(), que trae por defecto las primeras 55 palabras sin formato de la entrada. En el CSS añadimos las siguientes líneas: #wrapper {margin-left:20px;margin-top:20px;float:left;width:606px;} .dos-tercios {float:left;margin-bottom:20px;padding: 5px;width:596px;} .listado {border-bottom: 1px solid #7b7b7b;} Esta plantilla servirá para ver: categorías, entradas por tags, entradas por autor, entradas por fecha, entradas por taxonomía y por post type. Podemos probar las siguientes URLs en nuestro servidor de pruebas (nosotros colocamos las URLs a nuestro WP de pruebas): http://www.summarg.com/demos/themetaller/?tag=post-formats http://www.summarg.com/demos/themetaller/?author=3 http://www.summarg.com/demos/themetaller/?cat=45 El mismo contenido sirve para los archivos single.php y page.php. Probemos colocar el mismo contenido de archive.php en page.php y en single.php cambiando the_excerpt() por the_content() y solicitemos una página. Como resultado tendremos una página con su respectivo título, contenido completo, fecha y autor. http://www.summarg.com/demos/themetaller/?page_id=501 Y para avanzar un poco mas con el estilo del theme, podemos añadir valores para las propiedades básicas que ubicaremos luego de body. Estas serán los headings (h1 a h6), p, a, cite, pre, ul, ol, li, table, etc. a, a:visited {color:#7ec5ff;text-decoration:underline;} a:hover {text-decoration: none;color:#8ed6ff;} small {font: normal 10px “arial”, Sans-serif;} img {border: none;margin: 3px;} p {font: normal 12px “arial”, Sans-serif;line-height:18px;padding: 0px 0px 15px 0px;margin: 2px 0;} table, td, tr {font: normal 12px “arial”, Sans-serif;line-height:18px;} td {padding:5px;} th {font: bold 13px “arial”, Sans-serif;line-height:18px;padding: 5px;} h1, h2, h3, h4, h5, h6 {color:#7ec5ff;padding:0px;} h1 {font: normal 26px/30px “arial”, Sans-serif;margin:0 0 5px 0;letterspacing:-1px;} h2 {font:normal 22px/24px “arial”, Sans-serif;letter-spacing:1px;margin:0 0 5px 0;} h3 {font:normal 20px/22px “arial”, Sans-serif;margin:0 0 10px 0;} h4 {font:bold 16px/24px “arial”, Sans-serif;margin:0;} h5 {font:bold 14px/22px “arial”, Sans-serif;margin:0;} h6 {font:normal 12px “arial”, Sans-serif;margin:0;} h1 a, h1 a:visited, h2 a, h2 a:visited, h3 a, h3 a:visited {color: #7ec5ff;text-decoration: none;} h1 a:hover, h2 a:hover, h3 a:hover {color: #7ec5ff;text-decoration: none;} h3 a, h3 a:visited, h4 a, h4 a:visited {color: #417394;textdecoration:none;}

23

form {margin:0px;padding:0px;} blockquote {padding: 10px 10px; margin:10px 0px 10px 0px; liststyle:none; border:1px solid #7ec5ff; background-color:#8ed6ff;font: normal 120%/100% Arial, sans serif; } ul{font: normal 12px “arial”, Sans-serif;list-style:circle;padding:0px; margin:0px;} ol{font: normal 12px “arial”, Sans-serif;list-styletype:decimal;padding:0px; margin:0px 0px 10px 10px; } li{margin: 0px 0px 0px 10px; padding: 0px;} table, tr, td {font-size:12px;} strong {font-weight:bold;}cite,em,i {font-style: italic;border: none;} pre{font-family:”Courier New”, Courier, monospace;font-size:12px;lineheight:15px;} En la próxima clase veremos como hacer consultas avanzadas con query_posts() para poder llenar los bloques de información del index.php que ya llevamos empezado. Ver el demo de esta clase | Descargar el theme con el ejercicio de esta clase 24

Clase 5: El bucle avanzado: query_posts. Una de las formas mas fáciles de armar un bucle que cumpla con determinadas condiciones es utilizando query_posts. Una consulta con esta función altera el bucle a continuación y puede utilizarse para múltiples bucles si utilizamos correctamente wp_reset_query(). En nuestra clase de hoy vamos a insertar dentro de themeTaller tres bucles nuevos: • Uno para invocar el contenido de tres entradas de la categoría “Productos destacados” y colocarlos debajo de nuestro slider. • Buscaremos dos entradas de la sección noticias para colocar debajo de los productos destacados. • En la barra lateral colocaremos las últimas cuatro entradas de la categoría blog. • • • • • • •

Tomamos la primer sección en donde colocaremos los productos destacados y encontramos este código HTML según lo que trabajamos en la Clase 3:

25

Quiere saber mas? ”Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...” Quiere saber mas? ”Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...” Quiere saber mas? ”Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...” Creamos la categoría “Producto Destacado” e insertamos tres entradas con título y un poco de texto (sólo unas líneas). Ahora reemplazamos por el bucle con query_posts, en donde los parámetros serán seleccionar tres posts (posts_per_page=3) de la categoría “Producto Destacado” (category_name=Producto Destacado): Guardamos y probamos que nuestro theme nos muestre, efectivamente, nuestras tres entradas. Ahora procedemos a elaborar el segundo bucle que será un poco mas complicado debido a que tiene imágenes con un tamaño específico. Para nuestras imágenes vamos a utilizar la función the_post_thumbnail disponible a partir de WP 3+ y que nos ofrece la posibilidad de gestionar miniaturas de tamaños personalizados sin necesidad de plugins. Para activar la función deberemos indicarlo en nuestro archivo functions.php, que hasta ahora no vimos, así que creamos un archivo llamado functions.php y dentro colocamos el siguiente contenido: Con add_image_size indicamos a la plataforma que necesitamos un tamaño personalizado al que llamaremos homepage-thumb y que deseamos que mida 290px de ancho por 130 de alto. Además la imagen será recortada y no redimensionada (el valor true final activa el crop, o re-

26

corte), de este modo evitamos que algunas imágenes se deformen. Ahora procedemos a crear la categoría “Noticias” y subimos dos entradas las cuales tendrán una imagen que definiremos como destacada. En nuestro archivo index.php buscamos el siguiente código: Un post que se destaca... Sed pharetra risus eu nisi molestie aliquet. Donec ipsum eros, sodales ut convallis ac, posuere vitae orci. Leer más Un post que se destaca... Sed pharetra risus eu nisi molestie aliquet. Donec ipsum eros, sodales ut convallis ac, posuere vitae orci. Leer más Y lo reemplazaremos por nuestro segundo bucle, el cual modificaremos para que busque sólo dos entradas en la categoría “Noticias”. Observen que en el lugar de la imagen ahora colocamos una llamada a the_post_thumbnail, específicamente a la miniatura “homepage-thumb”, cuyo valor definimos en el functions.php. Si ustedes desean cambiar el valor de las miniaturas una vez generadas, pueden hacerlo utilizando el plugin Regenerate Thumbnails, ya que una vez que WordPress genera las miniaturas cuando las subimos, no vuelve a regenerarlas al cambiar los valores mediante el functions.php. En nuestro segundo bucle usamos el título (the_title) envuelto en la etiqueta con un href que dentro contiene la función get_permalink. El resultado es el título de la entrada con link a la misma. Y en vez de the_content (que nos trae el contenido entero de una nota, con el formato del texto incluido), utilizamos the_excerpt que nos traerá las primeras palabras de la entrada sin formato. Los links que colocamos en cada función los llevarán directamente al codex de WordPress. org, herramienta fundamental para cualquier desarrollador que quiera avanzar en la creación de themes o plugins para esta plataforma. Finalmente pasamos a nuestro tercer bucle, ubicado en la barra lateral. Creamos la categoría “Blog” y generamos algún contenido (o reciclamos algo del contenido de pruebas que metimos

27

cambiando de nombre “Uncategorized” por “Blog”). Abrimos el archivo sidebar.php que contiene el siguiente HTML. Ultimas noticias Una noticia en la sidebar Verán que en el caso de los títulos que llevan links ahora los vemos en color celeste y con subrayado debajo. Eso se debe a que nunca definimos desde el style.css como debían verse, así que pasaremos a hacerlo. .news h2 a {color: #7b7b7b;text-decoration:none;} #sidebar ul li a{text-decoration:none;color: #7b7b7b;} Verificamos que se vea todo correctamente en nuestro servidor de pruebas y listo. http://www.summarg.com/demos/themetaller/ themeTaller clase 5

28

Clase 6: el archivo header.php y los menús en WordPress En la clase 3 hablamos un poco sobre el código básico que debe ir en el archivo header.php, el cual incluye DOCTYPE, HTML, metas, charset, lenguaje, etc. Además se vinculan las plantillas de estilo y cualquier script que necesitemos cargar entre etiquetas . Toda página necesita tener un título para ser identificada. Vamos a colocar el nuestro utilizando la función bloginfo(). Dicha función es de uso frecuente en la construcción de themes WordPress y los parámetros mas utilizados (entre otros) son: bloginfo(‘name’) = Devuelve el nombre del blog (se modifica desde Ajustes > General). bloginfo(‘description’) = Devuelve la descripción del blog (se modifica desde Ajustes > General). bloginfo(‘site_url’) = Devuelve el directorio en donde WP está instalado. bloginfo(‘stylesheet_url’) = Devuelve la ruta a la plantilla de estilos. bloginfo(‘template_url’) = También puede utilizarse ‘template_directory’, devuelve la ruta al directorio del theme. Siguiendo con el título, si bien ya estuvimos viendo condicionales, hoy necesitamos profundizar un poquito mas en el tema. En PHP la estructra de un condicional es de la siguiente manera: Entonces con esto presente pasaremos a elaborar un código utilizando conditional tags, que son etiquetas cuya finalidad es ayudarnos a construir condicionales según sección que se está mostrando. Nuestro condicional debe decir: “Si estamos en el inicio de página (is_home) entonces que muestre el nombre del blog, imprimimos ‘ | ‘ y luego la descripción del blog. Si estamos en una categoría (is_category), entonces imprimir el título de la misma, imprimimos ‘ | ‘ y el nombre del blog. Si estamos en una entrada (is_single) o en una página (is_page), entonces mostrar el título de la entrada, imprimimos ‘ | ‘ y el nombre del blog. Si ninguna condición es verdadera, entonces imprimir el título que corresponda (utilizaremos wp_ title()).” Otra función que debemos colocar en nuestro header.php es wp_head(), un hook (gancho) que debe ir entre etiquetas y que es utilizado por WordPress para colocar links a recursos y código en general que necesita la plataforma o cualquiera de los plugins que nosotros vayamos instalando. Dicha función tiene su equivalente para el pié de página, llamado wp_foot-

29

er(), y son de caracter obligatorios si pretendemos el correcto funcionamiento de nuestra plataforma. Se coloca de la siguiente manera: Aprovechando esta oportunidad, recordemos que en la Clase 3 colocamos la ruta a nuestro logo, en el header.php, de la siguiente manera: Ahora que tenemos conocimiento de como funciona bloginfo(), podemos aprovechar y ponerlo en práctica. Reemplazaremos la parte de la ruta que corresponde al theme por la función: Estos parámetros, y muchos otros que podemos utilizar, están explicados en el codex el cual les recomendamos aprender a utilizar por ser la fuente principal de aprendizaje para cualquier desarrollador de themes y plugins. Container nos permite definir el tipo de contenedor en que se coloca al menu, permite elegir entre div, nav y false, el cual deshabilita la función (fue nuestra elección. Items_wrap nos permite indicarle al menú las características que tendrá la etiqueta que envuelva al menú y Theme_location nos permite seleccionar el menú que colocaremos en esta posición (definido en el functions.php). Ahora haremos lo mismo con el menú principal. Dentro de uno de los items del menú, en nuestro caso de Blog, añadiremos algunas categorías o páginas hijas.

32

Para que funcione correctamente, utilizaremos un poco de jQuery, librería que podemos descargar desde jQuery.com. En el archivo functions.php, hacia el final, añadimos: /* Mi jQuery */ function my_init_method() { if (!is_admin()) { wp_deregister_script( ‘jquery’ ); wp_register_script( ‘jquery’, ‘/wp-content/themes/themetaller/scripts/ jquery.min.js’); wp_enqueue_script( ‘jquery’ ); } } add_action(‘init’, ‘my_init_method’); Colocaremos el archivo jquery.min.js en nuestra carpeta scripts, y luego añadimos dentro de las etiquetas las siguientes líneas: $(document).ready(function() { $(“#menu ul”).css({display: “none”}); $(“#menu li”).hover(function(){ $(this).find(‘ul:first’).css({visibility: “visible”,display: “none”}). show(300); },function(){ $(this).find(‘ul:first’).css({visibility: “hidden”}); }); }); Y en nuestro CSS eliminamos las líneas antiguas que hacían referencia a #menu y las reemplazamos por estas: /* Menu desplegable */ #menu { float:left; width: 940px; margin: 0; padding:0px; height:35px; background-image:url(images/menu_bg.png); background-repeat: repeat-x; background-color: #7ec5ff; position:relative; z-index:300; list-style-type:none; } #menu ul { list-style-type:none; } #menu a { float:left; display:block; text-decoration:none;

33

color:#fff; font-weight:bold; padding: 10px 25px 10px 10px; border-right: 1px solid white; } #menu a:hover { color:#fff; background: #8ed6ff; } #menu li { float:left; position:relative; } #menu ul { position:absolute; display:none; width:160px; top: 35px; left: -10px; } #menu ul a { float:left; background: #7ec5ff; border: 1px solid white; border-top:none; } #menu li ul{ border-top: 1px solid white; } #menu li ul a { width:150px; height:auto; } #menu ul ul { top:auto; } #menu li ul ul { margin:0px 0 0 10px; } #menu li:hover ul ul, #menu li:hover ul ul ul, #menu li:hover ul ul ul ul { display:none; } #menu li:hover ul, #menu li li:hover ul, #menu li li li:hover ul, #menu li li li li:hover ul { display:block; } Ahora el nuevo menú debería estar funcional. Clase 6

34

35

Clase 7: Insertar un slider sin utilizar plugins En esta clase aprenderemos a insertar un slider si la necesidad de echar mano a ningún plugin. Consideramos que esta lección conforma un excelente punto de partida para aprender a utilizar los cientos de recursos jQuery realmente asombrosos que circulan por la web. Antes que nada vale mencionar que jQuery es un framework (una librería) para facilitar animaciones y funciones del lado del cliente. Es totalmente gratuito y ya viene en el core de la mayoría de los CMS. Generalmente agregando un plugin (un slider, un news ticker o un menú) insertamos un mundo nuevo de funciones con muy poco trabajo. Los plugins de jQuery no se instalan desde el apartado Plugins de WordPress, sino que bastará con colocar el o los archivos en nuestro theme y linkearlos desde el header.php, footer.php o functions.php. Tenemos dos versiones para descargar en jQuery.com: una llamada de producción y la otra de desarrollo. En nuestro caso no estamos interesados en desarrollar nada, simplemente utilizaremos recursos ya fabricados, así que descargamos la versión de producción que está minimizada y comprimida. El archivo jquery-1.7.2.min.js (actual) posiblemente se abra en nuestro navegador y nosotros procederemos a guardarlo en una carpeta llamada /scripts/ dentro de nuestro theme. En la clase anterior utilizamos jQuery para el menú, así que en nuestro proyecto ya está almacenado. También indicamos a WordPress que deseamos utilizar nuestro archivo jQuery desde el functions.php. /* Mi jQuery */ function my_init_method() { if (!is_admin()) { wp_deregister_script( ‘jquery’ ); wp_register_script( ‘jquery’, ‘/wp-content/themes/themetaller/scripts/ jquery-1.7.2.min.js’); wp_enqueue_script( ‘jquery’ ); } } add_action(‘init’, ‘my_init_method’); Notarán que my_init_method comienza con un condicional en donde especifica que si no estamos en el área de administrador, entonces carga nuestro jQuery. Esto se debe a que WordPress ya trae la librería y, como dijimos anteriormente, y lo utiliza para el Escritorio. Si nosotros linkeasemos la librería desde el header.php del theme sin ningún miramiento ni condicionales, posiblemente algunas secciones del Escritorio dejen de funcionar con normalidad, ya que cargaría dos versiones de jQuery y ésto produciría errores.

Nivo-Slider, uno de los sliders jQuery mas populares

36

En el sitio oficial de Nivo-Slider promocionan la venta de un plugin para WordPress que es por demás fantástico. También en el repositorio oficial vimos algún que otro plugin para insertar el slider en WordPress bastante bien logrado. Pero nosotros no tomaremos esos caminos, sino que nos ensuciaremos un poco para entender como se aplican estos fantásticos recursos a nuestro theme. Primero descargamos Nivo Slider desde su sitio (desde aquí, selecciona la primer opción llamada jQuery Plugin) y copiaremos la carpeta themes, el archivo jquery.nivo.slider.pack.js y nivo-slider. css a nuestra carpeta /scripts/.

37

Y ahora linkeamos nivo-slider.css y el estilo themes/default.css desde nuestro header.php utilizando parte de la ruta hasta nuestro theme con bloginfo(), como vimos en clases pasadas. / scripts/themes/default/default.css” type=”text/css” media=”screen” /> Y en el footer.php vamos a linkear el archivo JS, justo antes del cierre de la etiqueta . También vamos a dejar preparado el script indicándole que queremos que se active en el con id #nivoslider.



39 Finalmente podemos observar que el theme por defecto de Nivo Slider nos agrega debajo un control para navegar, lo eliminaremos abriendo su archivo de estilos ubicado dentro de nuestro theme/scripts/theme/default/default.css, buscamos la línea 30 y le añadimos un “display:none” para ocultarlo. .theme-default .nivo-controlNav { display:none; position:absolute; left:50%; bottom:-42px; margin-left:-40px; } Esperamos que les haya resultado fácil de entender esta clase y les recomendamos que utilicen el complemento Firebug (para Firefox) para ejercitar con otros scripts similares a Nivo Slider para afianzar conocimientos. Clase 7

Clase 8: Sidebars y widgets Hoy vamos a trabajar con el archivo sidebar.php y con áreas de widgets. Los widgets son pequeños módulos que se pueden añadir en sectores de nuestra elección y que tienen múltiples funciones. Por defecto WordPress nos ofrece un widget con un calendario, uno para mostrar páginas creadas, otro para categorías, menús, texto plano u HTML, links del blogroll, suscripción a feeds, campo de búsqueda, links administrativos, etc. Nosotros podemos añadir muchos mas mediante plugins.

40

Los widgets pueden agregarse a cualquier plantilla de nuestra web y combinado con condicionales, los cuales vimos en la Clase 6, nos dan un sinfín de posibilidades para nuestro sitio. Para añadir un widget hace falta primero declararlo en nuestro functions.php, y luego insertarlo en la plantilla deseada. Vamos a generar un área de widgets básico para la sidebar. register_sidebar(array( ‘name’ => ‘Sidebar’, ‘before_widget’ => ‘’, ‘after_widget’ => ‘’, ‘before_title’ => ‘’, ‘after_title’ => ‘’, )); El primer parámetro, name, asigna un nombre a nuestro widget que figurará luego en nuestro escritorio bajo “Widgets” para poder identiticarlo. before_widget y after_widget añade etiquetas al inicio y al final del mismo, en nuestro caso abrimos un div con class widget y lo cerramos. Finalmente repetimos la misma operación pero para el título con before_title y after_title. La función register_sidebar también admite los parámetros id (para colocar un ID al widget) y description (descripción). Guardamos el archivo functions.php con estas líneas que acabamos de explicar y vemos si aparece el nuevo área de widgets en Apariencia > Widgets. Hoy vamos a generar tres áreas de widgets para utilizar en tres secciones diferentes: una sidebar en el inicio, otra para la plantilla de categorías y otra para una página. Las haremos idénticas entre si pero con diferentes nombres.

register_sidebar(array( ‘name’ => ‘Sidebar Home’, ‘before_widget’ => ‘’, ‘after_widget’ => ‘’, ‘before_title’ => ‘’, ‘after_title’ => ‘’, )); register_sidebar(array( ‘name’ => ‘Sidebar Categoria’, ‘before_widget’ => ‘’, ‘after_widget’ => ‘’, ‘before_title’ => ‘’, ‘after_title’ => ‘’, )); register_sidebar(array( ‘name’ => ‘Sidebar Pagina’, ‘before_widget’ => ‘’, ‘after_widget’ => ‘’, ‘before_title’ => ‘’, ‘after_title’ => ‘’, )); Hasta ahora venimos trabajando con una sola sidebar y vamos a explotar su uso todo lo que podamos. Abrimos el archivo y colocamos luego del listado de entradas que colocamos y antes del de cierre del div #sidebar: Con eso sólo estamos insertando los widgets que cargemos dentro de la sección “Sidebar Home”, pero faltaría indicarle que queremos que se cargue dichos widgets si y sólo si estamos visualizando el home. Echamos mano a los Condicional Tags, como ya mencionamos. Entonces reemplazamos el código por este nuevo. Probamos añadir un campo de búsqueda o lo que sea para ver si se visualiza en el home y comprobamos que no se visualice en la vista por categorías o en una página.

41

Perfecto! Ahora generamos el código con sus respectivos condicionales para el área de widgets a mostrarse en el caso de estar en una categoría (is_category) y en una página (is_page). Guardamos, activamos diferentes widgets en cada área y confirmamos que cada sidebar muestre lo que nosotros queremos. De acuerdo a lo que escribimos en nuestro functions.php el código HTML de cada widget quedó de la siguiente manera: Busqueda Aplicamos un estilo diferente al widget para diferenciarlo de otros contenidos añadiendo un margen inferior, color de fondo, color de borde, borde redondeado y padding. .widget { margin-bottom: 20px; -webkit-border-radius: 5px; border-radius: 5px; background: #f4f4f4; border: 1px solid #ececec; padding: 5px; }

Doble sidebar

A nuestro template de página le vamos a agregar una segunda sidebar, sólo por el gusto de ver como funciona el asunto. Abrimos el archivo page.php y observamos que en la anteúltima línea se utiliza una función para incluir la sidebar allí. Duplicaremos dicha función pero esta vez insertando entre comillas simples el nombre de nuestra nueva sidebar, que en este caso se llamará “dos”.

Ahora necesitamos crear el archivo de dicha sidebar y para nombrarlo debemos tener en cuenta que primero colocamos sidebar-nombreelegido.php. El “nombreelegido” es lo que colocamos entre comillas simples cuando invocamos al archivo con get_sidebar. En nuestro caso el archivo deberá llamarse sidebar-dos.php. Coloquemos dentro el siguiente contenido. Generamos esta nueva área de widgets en el functions.php. register_sidebar(array( ‘name’ => ‘Sidebar Dos’, ‘before_widget’ => ‘’, ‘after_widget’ => ‘’, ‘before_title’ => ‘’, ‘after_title’ => ‘’, )); Y para que haya un poco de coherencia en el diseño, vamos a modificar los ids de page.php para generar un CSS para este layout. ”> | No encontrado Lo sentimos, intente utilizar nuestro formulario de búsquedas. Añadimos en el CSS las propiedades para #wrapper-dos y #sidebar-dos. #wrapper-dos { width:392px; float:left; margin-top:20px; margin-left:20px; } #sidebar-dos{ width: 215px; margin-top:20px; margin-right:20px; float:right; } Y vamos a darle un poco de formato a las listas dentro de widget, ya que nuestros widgets las usan mucho. .widget li { list-style-type:none; padding: 0 0 0 10px; }

43

Nuestro ejercicio de hoy no ha quedado muy bonito que digamos, pero espero que la idea haya sido lo mas clara posible. Pueden agregar tantas áreas de widgets como quieran y tantas sidebars como sean necesarias.

44

Clase 8

Clase 8 Anexo: Sidebar horizontal A pedido de uno de los lectores que viene siguiendo el curso, añadimos un anexo a la clase 8, dedicada a sidebars, para explicar como maquetar una tercera sidebar pero de modo horizontal. Vamos a seguir experimentando con las sidebars dentro de la plantilla page.php que ya tiene dos sidebars dispuestas de la siguiente manera. Antes de continuar les recomendamos leer un poco sobre la propiedad float (aquí hay un buen tutorial en español). Básicamente esta propiedad es la encargada de indicarle a un contenedor hacia donde debe ubicarse, lo que requiere para su correcta ubicación es un ancho fijo y espacio libre en la dirección deseada.

45

En el trabajo que ya tenemos hecho, nuestras dos sidebars tienen ancho fijo y flotan hacia la derecha (float:right). Es importante remarcar que las sidebars se ubican en el primer espacio libre encontrado en la dirección indicada desde float. Nosotros ubicamos el contenido a la izquierda, por eso queda disponible el espacio derecho para nuestros widgets. #sidebar { width: 293px; margin-top:20px; margin-right:20px; float:right; } #sidebar-dos{ width: 215px; margin-top:20px; margin-right:20px; float:right; } Al tener las sidebars los anchos que deseamos, los contenedores con class .widget no lo necesitan, ya que flotarán con el mismo ancho de su contenedor padre en dirección vertical. .widget { margin-bottom: 20px; -webkit-border-radius: 5px; border-radius: 5px; background: #f4f4f4;

border: 1px solid #ececec; padding: 5px; } Ahora lo que tenemos que lograr es insertar una tercera sidebar, debajo de todo el contenido pero arriba del footer, que ocupe todo el ancho de la página y que tenga tres widgets adentro.

46

La tercera sidebar se ubicará dentro de un archivo que llamaremos sidebar-horizontal.php y la llamada a la misma dentro de page.php se realiza de la siguiente forma: Dentro de sidebar-horizontal.php colocaremos dos áreas con contenido de pruebas y en el tercer espacio repetiremos un área de widgets (¡ustedes ya saben como agregar áreas nuevas!). Area uno Contenido de prueba Contenido de prueba Contenido de prueba Contenido de prueba Contenido de prueba Area dos Contenido de prueba Contenido de prueba Contenido de prueba Contenido de prueba Contenido de prueba Y finalmente el toque “mágico” para que tome la forma deseada: el código CSS. Primero damos el ancho total que va a tener el área contenedor de los widgets, los márgenes (20px de cada lado excepto del izquierdo) y le indicamos que se ubique en el primer espacio libre a la izquierda que encontramos puesto que de lo contrario los elementos dentro de ubicarán fuera del área deseada. #sidebarHorizontal{ width: 920px; margin:20px; float:left; } Luego procedemos a indicarle al elemento .widget que, sólo cuando se encuentra dentro del área #sidebarHorizontal, debe tener un determinado ancho fijo, ubicarse en el primer espacio libre a la izquierda (float:left;) y tener un margen a la izquierda de 20px. #sidebarHorizontal .widget { width:281px; float:left; margin-left:20px; } Y listo! Pueden experimentar colocar esta nueva sidebar debajo del header, en la plantilla index. php o en donde se les ocurra. Clase 8 Anexo

47

Clase 9: el archivo footer.php El archivo footer.php cumple una función similar al header.php en cuanto a que sirve para cargar scripts y archivos pertenecientes a plugins, tal como indicamos en la Clase 6. En dicho archivo colocamos tres cosas fundamentales: la función wp_footer(), el cierre de la etiqueta y el cierre de la etiqueta . La función wp_footer() es utilizada por muchos plugins para cargar plugins y scripts en general que deban ir al final de la página por sus características de programación o para no demorar la carga de determinados contenidos de la página. La mayoría de los diseños web tienen un pie de página bien definido en donde casi siempre podemos encontrar: • El copyright y/o leyenda del diseñador • Últimos comentarios • Últimas noticias • Últimos mensajes en redes sociales • Información de contacto (e incluso algún formulario de contacto pequeño) • Una barra de navegación secundaria • Publicidades • etc. Nosotros vamos a intentar incorporar un área de widgets, en uno de los cuales insertaremos nuestros íconos sociales, un menú al final de la página que sea réplica del menú princial pero con un estilo diferente, y un link para volver al inicio que animaremos con jQuery.

Area de widgets

Hasta ahora en el div #footer tenemos lo siguiente:

48

Vamos a modificarlo para que dentro haya tres áreas de widgets. En la primera colocaremos cualquier contenido a modo de pruebas, en la segunda colocaremos un área de widgets que crearemos para esta sección y en la tercera dejaremos los íconos sociales. Primero colocamos el código para crear nuestro área de widgets en el functions.php. register_sidebar(array( ‘name’ => ‘Widget Footer’, ‘before_widget’ => ‘’, ‘after_widget’ => ‘’, ‘before_title’ => ‘’, ‘after_title’ => ‘’, )); Y ahora todo el contenido del #footer. Footer Contenido de prueba Contenido de prueba Contenido de prueba Contenido de prueba Contenido de prueba Las rutas a los íconos sociales deben arreglarse para que funcionen cuando el theme esté instalado en cualquier sitio web, por lo que necesitamos usar la función bloginfo() para lograr que éstas sean dinámicas. /images/facebook.png” /> /images/ rss.png” /> El resultado es un área de widgets que tiene fondo gris, como los que agregamos anteriormente en las sidebars.

Sería bueno que los widgets del footer tengan su propio estilo, por lo que añadimos un nuevo estilo para todo .widget que se encuentre dentro de #footer de la siguiente manera: #footer .widget { width:281px; float:left; margin-left:20px; background:none; border:none; padding:0; } #footer .widget h3{ color: #7b7b7b; border-bottom: 2px solid #fff; padding-bottom: 5px; margin-bottom:5px; width:281px; float:left; margin-left:20px; text-shadow: 0px 0px 2px #bdbdbd; filter: dropshadow(color=#bdbdbd, offx=0, offy=0); } #footer .widget p, #footer .widget a, #footer .widget li{ color: #7b7b7b; text-decoration:none; } #footer .widget a:hover { text-decoration:underline; } Al título h3 del widget notarán que le agregué text-shadow. Pueden agregar toda clase de efectos geniales con CSS3 usando este generador de código css3generator.com. Quienes tengan navegadores actualizados a las últimas versiones podrán ver los nuevos efectos, y quienes tengan navegadores mas antiguos verán simplemente el texto sin el efecto, completamente funcional. Los íconos sociales quedaban en dos líneas porque el contenedor resultaba muy angosto, por lo

50

que aumentamos el width y ya caben perfectamente. ul.social { list-style-type:none; float:right; width:190px; padding:0px; margin:0px; }

51

Menú adicional

No resulta mala idea añadir un menú al pie de página. Ayuda a que el sitio resulte mas fácil de navegar. Por eso vamos a repetir nuestro “Menú Principal” debajo pero definitivamente debemos modificar el estilo del mismo. Vamos a utilizar el id #menuFooter para la etiqueta , así que modificamos y pegamos el siguiente código antes del cierre del div #footer. Para este segundo menú no vamos a colocar los submenús desplegables debido a que para que funcione correctamente necesitamos pasar un valor fijo para un alto que no conocemos, por lo que ahora evitaremos entrar en un script para calcular cuanto debe trasladarse el submenú y que se abra como corresponde. Hecha esta aclaración, le damos estilo a la nueva clase #menuFooter. #menuFooter { -webkit-box-shadow: inset 0px 3px 1px 0px #ccc; box-shadow: inset 0px 3px 1px 0px #ccc; width: 960px; background: #e1e1e1; border:none; margin: 10px 0 0 0; -webkit-border-radius: 0px 0px 10px 10px; border-radius: 0px 0px 10px 10px; list-style-type:none; float:left; height:35px; } #menuFooter a {

float:left; display:block; text-decoration:none; color:#666; font-weight:bold; margin-left:10px; padding: 10px; border-right: none; background: none; } #menuFooter a:hover { color:#666; background: #f4f4f4; } #menuFooter ul { background:none; list-style-type:none; } #menuFooter li ul { display:none; } #menuFooter ul a { float:left; } Y modificamos el padding de #footer. #footer { float:left; background: #e6e6e6; width: 960px; padding: 20px 0 0 0; }

Volver arriba

El usuario hizo scroll luego de revisar mucho texto y llegó hasta nuestro footer, si necesita volver al inicio de la página para usar el menú desplegable completo o el menú top, nosotros podemos hacerle la tarea mas fácil si le ofrecemos al pié un link que diga “volver arriba” o similar. En nuestro caso, deseamos colocar el link en la misma barra en donde está el menú del footer, sólo que alineado a la derecha para separarlo de los items del menú. Para eso lo agregamos como un elemento mas de la lista #menuFooter pero con una clase diferente. Modificamos las líneas en donde insertamos el menú de la siguiente manera:

52

De este modo al final de la lista que conforma el menú, metemos el elemento con clase .toTop y dentro un link con href #top. Aprovechando que estamos en la plantilla footer.php, añadimos las siguientes líneas de jQuery luego de las que ya figuran de nivoslider entre etiquetas . $(document).ready(function() { $(‘a[href=#top]’).click(function(){ $(‘html, body’).animate({scrollTop:0}, ‘slow’); return false; }); }); Y finalmente necesitamos indicar en nuestro CSS que el con class .toTop debe flotar a la derecha. .toTop { float:right; }

Clase 9

53

Clase 10: La plantilla de entrada y de comentarios Las plantillas de vista de entrada son parte esencial del look and feel de un sitio y deben tener un espacio amplio para poder colocar dentro cualquier tipo de contenido (texto, imágenes, videos, descargas, etc). Esta clase, con un poco de suerte, les resultará muy fácil de entender ya que estuvimos viendo los conceptos que trataremos a continuación pero aplicado a otras plantillas. Al visualizar una entrada, WordPress buscará primero la plantilla single.php, y en caso de no encontrarla pasará a mostrar el contenido utilizando la plantilla index.php. Les recuerdo que pueden encontrar una muy buena gráfica sobre jerarquías de plantilla en el sitio oficial.

Single.php, layout y contenido

Es la plantilla para la vista individual de una entrada y su estructura básica es como muestra la siguiente imagen.

54

Pasamos en limpio lo que vamos a hacer: llamamos al header, en el área de contenidos usamos las funciones the_title (el título) y the_content (el contenido), luego llamamos a la sidebar y finalmente al footer. Para que the_title y the_content puedan “traernos” contenido desde la base de datos correspondiente al ID de la entrada que estamos consultando, necesitamos colocarlos dentro del bucle. Esto se traduce en el siguiente contenido (que es el que ya tenemos desde la clase 4). ”>

No encontrado Lo sentimos, intente utilizar nuestro formulario de búsquedas.

55

La función the_content nos trae todo el contenido publicado en una entrada: su texto, imágenes, galerías, listas, etc. Y para aprovechar la oportunidad aquí es en donde necesitamos definir la alineación de las imágenes que, tal como el editor de WordPress lo señala al subir una imagen, la posición de las mismas puede ser centrada respecto del texto, a la izquierda del texto, a la derecha del texto o sin bordear por texto. Esto se traduce en el siguiente CSS. /* alignments */ .center {text-align: center;} img.center, img[align=”center”] {display: block;margin-left: auto;margin-right: auto;} .alignleft {float: left;} img.alignleft, img[align=”left”] {float:left;margin: 2px 10px 5px 0px;} .alignright {float: right;} img.alignright, img[align=”right”] {float:right;margin: 2px 0px 5px 10px;} .clear {clear:both;} hr.clear {clear:both;visibility: hidden;margin: 0px;padding: 0px;height:0px;} Generalmente en la vista de entrada también se suele colocar información como la fecha de publicación, en qué categoría se encuentra, etiquetas, cantidad de comentarios y el autor. Y para esta sección nos vamos a ayudar con algunos íconos para que la sección luzca lo mejor posible. En este caso nos decidimos por este set de íconos genial llamado gcons. Vamos a construir debajo del cierre del contenedor .dos-tercios, un contenedor con class .metabox en donde colocaremos todas las funciones dentro de etiquetas span para luego insertarles algún ícono. Utilizaremos las siguientes funciones: the_category, the_time, the_author_posts_link, comments_popup_link y the_tags (cada función tiene su link al codex, aprendan a consultarlo). Publicado el de | Por |

| En la categoría | Con las siguientes etiquetas El resultado, sin ningún tipo de estilo aplicado:

Los íconos gcons tienen un set en color azul. Tomamos algunos para utilizar en nuestros spans y los llevamos a tamaño 16px x 16px con Photoshop o algún programa de edición. Al .metabox le colocamos un color azul oscuro, tipografía de color blanco, bordes redondeados y un padding para que no queden pegados al borde los elementos que ubicamos dentro. .metabox { padding: 10px; background: #2d435a; color:white; -webkit-border-radius: 10px; border-radius: 10px; margin: 10px 0; display:block; float:left; } La clase .meta se repetirá luego dentro de cada span, los cuales tienen dos clases (ej. class=”category meta” suma dos clases, .category y .meta), por eso colocamos las propiedades background-repeat y background-position, que modificarán el ícono que insertaremos luego en la otra clase de cada span. Colocamos también un padding-left para que el texto deje un espacio para que se vea el ícono. .meta { background-repeat: no-repeat; padding-left:20px; margin-bottom: 4px; float:left; height:16px; background-position: center left; } Y colocamos el link a cada ícono. .time { background-image: url(images/calendar.png); } .author{

56

background-image: } .comments { background-image: } .category { background-image: } .tags{ background-image: }

url(images/agent.png); url(images/chat-.png); url(images/connections.png); url(images/tag.png);

Este es el resultado de nuestro trabajo.

57

os comentarios

Ahora podemos insertar el llamado a la plantilla de comentarios. Bastará con colocar la siguiente función dentro del bucle (o sea, antes del endwhile). Y automáticamente veremos el siguiente contenido.

Si nos fijamos en el código, el HTML generado es el siguiente: admin dice: 19 mayo, 2012 a las 23:56  (Editar) Hola! Este es un comentario Responder Claro que podemos simplificar un poco si sabemos a lo que apuntamos y podemos ignorar algunas clases muy específicas como .bypostauthor en nuestra etiqueta . La estructura básica que vamos a tomar es la siguiente: admin dice: 19 mayo, 2012 a las 23:56  (Editar) Hola! Este es un comentario Responder ¿Qué sucedió? Simplificamos. Eliminamos clases que no necesitabamos declarar así como una etiqueta div que contenia a todo el comentario y que resultaba innecesario para un estilo básico.

58

Ahora colocamos las clases y etiquetas correspondientes en el CSS. Al inicio de mi nueva sección coloco entre /* y */ un comentario para utilizar de referencia a futuro. Lo único que agregué que no estaba en el HTML es la clase .comment-awaiting-moderation, que aparece cuando un mensaje está pendiente de moderación, tal como lo dice su nombre. /* Comments! */ ol.commentlist {} ol.commentlist li {} .comment-author {} .comment-author img {} .fn {} .says {} .comment-meta {} .comment-awaiting-moderation {} .comment-meta a {} ol.commentlist li p {} .reply a {} Es importante destacar que vamos a trabajar con comentarios anidados (o sea que puedo responder al comentario de alguien y mi comentario aparecerá debajo del mismo) y del modo en que lo estamos maquetando aparecerá un comentario dentro del otro. Así que lo mejor es utilizar anchos que no sean fijos, sino relativos (o sea que cubran determinado porcentaje del contenedor padre). /* Comments! */ ol.commentlist { list-style-type: none; width:600px; } ol.commentlist li { width:95%; position:relative; overflow:hidden; background: #e1e1e1; -webkit-border-radius: 10px; border-radius: 10px; border: 1px solid #ccc; padding:10px; margin: 10px 0; } .comment-author { width: 60%; float:left; height:40px; } .comment-author img { float:left; border: 1px solid #ccc; margin: 2px; } .fn { color: #2d435a; font-weight:bold;

59

font-size:14px; } .says {} .comment-meta { width: 40%; float:left; height:40px; text-align:right; overflow:hidden; } .comment-awaiting-moderation { position:absolute; left:0px; top:10px; width:100%; margin-right:10px; text-align:right; } .comment-meta a {} ol.commentlist li p {} .reply a { padding: 5px 10px; background: #2d435a; -webkit-border-radius: 10px; border-radius: 10px; border: 1px solid #ccc; color:white; text-decoration:none; margin: 5px 0; } El resultado será:

60

Claro que no se diferencian bien las respuestas del original. Pero como vimos antes el comentario tiene una clase de acuerdo a su nivel dentro de los comentarios anidados, basta con leer el código HTML generado por esta página: Existen, entonces, varios niveles de “profundidad” (depth) en nuestros comentarios. Eliminemos el background de ol.comments li y colocamos las siguientes clases con diferentes tonos de gris por fondo: .depth-1 {background: #e1e1e1;} .depth-2 {background: #f1f1f1;} .depth-3 {background: #f9f9f9;} Y obtendremos: 61

Todo esto sin necesidad de generar en ningún momento la plantilla comentarios, utilizando sólo el código por defecto que WordPress genera. Para el caso de que queramos modificar drásticamente nuestra sección de comentarios podemos generar un archivo comments.php o bien podemos hacerlo vía hooks desde el functions.php. En este taller no vamos a ir mas allá, ya que en SummArg constantemente sacamos notas con trucos para personalizar algunas plantillas de modo original. Pero a cambio les vamos a dejar de ejemplo el código que estamos usando en nuestra plantilla para mostrar los comentarios por si les sirve de referencia. En nuestro functions.php colocamos la siguiente función para mostrar los comentarios con código personalizado. Antes de la llamada al footer hay que colocar otra llave cerrando todo. Cabe destacar que lo que tendríamos que lograr es que no haya tantas aperturas y cierres de php, por lo que la línea anterior bien la podríamos convertir en esto: Pero como dijimos antes, estamos aprendiendo y la intención es que les resulte bien claro lo que vamos haciendo. Lo importante es que tengan presente que lo que ven acá es un pantallazo para entender como funciona el tema y de ahí progresar. Ahora si vamos a nuestra categoría de productos, podemos ver el listado de productos de la categoría “productos” y de sus subcategorías, en el formato que escogimos. Podemos ver el resultado en el demo online. Pasemos a darle un formato diferente a las entradas en la categoría blog para que quede del siguiente modo, sin barra lateral:

74

En la línea superior a la del else, colocamos la nueva condición y le daremos un formato distinto a nuestros contenedores. Blog ”> Y en el CSS definimos este nuevo contenedor para que tenga su propio estilo. .blog { width: 435px; height: 210px; float:left; margin: 5px; padding:5px; -webkit-border-radius: 5px; border-radius: 5px; border: 1px solid #e9e9e9; background-color: #f4f4f4; } .blog a { text-decoration:none;

75

color: #333; } .blog img { float:left; margin: 5px 10px 0 0; border: 2px solid #e9e9e9; } .blog h2 { margin-top:5px; font-size:20px; line-height:24px; } .blog a h2 { text-decoration:none; color: #333; } .blog:hover { background-color: #ccc; } Podemos ver el resultado del ejercicio en esta ubicación. Ahora hagamos una plantilla para mostrarse cuando el usuario solicite las entradas de un autor. Al igual que en el caso de las categorías, cuando se solicite el listado por autor, WordPress dará prioridad a la búsqueda de plantillas de la siguiente manera: 1. author-$nicename.php: En donde $nicename es el nombre de usuario del autor solicitado. 2. author-$id.php: En donde $id es el id de usuario del autor. 3. author.php: Plantilla genérica para todos los autores 4. archive.php: El nuestro! 5. index.php Vamos a usar nuevamente un condicional tag y a pensar en cómo queremos mostrar la página. Nuestro objetivo será colocar arriba del listado (fuera del loop) la información que podamos sobre el autor solicitado. Y aquí tenemos un problema puesto que todas las funciones con get_the_author() y similares funcionan dentro del loop. Pero una de las maravillas de WordPress es su documentación y la enorme comunidad que escribe sobre estos temas, así que le echamos una leída al snippet que publicó Kevin Muldon en WPHub y tomamos lo que necesitamos para construir nuestro recuadro de autor.

76

Luego del recuadro de autor (identificado con la class authorInfo) procedemos a colocar el bucle como siempre, con unos contenedores que esta vez contemplarán el espacio que necesita la sidebar para mostrarse. El código PHP quedará de la siguiente manera: Artículos escritos por Sitio web: ”> Sobre : ”> El CSS para esta nueva sección quedaría de la siguiente manera: .authorInfo { width: 586px; padding: 10px; float:left; margin: 0 0 20px 20px; -webkit-border-radius: 5px; border-radius: 5px; border: 1px solid #e9e9e9; background-color: #f4f4f4; } .authorInfo h2 { color: #7ec5ff; } .unTercio { width: 285px;

77

float:left; margin: 0 0 20px 20px; border-bottom:1px solid #e9e9e9; } .unTercio a { text-decoration:none; color: #333; } .unTercio img { float:left; margin: 5px 10px 0 0; border: 2px solid #e9e9e9; } .unTercio h2 { margin-top:5px; font-size:20px; line-height:24px; } .unTercio a h2 { text-decoration:none; color: #333; } .unTercio:hover { background-color: #f4f4f4; } Y el resultado puede verse en el siguiente ejemplo con un autor de nuestro demo. Finalmente vamos a construir una plantilla para tags (etiquetas) que sea prácticamente igual a la de autor con la diferencia de que queremos que se muestre la nube de etiquetas arriba de todo en un estilo que se adapte a nuestro trabajo.

El código PHP deberá utilizar el tag single_tag_title() para llamar al nombre del tag y utilizarlo en nuestro título, luego colocamos la función wp_tag_cloud() sin parámetros para mostrar la nube de tags y el bucle sigue igual que en el de autor.

78

Listado de artículos con la etiqueta Para el CSS unicamente añadimos lo siguiente: .authorInfo, .tagCloud { width: 586px; padding: 10px; float:left; margin: 0 0 20px 20px; -webkit-border-radius: 5px; border-radius: 5px; border: 1px solid #e9e9e9; background-color: #f4f4f4; } .tagCloud a{ text-decoration:none; } Comprobamos que la nube y el listado se muestren correctamente en este link. Pueden descargar el theme desde aquí: themeTaller 12

79

Clase 13: Página de búsquedas e integración con Google Custom Search Engine Por defecto WordPress utiliza el template search.php para mostrar sus resultados de búsquedas, si no encuentra dicha plantilla entonces utiliza index.php. Vamos a colocar un pequeño formulario de búsqueda en el encabezado del sitio. Buscaremos lograr lo que se muestra en la siguiente imagen:

Para ello utilizaremos el siguiente código que podremos después del primer menú: Utilizamos la función the_search_query para mostrar en el título el término de búsqueda que introdujo el usuario. Con esto ya nos queda la función de búsquedas de WordPress bastante completa.

Custom Search Engine de Google

Introduzcamos un formulario de búsquedas personalizadas de Google en nuestro theme. Las razones son varias: • Posibilidad de monetizar nuestras búsquedas: Google CSE permite el uso de Google Adsense. • Mejoras en el rendimiento del servidor al ahorrarnos las consultas a la base de datos. • Permite buscar en varios sitios a definir por nosotros. • Es de Google, necesitamos decir mas?

81

Para crear una cuenta para nuestro sitio nos dirigimos a www.google.com/cse, le damos nombre a nuestro buscador, definimos el idioma, los sitios en los que habrá de buscar y activamos Adsense si lo deseamos. Lo que necesitamos de todo este proceso es la ID del motor de búsqueda generado.

82

Ahora bien, no queremos destruir el formulario de búsqueda que hemos agregado recientemente, así que añadiremos nuestro nuevo formulario en una de las sidebars. En el value del primer input debemos colocar el ID del motor de búsqueda que acabamos de generar. Emprolijamos un poco desde el style.css form#cse-search-box input#s { width: 220px; float:left; } form#cse-search-box input[type=submit] { float:left; border: 1px solid #7ec5ff; background-color: #7ec5ff; color: white;

height:22px; font-weight:bold; font-size:11px; margin: 0 0 0 5px; width:45px; overflow:hidden; } Comprobamos que se muestre correctamente en nuestro theme.

Ahora debemos colocar nuestra plantilla de resultados, que se llamará resultados.php. La misma contiene la estructura básica de cualquier plantilla con la salvedad de que en vez de colocar un bucle sólo colocaremos el script de Google CSE. Además vamos a colocar este archivo fuera del directorio de nuestro theme, directamente en el raíz del sitio, por lo que en la primer línea utilizaremos una llamada para poder utilizar nuestro theme normalmente. resultados.php var googleSearchIframeName = "cse-search-results"; var googleSearchFormName = "cse-search-box"; var googleSearchFrameWidth = 600; var googleSearchDomain = "www.google.com"; var googleSearchPath = "/cse"; Y efectuamos una búsqueda a modo de prueba.

83

Nuestro theme ya tiene dos formularios de búsqueda totalmente funcionales. Podés verlo en nuestro demo online. Descargá la clase: themeTaller 13

84

Clase 14: Paginación, breadcrumbs y página de error 404.php Esta clase podría considerarse la última en lo que a detalles para construir un theme completo y funcional respecta. La paginación, los breadcrumbs (camino de migajas) y la página de error dan la terminación justa a nuestro proyecto. Claro que nos quedan cinco clases mas en donde abordaremos temas mas complejos, como los custom post types y la instalación de un framework que nos permita insertar opciones a nuestro theme. Por favor chequeen el temario y si consideran que quedó fuera algún tema importante, háganlo saber mediante un comentario o un mensaje privado desde nuestro formulario de contacto. Comenzaremos reemplazando la paginación por defecto que WordPress nos ofrece (que consiste en links de anterior y siguiente) y colocaremos algo mas vistoso.

Actualmente el plugin mas utilizado para lograr esto es wp-pagenavi, pero en esta oportunidad insertaremos una paginación sin utilizar ningún plugin. Meramente creamos la función y la insertamos en nuestro functions.php function wp_pagenavi() { global $wp_query, $wp_rewrite; $pages = ''; $max = $wp_query->max_num_pages; if (!$current = get_query_var('paged')) $current = 1; $args['base'] = str_replace(999999999, '%#%', get_pagenum_ link(999999999)); $args['total'] = $max; $args['current'] = $current; $total = 1; $args['mid_size'] = 3; $args['end_size'] = 1; $args['prev_text'] = ''; $args['next_text'] = ''; if ($max > 1) echo ''; if ($total == 1 && $max > 1) $pages = 'Página ' . $current . ' de ' . $max . ''; echo $pages . paginate_links($args); if ($max > 1) echo ''; } Las dos imágenes que mencionamos en los argumentos se entregan en el RAR que pueden descargar al pié del tutorial. La función lo que hace es obtener las cantidades máximas de páginas existentes en la query y darle un formato que contenga mas información y nos permita navegar salteando páginas si lo deseamos. Ahora abrimos nuestro archive.php y reemplazamos estas líneas: