Categoría: Utilidades

Cómo optimizar las imágenes de tu WordPress
En el artículo Cómo eliminar las imágenes inútiles de WordPress vimos cómo configurar bien nuestro WordPress para que no genere versiones inútiles de una imagen. La idea era ahorrar espacio en el servidor, recursos, optimizar.
En este artículo vamos a ver cómo optimizar esas imágenes restantes, las que sí son útiles y mostramos a nuestros usuarios, ahora no sólo estaremos ahorrando recursos del servidor sino que mejoraremos la velocidad de nuestro sitio, su rendimiento y por tanto el posicionamiento y la experiencia de nuestros usuarios.
Antes de optimizar
Antes de empezar a optimizar te aconsejo eliminar las imágenes inútiles. En elfinalde.com me deshice de muchas, logré eliminar 4GB.
Tenía una versión «inútil», era muy parecida a la que crea WP para «responsive», la medium_large para resoluciones de 768px de ancho. Decidí quedarme sólo con 3 versiones de cada imagen además de la original. Es cierto que cuantos más tamaños disponga mejor resultado tendrás, pero en este proyecto el nº de imágenes es muy grande, así que opté por reducir las opciones, la mayoría se muestran pequeñas en una galería (100×100) y se amplían en una lightbox, además como tienen carga perezosa no me preocupa.
Así que para que WP no me creara el código de imágenes responsive con <picture> lo desactivé:
function elfinalde_disable_srcset( $sources ) { return false; } add_filter( 'wp_calculate_image_srcset', 'elfinalde_disable_srcset' );
Cómo optimizar las imágenes en WordPress
Existen varias soluciones, desde la manual hasta la automatización con un cron y la línea de comandos (ver WP CLI). En medio hay varios plugins que nos facilitan el proceso de optimización.
Yo he utilizado ShortPixel, un plugin freemium gratuito hasta 100 imágenes al mes. Antes había utilizado EWWW Image Optimizer porque el volumen de imágenes en elfinalde.com supera con creces la centena, en cambio en muchos sitios será más que suficiente con la versión gratuita de ShortPixel. La cuestión es que me contactaron para probarlo en elfinalde.com y el resultado ha sido brutal.
¡Alerta SPOILER! con ShortPixel pasé de 22,2GB a 9,9GB (ahorrado más de 12GB)
Principalmente el ratio de compresión es mucho mayor además de características como copias de seguridad. Puedes hacer un test online del % de optimización que puedes lograr con ShortPixel. En elfinalde ha sido del 79%. Siempre tendrás acceso a las estadísticas
La optimización se hace cada vez que subes una imagen aunque si ya tienes imágenes anteriores como era mi caso debes ejecutar la optimización en masa, por lotes. Tuve que procesar más de 70.000 imágenes, daros cuenta que cada tamaño es una imagen es 1 crédito, es decir, si tu sitio crea 4 versiones distintas de una imagen, el proceso se hará en 5 imágenes y también estarás consumiendo 5 créditos con ShortPixel. Por tanto asegúrate de no estar creando imágenes inútiles.
Entre las opciones os recomiendo que activéis la eliminación de datos EXIF y que limites el tamaño máximo sobre todo si esas subidas no son manuales, si la hace un cliente o es a través de una API, en mi caso lo he fijado a 1200px.
En los ajustes avanzados puede que te resulte llamativo crear una versión gratuita en formato WebP de Google. Con la configuración adecuada se incluirá esa versión en el elemento <picture> generado por WP. Yo lo hice, generé un imagen .webp por cada imagen pero me di cuenta que no sólo no ocupaban menos que su homónimo JPEG sino que muchas veces ocupaban más. Además de que si mi intención era ahorrar espacio en disco con esto lo estaba duplicando.
Otra opción que me dio problema es la de convertir los PNG en JPEG, aunque el proceso lo hace bien, la imagen destacada que usaba el PNG no se actualiza con el JPEG.
La optimización en lote te va informando del proceso, se hace en segundo plano y puedes seguir trabajando aunque siempre es recomendable no hacerlo por no saturar. Yo decidí para ahorrar créditos y recursos no optimizar las miniaturas, sólo las imágenes originales y tardó 4 días :O
Por último debes tener en cuenta que ShortPixel crea una copia de seguridad que te permite revertir ese proceso. Y claro, esa copia ocupa espacio en tu servidor, puedes eliminarla desde la misma interfaz de ShortPixel.
Conclusiones
Dependerá del tipo de web que tienes, si usas o no muchas imágenes. En un blog donde publiques un par de artículos a la semana tienes de sobra con ShortPixel gratuito pero en un proyecto con miles de imágenes tener bien optimizada tu librería de medios es muy importante. Date cuenta que no sólo ahorras el espacio en tu librería sino también cada vez que haces un simple backup.
En mi caso pasé de 26,5GB a 9,9GB.

29 de enero de 2018
Cómo migrar tu WordPress a HTTPS gratis y fácil
Si todavía no has cambiado tu WordPress al protocolo HTTPS (HyperText Transfer Protocol Secure – Protocolo seguro de transferencia de hipertexto) ya estás tardando, a continuación te mostraré cómo hacerlo muy fácil y además de forma gratuita.
¿Por qué cambiar a HTTPS?
¿Pero esto de los certificados SSL no era sólo para tiendas? ¿No era algo para asegurar las plataformas de pago? ¿Y si yo tengo un blog de cine donde no vendo nada ni tengo ningún contenido sensible de seguridad también debo migrar?
La respuesta es SÍ. Cualquier sitio web debe hoy día utilizar esta capa extra de seguridad. De hecho tus usuarios serán advertidos por los navegadores «Este sitio no es seguro» y lo contrario cuando visitas con Google Chrome un sitio con HTTPS en la barra de direcciones pone «Es seguro». Y Google agradece que la web sea más seguro añadiendo como factor de posicionamiento SEO este extra de seguridad. A todo esto hay que añadir las ventajas de la actualización del protocolo HTTP a HTTP/2 para la que necesitas un certificado SSL.
Resumen: con HTTPS tu sitio será más seguro, ayudará a mejorar tu SEO y podrás beneficiarte de HTTP/2.
Migrar tu WordPress a HTTPS en 5 pasos
El artículo veremos los 5 pasos que he seguido para migrar mi sitio de cine y series https://elfinalde.com
- PASO 1: Cómo conseguir un certificado SSL gratuito
- PASO 2: Instalar tu certificado SSL en tu servidor
- PASO 3: Activar HTTPS en tu WordPress
- PASO 4: Configurar Google Search Console (Google Webmaster Tools)
- PASO 5: Configurar Google Analytics
PASO 1: Cómo conseguir un certificado SSL gratuito
Lo primero es conseguir un certificado SSL (Secured Socket Layer / Capa de conexión segura) Algunos hostings ofrecen este servicio extra a un coste o incluyen el servicio gratuito de Let´s Encrypt. Compruébalo en tu plan de alojamiento, si no te ofrecen un SSL gratuito sigue estos pasos.
1. Instala el plugin WP Encrypt en tu WordPress
1. Completa los campos de su configuración, muy fácil, el nombre, tu país y su código. En los campos adicionales marca «Auto-generate Certificate» para que cuando caduque vuelva a generarse cada 90 días.
1. Luego haz clic en «Register account» y luego en «Generate Certificate». Se te indicará la ruta de tu Certificado SSL totalmente gratuito en una nueva carpeta creada «letsencrypt», descarga esta carpeta a tu equipo por FTP.
PASO 2: Instalar tu certificado SSL en tu servidor
El siguiente paso es instalarlo el certificado creado en tu servidor. Vamos a verlo en Plesk
1. Haz clic en la opción «Certificados SSL»
1. En la siguiente pantalla haz click en Añadir certificado SSL
1. Ahora tienes que ponerle un nombre y subir 3 archivos .pem que creaste en el PASO 1 en tu WordPress.
- Como Clave privada (*.key) subes el archivo key.pem
- Como Certificado (*.crt) subes el archivo cert.pem
- Como Certificado CA (*-ca.crt) subes el archivo chain.pem
1. Listo, ya tenemos el certificado, por último debes asociarlo a tu dominio. En Configuración de Hosting > Seguridad seleccionamos nuestro certificado
En cPanel el proceso es similar, existen también plugins para cPanel de Let´s Encrypt. Si te surge alguna duda en este paso puedes consultar a tu proveedor de hosting.
PASO 3: Activar HTTPS en tu WordPress
Ya puedes visitar tu sitio con https://tudominio.com aunque si navegas por él o alguien te visita desde un buscador volverán a encontrarse con el antiguo «http». Hay que redireccionar todas las URLs que hasta ahora apuntaban a HTTP a HTTPS, puedes hacerlo manualmente en los ajustes, en .htaccess y con Buscar y Reemplazar en la base de datos o servirte de un plugin gratuito que no miente en su nombre Really Simple SSL
Instalas, activas y ejecutas.
Contenido mixto
Si visitas tu sitio ahora desde HTTPS y aún no aparece el candado verde es porque el navegador ha encontrado algún contenido mixto, es decir, tu sitio es HTTPS pero hace peticiones a URLs HTTP. Por ejemplo desde CSS, JS tuyo o de algún plugin. El plugin Really Simple SSL corrige algunos pero a veces tendrás que comprobar con la consola qué URL está provocando esto y solucionarlo manualmente o probar otros plugins también gratuito como SSL Insecure Content Fixer o la versión Premium (de pago) del mismo Really Simple SSL
PASO 4: Configurar Google Search Console (Google Webmaster Tools)
El último paso es decirle a Google que hemos cambiado a HTTPS. Debemos crear dos nuevas propiedades, una por cada nueva versión de nuestro sitio (con y sin www) https://www.midominio.com y https://midominio.com
Si lo prefieres puedes crear un conjunto con las 4 propiedades del mismo dominio.
Añade el sitemap y en Configuración del sitio elige como dominio preferido (con o sin www) el mismo que tengas como Dirección del sitio en los ajustes generales de tu WordPress.
PASO 5: Configurar Google Analytics
Ya tienes tu sitio funcionando con HTTPS ahora debes cambiarlo en GA. Vas a Administrar y eliges la cuenta, propiedad y vista correspondiente.
En Configuración de la vista cambias a https:// la «URL del sitio web» y en Configuración de la propiedad la URL predeterminada.
Y si lo deseas más abajo en la Configuración de la propiedad asocias tu propiedad de Search Console a la de GA.
Puedes hacer un test online de tu SSL en SSL Server Test
31 de octubre de 2017
Cómo automatizar el atributo ALT en todas las imágenes de WordPress
El atributo alt (texto alternativo) tiene la función de describir una imagen en la etiqueta HTML <img>. Debes tomarlo como un atributo obligatorio para accesibilidad web y SEO.
Cada imagen que publiques debería sí o sí tener una descripción en su atributo alt por tres razones:
1. Harás tu web más accesible para personas con alguna discapacidad visual, el atributo altes utilizado por los lectores de pantalla y navegadores para invidentes.
2. Por SEO, ayudarás al posicionamiento de tu sitio.
3. En el caso de que haya algún problema por el que no se puede mostrar la imagen el navegador mostrará el texto del atributo altDe ahí lo de texto alternativo.
No debes confundirlo con el atributo title que los navegadores lo utilizan a modo de tooltip.
Cómo añadir el atributo alt en WordPress
Cuando añadimos una imagen en WordPress tenemos opción de incluirlo en un campo. Bien desde la Biblioteca multimedia
o desde el editor
Si no completas ese campo el resultado será un alt vacío: alt=""WordPress no lo coge ni del nombre del archivo ni del título.
Cómo añadir alt a todas las imágenes de WordPress
Si no quieres hacer este trabajo de forma manual puedes automatizarlo, generar un texto alt para todas las imágenes de tu WordPress, las antiguas y para todas las que publiques desde ahora.
Puedes utilizar el plugin SEO Friendly Images aunque lleva más de años sin actualizarse aún tiene más 200.000 instalaciones activas-
O bien puedes añadir en tu archivo functions.php este código que buscará todos los alt vacíos, la cadena alt=""en el contenido de tus páginas y entradas y los sustituirá por alt="Título de la página o entrada nº imagen" Si pusiste manualmente el altno cambiará nada.
```
function add_alt_tags( $content ) {
  preg_match_all( '/<img (.*?)\/>/', $content, $images );
  if ( ! is_null( $images ) ) {
    foreach ( $images[1] as $index => $value ) {
      if ( preg_match( '/alt=""/', $value ) ) {
        $new_img = str_replace(
          'alt=""',
          'alt="' . esc_attr( get_the_title() ) . ' '. $index . '"',
          $images[0][$index] );
        $content = str_replace(
          $images[0][$index],
          $new_img,
          $content );
      }
    }
  }
  return $content;
}
add_filter( 'the_content', 'add_alt_tags', 99999 );
```
* Este código lo publicaron hace un tiempo los amigos de Nelio Software pero le he hecho algunas modificaciones para que funcione correctamente.
Como hemos comentado esto es para las imágenes de tus entradas, páginas y Tipos de entradas personalizadas (CPT) pero en un WP hay más imágenes a las que añadir el atributo alt.Por un lado las imágenes de tu tema, para ello haz una búsqueda de las <img> en los archivos de tu tema y asegúrate de que tienen el atributo alt y por otro las imágenes destacadas.
Cómo añadir alta las imágenes destacadas en WordPress
Las imágenes destacadas la suelen utilizar los temas en la página de inicio, en el sidebar, en el footer, en las páginas de archivo, etc. En esta entrada hablamos de todo lo concerniente a las imágenes destacadas en WordPres
Normalmente se hace uso de la función the_post_thumbnail o get_the_post_thumbnail en ambas funciones le puedes añadir los atributos que quieras al <img> que genere.
Para añadir un alt con el título de la publicación busca esas 2 funciones en los archivos de tu tema y añade el array entero
```
the_post_thumbnail( 
'large', 
array( "alt" => esc_attr( get_the_title() ) )

);
```
o si ya existe añade el alt separado por coma
```
the_post_thumbnail( 
'large', 
array( 'itemprop' => "image", "alt" => esc_attr( get_the_title() ) )
);
```
Cómo añadir el atributo ALT a las imágenes de Woocommerce (actualización 30/01/18)
Enrique nos pregunta en un comentario cómo añadir el atributo ALT a los productos de WooCommerce.
Para WooCommerce nuestro código anterior no funciona porque las imágenes no están dentro del content. Una solución sería este plugin Seo Image Optimizer for WordPress & WooCommerce y otra bien implementar este código visto en How to automatically apply woocommerce product title to all product images alt tags?
```
add_filter('wp_get_attachment_image_attributes', 'change_attachement_image_attributes', 20, 2);

function change_attachement_image_attributes( $attr, $attachment ){
// Get post parent
$parent = get_post_field( 'post_parent', $attachment);

// Get post type to check if it's product

$type = get_post_field( 'post_type', $parent);
if( $type != 'product' ){
    return $attr;
}

/// Get title
$title = get_post_field( 'post_title', $parent);

if( $attr['alt'] == ''){
    $attr['alt'] = $title;
    $attr['title'] = $title;
}

return $attr;
}
```
Actualización 31/03/18
En los comentarios Juan Carlos López (muchas gracias) nos deja este otro script
```
if (!(is_admin())) {
function jclconsultor_add_alt_tags($content) {
preg_match_all(‘//’,$content,$images);
if (!is_null($images)) {
$the_bloginfo= get_bloginfo(‘display’);
$the_title	= ucwords(esc_attr(get_the_title()));
foreach ($images[1] as $index => $value) {
$img	= $images[0][$index];
$img_alt = ‘ alt=”‘.$the_title.’ – ‘.$the_bloginfo.'” ‘;
$img_title	= null;if (strpos($img,’title=””‘)===false){$img_title=’ title=”‘.$the_title.’ – ‘.$the_bloginfo.'” ‘;}
if (preg_match(‘/alt=””/’,$value)) {
$img_new=str_replace(‘alt=””‘,$img_alt.$img_title,$img);
} else {
if (strpos($img,’alt’)===false){$img_new=str_replace(‘<img','<img'.$img_alt.$img_title,$img);}
}
$content = str_replace($img,str_replace(' ',' ',$img_new),$content);
}
}
return $content;
}
add_filter('the_content','jclconsultor_add_alt_tags',99999);
}
```
22 de junio de 2017
Cómo editar en vivo CSS o Sass con Chrome
Las herramientas para desarrolladores de Google Chrome pueden mejorar el flujo de trabajo de un desarrollo web. Digamos que estás trabajando en el diseño de un tema de WordPress y usas el preprocesador Sass.
Normalmente estarás trabajando en local, para ello tendrás instalado algún software para tener un servidor local en tu equipo que corra Apache, MySQL y PHP: XAMP, AMPPS, MAMP o cualquier otro. En el artículo Cómo instalar WordPress en local paso a paso explico cómo hacerlo.
Y trabajarás con algún editor o IDE en el que irás editando los archivos PHP del tema. En este artículo vamos a ver cómo editar en vivo el CSS o Javascript desde el navegador y poder guardar los cambios realizados aunque trabajes con un preprocesador.
Las herramientas para desarrolladores de los navegadores son parte fundamental del proceso, utilizamos la consola, analizamos, etc. pero cuando editamos algo los cambios no se guardan y tenemos que reproducir esos cambios en nuestro IDE.
Google Chrome permite que le demos permiso para que cuando editemos algo esos cambios se guarden gracias a los Workspaces (espacios de trabajo).
Añadir Workspaces
El proceso es muy sencillo:
1. Abre en el navegador Google Chrome tu proyecto web y las herramientas para desarrolladores
2. En Settings > Workspace añade el directorio de tu proyecto, si trabajamos con WP, añade la ruta al tema en el que estás trabajando. Te aparecerá un mensaje pidiendo arriba «DevTools solicita acceso completo a (tu directorio). Asegúrate de no revelar información confidencial». Pincha en «Permitir»
3. Una vez añadido este Workspace debes mapear tus archivos locales con los de red, introduce la url de tu sitio, por ejemplo: localhost/wordpress y en la derecha no tienes más que poner / .
4. Si actualizas la página ya podrás editar en vivo y verás que los cambios que hagas en tu CSS se están guardando, en la consola tienes un historial de cambios que siempre puedes revertir.
Algunas consideraciones, estos cambios no se van a guardar:
- los cambios en el DOM,
- los estilos que añadas como inline,
- las nuevas reglas que hagas a no ser que los insertes en el panel Sources.
Trabajando con un preprocesador como Sass en Chrome
Claro que seguramente estés trabajando con un preprocesador CSS, digamos que es Sass aunque puede ser otro como Less o Stylus o alguno de Javascript (ver preprocesadores soportados). Si es así no querrás editar el archivo CSS sino el archivo .scss que corresponda, el archivo donde has incluido esa regla CSS.
Chrome es capaz de detectar estos archivos de origen gracias al archivo de mapa de origen (.map), un archivo en formato JSON que establece la relación de cada declaración de CSS y la línea correspondiente del archivo de origen (.scss)
En Settings > Preferences asegúrate que en Sources tienes activada la opción «Enable CSS source maps», por defecto lo está.
Cada archivo CSS compilado hace referencia a ese mapa de origen en forma de comentario especial en la última línea del archivo.
Ejemplo:
```
/*# sourceMappingURL=estilos.css.map */
```
Si te manejas con Sass pero no con la línea de comandos puedes usar Koala, un software multiplataforma de código abierto y gratuito que además de compilar Sass, Less, Compass y CoffeeScript tiene la opción de crear este mapa de origen y añadir esa línea en el CSS compilado.
Por último te aconsejo que actives un par opciones experimentales de Chrome que pueden ayudarte. Primero activa las opciones experimentales en chrome://flags/#enable-devtools-experiments
Experimentos de Herramientas para desarrolladores Mac, Windows, Linux, Chrome OS
Habilita los experimentos de Herramientas para desarrolladores. Utiliza el panel de configuración de este servicio para activar experimentos individuales.
En Settings > Experiments activa Live Sass y Source diff
Live Sass te permite editar en vivo variables de Sass y Source diff añadirá una ayuda visual de colores a los cambios que vayas haciendo. Las líneas borradas se marcarán en rojo, las modificadas en púrpura y las nuevas en verde.
Una vez hecho esto podrás editar CSS (o Sass) directamente desde el navegador.
9 de mayo de 2017
WordPress: Ordenar cronológicamente etiquetas, categorías y taxonomías
He creado un plugin para ordenar cronológicamente etiquetas, categorías y taxonomías. Está ya a vuestra disposición de forma gratuita en el repositorio oficial de WordPress:
IDATERMS – Plugin Directory — WordPress
¿Para qué sirve este plugin?
En el panel de administración de WordPress no es posible ordenar cronológicamente las etiquetas, categorías o cualquier otra taxonomía que hayas creado. En las entradas, las entradas personalizadas, páginas y medios no existe este problema porque se almacenan en la BBDD su fecha de creación y en el panel de administración tenemos una columna «Fecha» para ordenarlos cronológicamente.
En cambio en las taxonomías vas a tener sólo 4 columnas por defecto: Nombre, Descripción, Slug y Cantidad. Ninguna de las columnas por defecto va a ordenar cronológicamente los términos (terms), en la tabla wp_terms no se almacenan su fecha de creación.
Quizás no sea un problema para el común de los wordpresseros, pero a mi me ha ocurrido en mi web de cine y series elfinalde.com que tengo registrada una taxonomía de «actores» con más de 35.000 términos y necesitaba averiguar cuáles eran los últimos 10 actores que había añadido.
Además en muchos proyectos he tenido que enseñar al cliente cómo obtener el ID de una categoría o etiqueta para que la utilice en algún widget, plugin, slider o shortcode, ya sabéis, viendo la URI de la misma.
Así que uniendo los 3 conceptos ID – DATE y Terms y en una explosión de creatividad (jajaja) llamé al plugin IDATERMS que añade una columna en las páginas de taxonomías (Etiquetas, Categorías y taxonomías personalizadas) con el ID de cada term.
Al activarlo tendrás por defecto esta nueva columna en las Categorías y en las Etiquetas. Si tienes taxonomías personalizadas puedes ir a Ajustes > IDATERMS para seleccionar en cuáles quieres añadir esta columna.
El plugin en acción:
Existen otras 2 soluciones sin plugins:
1. una sencilla, sin código para casos puntuales,
2. otra mediante código para añadir una columna extra.
Todas estas soluciones se basan en que las taxonomías tienen un campo term_id autoincremental, es decir, WordPress viene con una categoría por defecto «Uncategorized» y su ID es 1. El siguiente término que añadamos sea cual sea su taxonomía (una etiqueta, una taxonomía personalizada u otra categoría) tendrá un term_id con valor 2, el siguiente 3 y así sucesivamente, de forma que aunque no sea un campo de fecha sabemos que el término con term_id 15 se creó después del 10.
1. Solución más sencilla sin código
Para un caso puntual la solución es bastante sencilla, en la página de administración de la taxonomía que quieres ordenar no tienes más que cambiar la URI.
En el parámetro orderby pones como valor «term_ID» y en order «asc o desc» dependiendo si quieres que se muestren de las más nuevas a las más antiguas o viceversa
http://tudominio.com/wp-admin/edit-tags.php?taxonomy=category&orderby=term_ID&order=asc
En este ejemplo veremos las categorías (taxonomy=category) ordenadas cronológicamente (orderby=term_ID) de las más antiguas a las más nuevas (order=asc)
2. Solución estable con código
Si como en mi caso te conviene tener siempre a mano la posibilidad de ordenar cronológicamente las taxonomías puedes añadir el siguiente código (las 3 funciones) a tu archivo functions.php o en un plugin.
Conseguiremos una nueva columna en la(s) taxonomía(s) que nos permitirá ordenarla cronológicamente.
Aunque sea una solución estable si en algún momento nos estorba siempre podremos ocultarla mediante las «Opciones de pantalla»
Necesitamos 3 funciones y 3 filtros:
1. manage_edit-{taxonomía}_columns
2. manage_edit-{taxonomía}_custom_column
3. manage_edit-{taxonomía}_sortable_columns
1. Función para añadir columna y posicionarla la primera, antes de «Nombre»
```
function nueva_columna_taxonomy_columns( $defaults )
{
	$nuevascolumnas = array();
    
    foreach($defaults as $key=>$value) {
        
        if($key=='name') {  // buscamos la primera columna "Nombre"
          $nuevascolumnas['mi_columna_ID'] = __('ID');  // añadimos nuestra nueva columna antes que nombre, podemos llamarla Fecha, ID o como queramos
        }    
        
        $nuevascolumnas[$key]=$value;
    }  

    return $nuevascolumnas; 

	
}

add_filter('manage_edit-post_tag_columns' , 'nueva_columna_taxonomy_columns');
add_filter('manage_edit-category_columns' , 'nueva_columna_taxonomy_columns');
```
En esta función hemos buscado en el array de las columnas por defecto ($defaults) la primera columna que es ‘name’ (Nombre) y añadimos nuestra nueva columna antes que ella y devolviendo un nuevo array.
Por último le pasamos el filtro a las taxonomías donde queremos utilizarla. En nuestro ejemplo la hemos añadido a las categorías (category) y a las etiquetas (post_tag) pero si quisiéramos añadirla a alguna taxonomía personalizada simplemente añadimos el filtro con el nombre de esa taxonomía manage_edit-{taxonomía}_columns, por ejemplo:
add_filter('manage_edit-actores_columns' , 'nueva_columna_taxonomy_columns');
2. Función para añadir contenido a la nueva columna
Ponemos como contenido el term_ID de cada término. Al igual que en la función anterior si queremos añadir alguna taxonomía personalizada, por ejemplo «actores» añadimos:
add_filter( 'manage_actores_custom_column', 'nueva_columna_taxonomy_contenido', 10, 3 ); // aquí le ponemos la prioridad (10) y el número de argumentos que por defecto es 1 lo pasamos a 3
```
function nueva_columna_taxonomy_contenido ( $content, $nombre_columna, $term_ID )
{
    if ( 'mi_columna_ID' == $nombre_columna ) { 
        
        $content = $term_ID;
    }
    
	return $content;
}

add_filter( 'manage_post_tag_custom_column', 'nueva_columna_taxonomy_contenido', 10, 3 );
add_filter( 'manage_category_custom_column', 'nueva_columna_taxonomy_contenido', 10, 3 );
```
3. Función para hacer que la columna se ordene
Todo lo anterior no tiene verdadera utilidad si no podemos ordenar los términos por su ID, gracias al filtro manage_edit-{taxonomía}_sortable_columns WordPress añadirá al título de nuestra columna el icono de la flechita con CSS y lo hará clickable.
```
function mi_columna_sortable_columns( $sortable_columns ) {

   $sortable_columns[ 'mi_columna_ID' ] = 'term_ID';

 return $sortable_columns;

}

add_filter( 'manage_edit-post_tag_sortable_columns', 'mi_columna_sortable_columns' );
add_filter( 'manage_edit-category_sortable_columns', 'mi_columna_sortable_columns' );
```
13 de febrero de 2017
Solución de Google Analytics para conseguir 100/100 en Pagespeed
Hace un año publiqué el artículo ¿Es posible conseguir un 100/100 en Google Pagespeed? Hoy finalmente he conseguido ese 100/100.
En ese artículo concluía que era imposible si utilizabas servicios del mismo Google: como Adsense, Youtube y Analytics. Adsense es imposible pero en una actualización de ese mismo artículo decía que una posible solución para Google Analytics era cargarlo en tu propio servidor para poder cachearlo como cualquier otro script y aprobar esta regla
Especificar caché de navegador

Establecer una fecha de caducidad o una edad máxima en las cabeceras HTTP de los recursos estáticos indica al navegador que cargue los recursos descargados previamente del disco local en lugar de hacerlo a través de la red.
Aprovechar el almacenamiento en caché del navegador de estos recursos almacenables en caché:
http://www.google-analytics.com/analytics.js (2 horas)
El problema es que una práctica no recomendada además que una posible actualización del script de Google pasaría desapercibida si no estás al tanto.
Hoy os dejo 2 soluciones, un plugin para WordPress y una librería de código abierto
Plugin WP para solucionar el Google Analytics de Pagespeed
Si usas WordPress puedes utilizar este plugin Host Analytics.js Locally — WordPress Plugins mediante wp_cron() actualizará el script si lo actualiza Google
Librería para solucionar el Google Analytics de Pagespeed
Esta estupenda solución que ha creado Jesse Luoto es la que yo he utilizado, no soy amigo de instalar muchos plugins. Se trata de ga-lite, una librería mucho más pequeña y cacheable que hará que apruebes esa regla aún usando GA. Lo mejor es que para utilizarla sólo tienes que cambiar el código de GA por este poniendo tu tracking code
<script src=«https://cdn.jsdelivr.net/ga-lite/latest/ga-lite.min.js» async></script> <script> var galite = galite || {}; galite.UA = ‘UA-XXXXXX’; // Insert your tracking code here </script>
Con esto he conseguido ese 100/100 en elFinalde
Claro que en la home de elFinalde no uso Adsense, en páginas interiores donde sí uso Adsense la puntuación es 98 por los malditos javascript de Google Adsense
14 de junio de 2016
Cómo crear un portafolio en WordPress con y sin plugins
Hay muchas formas de crear un portafolio en WordPress para mostrar tu trabajo. Hay temas que vienen preparados para crear directamente esta sección, si no usas uno de estos temas puedes utilizar un plugin o crear un portafolio con código.
Bonus: Al final veremos otros plugins para crear portafolios con los trabajos que tenemos publicados en Instagram, Flickr, Behance o devianArt.
Añadir una sección Portafolio sin plugins
Hay sitios que directamente crean una página y añaden una galería con sus trabajos, a veces con algún efecto de lightbox pero lo habitual es que un portafolio esté asociado a un Tipo de entrada personalizada (Custom Post Type).
Para crearla añade este código al archivo functions.php de tu tema y si no es tuyo le creas un tema hijo primero para no perder las posibles actualizaciones que haga el autor del tema original.
```
if ( ! function_exists('custom_post_type_portafolio') ) {

// Register Custom Post Type
 function custom_post_type_portafolio() {

$labels = array(
 'name' => _x( 'Proyectos', 'Post Type General Name', 'text_domain' ),
 'singular_name' => _x( 'Proyecto', 'Post Type Singular Name', 'text_domain' ),
 'menu_name' => __( 'Portafolio', 'text_domain' ),
 'name_admin_bar' => __( 'Portafolio', 'text_domain' ),
 'archives' => __( 'Portafolio', 'text_domain' ),
 'parent_item_colon' => __( 'Proyecto superior', 'text_domain' ),
 'all_items' => __( 'Todos los proyectos', 'text_domain' ),
 'add_new_item' => __( 'Añadir nuevo proyecto', 'text_domain' ),
 'add_new' => __( 'Añadir nuevo Proyecto', 'text_domain' ),
 'new_item' => __( 'Nuevo proyecto', 'text_domain' ),
 'edit_item' => __( 'Editar proyecto', 'text_domain' ),
 'update_item' => __( 'Actualizar proyecto', 'text_domain' ),
 'view_item' => __( 'Ver proyecto', 'text_domain' ),
 'search_items' => __( 'Buscar proyecto', 'text_domain' ),
 'not_found' => __( 'Not found', 'text_domain' ),
 'not_found_in_trash' => __( 'Not found in Trash', 'text_domain' ),
 'featured_image' => __( 'Imagen destacada', 'text_domain' ),
 'set_featured_image' => __( 'Añadir imagen destacada', 'text_domain' ),
 'remove_featured_image' => __( 'Quitar Imagen destacada', 'text_domain' ),
 'use_featured_image' => __( 'Usar como Imagen destacada', 'text_domain' ),
 'insert_into_item' => __( 'Insert into item', 'text_domain' ),
 'uploaded_to_this_item' => __( 'Uploaded to this item', 'text_domain' ),
 'items_list' => __( 'Items list', 'text_domain' ),
 'items_list_navigation' => __( 'Items list navigation', 'text_domain' ),
 'filter_items_list' => __( 'Filter items list', 'text_domain' ),
 );
 $args = array(
 'label' => __( 'Proyecto', 'text_domain' ),
 'description' => __( 'Portafolio', 'text_domain' ),
 'labels' => $labels,
 'supports' => array( 'title', 'editor', 'excerpt', 'author', 'thumbnail', 'comments', 'revisions', 'custom-fields', 'post-formats', ),
 'taxonomies' => array( 'category', 'post_tag' ),
 'hierarchical' => true,
 'public' => true,
 'show_ui' => true,
 'show_in_menu' => true,
 'menu_position' => 5,
 'show_in_admin_bar' => true,
 'show_in_nav_menus' => true,
 'can_export' => true,
 'has_archive' => true,
 'exclude_from_search' => false,
 'publicly_queryable' => true,
 'capability_type' => 'page',
 );
 register_post_type( 'portafolio', $args );

}
 add_action( 'init', 'custom_post_type_portafolio', 0 );

}
```
Si te da error 404 cuando vas a visitar la página del proyecto o la de portafolio (tudominio.com/portafolio/) ve a Ajustes > Enlaces Permanentes y pincha en Guardar cambios para que se actualicen.
Verás que tu página tudominio.com/portafolio/ tiene el mismo aspecto que la de cualquier otra página de Archivos, y la de un proyecto el mismo aspecto que un artículo. Eso es por la jerarquía de WP, al no encontrar ningún archivo específico para este tipo de entrada tira de archive.php y en los proyectos individuales de single.php
Si quieres darle un aspecto personalizado puedes crear en tu tema estos 2 archivos. Te recomiendo que partas del código de tu tema archive.php y single.php
1. archive-portafolio.php y cambiar lo que se muestra por ejemplo en el loop y
2. single-portafolio.php para la página de cada proyecto un archivo
Para personalizar las categorías o etiquetas de tus trabajos el proceso es el mismo, crea tantos archivos como necesites: category-grafico.php, category-web.php y/o tag-web.php, tag-fotografia.php, etc. O también puedes crear una taxonomía personalizada «tipos de proyectos» para no mezclarlo con las categorías y etiquetas generales de tu WP.
Con este código añadirás una nueva taxonomía similar a las categorías llamada «Tipos de Proyecto» asociada únicamente a tu Portafolio.
```
if ( ! function_exists( 'custom_taxonomy_portafolio' ) ) {

// Register Custom Taxonomy
function custom_taxonomy_portafolio() {

	$labels = array(
		'name'                       => _x( 'Tipos de proyectos', 'Taxonomy General Name', 'text_domain' ),
		'singular_name'              => _x( 'Tipo Proyecto', 'Taxonomy Singular Name', 'text_domain' ),
		'menu_name'                  => __( 'Tipos de proyectos', 'text_domain' ),
		'all_items'                  => __( 'Todos los tipos de proyectos', 'text_domain' ),
		'parent_item'                => __( 'Tipo superior', 'text_domain' ),
		'parent_item_colon'          => __( 'Tipo superior:', 'text_domain' ),
		'new_item_name'              => __( 'Nuevo Tipo de proyecto', 'text_domain' ),
		'add_new_item'               => __( 'Añadir Nuevo Tipo de proyecto', 'text_domain' ),
		'edit_item'                  => __( 'Editar Tipo de proyecto', 'text_domain' ),
		'update_item'                => __( 'Actualizar Tipo de proyecto', 'text_domain' ),
		'view_item'                  => __( 'Ver Tipo de proyecto', 'text_domain' ),
		'separate_items_with_commas' => __( 'Separar tipos con comas', 'text_domain' ),
		'add_or_remove_items'        => __( 'Añadir o quitar Nuevo Tipos de proyecto', 'text_domain' ),
		'choose_from_most_used'      => __( 'Elegir entre los más usados', 'text_domain' ),
		'popular_items'              => __( 'Tipos de proyecto populares', 'text_domain' ),
		'search_items'               => __( 'Buscar Tipos de proyecto', 'text_domain' ),
		'not_found'                  => __( 'No se encuentra', 'text_domain' ),
		'no_terms'                   => __( 'No hay Tipos de proyecto', 'text_domain' ),
		'items_list'                 => __( 'Lista de Tipos de proyecto', 'text_domain' ),
		'items_list_navigation'      => __( 'Navegación Tipos de proyecto', 'text_domain' ),
	);
	$args = array(
		'labels'                     => $labels,
		'hierarchical'               => true,
		'public'                     => true,
		'show_ui'                    => true,
		'show_admin_column'          => true,
		'show_in_nav_menus'          => true,
		'show_tagcloud'              => true,
	);
	register_taxonomy( 'tipo_proyecto', array( 'portafolio' ), $args );

}
add_action( 'init', 'custom_taxonomy_portafolio', 0 );

}
```
Si estás satisfecho con el contenido que tu tema ofrece para el portafolio puede que sólo necesites aplicarle CSS. Normalmente los temas añaden funciones para que se añadan clases CSS según la página que se sirve, lo vimos en Cómo añadir clases CSS a los Custom Post Types en WordPress.
De forma que:
- tudominio.com/portafolio/ tendrá en el body la clase post-type-archive-portafolio y cada proyecto la clase type-portafolio
- En la página de cada proyecto el body tendrá la clase single-portafolio
Está en ti darle los últimos toques pero con esto ya tienes un portafolio totalmente funcional.
7 Plugins para crear portafolios en WordPress
Si no quieres editar código siempre puedes utilizar un plugin
Jetpack
Puede que ya tengas instalada esta navaja suiza o megaplugin de WordPress, en la versión wordpress.com todos lo tienen instalado. La función de Portafolio no es un módulo que puedes activar en la Configuración de Jetpack, para activarla debes ir a Ajustes > Escritura
Tendrás un nuevo Tipo de Entrada Personalizada (CPT) que han traducido como «Carpeta».
Luego tendrás que utilizar el shortcode [portfolio] en la página o entrada que lo quieras mostrar, puedes utilizar todos estos atributos para personalizarlo:
- display_types: muestra los Tipos de proyecto. (true/false)
- display_tags: muestra las etiquetas de proyecto. (true/false)
- display_content: muestra el contenido del proyecto. (true/false)
- include_type: incluye Tipos de proyecto, por defecto se muestran todos pero puedas especificar las que quieras separando sus slugs con comas.
- include_tag: incluye las etiquetas de proyecto, por defecto se muestran todas pero puedas especificar las que quieras separando sus slugs con comas.
- columns: Número de columnas, por defecto 2. (número, 1-6)
- showposts: número de proyectos a mostrar, por defecto todos. (número)
- order: elige entre orden ascendente ASC (por defecto) o descendente DESC
- orderby: orden por el que se muestra, por defecto por fecha (author, date, title, rand)
Ejemplo: [portfolio display_types=true columns=3 showposts=10 orderby=title]
Los shortcodes también los puedes poner en un archivo de tu tema con esta función:
<?php echo do_shortcode(«[portfolio display_types=true columns=3 showposts=10 orderby=title]»); ?>
WordPress Picture / Portfolio / Media Gallery
Más conocido como Nimble Portfolio este plugin ofrece más opciones que Jetpack, añade:
- la opción de poder filtrar los trabajos por categorías,
- un lightbox para mostrar imágenes o vídeos,
- dos widgets, uno con los últimos proyectos y otro para shortcodes
Es gratuito con add-ons de pago. Demo
Awesome Filterable Portfolio
Un plugin bastante fácil de utilizar que incluye:
- Filtros por tipo de proyecto
- Animaciones jQuery configuraciones
- Shortcode para insertarlo donde quieras
WordPress Portfolio Plugin (WP Portfolio)
Este plugin genera dinámicamente capturas de tus proyectos web si tienes cuenta en ShrinkTheWeb. Si no tienes cuenta también puedes utilizarlo subiendo tus propias imágenes.
Waving Portfolio
Otro plugin con grid, responsive, shortcodes, efectos de animación y filtros por categoría.
Demo
Carpeta
WordPress Portfolio Plugin ( Career Portfolio ) ofrece funciones básicas pero suficientes y un sólo layout en su versión gratuita, la comercial ofrece 3, lazy load, estilos de animación, filtro por categoría y muchas más características interesantes.
Demo
Portfolio by BestWebSoft
Un plugin básico con el puedes añadir mucha información a cada proyecto, descripción, descripción corta, el día de entrega, más de una imagen, etc.
Plugins para mostrar proyectos publicados en sitios externos
Digamos que tienes tus trabajos publicados fuera de tu WordPress, en Instagram, Dribble, YouTube, Pinterest, Flickr, Behance o devianArt, con estos plugins puedes mostrarlos e incluso venderlos en tu WordPress.
Con los plugins comerciales tendrás acceso a soporte personalizado, os dejo también opciones gratuitas.
Instagram
WooCommerce Instagram Shop – $19
Con Woocommerce y este plugin crearás una tienda para tus fotografías de Instagram.
Otros plugins gratuitos para mostrar tu Instagram:
Flickr
Awesome Flickr Gallery – Gratuito
Si eres fotógrafo y tienes tu trabajo en Flickr puedes usar este plugin, bastante completo para mostrar galerías de Flickr
Demo
Behance
Behance Portfolio for WordPress – $16
Tus trabajos de Behance con filtros de categorías, animaciones, responsive…
Plugin gratuito: Behance Portfolio Manager
devianART
deviantART Widget – $10
Inserta un widget con tus trabajos de deviantART
El plugin Todo en 1
WordPress Smart Content Gallery – $16
Por último un plugin para mostrar contenido en forma de galería de numerosas fuentes además de imágenes propias.
- Twitter
- Twitter Hashtag
- Facebook Pages
- Google+ Profiles
- Delicious
- Flickr
- Flickr Hashtag
- Tumblr
- Youtube
- Youtube Search
- Dribbble
- Pinterest
- Vimeo
- Soundcloud
En resumen, hay multitud de opciones, intenta elegir la que no sobrecargue de opciones lo que realmente necesitas.
Si conoces algún otro plugin interesante o quieres dejar un enlace con tu portafolio deja un comentario
10 de mayo de 2016
Cómo deshacer cambios en tu WordPress con VersionPress
En WordPress podemos volver a una versión anterior de nuestras entradas con las revisiones, eso no es nuevo ni complicado, pero qué ocurre si has instalado una actualización, un plugin o un tema y quieres deshacer ese último cambio o revertir tu WordPress a un estado anterior.
Un CTRL+Z o ⌘+Z en WordPress
La solución es el plugin VersionPress. Este plugin añade un historial a tu WordPress, un control de versiones mediante Git. Un CTRL+Z o Comando+Z dentro de tu panel de administración de WP.
Cualquier cambio queda registrado para que puedas volver a cualquier punto anterior o deshacer un cambio, no necesariamente el último.
Una vez instalado lo inicias para crear un repositorio Git, cada acción queda registrada con la fecha, la descripción y un ID. Puedes deshacerla o revertir tu WordPress a ese estado.
Copias de seguridad automáticas y livianas
Otra gran ventaja es la generación de copias de seguridad mucho más livianas, de forma automática sin que tengas que preocuparte de nada.
Cómo instalar VersionPress
Conozco el plugin desde hace un tiempo pero es ahora cuando se ha liberado como plugin de código abierto con su versión 3.0 después de reunir 400.000 dólares de inversores que creyeron en el proyecto. Ahora todos pueden contribuir a su desarrollo y es completamente gratuito.
Esta nueva versión trae como novedades:
Entornos de desarrollo, puedes crear los que quieras, VersionPress combinará la BBDD pero en el panel de administración puedes diferenciarlos.
Un buscador
Y acciones en lote
En mi opinión un plugin necesario sobre todo en entornos de desarrollo:
- Web oficial: VersionPress – Git for WordPress sites
- Descarga VersionPress 3.0 (Recuerda que necesitas PHP 5.6 o superior)
9 de mayo de 2016