Digging Into WordPress 2.0vuelve a ser impreso esta vez con todas las novedades hasta la versión 2.9.2 del popular CMS. Yo tengo la versión anterior que cubría hasta WordPress 2.8.6 en papel y el libro es muy bueno, aunque sólo esté disponible en inglés.
Desde aquí os recomiendo echarle un vistazo a esta genial publicación en edición digital PDF o también en papel. Esta nueva versión incluye 2 nuevos capítulos, el capítulo 10 que hace referencia a un paquete de temas gratis que incluyen en esta edición, una ayuda más para hacernos más fácil aprender a trabajar para adaptar y poner en marcha el diseño de nuestro blog. Y el capítulo 11 donde se hace un repaso a todas las novedades en WordPress 2.9.2. Además se han corregido los errores de la edición anterior.
No voy a volver a comprar la edición impresa, pero ya tengo la edición en PDF nueva a la que tengo derecho gratis como comprador de la edición anterior.
Muchas veces, cuando estamos construyendo un tema de WordPress, acabamos dedicándonos a estilizar aquellos elementos (smileys, pies de foto, alineamiento de las imágenes en un artículo…) que son servidos por WordPress directamente, y que necesitan tarde o temprano algunos retoques con CSS.
Sin embargo, disponemos de una forma para conseguir que todos esos elementos ‘nativos’ de WordPress sean estilizados por defecto, usando cierto archivo .css con el que WordPress nos viene.
Para ello, deberemos abrir nuestro header.php e incluir, junto a la hoja de estilos propia que nosotros estemos construyendo, ésta otra, que WordPress extraerá de sus archivos:
La podemos poner, por ejemplo, justo debajo de la hoja de estilos que hayamos creado; y nos tomará en cuenta todos esos pequeños detalles sin que tengamos que volver sobre ellos.
Si queréis darle un vistazo, aquí la tenemos: wp.css
Si el otro día eran los plugins, hoy toca revisar algunos themes sencillos y claros especialmente diseñados para empresas y profesionales. Como ya sabéis, hay muchísimas páginas que ofrecen todo tipo de temas y plantillas, así que aquí solamente encontraréis algunos, muy pocos, los que he visto más profesionales y me han gustado más.
Notepad: es una plantilla minimalista, clara, diseñada para webs de pequeñas empresas. Viene en trece combinaciones diferentes de colores, así que puedes adaptarla fácilmente a la imagen de tu negocio. Tiene una página principal sencilla con una página extra para navegación e información adicional.
Wynton Magazine: una plantilla de estilo revista para WordPress que puede ser usada como web sencilla para tu empresa. Puedes publicar elementos publicitando tus productos o servicios, utilizando las imágenes de la página principal. Destaca una noticia principal y luego tiene tres secundarias en el lateral.
WP Contact Manager: es un tema que, más que ayudarte a crear tu página web, te ayudará a mantener una página con contactos de negocio actualizados. Puedes usarlo para publicitar tus datos de forma pública, o para mantener los datos de tus clientes si lo utilizas de forma privada.
Launchpad: es un tema práctico para pequeñas nuevas empresas mientras están en proceso de creación de su página web profesional o para un sitio web para promoción de un producto nuevo. Es un theme para presentación del sitio que ofrece a los visitantes la opción de suscribirse por RSS o correo electrónico para recibir las novedades.
RockinBizRed: plantilla limpia y práctica para pequeños blogs o páginas. Tiene dos columnas, predomina el color rojo y tiene el fondo blanco, con una imagen que podrás personalizar fácilmente. Está preparado para widgets, con barra lateral a la izquierda y de ancho fijo.
Cubit: utiliza un diseño limpio y flexible para tu WP, con seis tonalidades de color distintas. Puede utilizarse fácilmente para portfolio de proyectos. Utiliza Javascript para la transición de imágenes en la página principal. Tiene una buena página de administración para su configuración y los menús de la página principal son realmente interesantes.
Espero que alguno de estos themes os sirva. ¿Conoces alguno más que pueda interesar al resto de la comunidad? ¡Coméntalo!
Hoy veremos cinco temas gratuitos de WordPress listos para descargar y utilizar en nuestro blog o página web. Hemos intentado seleccionar los 5 mejores que la comunidad de blogueros ha lanzado en los últimos meses. Son bonitos (aunque esto va por gustos, lógicamente), funcionales y de descarga libre.
Limpio y eficaz tema, con varias opciones en la administración: widgets, espacio para publicidad, cinco esquemas de color para escoger… La administración estará en inglés, pero vale mucho la pena. En la demo podéis echar un vistazo a cómo se estructura, lo bien que se entiende el diseño y el uso que hace de la tipografía.
Otro template de la factoría WooThemes (cuyos temas son normalmente de pago), que yo he bajado sin dudar para estudiarlo y reservarlo para algún proyecto que requiera tan sólo algunos arreglos extra. “Bueno” es un tema extraordinariamente bien estructurado, limpio y directo para propiciar una buena lectura. Para olvidarse de todo y simplemente escribir en tu blog. Como siempre, unos arreglos en el CSS (para cambiar la imagen de fondo por ejemplo) nos pueden venir muy bien si queremos otro esquema de color. Mirad aquí la demo.
Para mí, un buen tema por antonomasia. Fresco, sencillo y completo. En DesignDisease, la factoría en cuestión, podréis encontrar muchas otras perlas gratuitas.
Presentado en exclusiva para Smashing Magazine y realizado por un grupo de diseñadores especialmente para la ocasión, Magazeen nos irá perfecto para empezar un site con el enfoque de revista online, una idea que siempre es muy atractiva cuando tenemos un proyecto de escala considerable. La demo está aquí.
5- Color Paper Theme
Para los que os gusten las texturas y el detalle, Color Paper Theme puede ser una muy buena opción. Está ofrecido en Free Themes Layout, desde donde os lo podéis bajar (está en la segunda página de la lista) y encontrar algunos otros temas, aunque éste para mí es de los mejores. Demo aquí.
Elastic Theme Editor es la solución definitiva para la edición interactiva de las plantillas de tu WordPress desde la administración.
Entre las características de este editor visual de temas podemos comentar:
Infinitos cambios para tu tema: Arrastrar y soltar para personalizar.
Fuentes personalizadas: Realiza vista previa con el editor de tipografías.
Organización sencilla basada en celdas. Personalizar la celdas para mayor flexibilidad.
Es portable: Comparte tu temas con quien quieras. Elastic crea temas estándar para WordPress.
Framework para Temas: Para que los desarrolladores de temas lo tengan más fácil.
Y muchas más cosas en las que están trabajando.
Para empezar os recomiendo ver el siguiente vídeo muy ilustrativo de como funciona Elastic:
Elastic se encuentra actualmente en desarrollo y puede que tenga errores, pero si los encuentras lo mejor es notificar a su autor para que peuda corregirlo y mejorar juntos.
Os recomiendo visitar esta presentación del WordCamp NYC 2009, donde se comenta ¿Por que WYSIWYG es el futuro de los temas para WordPress?.
Interesante recopilación de temas para WordPress que imitan a sitios famosos como NYTimes, Apple, Facebook, BBC News, Gmail, … Realmente una interesante forma de aprovechar la organización y usabilidad de estos reconocidos lugares en la red.
Al fin, con WordPress 2.9 se nos ha hecho mucho más fácil indicar, mientras escribimos, cuál será la miniatura (o thumbnail) que representará al artículo en cuestión.
Para ello, colaremos este código en functions.php (al final de todo):
<?php
add_theme_support( 'post-thumbnails' );
?>
Ahora podremos, desde la Administración, subir y asignar una imagen cuya función exclusiva será la de ‘representar’ al post, e “imprimirse” por tanto en nuestros templates, al lado del texto del artículo (pero independientemente de éste).
Iremos ahora a escoger en qué lugar concreto queremos que aparezca con respecto al contenido normal de nuestro artículo. Abriremos index.php, archive.php o incluso single.php, y allí donde creamos conveniente (normalmente al lado del extracto), pondremos lo siguiente :
<?php the_post_thumbnail( 'medium' ); ?>
Podremos utilizar la siguiente “jerga” para decidir qué tamaño queremos:
- thumbnail
- medium
- large
Habrá que orientarse entre los tags de HTML del template para poner la imagen allí donde creamos correcto.
Para saber más detalles acerca de esta novedad, podemos dirigirnos a la web de Justin Tadlock.
Cuando estamos fabricando un tema de WordPress, utilizamos una serie de típicos tags de PHP para incluir, alrededor del contenido principal (Loop), distintos elementos esenciales, como por ejemplo:
El tener separados estos tres archivos, que tratan los distintos espacios gráficos y funcionales del blog (encabezado, pie de página, barra lateral…), nos servirá para tenerlos bien accesibles cuando necesitemos editar alguno de ellos.
Ahora bien, si los tres tags señalados son usualmente suficientes, a veces necesitamos incluir archivos de template especiales, con un nombre único, puesto por nosotros. Por ejemplo: un script de Google Ads que debería aparecer en los archivos y el template de artículo, pero no en el índice.
Para incluír templates especiales, PHP dispone de una fórmula que podemos usar allí donde queramos :
Sin embargo, si estamos en pleno proceso de elaboración de un site complejo, existe una forma más memorable que nos permite distinguir entre templates a incluir. Es la siguiente (funciona a partir de WP 2.7):
Imaginando un site que hable sobre cine y teatro, nos podría interesar tener un header especial en el apartado de teatro, y otro distinto en el de cine. Podríamos incluso querer header, sidebar y footers distintos en cada sección del site.
Para jugar con esta posibilidad, podremos añadir “tags condicionales”, como aquí :
Si el usuario llegara a un post de la categoría “Cine”, o a un archivo de la misma, el footer que mostraremos es el que se llame footer-cine.php, y, si es cualquier otra página de nuestro site en la que el internauta aterriza, tendremos el footer normal.
Los motores de búsqueda como Google pueden valerse, cuando se trata de mostrar a nuestro site tras una búsqueda, de la metainformación que sobre él hayamos escrito en nuestro encabezado HTML (más info, en inglés aquí).
Si abrimos el archivo header.php de nuestro tema de WordPress, encontraremos al encabezado, que se abre y cierra con los tags <head> y </head>.
Un ejemplo de metadata en el <head> podría ser el siguiente :
<head>
<title>Mi Super Blog</title>
<meta name="author" content="Ignacio">
<meta name="keywords" content="WordPress,diseño,programación">
<meta name="description" content="Blog dedicado a compartir ideas sobre programación con WordPress">
</head>
Allí siempre podremos emplazar, como un plus para los motores de búsqueda, la metadata con la que queramos describir nuestra página web, y que Google, por ejemplo, utiliza como descripción en su página de resultados de búsqueda (lo cual siempre es muy interesante a efectos de atraer a los internautas que hayan tecleado las correspondientes palabras clave).
Normalmente, y por defecto, los temas de WP suelen usar la descripción del blog, descripción que se puede editar desde la Administración.
Los dos metatags más típicos serían el “keywords” y “description“, y ambos sirven para dar un perfil de nuestro site. Si bien Google no nos bonificará en el ranking de resultados de una búsqueda por tener muchas palabras clave (aunque el debate sobre la veracidad de este dato continúa), sí que registrará nuestras descripciones.
Es aquí donde nos interesa mantenerlas con un contenido lo más variado posible, de modo que Google indexe cada una de nuestras páginas con una descripción no general y site-wide, sino acorde con el contenido que el internauta vaya a encontrar en cada búsqueda relativa, al entrar en nuestro site desde el buscador, atraído por un conjunto de palabras clave específicas.
¿Cómo disponer entonces de contenido variable en los metadatos de nuestro header? He aquí el código que necesitaremos.
Primero de todo, cada post debería tener un campo personalizado llamado “Metadescription”, que llenaremos con la descripción concreta que del post queramos dar a Google.
Luego, en el <head> pondremos lo siguiente :
<meta name="description" content="
<?php if((is_home()) || (is_front_page())) {
echo bloginfo('name'); bloginfo('description');
} elseif(is_category()) {
echo category_description();
} elseif(is_tag()) {
echo 'Tag archive page for this blog - ' . single_tag_title();
} elseif(is_month()) {
echo 'Archive page for this blog - ' . the_time('F, Y');
} else {
echo get_post_meta($post->ID, 'metadescription', true);
} ?>" />
De este modo conseguiremos que en cada página particular de nuestro site aparezca un párrafo de metadata u otro, asegurándonos poder ofrecer más variables para el internauta que las que nos permitiría una frase constante.
En nuestro ejemplo tenemos :
- En la Home de nuestro site, aparecerá la descripción principal.
- Si se trata de un archivo, la descripción de la categoría, el nombre del tag, o la fecha.
- Si se trata finalmente de nuestros valiosos posts, la descripción que les hayamos otorgado en el campo personalizado “Metadescription” que os propongo crear.
Siempre es interesante poder ofrecer a nuestros usuarios una página de resultados de búsqueda que permita seleccionar, rápidamente, cuál es el artículo más ajustado a lo que pretenden encontrar.
Para ello, una de las posibilidades que WordPress nos brinda es la de hacer que los términos de búsqueda, que se han sometido en el formulario con un click, se vean resaltados en la página subsiguiente de resultados, de modo que el lector podrá percatarse del contexto inmediato en el que son usados y ganar así un poco de agilidad al navegar la página en cuestión.
Para ello, deberemos en primer lugar de disponer de un archivo en el template llamado search.php.
search.php, que no debe tener más que lo esencial (header, loop, footer), es un template con la siguiente función: mostrar resultados de búsqueda (si no lo tenemos, y vemos que nos funcionan igual las búsquedas, es que seguramente WordPress redirige los resultados de búsqueda a index.php).
Atención, no lo confundamos con searchform.php, que es el template que albergará la caja de búsqueda (y que puede ser invocado desde index.php, sidebar.php o donde queramos con el tag <?php get_search_form(); ?> ).
Recordemos también que si nuestro tema acepta “Widgets”, en la pantalla de Administración correspondiente en WordPress podremos enchufar la caja de búsqueda directamente en una zona widgeteada u otra.
Volviendo ahora a search.php, vamos a añadir cierto código para que los artículos listados contengan los términos de búsqueda (en el título y el extracto) subrayados.
Sustituiremos the_title en el loop de nuestro template search.php con:
Aquí hemos preparado a los términos coincidentes con una clase de CSS especial, dejándonos lista la tarea de asignar para ella el color, background o tamaño de texto que queramos.
Lo mismo para los extractos, reemplazamos the_excerpt por :
En nuestro ejemplo, la clase que asignaremos a los términos de búsqueda es .search-terms.
Finalmente, nos dirigiremos a style.css y añadiremos, por ejemplo :
Digging Into WordPress 2.0 vuelve a ser impreso esta vez con todas las novedades hasta la versión 2.9.2 del popular CMS. Yo tengo la versión anterior que cubría hasta WordPress 2.8.6 en papel y el libro es muy bueno, aunque sólo esté disponible en inglés.
