]]> Pensarás que es una chorrada pero no, no es ninguna tontería, y te lo voy a explicar … si es que quieres estar al día claro. Si eres de los antiguos y no quieres progresar pasa de esta entrada.

Como ya sabrás, al insertar una imagen desde el cargador de archivos en el editor de WordPress se añaden automáticamente los atributos HTML width y height que indican el tamaño en el que se mostrará la imagen en tu tema activo, para eso, para que se adapte al ancho del tema y no quede horrible, pero esto ya lo sabías ¿no?.

Pues bien, esto ya es cosa antigua …

Con los nuevos diseños adaptables (o como se les denomina en inglés “responsive“), que se adaptan al navegador e incluso dispositivo desde el que se está visualizando una web, no tiene sentido definir atributos fijos de ancho y alto de imágenes, pues el tema se adaptará, como todos los elementos del contenido, al tamaño del dispositivo lector, sea este un ordenador, un smartphone o un iPad, mola ¿eh?.

¿Entiendes ya porque es posible que sea interesante eliminar – por defecto – los atributos width y height que el cargador de archivos inserta en el editor?. Pues eso, que si usas un tema con diseño adaptable no necesitas algo como esto:

<img src="ruta/a/tu/imagen" width="500" height="600" class="aligncenter size-full" alt="" title="">

Para eliminar por defecto los atributos que te sobrarán en un diseño adaptable sólo tienes que añadir el siguiente código al archivo functions.php de tu tema:

add_filter( 'post_thumbnail_html', 'remove_width_attribute', 10 );
add_filter( 'image_send_to_editor', 'remove_width_attribute', 10 );

function remove_width_attribute( $html ) {
    $html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );
    return $html;
}

Guardas y ya está. La próxima vez que insertes una imagen en tu editor ya no añadirá los atributos width y height, que de eso ya se ocupará tu tema adaptable (o “responsive“, como prefieras llamarlo)

]]> Si no conoces la aplicación Panic CODA seguramente te estás perdiendo la que quizás sea el mejor software que existe para un programador web.

De hecho, hay desarrolladores web que se han pasado a Mac “solamente” para usar CODA. Y no es una locura, en realidad hay muchas razones para pasarse a Mac pero usar CODA es una de ellas, y poderosa. Pero bueno, que no se trata de hacer proselitismo de Mac o CODA.

Lo que quiero compartir contigo hoy es un fichero de descarga que permite usar la sintaxis de WordPress en CODA, para que identifique los códigos de tus temas y plugins WordPress, sus funciones en concreto, y te permite cosas como el autocompletado de sintaxis y esas cosas maravillosas que hace CODA.

Para tener esta funcionalidad solo tienes que hacer esto:

1. Descargar este archivo:
   Modo WordPress para Panic CODA v.1.0 (230.65 kB )
2. Descomprimir el zip
3. Copiar la carpeta descomprimida llamada PHP-HTML-WP.mode en la carpeta ~/Library/Application Support/Coda/Modes/
   
4. Abre un archivo PHP o de WordPress y carga el modo de sintaxis en CODA desde el menú “Text -> Syntax Mode -> PHP-HTML-WP“
5. Opcional: Si quieres que este modo sea la sintaxis por defecto, en el panel del Editor, en la venta de preferencias, elige el modo “PHP-HTML-WP” como tipo de archivo por defecto

Ahora CODA ya identificará las funciones WordPress, facilitándote la vida como desarrollador de WordPress, como ya hacía con PHP, HTML o CSS, por ejemplo.

Encontrado en HitchHackers

]]>

Añadir una extensión a la URL de las entradas en WordPress, aunque supongo que ya lo sabes, es tan simple como ir a ‘Ajustes -> Enlaces permanentes‘, ahí eliges la opción de ‘Estructura personalizada‘ y pones /%postname%.html o /%postname%.php, lo que más te guste.

Ahora bien, esta configuración no afecta a las páginas, que quedarán del tipo /%postname%, más feúchas si lo quieres así.

Pero bueno, ya sabes que todo tiene solución sencilla …

Para ello nos valdremos, para no liarnos, de un par de plugins a elegir:

• Extensión .html en páginas
• Extensión .php en páginas

Y no hay nada que hacer, instalas el que necesites, lo activas y ya lo tienes. Creo que huelga decirlo pero por si acaso solo comentar que no funcionan bien si instalas ambos al mismo tiempo.

Simple y efectivo.

Ha sido un placer

]]>

Si has creado una red con WordPress y los sitios de la misma comparten temática, o simplemente quieres dar reflejo de la actividad de la red en todos los sitios, puedes crear una lista de las entradas más recientes de todos los sitios de la red.

Eso si, no hay una función interna en WordPress para hacerlo pero puedes ayudarte de la clase $wpdb database. Con ella puedes crear una petición a la base de datos de las últimas entradas de toda tu red.

Pero hay un pero, y es que esta petición SQL es bastante grande, para controlar este comportamiento usaremos la API Transients, de manera parecida a como se usa en la función wp_list_sites().

Lo primero que tenemos que hacer es añadir la función wp_recent_across_network() al archivo functions.php de tu tema activo. Lo haremos así:

/**
 * Lista de entradas recientes en toda la red Multisitio
 *
 * @uses get_blog_list(), get_blog_permalink()
 *
 * @param int $size El número de resultados a obtener
 * @param int $expires Segundos hasta que expire la cache transient
 * @return object Contiene el blog_id, post_id, post_date y post_title
 */
function wp_recent_across_network( $size = 10, $expires = 7200 ) {
   if( !is_multisite() ) return false;

   // Se cachean los resultados con la API Transients de WordPress
   // Obtenemos una copia existente de nuestros datos transient
   if ( ( $recent_across_network = get_site_transient( 'recent_across_network' ) ) === false ) {

      // Si no hay transient regeneramos los datos y guardamos una nueva transient
      // Preparamos la query SQL con $wpdb
      global $wpdb;

      $base_prefix = $wpdb->get_blog_prefix(0);
      $base_prefix = str_replace( '1_', '' , $base_prefix );

      // A causa de que la función get_blog_list() está actualmente abandonada
      // debido al alto consumo de recursos usaremos
      // $wpdb para ejecutar nuestra query SQL. Como la query puede
      // consumir mucha memoria almacenaremos los resultados usando la API Transients
      if ( false === ( $site_list = get_site_transient( 'multisite_site_list' ) ) ) {
         global $wpdb;
         $site_list = $wpdb->get_results( $wpdb->prepare('SELECT * FROM wp_blogs ORDER BY blog_id') );
         set_site_transient( 'multisite_site_list', $site_list, $expires );
      }
      $limit = absint($size);
      // Unificamos los resultados de wp_posts en todos los sitios del Multisitio en un solo resultado con MySQL "UNION"
      foreach ( $site_list as $site ) {
         if( $site == $site_list[0] ) {
            $posts_table = $base_prefix . "posts";
         } else {
            $posts_table = $base_prefix . $site->blog_id . "_posts";
         }

         $posts_table = esc_sql( $posts_table );
         $blogs_table = esc_sql( $base_prefix . 'blogs' );

         $query .= "(SELECT $posts_table.ID, $posts_table.post_title, $posts_table.post_date, $blogs_table.blog_id FROM $posts_table, $blogs_table\n";
         $query .= "\tWHERE $posts_table.post_type = 'post'\n";
         $query .= "\tAND $posts_table.post_status = 'publish'\n";
         $query .= "\tAND $blogs_table.blog_id = {$site->blog_id})\n";

         if( $site !== end($site_list) )
            $query .= "UNION\n";
         else
            $query .= "ORDER BY post_date DESC LIMIT 0, $limit";
      }

      // Un poco de limpieza y ejecutamos la query
      $query = $wpdb->prepare($query);
      $recent_across_network = $wpdb->get_results( $query );

      // Ajustamos la cache Transients para que espire cada dos horas
      set_site_transient( 'recent_across_network', $recent_across_network, 60*60*2 );
   }
   // Damos formato a la salida HTML
   $html = '
    '; foreach ( $recent_across_network as $post ) { $html .= '
    ' . $post->post_title . '
    '; } $html .= '
';
   return $html;
}

El uso de esta función en tu tema es bien sencillo. Eso si, asegúrate de comprobar el valor return en la salida HTML para evitar conflictos con instalaciones que no sean multisitio.

Ya solo nos queda añadir el código que recupere los datos de la función en nuestro tema, algo así:

<?php
// Mostramos las entradas recientes de toda la red
$recent_network_posts = wp_recent_across_network();
if( $recent_network_posts ):
?>
<?php echo $recent_network_posts; ?>
<?php endif; ?>

Fuente: Smashing magazine

]]> ¿A que ya conoces el fichero robots.txt?. Si hombre, ese archivo que usamos para decirle a los robots de los buscadores cosas sobre nuestro contenido.

Pero ¿a que no sabías que también podemos crear un fichero humans.txt con el que decirle a todo el mundo quien hay detrás de un sitio, las personas?.

Pues si, es una iniciativa de un grupo de programadores que pretenden crear un nuevo estándar y que, además del típico robots.txt también todos los sitios tengan su humans.txt, un modo de humanizar la web.

¿Argumentos? …

• ¿Donde se pone?: en el raíz de tu sitio, donde está robots.txt
• ¿Por qué hacerlo?: por humanizar la web, pero no es obligatorio
• ¿A quien pongo?: a quien quieras que participe, haya participado o ayude al sitio
• ¿Hay algún estándar?: puedes partir de esta base, y ampliarla a tu gusto
• ¿A quien se lo digo?: a quien quieras, una vez lo generes puedes añadirlo a la lista de humans.txt aquí e incluso declarar que lo tienes y promocionar este nuevo estándar con un logo de estos

Vale, ¿como lo hago? …

Así hombre:  Crea un archivo de texto llamado humans.txt (siempre en minúsculas) y codifícalo en UTF-8, evitarás problemas con caracteres multilingües y otros idiomas

También puedes hacer esto si quieres:

1. Colocar en el <head> del sitio web una referencia al archivo: <link rel="author" href="humans.txt" />
2. Para mantener una estructura visual básica, separar lo que es el equipo de humans de los datos del sitio web con los títulos bien referenciados con /*TEAM*/ y /*SITE*/
3. Escribir los datos de cada human involucrado en el proyecto: cargo, nombre, forma de contacto, twitter, localización geográfica, ... (Para evitar problemas de S P A M, puedes evitar indicar directamente cuentas de e-mail con [at] en lugar de @.)
4. Indicar también algunos datos del sitio, como la fecha de su última actualización (YYYY/MM/DD), idioma principal, su Doctype y las herramientas utilizadas para su desarrollo.
5. Guardar y subir el archivo a la carpeta raíz del sitio web.
6. Colocar el botón de humansTXT en alguna parte del sitio y enlazar tu humanstxt desde él.

¿más fácil?, pues también hay un plugin para WordPress.

Contenido exclusivo para suscriptores al Feed

¡Gracias por seguirnos a diario!. Premiamos tu fidelidad ofreciéndote habitualmente contenidos exclusivos. Hoy puedes descargar:

Guía para Administrar WordPress

]]> Si quisieras almacenar todas las publicaciones creadas en un solo año por la comunidad WordPress necesitarías 2.375 discos blu ray de doble capa, ahí es nada.

Este es uno de los datos que han recopilado en Broadband Choices y han incluido en una interesantísima infografía en la que, entre otros, se pueden leer estos también interesantes datos:

• El 48% de las webs usan aún Flash
• XHTML ya se usa más (65%) que HTML (36%)
• El 28% de las webs tiene errores (404 o 503)
• Solo el 2,63% de las webs usa HTML5
• Google Analytics es la herramienta de medición  más popular (58%)
• El 62% de Internet se aloja bajo Apache
• Hay casi 165 millones de blogs
• Para hacer backup de las entradas publicadas en un solo año por la comunidad WordPress harían falta 2.375 discos blu ray de doble capa
• Aún el 46,9% de los usuarios usan Internet Explorer en alguna de sus versiones, el 30,8% usan Firefox y Chrome ya lo usan el 14,9% de los navegantes.

El resto de los datos en esta bonita infografía sobre ¿De qué están hechas las webs? …

Contenido exclusivo para suscriptores al Feed

¡Gracias por seguirnos a diario!. Premiamos tu fidelidad ofreciéndote habitualmente contenidos exclusivos. Hoy puedes descargar:

Guía Domina tu Blog

]]>

Hace tiempo que trabajamos el equipo de traducción oficial de WordPress en ofrecer una versión en español de España coherente, no a gusto de todos pero si útil para todos, mejorando los textos, haciéndolos más razonables y fáciles de adaptarlos a cada necesidad.

No obstante, hay ocasiones en que uno desea adaptar el escritorio de WordPress a necesidades concretas, bien para uno mismo o para clientes.

Pues ea, a esto me refiero, y el siguiente truco viene a ofrecer un modo de personalizar las pantallas de ayuda de WordPress, unos textos que, en principio, tratan de ofrecer una visión general de para qué sirve cada elemento de las páginas de administración, pero que en ocasiones pueden no ser útiles o simplemente queremos mejorarlas o ampliarlas.

Si es tu caso, en el siguiente código verás como personalizar la ventana de ayuda de la página de "Añadir nueva página", añadiéndolo al fichero functions.php de tu tema activo:

¿Que quieres hacer lo mismo en la pagina de añadir nueva entrada u otra, pues solo tienes que sustituir las referencias a, en este caso load-page-new.php por load-post-new.php, y así sucesivamente.

Que lo disfrutes

]]>

Quizás ya hayas utilizado el servicio de Issuu para ofrecer publicaciones online al estilo periódico, si no es así te lo recomiendo, incluso con la versión gratuita tienes una presentación de tus documentos muy profesional.

Entre sus virtudes está la principal de reformatear tus documentos para ofrecer una publicación electrónica, y lo hace muy bien, pero además te permite insertar el reproductor en cualquier sitio web … salvo en WordPress.com.

Pero el problema no es de Issuu sino de las restricciones de seguridad de WordPress.com, que no permite inserta códigos 'embed' por motivos de seguridad, ofreciendo 'shortcodes' para multitud de servicios y que así puedas compartir contenido dinámico de este tipo de servicios. Pero vaya, que no tiene shortcode para Issuu.

No te preocupes, puedes hacer un apaño que funciona de maravilla, es un poco engorroso pero funcionar funciona. Nos valdremos del shortcode de Gigya, que si funciona en WordPress.com. Vamos a ver como hacerlo …

Cuando quieres compartir un documento de Issuu te ofrece un icono con este aspecto, <>, que si le pulsas te ofrece multitud de posibilidades de incrustación. Pues bien, eliges el HTML y copias el código, te ofrecerá algo así:

<div><object style="width:420px;height:297px" ><param name="movie" value="http://static.issuu.com/webembed/viewers/style1/v1/IssuuViewer.swf?mode=embed&amp;layout=http%3A%2F%2Fskin.issuu.com%2Fv%2Flight%2Flayout.xml&amp;showFlipBtn=true&amp;documentId=110414131840-77b82a3dbd684b858b7dcef45f952183&amp;docName=programa_electoral_upyd_c-villalba&amp;username=UPyD_Collado_Villalba&amp;loadingInfoText=Programa%20Electoral%202011%20UPyD%20Collado%20Villalba&amp;et=1302793320416&amp;er=9" /><param name="allowfullscreen" value="true"/><param name="menu" value="false"/><embed src="http://static.issuu.com/webembed/viewers/style1/v1/IssuuViewer.swf" type="application/x-shockwave-flash" allowfullscreen="true" menu="false" style="width:420px;height:297px" flashvars="mode=embed&amp;layout=http%3A%2F%2Fskin.issuu.com%2Fv%2Flight%2Flayout.xml&amp;showFlipBtn=true&amp;documentId=110414131840-77b82a3dbd684b858b7dcef45f952183&amp;docName=programa_electoral_upyd_c-villalba&amp;username=UPyD_Collado_Villalba&amp;loadingInfoText=Programa%20Electoral%202011%20UPyD%20Collado%20Villalba&amp;et=1302793320416&amp;er=9" /></object><div style="width:420px;text-align:left;"><a href="http://issuu.com/UPyD_Collado_Villalba/docs/programa_electoral_upyd_c-villalba?mode=embed&amp;layout=http%3A%2F%2Fskin.issuu.com%2Fv%2Flight%2Flayout.xml&amp;showFlipBtn=true" target="_blank">Open publication</a> - Free <a href="http://issuu.com" target="_blank">publishing</a> - <a href="http://issuu.com/search?q=politica" target="_blank">More politica</a></div></div>

Pues bien, lo que tienes que hacer es insertar el 'shortcode' de gigya y añadirle lo que he resaltado en rojo, de este modo:

[gigya src="http://static.issuu.com/webembed/viewers/style1/v1/IssuuViewer.swf" type="application/x-shockwave-flash" allowfullscreen="true" flashvars="mode=embed&amp;layout=http%3A%2F%2Fskin.issuu.com%2Fv%2Flight%2Flayout.xml&amp;showFlipBtn=true&amp;documentId=110414131840-77b82a3dbd684b858b7dcef45f952183&amp;docName=programa_electoral_upyd_c-villalba&amp;username=UPyD_Collado_Villalba&amp;loadingInfoText=Programa%20Electoral%202011%20UPyD%20Collado%20Villalba&amp;et=1302792605642&amp;er=28" width="420" height="291" ]

La parte final del tamaño es personalizable a tu gusto.

Y ya lo tienes, funcionará a la perfección, como puedes ver en esta entrada donde lo he aplicado.

Por supuesto, en WordPress alojado no necesitas ningún truco, simplemente insertas el código que te ofrece, como cualquier otro sistema de incrustación de contenido.