Si configurar nuestro WordPress ya es fácil, cambiar de theme todavía lo es más. Aún así, si es la primera vez que estás instalando tu plataforma para bloguear quizá puedas tener algún problema o alguna duda, así que vamos a analizar en uns pocos pasos lo que tienes que hacer para cambiar la plantilla por defecto de tu blog.

Lo más recomendable es que utilices el buscador de themes que puedes encontrar en Apariencia / Añadir nuevos temas. Ahí podrás buscar con una palabra clave o utilizar las opciones correspondientes para filtrar por características (colores, columnas, ancho, etc.).

Una vez hayas encontrado uno que te guste, tienes que instalarlo: es tan fácil que sólo tienes que pulsar el botón Instalar. Al hacerlo, verás una previsualización de la plantilla seleccionada y, si lo deseas, puedes pulsar el botón “Instalar ahora”.

Deja a WordPress el tiempo suficiente para que instale la nueva plantilla para tu blog, hasta que te diga que “El tema _____ ha sido instalado correctamente“. Una vez esté instalado, puedes abrir una vista previa de cómo se vería tu blog con el nuevo diseño o, si lo deseas, activarlo directamente.

¡Así de sencillo! Una vez hayas pulsado el botón Activar, tu blog ya tendrá un nuevo diseño, el que hayas elegido y más te haya gustado. Te recomiendo que escojas bien la plantilla: es la primera impresión para tus futuros visitantes y, si les gusta, estarán más predispuestos a leer tu contenido. Así que, si ya la has elegido, ¡es hora de empezar a escribir!

1- Overstand

Overstand es un clásico que ya lleva varios años en la blogosfera, pero sigue teniendo una frescura increíble. Lo mejor es que con un poco de dedicación podremos modificar su CSS y adaptarlo a nuestras necesidades.

Su autora es una chica alemana, pero tenemos también una versión en inglés.

2- Structure

Structure es un tema muy adecuado para un site serio, que nos puede servir como base para un proyecto de magazine perfectamente.

Lo podremos bajar aquí.

3- Spectrum

Spectrum es un tema muy interesante, que apuesta ya más por el color. Lo podremos bajar en la misma página en que tienen la demo.

4- ThrillingTheme

Un impresionante tema con un montón de opciones. Lo podremos utilizar para sites colaborativos, revistas online especializadas o incluso como blog personal.

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:

<link rel='stylesheet' href='/wp.css' type='text/css' media='all' />

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

Esperamos que este truco sea de vuestro interé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!

Fuentes: Best WP Themes, WP Crowd.

Empecemos por el principio:

1- Typebased

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.

2- Bueno

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.

3- Compositio

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.

4- Magazeen

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í.

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.

<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

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 :

<?php include( TEMPLATEPATH . '/nombre-del-template-a-incluir.php' ); ?>

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):

<?php get_header('header-cine'); ?>

<?php get_sidebar('sidebar-cine'); ?>

<?php get_footer('footer-cine'); ?>

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í :

<?php

if ( is_category('Cine') ) {

get_footer('footer-cine');

} elseif ( in_category('Cine') ) {

get_footer('footer-cine');

} else {

get_footer();

}

?>

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.

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.

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:

<?php // highlight search terms in title
$title = get_the_title();
$keys = explode(" ", $s);
$title = preg_replace('/('.implode('|',$keys).')/iu','<span class="search-terms"></span>',$title);
echo $title;
?>

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 :

<?php // highlight search terms in content
$excerpt = get_the_excerpt();
$keys = explode(" ", $s);
$excerpt = preg_replace('/('.implode('|',$keys).')/iu','<span class="search-terms"></span>',$excerpt);
echo $excerpt;
?>

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 :

span.search-terms {
	background: yellow;
	font-weight: bold;
	}

Lo que nos dará un amarillo tirando a “chillón” que podremos por supuesto cambiar por los colores que queramos.

Hoy vamos a ver un ingenioso y fácil código que nos permitirá tal cosa, y que, independientemente de la parte en PHP, deberemos por supuesto estilizar adecuadamente, con una buena tipografía, background, icono… lo que vuestra imaginación considere más apropiado.

Empecemos con el PHP.

WordPress, por defecto, almacena cierta información de los usuarios que comentan en nuestro blog, o, más específicamente, envía a nuestro ordenador pequeñas informaciones para reconocer a los usuarios habituales. Este tipo de información se llama en jerga informática “cookie“.

Las cookies de WordPress son las que usaremos para detectar al usuario habitual, que las recibirá en caso de que haga un comentario a través de su navegador, en un invisible proceso ‘de trasfondo’.

Seleccionaremos entonces el lugar donde queremos que este mensaje aparezca, por ejemplo, en el index.php, archivo que todos los temas de WordPress tienen y que normalmente actúa como la “home” de nuestro blog. Habrá que orientarse entre cada “div” del HTML allí presente, y, por ejemplo, antes del loop que traerá de la base de datos los últimos posts, pondremos lo siguiente :

<?php if(isset($_COOKIE['comment_author_'.COOKIEHASH])) {
$lastCommenter = $_COOKIE['comment_author_'.COOKIEHASH];

echo "¡Bienvenido de Nuevo ". $lastCommenter ."!";

} else {

echo "¡Bienvenido a nuestra Web!";
} ?>

A los usuarios habituales que hayan comentado, les aparecerá el mensaje “¡Bienvenido de Nuevo [nombre del usuario]!”. El nombre del usuario será el mismo dejado en su último comentario.

Para estilizar el mensaje de bienvenida, podríamos añadir un poco de HTML a ese código :

<div id="bienvenida">
<?php if(isset($_COOKIE['comment_author_'.COOKIEHASH])) {
$lastCommenter = $_COOKIE['comment_author_'.COOKIEHASH];

echo "<h3>¡Bienvenido de Nuevo ". $lastCommenter ."!</h3>";

} else {

echo "<h3>¡Bienvenido a nuestra Web!</h3>";
} ?>
</div>

Hemos añadido una “div”, con la “id” ‘bienvenida’, y un encabezado h3 para los mensajes.

Podríamos ahora añadir al archivo style.css de nuestro tema el siguiente CSS :

#bienvenida h4{
	background:#eee;
	color:#999;
	font-style:italic;
	border:#ddd;
	padding:10px
	}

Por supuesto, aquí podréis usar vuestros colores preferidos.

Para que esto se produzca, debéis simplemente incluír en el fichero functions.php lo siguiente:

<?php
add_filter('body_class','browser_body_class');
function browser_body_class($classes) {
	global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;

	if($is_lynx) $classes[] = 'lynx';
	elseif($is_gecko) $classes[] = 'gecko';
	elseif($is_opera) $classes[] = 'opera';
	elseif($is_NS4) $classes[] = 'ns4';
	elseif($is_safari) $classes[] = 'safari';
	elseif($is_chrome) $classes[] = 'chrome';
	elseif($is_IE) $classes[] = 'ie';
	else $classes[] = 'unknown';

	if($is_iphone) $classes[] = 'iphone';
	return $classes;
}
?>

Así, cuando entre cualquiera a su blog, la etiqueta body se mostrará así:

<body class="home blog logged-in safari">

Luego, debeis definir esa clase en la hoja de estilos de cascada, y podréis condicionar estilos a diferentes navegadores.

Créditos a Nathan Rice

Se trata de Notepad Chaos, un theme que va más allá de lo personal, y se presenta como un cuaderno de notas, el equivalente físico a un blog.

El theme tiene distintas características que lo hacen único, como sus secciones con letra a mano o ese excelente fondo que tiene.

El inconveniente relevante es que todo viene en imágenes, es decir, a menos que sepáis retocar imagenes, debéis contentaros con las etiquetas en inglés. Igualmente, se ofrece una versión en PSD (Photoshop), descargable aquí.

El Theme fue realizado para Smashing Magazine, y está realizado casi enteramente a mano por Evan Eckard.

Enlace: Notepad Chaos

Descargar Notepad Chaos (0.5 MB)

Como podéis ver en la captura de pantalla, esta plantilla emula muchísimas características de Windows Vista de manera original, como no se ve en ningún otro theme. Los ejemplos más claros son la barra de Tareas (que es la NavBar), el menú de inicio y la estructura de los posts como Ventanas .

Otras características del theme son:

• Múltiples temas de colores, a elección del usuario
• Apariencia transparente y clara
• Soporta Gravatar
• Soporta los comentarios anidados de WordPress 2.7
• Widget-ready
• Imagen de usuario personalizable

En efecto, un theme lindo. En lo personal me pareció muy amigable y simplemente hermoso.

Si queréis descargarlo, podéis hacerlo en la versión en inglés desde aquí, y utilizar el archivo de traducción al español (de Argentina), aquí.

También podéis ver un demo, y todas las características en la web oficial^[EN].

Con este theme no será necesario tocar ninguna línea de código, ya que cuenta con un Panel de Control donde podemos configurar toda la información de las redes sociales a la que pertenecemos. Si no estás en alguna de las redes sociales disponibles, simplemente deja el espacio en blanco y no se mostrará.

Visiting Card: Demo – Descargar

La principal característica de este theme es que no es necesario manipular o editar los archivos que lo constituyen, ya que incorpora un panel de administración de donde podemos controlar desde la publicidad hasta incorporar nuestro código de Google Analitycs.

Los invito a descargar este theme y contarnos sus experiencias en el foro.

Demo: Selecta Download: Selecta

Fuente: Carrero.es.

La nueva versión aún no esta disponible en WordPress.org ni en los blogs alojados de WordPress.com, pero se espéra que lo este muy pronto para deleitarnos.

Fuente: Weblog Tools Collection

Me encontré recientemente buscando una solución para ello, y poder así mostrar una lista de las últimas noticias de El País en mi Blog, aún en construcción.

Hoy veremos cómo implementarlo.

Primero necesitaremos encontrar la URL con los Feeds de nuestro site a seguir, en mi caso es la siguiente : http://www.elpais.com/rss/feed.html?feedId=1022

Luego bastará con enterarse de que WordPress puede actuar como lector de Feeds, y pastear este código en alguna div de nuestro template (por ejemplo, abriendo sidebar.php con un editor de texto, y añadiendo el código en último lugar).

<h2><?php _e('Noticias:'); ?></h2>
<?php
include_once(ABSPATH . WPINC . '/feed.php');

$rss = fetch_feed('http://www.elpais.com/rss/feed.html?feedId=1022');

$maxitems = $rss->get_item_quantity(5);

$rss_items = $rss->get_items(0, $maxitems);
?>

<ul>
<?php if ($maxitems == 0) echo '<li>No items.</li>';
else

foreach ( $rss_items as $item ) : ?>
<li>
<a href='<?php echo $item->get_permalink(); ?>'
title='<?php echo 'Posted '.$item->get_date('j F Y | g:i a'); ?>'>
<?php echo $item->get_title(); ?></a>
</li>
<?php endforeach; ?>
</ul>

En quantity aquí hemos puesto 5, pero ello es por supuesto modificable por el número que queramos.
Espero que lo disfruten y abran fuego en los comentarios !

Hay ciertamente excelentes plugins a nuestra disposición para conseguirlo, pero para los ‘bricoleros’, siempre es interesante manejar nuestros templates directamente con algo de código.

<?php

//Gets category and author info
global $wp_query;
$cats = get_the_category();
$tempQuery = $wp_query;
$currentId = $post->ID;

// related category posts
$catlist = "";
forEach( $cats as $c ) {
if( $catlist != "" ) { $catlist .= ","; }
$catlist .= $c->cat_ID;
}
$newQuery = "posts_per_page=5&cat=" . $catlist;
query_posts( $newQuery );
$categoryPosts = "";
$count = 0;
if (have_posts()) {
while (have_posts()) {
the_post();
if( $count<4 && $currentId!=$post->ID) {
$count++;
$categoryPosts .= '<li><a href="' . get_permalink() . '">' . the_title( "", "", false ) . '</a></li>';
}
}
}
$wp_query = $tempQuery;
?>
<?php while ($wp_query->have_posts()) : $wp_query->the_post(); ?>
<h2>Ultimos art&iacute;culos de la categor&iacute;a: <?php the_category(', ');?></h2>
<ul class="related-by-category"><li>
<?php echo $categoryPosts; ?>
</li></ul>

<?php endwhile;?>

Vamos a pastear esto tras el Loop principal, que convoca a nuestros artículos.

Dispondremos asímismo de una clase (.related-by-category) para estilar los items vía CSS.

Iremos al directorio de nuestro tema activo, y buscaremos al archivo functions.php. De no tenerlo, crearíamos y nombraríamos, con un editor de texto como Notepad++, a un archivo en blanco “functions.php” y lo dejaríamos caer junto con el resto de archivos de nuestro tema.

Una vez creado y guardado, pastearemos en él lo siguiente (si ya lo tuviéramos, lo pondríamos, independiente, al final de todo) :

<?php
function image_shortcode($atts, $content = null) {
extract( shortcode_atts( array(
'name' => '',
'align' => 'right',
'ext' => 'png',
'path' => '/wp-content/uploads/',
'url' => ''
), $atts ) );
$file=ABSPATH."$path$name.$ext";
if (file_exists($file)) {
$size=getimagesize($file);
if ($size!==false) $size=$size[3];
$output = "<img src='".get_option('siteurl')."$path$name.$ext' alt='$name' $size align='$align' class='align$align' />";
if ($url) $output = "<a href='$url' title='$name'>".$output.'</a>';
return $output;
}
else {
trigger_error("'$path$name.$ext' image not found", E_USER_WARNING);
return '';
}
}
add_shortcode('image','image_shortcode');
?>

A partir de aquí, al escribir posts, teclearemos simplemente algo así :

[image name=icono-categoria]

Donde icono-categoria se refiere a una imagen del mismo nombre ( icono-categoria.png ) situada en /wp-content/uploads/ (por lo tanto, previamente subida allí con nuestro programa FTP).

Es importante notar que habrá que cambiar, en el código de functions.php, el tipo de extensión en el que hayamos grabado nuestras imágenes en particular. En este caso, se trataba de .PNGs

Esperamos que este truco os sea provechoso. Gracias a Rarst por compartirlo.

<div id="futuro">

     <h3>Próximamente...:</h3>
          <div id="lista">
               <?php query_posts('showposts=10&post_status=future'); ?>
               <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

               <?php the_title(); ?><?php edit_post_link('e',' (',')'); ?>
               <br>

               <span class="fecha">
                    <?php the_time('j. F Y'); ?>
               </span>

               <?php endwhile; else: ?>
                    <p>Sin eventos.</p>
               <?php endif; ?>
     </div>

</div>

Útil para mantener en vilo a nuestros lectores, y recordarles que es preciso que nos pongan en sus favoritos !

<?php echo bloginfo('name'); ?> - Copyright &copy; <?php echo date('Y'); ?>

Si lo queremos hacer para un diseño que vendemos en serie (o que lanzamos como Open Source), habrá que encontrar la manera de imprimir la horquilla de fechas correcta, sin necesidad de escribirlas a mano, y teniendo acceso a los registros que WordPress hace de nuestro Blog (fecha de inicio, y fecha actual).

Copiar y pegar el siguiente código en functions.php, guardar el archivo y cerrarlo.

Y ahora ¿dónde ubicar los créditos?

Normalmente vamos a escoger el pie de página. Allí donde nos convega pegaremos esto :

<?php copyrightDate(); ?>

Esperamos que este truco os sea útil.

Primero, nos haremos con un set de iconos que nos guste. Y guardaremos esos iconos en nuestro tema en cuestión, dentro de la carpeta ‘images’.

Luego, dentro del Loop (buscarlo en single.php, index.php, aunque también nos funcionará en archive.php), pegaremos esto, después de the_content:

<div class="social">

<h3>Comparte este post</h3>

<a href="<?php bloginfo('rss2_url'); ?>" title="Flujo RSS.">
<img src="<?php bloginfo('template_directory'); ?>/images/feed.png" alt="Flujo RSS." />
</a>

<a href="http://twitter.com/home/?status=<?php the_title(); ?> : <?php the_permalink(); ?>" title="Tweetea esto!">
<img src="<?php bloginfo('template_directory'); ?>/images/twitter.png" alt="Tweetea esto!" />
</a>

<a href="http://www.stumbleupon.com/submit?url=<?php the_permalink(); ?>&amp;amp;title=<?php the_title(); ?>" title="StumbleUpon.">
<img src="<?php bloginfo('template_directory'); ?>/images/stumbleupon.png" alt="StumbleUpon" />
</a>

<a href="http://www.reddit.com/submit?url=<?php the_permalink(); ?>&amp;amp;title=<?php the_title(); ?>" title="Vota en Reddit.">
<img src="<?php bloginfo('template_directory'); ?>/images/reddit.png" alt="Reddit" />
</a>

<a href="http://digg.com/submit?phase=2&amp;amp;url=<?php the_permalink(); ?>&amp;amp;title=<?php the_title(); ?>" title="Digg this!">
<img src="<?php bloginfo('template_directory'); ?>/images/digg.png" alt="Digg This!" />
</a>

<a href="http://del.icio.us/post?url=<?php the_permalink(); ?>&amp;amp;title=<?php the_title(); ?>" title="Bookmarkame en Delicious.">
<img src="<?php bloginfo('template_directory'); ?>/images/delicious.png" alt="Bookmarkame en Delicious" />
</a>

<a href="http://www.facebook.com/sharer.php?u=<?php the_permalink();?>&amp;amp;t=<?php the_title(); ?>" title="Comparte en Facebook.">
<img src="<?php bloginfo('template_directory'); ?>/images/facebook.png" alt="Comparte en Facebook" id="sharethis-last" />
</a>

</div>

Hemos tomado en cuenta el Flujo RSS, Twitter, Stumble Upon, Reddit, Digg, Delicious y Facebook.
Si me pedís servicios extra, prometo responder.

A notar que cada set de iconos tendrá su nomenclatura, que habrá que ajustar en los ejemplos que yo he puesto aquí.

Y por lo demás voilà, ya tenemos a nuestros artículos ultra-socializados. A morir de éxito !

Pueden verla y guardarla desde aquí^[PDF]

Vía | Código Geek

El resultado en nuestro código fuente sería entonces parecido a lo siguiente :

<ul class="wp-tag-cloud">
	<li><a href="url-hacia-el-Archivo">etiqueta1</a></li>
	<li><a href="url-hacia-el-Archivo">etiqueta2</a></li>
	<li><a href="url-hacia-el-Archivo">etiqueta3</a></li>
	<li><a href="url-hacia-el-Archivo">etiqueta4</a></li>
	<li><a href="url-hacia-el-Archivo">etiqueta5</a></li>
	<li><a href="url-hacia-el-Archivo">etiqueta6</a></li>
	etc.
</ul>

Si preferimos prescindir del juego de tamaños que, por defecto, WordPress usará en nuestras etiquetas, así como darles algo de color, os propongo un método para conseguirlo, así como un poco de CSS, que nos funcionará idealmente en Firefox.

Dirijámonos al template de nuestra barra lateral (sidebar.php).
Lo abriremos con NotePad++, y añadiremos, hacia el final y antes de que se cierre el “div” de nuestra sidebar, el siguiente código :

<?php
	wp_tag_cloud('smallest=10&largest=10&unit=px&number=75');
?>

Nos aseguraremos así que los tamaños de las etiquetas son constantes, a 10px, y daremos la instrucción para llamar a 75 de ellas en cada ocasión.

Iremos ahora a nuestro archivo de CSS (style.css) y lo abriremos igualmente, para escribir al final de todo lo siguiente :

.wp-tag-cloud a{
	display:inline;
	color:#555;
	padding:.5em;
	margin:.2em;
	background:#eee;
	-moz-border-radius: 9px;
	-khtml-border-radius: 9px;
	-webkit-border-radius: 9px;
	border-radius: 9px;
	border-bottom:1px solid #ddd;
	border-right:1px solid #ddd
	}

.wp-tag-cloud a:hover{
	background:#BEE914;
	color:#111
	}

Firefox nos proporcionará unas etiquetas redondeadas, que quedarán igualmente bién en IE por su colorido, y, en cualquier caso, privilegiaremos la usabilidad de los elementos con un toque de Web 2.0.

Os propongo pues aceptar el reto, y someter a test esta pequeña prueba de diseño.

<div class="principal">
<?php
query_posts('showposts=8');
$ids = array();
while (have_posts()) : the_post();
$ids[] = get_the_ID();
the_title();
the_content();
endwhile;
?>
</div>

Estamos convocando aquí a los 8 últimos posts, sin distinguir nada más, pero, dentro del paréntesis, podemos usar también category_name=nombre-de-la-categoría o aún cat=catID, donde catID es un número (el número que se le asignará a la categoría en nuestra base de datos), seguido por el signo ‘&’.

query_posts('category_name=cine&showposts=8');

Más abajo en nuestro índice, supongamos que queremos crear una simple lista, menos trabajada estéticamente que ése hipotético primer loop, y queremos, a su vez, evitar que se nos duplique el contenido. Ahí vamos :

<div class="secundario">
<?php
query_posts(array('post__not_in' => $ids));
while (have_posts()) : the_post();
the_title();
the_content();
endwhile;
?>
</div>

Debido a que ‘query_posts’ es una de las mejores formas para acceder selectivamente a nuestra base de datos, lo usaremos tanto en el primer loop como en el segundo, especificando en éste último que nos excluya los posts que desplegamos en primer lugar, en base a su ID (numérica, pedida en el primer loop … y almacenada para su uso).

No dudéis en dirigir vuestras dudas para todo esclarecimiento.

La sencilla razón detrás de esta limitación, es que nuestros navegadores no están aún en condiciones de librar por sí solos más que las fuentes que nuestro internauta disponga ya instaladas en su ordenador, a partir del momento en que accede a la página que le hemos diseñado.

Así, una fuente como Helvetica puede salirse en algunas ocasiones de lo común, de modo que podemos encontrarnos con bastantes personas que casualmente no la tienen instalada, leyendo de pronto en Arial, o en Verdana, o en la fuente que por defecto nosotros hayamos especificamos en nuestra hoja de estilo.

body{
font-family: Helvetica, Arial, Verdana, sans-serif;
}

¿Se trata exclusivamente de un problema técnico? No únicamente: mientras que en la nueva versión de CSS3 podremos linkar desde la hoja de estilo a archivos de fuente específicos (de nuestra elección), consiguiendo implantar fuentes que el usuario no tenga necesariamente instaladas, las “Foundries” que diseñan y guardan derechos sobre tal o cual fuente se reservaran aún el aceptar o no que su producto sea utilizable por nosotros gratuitamente en tanto que diseñadores.

De este modo, cuando el conjunto de navegadores soporte el CSS3 (por el momento, sólo Safari lo hace), tendremos que confiar en que la fuente que nos gusta es de uso gratuito.

sIFR al rescate

En este tutorial vamos a mostrar cómo integrar sIFR con WordPress rápidamente, para disfrutar de la tipografía que queramos para nuestros encabezados, y siempre dentro del marco legal que los diseñadores de fuentes proponen respetar.

Como algunos sabéis, sIFR reemplaza ciertos tags en nuestro HTML con pequeñas películas de Flash, una tecnología capaz de renderizar, para el usuario, cualquier fuente que queramos, y ello de forma legal – puesto que Flash es una tecnología que no distribuye la fuente como archivo explotable, sinó como vídeo.

Como nota, siempre es bueno saber que un pequeño porcentage de internautas no dispondrá de Flash en su navegador, o lo mantendrá desactivado, ante lo cual sIFR simplemente no entrará en acción y los encabezados se mostrarán normalmente (con Georgia, Verdana, o la fuente que en su momento especificamos en nuestra hoja de estilo).

El código mágico que tendremos que utilizar, se lo debemos a Pat Dryburgh, un diseñador de Canadá que amablemente publicó la idea en su blog.

Lo primero que tenemos que hacer, es bajar la última versión de sIFR, de su base de datos. La base de datos no está formateada, nosotros simplemente bajaremos el primer archivo de la lista, es decir, la última versión.

Modificando los archivos

Una vez en el Escritorio, lo vamos a descomprimir y borrar la demo y el changelog, que no necesitaremos.

Entraremos entonces en el dosier llamado “flash” y abriremos sifr.fla.

(Si no tenemos el programa, siempre podemos ir a sIFR Generator, subir una de nuestras fuentes preferidas, y recibir el archivo en .swf, que es cuanto necesitamos.)

Clicamos ahora en el rectángulo blanco, seleccionamos el texto, y, con él aún seleccionado, le daremos la fuente que nos apetezca a partir del cuadro de diálogo inferior.

Si queremos añadir símbolos y alfabetos especiales, ahora es el momento : una función a la derecha de las tipografías nos lo va a permitir.

Vamos ahora a exportar esa película de Flash. Archivo -> Exportar -> Exportar Película.

Usaremos los parámetros por defecto y salvaremos el archivo con el nombre de la fuente escogida, por ejemplo en nuestro caso “rockwell”, y especificaremos salvar el archivo en el Escritorio.

Vamos a recuperar ahí el archivo, y a emplazarlo dentro de la carpeta que abrimos en primer lugar, esto es, “flash”.

Iremos ahora a la carpeta “js” y abriremos sifr-config.js con nuestro editor de texto favorito.

Seleccionaremos todo … y lo borraremos.

Pegando nuestro particular sifr-config.js

Ahora tenemos que recuperar el nombre que le dimos a nuestra película de Flash exportada. En nuestro ejemplo, será rockwell.swf, de modo que aquí, en sifr-config.js, lo usaremos correspondientemente :

sIFR.activate(rockwell);

sIFR.replace(rockwell, {
      selector: 'h1',
     css: [
        '.sIFR-root { color:#000000; font-size: 3em; }',
        'a {color: #000000; text-decoration: none;}',
        'a:hover {color: #555555;}'
        ]
});

sIFR.replace(rockwell, {
      selector: 'h2',
     css: [
        '.sIFR-root { color:#000000; font-size: 2em; background-color:#F9F9F9 }',
        'a {color: #000000; text-decoration: none;}',
        'a:hover {color: #555555;}'
        ]
});

sIFR.replace(rockwell, {
      selector: 'h3',
     css: [
        '.sIFR-root { color:#000000; font-size: 1.5em; background-color:#F9F9F9 }',
        'a {color: #000000; text-decoration: none;}',
        'a:hover {color: #555555;}'
        ]
});

sIFR.replace(rockwell, {
      selector: 'h4',
     css: [
        '.sIFR-root { color:#000000; font-size: 1.2em;  background-color:#F9F9F9  }',
        'a {color: #000000; text-decoration: none;}',
        'a:hover {color: #555555;}'
        ]
});

sIFR.replace(rockwell, {
      selector: 'h5',
     css: [
        '.sIFR-root { color:#000000; font-size: 1em; background-color:#F9F9F9  }',
        'a {color: #000000; text-decoration: none;}',
        'a:hover {color: #333333;}'
        ]
});

sIFR.replace(rockwell, {
      selector: 'h6',
     css: [
        '.sIFR-root { color:#000000; font-size: 18px; background-color:#F9F9F9  }',
        'a {color: #000000; text-decoration: none;}',
        'a:hover {color: #555555;}'
        ]
});

Salvamos y cerramos. Recuerda que aquí debes incluir el nombre de tu propia fuente escogida. Rockwell es solo el ejemplo que estoy utilizando.

Vamos ahora a renombrar al fin toda la carpeta que contiene a sIFR, con un nombre sencillo, “sifr” mismamente, porque normalmente ella nos vendrá con el nombre de la versión. La vamos a emplazar seguidamente dentro de la carpeta de nuestro tema de WordPress en uso, al lado de la carpeta de imágenes.

Tenemos ahora 3 sub-carpetas dentro de “sifr” :

1. en “flash”, hemos añadido una película .swf con nuestra fuente escogida.
2. en “js”, hemos modificado uno de los archivos.
3. una carpeta llamada “css”, que vamos a abrir.

Iremos directamente al final del archivo, y añadiremos los siguiente :

.sIFR-active h1 {
  visibility:hidden;
  }

.sIFR-active h2 {
  visibility:hidden;
  }

.sIFR-active h3 {
  visibility:hidden;
	}

.sIFR-active h4 {
  visibility:hidden;
	}

.sIFR-active h5 {
  visibility:hidden;
	}

.sIFR-active h6 {
  visibility:hidden;
	}

Este código prevendrá que los encabezados se hagan visibles durante la milésima de segundo en que son reemplazados, lo cual nos puede convenir siempre que sIFR tarde algo más en cargarse.

Vamos ahora hacia el último paso.
Vamos a crear con nuestro Editor de Texto un nuevo archivo, llamado functions.php, o lo abriremos si ya disponemos de él en el tema de WordPress que queremos utilizar.

Functions.php

Vamos a llenarlo con este código.

//sIFR

function sifr_scripts() {
	global $siteurl;
	if (empty($siteurl)) $siteurl = get_settings('siteurl');
	$sifrurl = $siteurl.'/'.'wp-content/themes/NOMBREDECARPETADELTEMA/sifr/';

    /* The xhtml header code needed for lightbox to work: */

	echo '<!-- start sifr scripts -->

	<link rel="stylesheet" href="'.$sifrurl.'css/sifr.css" type="text/css" media="screen">
	<link rel="stylesheet" href="'.$sifrurl.'css/sIFR-print.css" type="text/css" media="print">

	<!-- Added inline JS for mod_rewrite concerns - http://jbradforddillon.com -->

	<script src="'.$sifrurl.'js/sifr.js" type="text/javascript"></script>
	<script type="text/javascript">
		var NOMBREDELAFUENTE = { src: "'.$sifrurl.'flash/NOMBREDELAFUENTE.swf" };
	</script>
	<script src="'.$sifrurl.'js/sifr-config.js" type="text/javascript"></script>

	<!-- sifr scripts -->

	' ;

	}

	add_action('wp_head', 'sifr_scripts');

Si ya disponamos de un functions.php, asegurémonos que estamos pegando el código al final del archivo, antes del fin de la declaración PHP.

?>

Si no tuviéramos un functions.php y lo hemos creado de cero, vamos a añadir tanto al principio como al final del archivo las declaraciones de apertura y cierre correspondientes :

<?php
// código proporcionado
?>

Una vez todo listo, reemplazamos, en ese código, tres elementos :

1. NOMBREDECARPETADELTEMA
2. NOMBREDELAFUENTE
3. NOMBREDELAFUENTE (una segunda vez)

Salvamos y cerramos !

La mayoría de Temas de WordPress tienen, en header.php, una función para albergar código inyectado por nuestros plugins. Es la siguiente :

<?php wp_head(); ?>

Asegurémonos pues que la tenemos nosotros también, en header.php, y justo antes del cierre “head” de nuestro HTML.

Ahora deberíamos ir a ver nuestro Blog, y esperar que todo haya funcionado correctamente.
Para cambiar los colores de sIFR, nos dirigiremos a sifr-config.js.
Notad que yo he puesto las letras en negro, y cambian a gris si son links por los que pasa el cursor.

Es muy cierto que tenemos algunos plugins para WordPress que automatizarían el proceso, aunque a veces puede ser interesante entender lo que está ocurriendo en cada archivo; es así que quería compartir con vosotros este tutorial.

Para realizar rápidamente esto en WordPress, vamos a escribir el siguiente código en nuestro functions.php (recordemos que, a falta del mismo, lo podemos simplemente crear, vacío, y nombrarlo como tal en cualquier editor de texto, para seguidamente llenarlo):

function the_breadcrumb() {
	if (!is_home()) {
		echo '<a href="';
		echo get_option('home');
		echo '">';
		bloginfo('name');
		echo "</a> » ";
		if (is_category() || is_single()) {
			the_category('<span class="ocultar">title_li=</span> » ');
			if (is_single()) {
				echo " » ";
				the_title();
			}
		} elseif (is_page()) {
			echo the_title();
		}
	}
}

No olvidemos empezar y acabar este código con la apertura y cierre del PHP, caso de que no tengamos un functions.php y debamos crearlo virgen.

Vamos a “traducir” el código :

“Si no nos encontramos en la Página de Inicio, y por lo tanto sí en un post o un archivo o en una página estática … imprimamos un link hacia el inicio, seguido de la categoría / categorías en las que nos situemos si es el caso, y, finalmente, el eventual título de nuestro post como punto de destino actual, o el título de la página estática si de ello se tratara”.

Más tarde, añadiremos en nuestro CSS la siguiente clase :

.ocultar{display:none}

Ello nos servirá para controlar que nuestra función no nos imprima nada más que las categorías que nos interesa conseguir, evitando imprimir pues la parte “title_li”, que es la que nos sirve para llamar a las categorías en cuestión (y que aparacería si el artículo resulta estar inscrito en más de una categoría).

Finalmente, sólo necesitamos poner en nuestro template (por ejemplo, justo antes del fin de nuestro header.php), la siguiente nueva función :

<div class="clear"></div>
<?php the_breadcrumb(); ?>
<div class="clear"></div>

Esperamos que con este mini-tutorial hagáis que vuestros lectores (y los motores de búsqueda como Google, que van a indexar de lujo las distintas secciones), encuentren vuestro Blog aún más navegable.

WP Smart Image es un excelente plugin de Darío Ferrer recién salido del horno para gestionar el tamaño de las imágenes en tus plantillas de WordPress.

Tal como explica el autor, con WP Smart Image puedes:

• Elegir la imagen a mostrar.
• Elegir entre los cuatro tamaños que genera WordPress: miniatura, medio, grande y full.
• Enlazar la imagen al artículo o dejarla sin enlace.
• Agregar clases e IDs personalizadas a tus imágenes para aplicar estilos CSS, o bien gestionarlas con javascript, php, etc.
• Mostrar imágenes en la lista de entradas que se encuentran ocultas en el contenido.
• Obtener sólo la URL de la imagen en lugar de la etiqueta completa.
• Personalizar atributos ALT y TITLE predeterminados si éstos no han sido configurados.
• Agregar enlace a la versión full de la imagen desde la miniatura o tamaño medio.
• Personalizar las imágenes genéricas (y sus rutas) para todos los tamaños, las cuales aparecerán cuando el artículo no tenga imágenes.

Olvídate del engorro que suponen los campos personalizados, este plugin tiene todo lo que que se le puede pedir a un plugin: una función útil, un manejo sencillo, una programación limpia, un diseño impecable y una excelente ayuda organizada en pestañas en el mismo panel de opciones del plugin.

Además lo tenemos en versión bilingüe, español e inglés y, cuando ya no lo necesites puedes eliminar todos los datos creados actúa solo en las plantillas, no agrega datos en la BBDD, manteniendo así tu BBDD y tu WordPress en las mejores condiciones.

En definitiva, otra gran aportación de la comunidad hispana a WordPress.