• Una reflexión para elegir plataforma de blogging
• Cómo actualizar manualmente tu versión de WordPress

Recapitulemos lo que hemos visto en las últimas entradas, aquí en Blogpocket.com, acerca del tratamiento de las imágenes adjuntas a un post (los objetos denominados attachments que, en realidad, pueden ser también vídeos, etc.).

• Si subes una imagen, mediante el botón “Media” del editor de posts o mediante la opción “Media” del escritorio), se almacena en el directorio local (que suele ser wp-content/uploads). Las imágenes asociadas (WordPress crea varias versiones, en distintos tamaños -thumbnail, medium y full- del archivo subido) se denominan “Attachments” del posts.
• Con el plugin W3 Total Cache puedes hacer que dichas imágenes, automáticamente, se transmitan a un CDN. En Configurando W3 Total Cache para el CDN de Amazon vimos cómo hacerlo
• Además, para cada post puedes elegir una imagen como destacada (featured). Puede ser cualquiera de las existentes en la galería y no tiene porqué coincidir con las attachments. Puedes asignar una imagen featured automáticamente, y de una pasada, a partir de una de las imágenes attachment de cada post, en toda la base de datos de tu blog, con el plugin Auto Featured Image. Sin embargo, llegado el caso, puede ser necesario eliminar todas las imágenes featured, cuestión que explicábamos en Cómo eliminar la imagen en miniatura de todos los posts.
• Otro problema puede darse en algunos themes que utilizan funciones (como vt_resize) para redimensionar la imagen featured y utilizando un CDN. El problema y la solución los describiamos en Cómo redimensionar la imagen featured si utilizas CDN.
• Si a partir de un determinado momento empiezas a utilizar un CDN y las imágenes de tus posts están enlazadas a Flickr, puedes traértelas al directorio local (y, en consecuencia, al CDN con W3 Total Cache) con el plugin Add Linked Images To Gallery.

Hoy añadiremos a todo esto la forma de conseguir extraer de un post la primera imagen attachment. ¿Y para qué puede servir eso?. Puede ser muy útil para mostrar siempre una imagen asociada al post, como destacada, aunque no tenga asignada una featured. Y también en el caso de instalaciones multisite con varios editores, en las que puede ser interesante no obligar a éstos a subir fotos al directorio local ni a asignar imágenes featured, pudiendo seguir enlazando a URLs externas. El plugin Add Linked Images To Gallery y el código que veremos a continuación harán el trabajo por ellos.

Extrayendo la primera imagen de un post

La función de WordPress get_posts sirve para crear múltiples bucles y recupera una lista de los últimos posts bajo unos determinados criterios. Para utilizarla con el objetivo de extraer las imágenes adjuntas a un post, solo es necesario saber que las imágenes attachments se guardan en la base de datos con el indicativo “attachment” en el campo post_type y, además, con el valor ‘inherit’ en el campo post_estatus. Otros dos argumentos para esta función son el número de posts que se recuperarán (numberposts a -1 significa todos los posts) y post_parent que es el número ID del post.

Con ello se obtiene una lista de todos los posts que se puede recorrer para seleccionar lo que se quiera. En nuestro caso, con la función wp_get_attachment_image_src accederemos al array que contiene la URL y los valores del ancho y alto del archivo attachment.

<?php
$args = array( ‘post_type’ => ‘attachment’, ‘numberposts’ => 1, ‘post_status’ =>’inherit’, ‘post_parent’ => $post->ID );
$attachments = get_posts($args);
if ($attachments) {
foreach ( $attachments as $attachment ) {

$image = wp_get_attachment_image_src($attachment->ID, ‘full’);
}
}
?>

Una vez obtenido el array con los atributos de la imagen attachment, podemos mostrar ésta redimensionada, de la siguiente forma:

<?php if ( $attachments ) { ?>
<img src=”<php echo $image[0]; ?>” width=”280″ height=”257″ alt=”image”/>
<?php }
?>

Ver también la función get_children con la que también se puede generar un bucle para mostrar la primera imagen de un post.

Recordemos que la imagen featured (o thumbnail) se define cuando se publica un post, por lo que el plugin W3 Total Cache se habrá llevado al CDN todas las imágenes asociadas al post en el momento de la publicación y no tendrá cualquier otra que se cree posteriormente (como puede pasar con vt_resize).

Una posible solución es utilizar la función wp_get_attachment_image_src que devuelve un array con la URL, el ancho y la altura de una imagen adjuntada a un post. Si se quiere el src de la imagen se puede obtener con el primer elemento del array devuelto por la funcion.

Recordemos también que una imagen adjuntada a un post es la que se sube a la instalación de WordPress en el momento de publicar el post o con la opción “Add new” del apartado “Media”.

De esa forma, podemos utilizar el siguiente código PHP para redimensionar una imagen a 280×257 por ejemplo:

<?php
$thumb = get_post_thumbnail_id();
$image = wp_get_attachment_image_src($thumb, ‘full’);
?>
<img src=”" width=”280″ height=”257″ alt=”image”/>

Donde $image[0] es el primer elemento del array devuelto por wp_get_attachment_image_src

Con get_post_thumbnail_id se obtiene el ID de la imagen featured (o thumbnail) adjuntada al post. Si no se adjuntó ningún thumbnail, la función devuelve un valor vacio. Para que un theme pueda utilizar imágenes featured, hay que incluir la siguiente sentencia en el archivo functions.php del theme activo (ver Post Thumbnails) o estar activado en una instalación multisite.

add_theme_support( ‘post-thumbnails’ );

[Fuente de la imagen: google.tecnoad.com]

[Fuente de la imagen: How to Install and Setup W3 Total Cache for Beginners]

W3 Total Cache es un excelente plugin de WordPress para automatizar la transmisión de los archivos de tu blog al CDN de Amazon. Con él podemos subir todos los archivos de un determinado tipo (por ejemplo, las imágenes incluidas en
todos los posts, las denominadas “attachments“) o hacerlo cada vez que publiquemos un post.

Activar el CDN

En primer lugar, hay que activar el CDN. Para ello, seleccionamos la casilla “Enabled” del apartado “CDN”, dentro de la opción “General Settigns” de la configuración de W3 Total Cache. En el desplegable “CDN Type” elegimos “Amazon CloudFront” y pinchamos “Save all settings”.

Escribir las credenciales del CloudFront

En la pestaña “CDN” de la configuración de W3 Total Cache (Performance), escribimos las credenciales con las que nos registramos en Amazon S3. En “Access key ID” tecleamos el Nº de la clave de acceso y en “Secret Key” la clave de acceso secreta (datos que obtuvimos en el registro de Amazon S3 tal y como contamos en el apartado “Las credenciales de seguridad de Amazon S3″ del post Activando el CDN de Amazon para optimizar el tiempo de carga).

En “bucket” escribimos el nombre del bucket de Amazon S3 y en “Replace site’s hostname with” ponemos el nombre del CNAME que creamos para asociarlo a la distribución del CloudFront.

Configurar qué archivos vamos a subir automáticamente

Continuamos en la opción “CDN” del apartado “Performance” del plugin W3 Total Cache para indicarle qué ficheros hay que subir automáticamente.

Cada opción permite, con el botón “Upload attachments”, subir también manualmente todos sus archivos.

Con “Hosts attachments” podemos subir las imágenes asociadas a cada post. Su botón “Upload attachments” lo utilizaremos la primera vez para subir al CDN las imágenes de todos los posts. Una vez realizda esta primera carga manualmente, cada vez que publiquemos un post solo se transmitirán las imágenes asociadas a dicho post, sin que tengamos que hacer nada.

Si queremos automatizar la subida de otros archivos que no se encuentren en wp-includes/files, activaremos la opción “Host Custom Files” y para que se sobreescriban los archivos, seleccionaremos “Force over-writing of existing files”.

Las máscaras de los archivos relacionados con la opción “Host Custom files” anterior, se escriben en la caja “Custom file list” del apartado “Advanced”.

Y si queremos que se actualicen cualquier archivo modificado, hay que activar la casilla “Export changed files automatically”.

En mi último encuentro en Madrid con Guillermo Carvajal salió a colación el CDN de Amazon para optimizar el tiempo de carga. Gracias a él puedo publicar esta entrada en Blogpocket.

Pero antes de entrar en materia, te recomiendo como introducción la lectura de los siguientes posts:

• Optimizando el tiempo de carga de tu blog
• Cómo acelerar la carga de tu blog (I)
• Cómo acelerar la carga de tu blog (II)
• Cómo acelerar la carga de tu blog (y III)

¿Qué es un CDN?

En pocas palabras, un CDN es un repositorio externo a tu blog, que sirve de almacenamiento y que lleva asociado un servicio de transmisión rápida de archivos. Entre los muchos servicios que ofrece Amazon S3, se encuentra CloudFront que optimiza de forma muy eficiente la transmisión de archivos por lo que es ideal para guardar aquellos archivos que más tardan en cargarse, como las imágenes, los scripts y las hojas de estilo. Ambos servicios son de pago y se factura por el consumo de transmisión de datos.

Nos centraremos sobretodo en las imágenes. Conviene que todas se encuentran almacenadas en el directorio local del servidor donde tienes alojado tu blog. Este suele ser “wp-content/uploads”. Si has utilizado imágenes de tu cuenta de Flickr, puedes pasarlas todas a este directorio local con el plugin Add Linked Images To Gallery. Este plugin te copiará todas las imágenes desde Flickr y modificará todas las URL’s de las entradas de tu blog correspondientes a las imágenes. Además, a partir de entonces, podrás seguir utilizando Flickr y enlazarlo en tus nuevas entradas; y cuando las publiques, automáticamente se cambiarán las URLs.

Registro en Amazon S3 y creación de un “bucket”

El siguiente paso será registrarte en Amazon S3. Si tienes cuenta de Amazon puedes entrar directamente en aws.amazon.com/es/ e ir a la Consola de Administración de AWS. Ahí deberás crear un “bucket” o carpeta para tus archivos. En la región elige Irlanda. Al pinchar en “Create Bucket” la primera vez, deberás proporcionar tus datos de registro y facturación.

Registro en CloudFront y creación de una “distribución”

Una vez registrado en Amazon S3 y creado el “bucket”, podrás asociar una “distribución” en el CloudFront pero antes tendrás que suscribirte a dicho servicio. Entra en aws-portal.amazon.com/gp/aws/manageYourAccount y pincha en el enlace para suscribirte a la lista de servicios (entre los que se encuentra CloudFront). Tendrás que volver a dar tus datos de facturación y para verificar la validez de tu cuenta tendrás que llamar a un teléfono y proporcionar a la locución automática (en inglés) el pin que aparecerá en la página de suscripción.

Para crear la distribución en el CloudFront, haz click en el botón “Create distribution”, selecciona el “bucket” y, en la ventana siguiente, rellena el nombre del CNAME que crearás, a continuación, en tu hosting para manejar el enlace del tipo static.midominio.com en lugar del propio del CloudFront. El resto de valores son: Logging “Off” y Distribution Status “Enabled”.

Una vez creada la distribución, apunta el “Domain name” porque lo necesitarás para crar el CNAME.

Ahora haremos dos cosas: crar el CNAME en el hosting del blog y apuntar las credenciales de Amazon S3.

Creación de un CNAME en tu hosting

La creación de un CNAME para tu dominio depende del panel de administración que se utilice para tu hosting. Pero, en general, consiste en seleccinar tu dominio y entrar en el apartado de gestión de DNS. Ahí tiene que existir la opción de añadir registros de un dominio (de tipo A, NS, MX, CNAME, etc.). Escribe el nombre del registro (en nuestro caso, el nombre del alias del estilo static.midominio.com), el tipo (CNAME) y el valor (el “Domain name” que apuntaste cuando creaste la distribución en el CloudFront).

Las credenciales de seguridad de Amazon S3

En WordPress lo mejor es gestionar el manejo del CloudFront con un plugin del tipo W3 Total Cache. En un próximo post veremos cómo se configura ese plugin y para ello se necesitarán las claves de acceso al S3 de Amazon.

Dichas credenciales de acceso se encuentan en el enlace “Credenciales de seguridad” del apartado “Gestionar” al pie de la página home aws.amazon.com. En la pestaña “Claves de acceso” apunta el Nº de la clave de acceso y la clave de acceso secreta.

Test de prueba

Prueba que todo funciona correctamente subiendo un archivo cualquiera con el botón “Upload” desde la pestaña S3 de la consola de gestión de AWS.

Subir las imágenes a Amazon S3

Ahora solo resta subir todas las imágenes de tu blog al S3 de Amazon y modificar todas las referencias existentes a sus URLs por las nuevas de Amazon.

Continuará…

Un arduo trabajo si no fuese por el plugin W3 Total Cache. Lo vemos en el próximo post, aquí en Blogpocket.

Por otra parte, el plugin All In One SEO es capaz de modificar ciertas líneas del código HTML. Por ejemplo, el título de la página que va entre las etiquetas <title> y </title>.

Sin embargo, una de esas bombas trampa escondidas en los plugins hace que ambas extensiones sean incompatibles. Supongo que All In One SEO es incapaz de modificar el código de una página HTML si ésta se encuentra comprimida.

Para desinstalar la compresión con Zlib y hacer que All In One SEO funcione normalmente, eliminar las instrucciones, situadas al principio del archivo header.php.

<?php
ini_set(’zlib.output_compression’, ‘On’);
ini_set(’zlib.output_compression_level’, ‘1?);
?>

• RSS solo para tus ojos: cómo añadir contenido a tu blogs, solo visible en el RSS.
• Qué son los shortcodes y cómo se crean: cómo añadir funcionalidades nuevas a tu blog mediante pequeñas piezas de código.
• Cómo aplicar efectos a tus textos con JQuery: cómo modificar funcionalidades de tu blog con javascript.
• Cómo utilizar RewriteRule en WordPress: cómo emplear el archivo .htaccess para redireccionar url’s.
• Cómo añadir una imagen en miniatura al RSS de tus posts

¿Para qué un dominio?

Tengas o no un blog, disponer de tu propio dominio en Internet es muy recomendable si quieres promocionar tu marca comercial. Pero también es muy importante registrar el dominio con tu nombre si quieres crear tu propia marca personal.

Criterios para crear un dominio

Si vas a utilizar una plataforma que ya te proporciona el hosting como Blogger o WordPress.com, no te tienes que preocupar de nada porque se te facilitará una URL del tipo miblog.blogspot.com (en Blogger) o miblog.wordpress.com (en WordPress.com). Posteriormente y de forma opcional, podrás contratar el servicio de redirección de tu dominio al de dichos sistemas.

Si vas a instalar WordPress.org en tu propio servidor (en un espacio de hosting contratado por tí) es cuando te tienes que plantear registrar un dominio para el blog. Existen proveedores de servicio que ofrecen hosting gratuito pero suelen imponer muchas restricciones de espacio en disco, uso de memoria y tráfico. Una de esas restricciones puede ser el no admitir redirección desde tu dominio a la URL del tipo miblog.miproveedor.com. Así que lo mejor es buscar un proveedor que ofrezca un plan de alojamiento económico.

Es importante que diferencies bien entre dominio y hosting. Yo, incluso, prefiero tenerlos contratados en distintos proveedores: el dominio registrado en una empresa y el hosting en otra distinta. Eso me da más flexibilidad y libertad a la hora de cambiar de proveedor porque los traslados de dominio suelen ser complicados, burocráticamente hablando.

El dominio debe ser un nombre más bien corto y fácil de recordar. El dominio de Blogpocket es blogpocket.com, lógico, ¿no?.

¿Con quién registrar el dominio?

Hay muchas empresas que ofrecen este servicio. A nivel mundial, Godaddy es muy popular. Yo tengo ahí varios dominios y funcionan bastante bien; incluso tienen un soporte teléfonico en español muy eficiente.

También utilizo Piensa Solutions que tampoco me ha dado ningún problema. Quizás este sea más recomendable para empezar porque su panel de control es muy sencillo y fácil de utilizar. Aquí utilizamos como ejemplo a este proveedor pero éste no es un post patrocinado.

¿Qué extensión registrar?

Cuando te vayas a registrar, lo primero que tendrás que comprobar es si tu dominio está disponible, ya que alguien se te ha podido adelantar. En Piensa Solutions, una vez que escribes el dominio que quieres registrar, te aparece una lista con todas las extensiones, su disponibilidad y su precio.

Las extensiónes más importantes que debes intentar reservar son “.com”, “.es” (si estás en España), “.net” y “.org”.

Pero, como mínimo, puedes registrar el “.com” o el “.es” (si estás en España).

¿Cómo registrar el dominio?

Una vez que has elegido tus extensiones, pincha en el botón “Añadir al carrito” para iniciar el proceso de compra de los dominios.

A continuación, para cada dominio, elige el periodo de vigencia (1 año mínimo), elige si quieres proteger los datos en Internet (en caso contrario, son públicos) con el Whois Privado, el nombre completo del titular y, finalmente, elige el tipo de hosting (“Parking”). Escoge “Parking” para contratar solo el registro del domino.

Una vez rellenadas las opciones de los dominios que quieres contratar, en la pantalla siguiente verifica que solo quieres “Parking”, activando la casilla “Parking de dominios” para todos los dominios.

Para terminar, rellena los datos personales para hacerte cliente si no lo eres o identifícate con tu usuario o contraseña, si ya lo eres.

En la última pantalla, elige la forma de pago, acepta las condiciones legales y haz click en el botón “Realizar el pago” para confirmar la compra.

Por mail recibirás toda la información relacionada con el registro y las facturas correspondientes.

Resumen

Registra por lo menos el dominio miblog.com (y opcionalmente el miblog.es, miblog.org y miblog.net), solamente con la opción de parking y el registro privado.

El hosting contrátalo en otro proveedor distinto.

Para leer

¿Qué es lo que se necesita para empezar a bloguear?
El prodigioso sistema “gustavoarizpe” para encontrar nombres de dominios

El viernes que viene inauguraremos en Blogpocket la sección “La semana en imágenes” que será un resumen gráfico de los más significativo que hemos publicado en los últimos 7 días.

Hoy, dedico esta entrada a explicar cómo lo he implementado.

Para poder mostrar un listado de imágenes (una por cada post), evidentemente lo primero que hay que tener en cuenta es que cada entrada debe llevar asociada una. Para ello, utilizaremos las imágenes en miniatura (thumbnails) que, desde la versión 2.9, es capaz de gestionar WordPress.

Si tienes una instalación “multisite” no te debes preocupar porque tienes la función incluida en el editor de posts (un widget en la columna lateral con el que puedes añadir una “Featured image” o “imagen destacada”). Sin embargo, en una instalación normal tienes que añadir la siguiente instrucción en el archivo functions.php para activarla:

add_theme_support( ‘post-thumbnails’ );

Una vez que tenemos definida una imagen en miniatura (mediante el widget “featured image” del editor de posts) solo hay que saber extraerla con el correspondiente código PHP. En el blog Aurea encontrarás una buena explicación acerca de cómo programarlo: Thumbnail en WordPress; Mostrar 5 últimos posts con thumbnails.

Yo he utilizado el plugin Category Thumbnail List para no tener que gastar ninguna neurona. Para mostrar la tabla con las imágenes solo hay que añadir el shortcode siguiente, en cualquier lugar del post:

[categorythumbnaillist September, 10 2011]

Siendo “September, 10 2011″ la fecha a partir de la cual queremos mostrar posts. El plugin originalmente lleva el número ID correspondiente a la categoría de los posts que se quieren mostrar, en lugar de esa fecha. Ese identificativo se obtiene en la página de categorías poniendo el cursor encima de la categoría concreta que se va a utilizar. Esto quiere decir, además, que cuando edites una entrada, cuyo thumbnail va a salir en la galería, tienes que asignarle la categoría con ID “n”. Acuérdate también de poner el nombre del post como título de la imagen, ya que el plugin utiliza el nombre de la imagen para mostrar como descripción cuando se sitúa el cursor encima de ella.

Para configurar el tamaño de las imágenes en miniatura, el plugin añade una página de opciones en la columna de “Settings” del escritorio (yo he escogido 170×170), pero hay que asegurarse de elegir el tamaño miniatura al definir la “featured image“.

WordPress posee una opción de “Media” (galería de elementos multimedia) con la que, una vez definida la “featured image” para cada post, siempre puedes modificar sus características a posteriori (nombre, tamaño, etc.).

El plugin Category Thumbnail List tiene una hoja de estilos CSS con la que puedes adornar la lista totalmente a tu gusto.

Por último, el plugin muestra, debajo de cada imagen, el título del post. Si te parece mejor que la imagen aparezca sola, hay que quitar la siguiente instrucción:

$output .= ‘<a href=”‘ .$link . ‘” title=”‘ .$title . ‘”>’ .$title . ‘</a><br/>’;

Y para mostrar las imágenes que tengan la categoría “n”, hay que cambiar la instrucción:

$myposts = get_posts(‘numberposts=-1&&category=’.$listCatId[1].’&&orderby=’.$categoryThumbnailList_OrderType.’&&order=’.$categoryThumbnailList_Order);

por:

$myposts = get_posts(‘numberposts=-1&&category=n&&orderby=’.$categoryThumbnailList_OrderType.’&&order=’.$categoryThumbnailList_Order);

Si se quieren visualizar solo 9 imágenes, por ejemplo, hay que hacer que el bucle solo se ejecute 9 veces. Para ello, se utiliza la variable $i.

Nótese que para que las imágenes se muestren según el parámetro de fecha del shortcode hay que comparar la fecha del post con la fecha en la que se muestran las imágenes. La del parámetro del shortcode se calcula con la instrucción:

$fecha_lim = $listCatId[1];

Y solo se muestran imágenes si se cumple la condición

($fecha <= $fecha_lim) and ($i<10)

Es decir, cuando la fecha del post es menor que la que lleva el shortcode y todavía no se han visualizado 9 imágenes. La fecha del post es $fecha y se obtiene extrayéndola del post con la sentencia.

$fecha = get_the_date();

Si actualizas alguna vez este plugin, acuérdate de volver a realizar estas dos modificaciones y los posibles cambios en el CSS.

A continuación, puedes descargar el plugin modificado: download.

• Tiny Contact Form y Magic Contact, plugin WordPress para formulario de contacto
• Cómo poner código QR en WordPress
• Cómo detectar y prevenir el código malicioso en WordPress
• Cómo hacer más humano tu blog
• Para el Spam en tu WordPress