Cristalab

Funciones matemáticas en Python
Agregar imagen destacada automáticamente en Wordpress
Carga progresiva de imágenes con lazyload.js y jQuery
Web 2.0
Vista a Internet Explorer 7
Stepmania

Posted: 08 Aug 2012 08:39 AM PDT

En este videotutorial de Python veremos cómo manipular datos numéricos para cumplir ciertos requisitos, lo cual es, sin duda, una práctica frecuente en el desarrollo de software, pero existen funciones creadas para resolver problemas cotidianos, que conviene conocer y dominar para desarrollar de forma más ágil.

Agregar imagen destacada automáticamente en Wordpress

Posted: 08 Aug 2012 02:45 AM PDT

Una imagen vale más que mil palabras y es bastante cierto, por eso es que en nuestro artículos agregamos imágenes que digan algo a los usuarios, en este tutorial agregaremos de forma automática una imagen destacada por si se nos olvida alguna vez y en su caso configuramos una imagen por defecto.

Con este fragmento de código explicaremos cómo extraer una imagen destacada (feature image) de forma automática en los post de wordpress, dejaré el código necesario y tratare de explicar cada trozo de código y la función que realiza cada linea.

Esta función además de capturar la primera imagen del post si no existe imagen destacada, también puede agregar una imagen por defecto para el caso en que el post no tenga ninguna imagen. Esto es muy útil ya que no todos los post tienen imagen y con esta opción podemos agregarle una por defecto.

Código completo

Código :

function auto_post_thumbnail() {            global $post;            $already_has_thumb = has_post_thumbnail($post->ID);                if (!$already_has_thumb)  {                $attached_image = get_children( "post_parent=$post->ID&post_type=attachment&post_mime_type=image&numberposts=1" );                            if ($attached_image) {                                  foreach ($attached_image as $attachment_id => $attachment) {                                  set_post_thumbnail($post->ID, $attachment_id);                                  }                             } else {                                  set_post_thumbnail($post->ID, 'ID_imagen_por_defecto');                             }                          }        }   //Final de la función  add_action('the_post', 'auto_post_thumbnail');  add_action('save_post', 'auto_post_thumbnail');  add_action('draft_to_publish', 'auto_post_thumbnail');  add_action('new_to_publish', 'auto_post_thumbnail');  add_action('pending_to_publish', 'auto_post_thumbnail');  add_action('future_to_publish', 'auto_post_thumbnail');

En esta función llamamos la imagen o las imágenes adjuntas si existen, utilizando las distintas funciones que wordpress nos proporciona, a continuación las más importantes.

Verificamos si hay imágenes destacadas

Código :

$already_has_thumb = has_post_thumbnail($post->ID);

has_post_thumbnail($post->ID);: Con esta función preguntamos al sistema si hay o no imagen destacada y guardamos el resultado en la variable $already_has_thumb

Extraemos la primera imagen del post si no hay destacadas

Código :

if (!$already_has_thumb)  {      $attached_image = get_children( "post_parent=$post->ID&post_type=attachment&post_mime_type=image&numberposts=1" );

Agregamos una condicional que dice: si no hay imagen adjunta if (!$already_has_thumb), mostramos la primera imagen del post utilizando la función get_children(); en el code de wordpress explica perfectamente esta función y el funcionamiento con ejemplos de cada uno de estos parámetros.

Mostramos la imagen capturada

Código :

if ($attached_image) {        foreach ($attached_image as $attachment_id => $attachment) {          set_post_thumbnail($post->ID, $attachment_id);        }     } else {            set_post_thumbnail($post->ID, 'ID_imagen_por_defecto');            }  }

En esta parte con otro condicional preguntamos si hay algún valor en la variable $attached_image, que es la que contiene el valor de la función get_children() y si es así con un bucle foreach agregamos los datos capturados en la variable $attachment_id, ahora podemos postrar la imagen utilizando la función set_post_thumbnail($post->ID, $attachment_id); con sus dos parámetros, necesarios para saber respectivamente el post de donde vamos a extraer la imagen y el id o nombre de adjunto a mostrar.

Si no tenemos (else) ninguna imagen adjunta mostramos un archivo adjunto por defecto que podemos asignar nosotros mismos, simplemente agregando el ID de dicho archivo en esta parte del código.

Código :

else {     set_post_thumbnail($post->ID, 'ID_imagen_por_defecto');    }

Buscar el id del archivo por defecto

Para agregar una imagen predeterminada en los post si no hay imágenes destacadas o imágenes en el post, podemos crear una imagen personalizada subirla desde la Librería multimedia y fijarnos en el ID de esa imagen, lo agregamos en nuestra función y listo.

Agregar la función auto_post_thumbnail() a los hook de wordpress

Esta es la última parte del código y creo que la más importante, la función anterior sin estos ganchos o hook no realiza ninguna acción, esta es la parte del código donde se le dice a la función cuando tiene que trabajar.

En nuestro caso nos interesa que esta función trabaje cuando se publica alguno de los tipos de post que trae wordpress, esto lo haremos utilizando la función add_action(), a esta función les pasamos 2 parámetros:

El primero: Nombre de la acción o hook que hace que se ejecute nuestra función
El segundo: Nombre de la función a ejecutar.

Código :

add_action('the_post', 'auto_post_thumbnail');  add_action('save_post', 'auto_post_thumbnail');  add_action('draft_to_publish', 'auto_post_thumbnail');  add_action('new_to_publish', 'auto_post_thumbnail');  add_action('pending_to_publish', 'auto_post_thumbnail');  add_action('future_to_publish', 'auto_post_thumbnail');

Si quiere aprender un poco más sobre las acciones de wordpress aquí tiene un listado completo de estas acciones.

Conclusión

Sólo con pegar esta función y agregar el ID de una imagen por defecto te ahorra trabajo como lo de agregar imágenes a tus post. Es una función muy interesante y útil, y espero la explicación le sea de utilidad y se entienda perfectamente.

Carga progresiva de imágenes con lazyload.js y jQuery

Posted: 16 Jul 2012 04:22 AM PDT

Aprende cómodamente como mejorar la velocidad y la experiencia del usuario en tus diseños web. Este ejemplo implementa la carga de imágenes sólo cuando, mediante el scroll, aparecen en la parte visible del navegador. Solo necesitarás usar jQuery y el plugin lazyload.js.

[nota:40b07582ef]Recuerda borrar los datos de navegación (cache) para poder visualizar el efecto correctamente.[/nota:40b07582ef]