Archivo etiquetas: wordpress

Tips: Muestra imágenes a medida que lees el blog (WordPress Plugin)

19 abr 2010

Una de las cosas que más me gusta de Mashable son las tecnologías que implementa en su blog, muchas basadas en AJAX. Recuerdo el “Drag to Share”, una extensión para compartir imágenes directamente en redes sociales; y otro que va mostrando las imágenes a medida que navegas por el blog, agilizando la carga. Realmente creaba un efecto muy chulo pero no tenía ni idea de cómo se llamaba. Después de rebuscar por Google, lo encontré.

wordpress-plugin

El plugin en cuestión es el jQuery Image Lazy Load WP y su instalación es tan sencilla como descargarlo, subirlo a la carpeta de plugins y activarlo, no necesita configuración. Yo ya lo tengo en pisito :)

Los secretos para dar a conocer tu blog (Personal Computer)

24 mar 2010

¡Casi se me pasa! Ya ha salido el siguiente número de la revista Personal Computer & Internet con el artículo de la sección de Blogs, “Los secretos para dar a conocer tu blog”.

secretos-blog

El artículo se centra en una serie de consejos que ayudarán a que tu blog se de a conocer, tocando puntos como crear comunidad, networking, la importancia del contenido, SEO, Social Media o indexabilidad. Como sabéis son tutoriales paso a paso que empiezan a muy bajo nivel y van subiendo conforme avanza el artículo.

Normalmente siempre juego con las portadas para “citar” a blogs que sigo. En este caso está el de Ginatonic pero haciendo memoria han habido muchos como Kafelog, Chica de la Tele, Pixfans, Anieto2k, Furia Contra La Máquina entre otros. Además de los que “cito” en las páginas del artículo. Gracias a esto me he dado cuenta que llevo casi un año y medio escribiendo en Personal Computer. Como pasa el tiempo… ;)

Tutorial WordPress: Widgets

9 mar 2010

Hace casi un mes desde que salió mi segundo theme de WordPress, desarrollado desde cero en Social Noise, esta vez para el blog de SAAB, Move Your Mind. Me encantó el resultado conseguido con El Blog de Robin pero este me fascinó. Rompe por completo con la estructura blog, tiene muchos pequeños detalles (como poner un poco de transparencia a la categoría que no estás visitando) y contiene una miniweb dentro de la categoría Saab.

move-your-mind

Para desarrollar el theme tuve que valerme mucho del ingenio pero como WordPress es totalmente abierto y tiene una documentación espléndida, salió adelante sin muchas complicaciones. Un obstáculo que me encontré fue facilitar la gestión del blog a un editor. Cuando diseñas un nuevo theme con muchas pijadas tienes que pensar en la persona que va a gestionarlo. Es fácil modificarlo accediento por FTP y tocando el código pero no todo el mundo tiene conocimientos para hacerlo. Es en este punto es donde entran los Widgets.

Los Widgets son pequeños módulos que se gestionan desde el panel de administración de WordPress. Hay de todo, desde uno que muestra lo últimos comentarios hasta otros que permiten introducir código HTML. Estos últimos son los que nos valdrán para conseguir que la persona que gestione el blog sólo tenga que modificar el código HTML de un Widget en concreto para cambiar alguna zona dentro del theme. Por ejemplo, si en algún lado del theme hay una imagen que se cambia de forma manual, lo que tendremos que hacer es crear una nueva zona de Widgets y jugar con éstos, permitiendo gestionarlo todo desde el panel de administración de WordPress.

Crear una nueva zona de Widgets

Entre los archivos que componen un theme de WordPress encontrarás uno que se llama functions.php. Éste contiene las funciones propias del theme y entre ellas las zonas de Widgets. Si lo abres encontrarás el siguiente código (entre otras cosas):

<?php
if ( function_exists(‘register_sidebar’) )
register_sidebar(array(
‘before_widget’ => ”,
‘after_widget’ => ”,
‘before_title’ => ‘<h2>’,
‘after_title’ => ‘</h2>’,
));
?>

Esto normalmente corresponde a la barra lateral (sidebar). Si queremos añadir nuevas secciones lo único que tendremos que hacer es incluir justo debajo, pero dentro de las etiquetas php, el mismo código pero con un nuevo campo: name. Este campo debe ser descriptivo y será la clave para llamar a la zona de Widgets. Además puedes definir el código HTML que tendrá antes y después de cada Widget y antes y después del título. Este por ejemplo sería para el pie (footer).

if ( function_exists(‘register_sidebar’) )
register_sidebar(array(
‘name’ => ‘Footer’,
‘before_widget’ => ”,
‘after_widget’ => ”,
‘before_title’ => ‘<h2>’,
‘after_title’ => ‘</h2>’,
));

Colocar las nuevas zonas de Widgets

Ya tenemos una nueva zona de Widgets, si entramos en el panel de administración de los Widgets veremos que hay una nueva sección, pero ahora falta situarla en el theme. El proceso es muy sencillo y lo ilustraré con un ejemplo. Imagina que en el footer tienes una imagen que quieres que el editor del blog la gestione de forma fácil a través de un Widget. Pues lo que haremos es sustituir la URL de la imagen por:

<?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar("Footer") ) : ?>
<?php endif; ?>

Esto llama a la zona “Footer” de Widgets y carga el código que esta tenga. Vete a Widgets dentro del panel de administración e incluye un Widget de Texto/HTML en la sección correspondiente con la URL de la imagen. El resultado es que se mostrará la imagen que el editor ponga en dicho Widget. Así de sencillo :)

ThemeLab

Añade un podcast a tu blog con WordPress (Personal Computer)

9 feb 2010

Ya ha salido el siguiente número de la revista Personal Computer & Internet con el artículo de la sección de Blogs, “Añade un podcast a tu blog con WordPress”.

personal-computer-podcast

El artículo se centra en el podcasting, explicando cómo integrar un podcast en WordPress gracias a la extensión Podpress. En portada he puesto a todo un referente en el sector: Kafelog (aunque ellos no se dieran cuenta :P ) Como sabéis son tutoriales paso a paso que empiezan a muy bajo nivel y van subiendo conforme avanza el artículo.

Tutorial WordPress: uso de los campos personalizados

26 ene 2010

Estas últimas semanas he estado más desconectado de Twitter, de los blogs, he publicado menos en pisito… Pero todo tiene una explicación y es que he vuelto a algo con lo que no me ponía desde hacía tiempo: programar. Salieron dos proyectos de desarrollo en WordPress en Social Noise y he estado sumergido en ellos. Uno ya ha sido lanzado, Las cosas de Robin, y otro pronto verá la luz :) El caso es que nunca había creado un theme desde cero y la verdad es que me ha encantado.

lascosasderobin

Podría escribir un libro con todo lo que he aprendo haciéndolo pero voy a ir paso por paso y empezar a descubrir cosillas que a lo mejor no sabéis y son realmente útiles y fáciles de implantar. Comienzo con los Campos Personalizados o Custom Fields. Cuando estás escribiendo un nuevo post en WordPress, a final de esa página verás una sección con este nombre que te permite añadir un nombre y lo que quieras en una caja de texto.

custom-field

Lo que se consigue con esto es asociar ‘algo’ a un post y ese algo se guardará bajo el nombre que queramos. Pongo un ejemplo práctico. Cada post del VideoPisito tiene un campo personalizado llamado video con la dirección a la miniatura que sale en el home de cada uno de los posts. De esta forma cuando WordPress carga el listado de posts, accede a ese campo y saca su valor para cada uno de ellos y lo muestra.

Para el blog de Michael Robinson había que jugar mucho con este tipo de cosas. Sin ir más lejos en la barra lateral podemos encontrar un módulo con el último vídeo de apuesta, un listado con los últimos posts acompañados de una miniatura y el vídeo destacado de la semana. Podíamos hacer que esto fuera manual pero es mucho más práctico mediante campos personalizados, en uno poniendo el código del vídeo y en otro la URL de la miniatura. ¡La gran ventaja es que puedes asociar a un post lo que quieras y cuantos quieras!

¿Cómo funcionan? Pues muy sencillo: pincha en Nuevo dentro de campo personalizado en el editor de WordPress, elige un nombre e introduce un valor, por ejemplo, miniatura y la URL de una imagen que quieras usar como miniatura. Ahora tendrás que ir al lugar donde quieres mostrarlas, por ejemplo en la barra lateral, y poner el siguiente código:

<?php
$postslist = get_posts(‘numberposts=10&order=DESC’);
foreach ($postslist as $post) :
setup_postdata($post);
$miniatura = get_post_meta($post->ID, ‘miniatura’, true);
?>

<div class="ultimo-video"><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><img src="<?php echo($miniatura) ?>" alt="<?php the_title(); ?>" width="93px" height="50px" align="left" style="margin-left:5px; margin-right:5px;" /></a>

<h2 class="post-title"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>

<small><?php the_time(‘j’) ?> de <?php the_time(‘F’) ?> de <?php the_time(‘Y’) ?></small></p>

</div>
<?php endforeach; ?>

¡No os asustéis! Vamos a analizarlo. En las primeras tres líneas cargo los diez últimos posts (get_posts()) y para cada uno de ellos (foreach) uso la variable $post para cargar sus valores internos, entre ellos están los campos personalizados. En la siguiente línea extraigo el valor de mi custom field ‘miniatura’ (get_post_meta()) y lo almaceno en la variable $miniatura.

Luego lo que hay que hacer es imprimirlo y como podéis ver es sólo echo ($miniatura) en PHP dentro del campo src de la imagen, ya que en mi caso el campo personalizado almacenaba la URL de una imagen. Podéis ver también que uso funciones como the_permalink() o the_title() que imprimen la URL del post cargado y el título respectivamente.

El resultado de este código, con un poco de CSS y JQuery para el scrollbar dinámico, es el listado de los últimos posts con miniaturas que hay en la barra lateral del blog Las cosas de Robin.

Los campos personalizados tienen un potencial grandísimo, sobretodo para automatizar acciones que van asociadas a posts. Algo que recomiendo para desarrollar en WordPress con agilidad es la familiarización con el Codex, donde están todas las funciones del CMS de Automattic. Dudas y críticas a los comentarios ;)