Categoría: recursos

Cómo eliminar las imágenes inútiles de WordPress
Los recursos de tu servidor son finitos, el espacio en disco que tienes contratado puede acabarse si no gestionas bien la librería multimedia de tu WordPress. Seguramente cuando haces copias de seguridad es cuando eres consciente del enorme tamaño de tu sitio.
Un altísimo porcentaje de ese tamaño es por la carpeta «uploads» donde se guardan por defecto las imágenes y los archivos que subes a tu WordPress.
Claro que esto es lógico si consideramos que el 53% del peso de una web tipo son imágenes. Aunque no tan lógico cuando descubramos que muchas de las imágenes que guarda nuestro WordPress no sirven para nada.
En este artículo vamos a tratar de reducir en lo posible el tamaño de nuestra carpeta «uploads». Como más que un artículo me ha salido un libro os dejo un pequeño índice y si tienes prisa ve directamente a las conclusiones:
1. Cómo guarda WordPress la información de las imágenes en la BBDD
2. Identificar y eliminar las imágenes inútiles de nuestro WordPress
  1. Cómo identificar imágenes que no usamos
    Identificar elementos multimedia sin adjuntar
    Identificar los tamaños de imagen que me sobran
    Imagen original
    La configuración de medios
    Imágenes responsive añadidas por el propio Core
    El tema que utilices
    Algún plugin
  2. Cómo eliminar y dejar de crear las imágenes inútiles
    Eliminar imágenes inútiles
    Cómo volver a crear los nuevos tamaños útiles en imágenes antiguas
    Plugins que regeneran y también eliminan imágenes inútiles
    Plugins que sólo regeneran tamaños de imágenes
    Cómo eliminar los tamaños inútiles de imágenes antiguas
    Bonus: Actualizar el HTML después de regenerar y eliminar
    Eliminar imágenes sin adjuntar
    Dejar de crear tamaños de imagen inútiles
    Dejar de crear tamaños por defecto
    Dejar de crear el tamaño responsive medium-large
    Dejar de crear tamaños de plugins y temas
  3. Conclusiones
  4. Cómo optimizar las imágenes de tu WordPress (nuevo artículo)
El primer problema es que el tamaño de esas imágenes puede no ser el adecuado, debes optimizarlas, así que lo primero que debes hacer es tener optimizadas esas imágenes, previa subida o mediante plugins como EWWW Image Optimizer o con ShortPixel cuyos brutales resultados explico en Cómo optimizar las imágenes de tu WordPress
El segundo problema, que es el que vamos a tratar en este artículo, es que puedes tener muchas imágenes en tu servidor que nunca se utilizan en tu sitio web, así que veremos cómo identificarlas y cómo deshacerte de imágenes que no sirven para absolutamente nada y están ocupado un preciado espacio.
Lo primero que tenemos que hacer es una copia de seguridad, no sólo de la carpeta uploads sino también de la BBDD.
1. Cómo guarda WordPress la información de las imágenes en la BBDD
La tabla wp_posts además de guardar la info de entradas, páginas, revisiones y CPT guarda la info de cada imagen donde:
- post_type será attachment,
- post_parent será el ID de la publicación a la que se adjunta
- guid se guarda la ruta absoluta al archivo.
Y en la tabla wp_postmeta es donde se almacenan otros metadatos:
- _wp_attachment_image_alt guarda el contenido del atributo ALT
- _wp_attached_file guarda la ruta relativa dentro de «uploads»
- _wp_attachment_metadata guarda la información sobre distintos tamaños de imagen, algo de lo que hablaremos más adelante.
2. Identificar y eliminar las imágenes inútiles de nuestro WordPress
Depende del tipo y edad de tu proyecto:
- este sitio, un simple blog de 11 años que tiene 8.649 elementos multimedia que ocupan 2,2 GB
- mientras que elfinalde.com con sólo 2 años tiene ya 70.476 elementos que ocupan 26,5 GB
En este artículo veremos cómo reducir el tamaño de esa carpeta:
1. Identificar esas imágenes inútiles y
2. Cómo eliminarlas.
2. 1. Cómo identificar imágenes que no usamos
Hay dos tipos de imágenes que debemos identificar:
1. las imágenes que por algún motivo subimos a nuestro WordPress pero que no utilizamos, serían las imágenes sin adjuntar
2. una misma imagen suele tener distintas versiones, debemos identificar cuáles usamos y cuáles no
2.1.1.- Identificar elementos multimedia sin adjuntar
Imágenes, vídeos o audios o archivos PDF que subiste pero que no añadiste a ninguna publicación. Estos elementos puedes verlos desde Medios > Biblioteca y en el primer desplegable donde pone «Todos los medios» elegir «Sin adjuntar».
Debes revisarlo de vez en cuando, aquí quedan esas imágenes que subimos desde la biblioteca para un posible artículo pero que nunca llegamos a publicar o imágenes de publicaciones que han pasado a mejor vida porque aunque las hayas eliminado de la papelera los archivos adjuntos no se eliminan.
Pero mucho cuidado, que aunque aparezcan como medios «Sin adjuntar» no siempre significa que no lo utilices. Una imagen sólo se adjunta a una publicación (Entrada, página o Custom Post Type) Va a ser una imagen «Sin adjuntar» aunque útil cuando:
- una imagen subida a la biblioteca la usas sólo como Imagen destacada
- una imagen subida a la biblioteca la uses en algún widget
- subas una imagen desde la edición un widget, aunque la uses en el mismo
Y por último también puede ocurrir que haya archivos adjuntos que no uses. Si escribiendo una entrada subes 10 imágenes pero luego no las insertas serán imágenes «adjuntas» pero inútiles.
Una solución parcial es instalar el plugin Find Posts Using Attachment que nos mostrará un listado de las publicaciones y la forma en que un medio está siendo usado (contenido o imagen destacada) o no usado. La info la tendremos en una nueva columna de la Biblioteca pero también en la página individual de cada imagen. Es una forma mucho más segura de saber si es una imagen útil que simplemente ver si está sin adjuntar aunque no detecta si la imagen se usa en un widget o shortcode.
Otro plugin interesante para la gestión de medios aunque todavía en beta es Media Usage. Este plugin nos muestra en una nueva columna las distintas versiones de una imagen, iconos con la inicial del ID del tamaño. Al hacer clic en ellos accedemos a las estadísticas de uso de esa imagen, por IP y desde qué página. Ojo, como te habrás imaginado una imagen sin visitas no tiene porqué ser inútil.
En cualquier caso antes de eliminar cualquier imagen y como medida extra de seguridad os aconsejo activar la papelera en la Biblioteca de Medios añadiendo esto a wp-config.php
define( 'MEDIA_TRASH', true );
Una vez aclarado esto, puedes seleccionarlas en lote, enviarlas a la papelera y posteriormente eliminarlas desde la misma biblioteca de medios aunque mi recomendación es que utilices algún plugin como Media Cleaner o Theia Upload Cleaner for WordPress que explico en el apartado sobre eliminar imágenes inútiles antiguas.
2.1.2. Identificar los tamaños de imagen que me sobran
Todo WordPress crea por defecto distintas versiones de una misma imagen. El número de archivos y sus tamaños vienen definidos por:
1. Imagen original
2. La configuración de medios
3. Imágenes responsive añadidas por el propio Core
4. El tema que utilices
5. Algún plugin
2.1.2.1. Imagen original
El archivo original lógicamente ocupa se guarda y ocupa espacio, no deberíamos subir archivos mayores del tamaño máximo que vayamos a necesitar. Es decir, si el tamaño mayor de imagen que vamos a utilizar es de 1024px de ancho lo ideal es subir todas las imágenes a ese ancho, no más.
Debemos tener en cuenta que si subimos una imagen de menor resolución a otras versiones que necesitamos no se crearán dichas versiones, es decir, WordPress puede escalar una imagen reduciendo su tamaño pero nunca ampliando. Siguiendo el ejemplo anterior si subimos una imagen de 1023 píxeles de ancho la imagen de 1024px no se creará.
2.1.2.2. Imágenes creadas por los ajustes de WordPress
En Ajuste > Medios se especifican 3 tamaños: miniatura, medio y grande que luego puedes utilizar desde el editor, que se creen los 3 dependerá del tamaño del original como explicado en el apartado anterior.
Tendrás que pensar si utilizas estos 3 tamaños cuando:
- publicas desde el editor
- desde el tema (ver en 1.2.4 cómo averiguarlo)
2.1.2.3. Imágenes responsive añadidas por el propio Core
Desde la versión 4.4 WordPress añade a la etiqueta HTML <img> los atributos scrset y sizes sirviendo un tamaño acorde con la resolución del dispositivo de todos los tamaños disponibles de una imagen. Ahorramos ancho de banda y ganamos en velocidad.
Además se añadió una función para crear un tamaño extra, llamado medium_large para resoluciones de 768px de ancho.
2.1.2.4. Imágenes que crea el propio tema
El tema que utilices puede añadir nuevos tamaños a través de add_image_size haz una búsqueda de esta función en los archivos de tu tema para saber qué tamaños añade.
Por ejemplo el tema Twenty Seventeen añade dos nuevos tamaños en su archivo functions.php
add_image_size( 'twentyseventeen-featured-image', 2000, 1200, true );
add_image_size( 'twentyseventeen-thumbnail-avatar', 100, 100, true );
Para saber dónde se utilizan estas imágenes podemos volver a hacer una búsqueda pero esta vez por el nombre del tamaño de imagen. Generalmente los distintos tamaños de imagen se pintan usando
the_post_thumbnail( 'nombre del tamaño de imagen: thumbnail | medium | medium-large | full | twentyseventeen-featured-image | ... ' );
Aunque también se pueden usar otras resoluciones no registradas:
the_post_thumbnail(array(500, 300, true));
echo wp_get_attachment_image(12622, array(500, 300, true));
Siguiendo con el tema Twenty Seventeen si buscamos «twentyseventeen-featured-image" lo encontramos en 8 archivos, en header.php, en los de front page y en todos los archivos de loop de single incluidos los formatos de entrada. En resumen, el tema utiliza este imagen de 2000×1200 como imagen de cabecera.
Ahora busquemos la otra imagen, la llamada twentyseventeen-thumbnail-avatar y ¡sorpresa! no hay ningún archivo que pinte esta imagen de 100×100, hemos encontrado una imagen completamente inútil.
2.1.2.5. Imágenes creadas por plugins
Los plugins también pueden utilizar add_image_size Por ejemplo:
- el plugin Featured Image Admin Thumb añade una imagen de 60×60 desde
  add_image_size( $this->fiat_image_size, 60, 60, array( 'center', 'center' ) );
- El plugin Jetpack añade una de 50×50 para el módulo de portafolios con
  add_image_size( 'jetpack-portfolio-admin-thumb', 50, 50, true );
- El widget del plugin SiteOrigin Post Carousel añade uno de 272×182 con
  add_image_size('sow-carousel-default', 272, 182, true);
Puedes escanear tu carpeta de plugins en busca de «add_image_size» para ver qué plugins añaden versiones de imágenes. Ten en cuenta que si desactivas y borras el plugin las imágenes que haya creado no se eliminarán.
Nota: Las imágenes que crean los plugins puede que no se guarden con la misma estructura de año/mes y lo hagan en una carpeta independiente cuyo nombre probablemente haga alusión al del plugin.
Nota 2: El bloque de Imagen del proyecto Gutenberg (versión 1.9.1 del plugin) lista todos los tamaños de una imagen, no sólo el original y los 3 por defecto. Podemos elegir también cualquier otro tamaño que haya sido creado desde el tema o desde un plugin.
2.2. Cómo eliminar y dejar de crear las imágenes inútiles
Una vez que detectamos aquellas imágenes inútiles que no hacen más que consumir recursos debemos eliminar las que tengamos ya creadas y decirle a WordPress que deje de crearlas.
2.2.1. Eliminar imágenes inútiles
Si tu WP es nuevo puedes saltarte este paso pero si llevas un tiempo con él lo más probable es que tengas un montón de imágenes inútiles en tu servidor.
Veremos cómo deshacernos de todas esas imágenes que se han estado creando y que sólo sirven para ocupar espacio.
Digamos que has cambiado los ajustes de medios o has cambiado de tema. Surgirán dos problemas:
1. El nuevo tema utiliza tamaños de imagen nuevos, por ejemplo uno de 275×275
2. El tema viejo utilizaba tamaños de imagen que ya no necesitas, por ejemplo uno de 450×250
El plugin Regenerate Thumbnails Reminder te advertirá si surge algún problema del tipo 1, si detecta algún tamaño nuevo te recomendará que regeneres ese nuevo tamaño para las imágenes que ya tenías subidas. El plugin que ya hemos comentado Media Usage muestra con iconos las versiones de cada imagen de forma que puedes comprobar si hay variaciones entre los tamaños nuevos y los antiguos.
Vamos a ver cómo regenerar estos nuevos tamaños.
2.2.1.2 Cómo volver a crear los nuevos tamaños útiles en imágenes antiguas
Para que todas tus imágenes antiguas tengan las versiones nuevas de tamaño útiles, en nuestro caso el nuevo tamaño 275×275 tenemos muchos plugins, el más famoso y clásico ya Regenerate Thumbnails. Hace exactamente lo que pedimos regenerar en lote o individualmente los nuevos tamaños sin borrar ningún tamaño antiguo. Veamos otras opciones:
Plugins que regeneran y también eliminan imágenes inútiles
Image Regenerate & Select Crop: Divide la acción de regenerar por tamaño, tipo de publicación a la que se ha adjuntado, calidad para regenerarla, además si es un tamaño recortado puedes elegir el punto de anclaje. Puedes desactivar el tamaño que quieras y también eliminar todas las imágenes pertenecientes a ese tamaño para luego regenerarlas. Muy, muy completo.
reGenerate Thumbnails Advanced: elimina todos los tamaños que no estén activos además de regenerar los nuevos tamaños, puedes elegir el período de tiempo de las imágenes a regenerar. Tendremos información del proceso así como un log de errores, por ejemplo si hay algún medio que no es una imagen.
Force Regenerate Thumbnails: elimina todos los tamaños que no estén activos además de regenerar los nuevos tamaños, te muestra un resumen de esos tamaños eliminados y regenerados.
Optimize Images Resizing: No hay ajustes, simplemente elimina y/o regenera.
Plugins que sólo regeneran tamaños de imágenes
ONet Regenerate Thumbnails: Puedes regenerar las imágenes en lote como muchos otros pero además puedes elegir el ratio de compresión, añadir un botón al lado del uploader del editor de publicaciones y crear nuevos tamaños de imagen. No elimina ninguna imagen.
AJAX Thumbnail Rebuild: Eliges qué tamaños regenerar pero no elimina ninguna versión.
Simple Image Sizes: Este plugin mejora la página Ajustes > Medios mostrando todos los tamaños disponibles y pudiendo crear los nuestros. De cada tamaño puedes editar su tamaño, recorte e incluso dando la opción de que un tamaño añadido por un tema, un plugin o creado por nosotros esté disponible en el editor. Por último permite regenerar aquellos tamaños que seleccionemos. No elimina ningún archivo.
Thumbnails (Miniaturas): en vez de regenerar todas las imágenes, las crea y cachea cuando se necesitan evitando procesar una gran cantidad de imágenes. Además puede añadir la Imagen Destacada a entradas que no tengan ninguna asignada. Es muy útil cuando un tema o plugin crea un tamaño sin ID, por ejemplo los plugins de sliders suelen usar tamaños específicos.
2.2.2.2 Cómo eliminar los tamaños inútiles de imágenes antiguas
En el apartado anterior hemos visto muchos plugins que además de regenerar los nuevos tamaños permiten eliminar los que ya no sirven: reGenerate Thumbnails Advanced, Image Regenerate & Select Crop, Force Regenerate Thumbnails, Optimize Images Resizing
Otra opción sería el plugin Theia Upload Cleaner for WordPress, te lista todos los tamaños de tu sitio y decides cuál eliminar. Además trae otras funciones para detectar imágenes inútiles que comentaremos en apartado sobre eliminar imágenes sin adjuntar.
Otra opción es hacerlo de forma manual, aunque no es aconsejable puedes usar por ejemplo Filezilla. Haces una búsqueda recursiva (icono prismáticos) en la carpeta uploads de archivos que contengan «-300x» y te devolverá todos los archivos cuyo ancho es 300px. Ej: imagen-inutil-300x127.jpg
Si tienes acceso por SSH a tu servidor puedes hacer lo mismo yendo al directorio wp-content/uploads y luego ejecutando
find . -name "*-300x*" -type f -delete
Bonus: Actualizar el HTML después de regenerar y eliminar
Regenerar y eliminar las imágenes no modifica el contenido de tus publicaciones, si pusiste una imagen de tamaño grande en una página y luego cambiaste su tamaño esa página seguirá buscando la imagen antigua. Afortunadamente tenemos una solución:
Regenerate Thumbnails HTML: Muy útil sobre todo cuando los cambios son en los ajustes de Medios. Digamos que en mis entradas he añadido imágenes de tamaño medio durante meses cuyo tamaño máximo son 300px y ahora decido cambiarlo a 250px, si vamos a la pestaña HTML de una de esas entradas vemos que WP ha estado generando este código
<img class="alignnone size-medium wp-image-50" src="https://ceslava.com/wp-content/uploads/2017/12/fotografia-300x127.jpg" alt="" width="300" height="127" />
Donde la ruta del archivo será aquella versión de ancho 300, lo sabemos por el sufijo del nombre del archivo «nombre-archivo-anchoxalto.jpg» y que el atributo width toma como valor también los 300px. WordPress no actualiza este HTML aunque hayamos cambiado el tamaño medio, sigue llamando a la imagen anterior incluso si la eliminamos lo que puede resultar en enlaces rotos.
Este plugin te permite hacer una búsqueda de etiquetas img según el atributo ancho y el ID del tamaño. Si da resultados puedes actualizar el HTML de tus publicaciones.
2.2.1.3. Eliminar imágenes sin adjuntar
Las podemos eliminar desde la misma Biblioteca de medios como hemos visto antes o pero mejor utilizando el plugin gratuito Media Cleaner, DNUI o incluso mejor el plugin Theia Upload Cleaner for WordPress que trae funciones extras. Estos plugins escanearán más a fondo la BBDD que un simple filtro de imágenes sin adjuntar que como vimos en el apartado sobre identificar imágenes sin adjuntar no siempre te asegura que sea inútil.
Entre las ventajas de estos plugins están:
- que cuando eliminas las imágenes además de enviarla a la papelera las mueve a otro directorio (uploads/wpmc-trash en el caso de Media Cleaner) y Theia Upload Cleaner además te crea una copia de seguridad. Si envías una imagen a la papelera desde la Biblioteca de Medios los archivos se quedarán en el mismo sitio
- también escaneará posibles imágenes utilizadas en widgets, galerías o shortcodes
- detectará como inútil aquellas imágenes adjuntadas pero que realmente no se utilizan
Theia Upload Cleaner permite eliminar tamaños inútiles de imagen

Captura plugin Media Cleaner
Otros plugins:
- WordPress Uploaded Files Cleaner que aunque lleva sin actualizarse mucho tiempo aún funciona
- Image Cleanup ofrece una interfaz más pobre que los otros, de hecho no tenemos una miniatura de la imagen aunque es muy potente indexando todas las imágenes posibles.
Como dijimos al principio del artículo recuerda que antes de eliminar cualquier imagen debemos hacer una copia de seguridad de la carpeta uploads y de la BBDD.
2.2.2. Dejar de crear tamaños de imagen inútiles
Añadiendo esta función evitarás que se creen tamaños de imagen especificados tanto en los ajustes, en el Core, en un plugin o en un tema.
function no_crear_useless_image_sizes ($sizes) { unset( $sizes['medium']); /* tamaño por defecto (ver otro método 2.2.1) */ unset( $sizes['medium_large']); /* tamaño responsive (ver 2.2.2) */ unset( $sizes['jetpack-portfolio-admin-thumb']); /* tamaño del plugin Jetpack (ver 2.2.3) */ unset( $sizes['twentyseventeen-thumbnail-avatar']); /* tamaño del tema Twenty Seventeen (ver 2.2.3) */ return $sizes; }
La función se la pasamos al hook intermediate_image_sizes_advanced que filtra todos los tamaños que genera WP automáticamente cada vez que subamos una imagen.
add_filter('intermediate_image_sizes_advanced','no_crear_useless_image_sizes');
En principio puedes añadirlo a tu archivo functions.php o mejor al functions.php de un tema hijo o como plugin.
Si no quieres meterte en código puedes utilizar el plugin que hemos comentado antes Image Regenerate & Select Crop para desactivar tamaños de imagen.
Otra opción es usar el plugin gratuito Optimize Images Resizing lo que hace es generar los tamaños sólo cuando se necesitan, no cuando se sube una imagen, es decir, este plugin evitaría que se generara el tamaño twentyseventeen-thumbnail-avatar del tema Twenty Seventeen porque jamás se va a necesitar. También puedes eliminar con él las imágenes inútiles antiguas.
Me parece muy interesante para algunos tipos de proyectos que por ejemplo utilicen muchos tamaños y tengan una enorme librería de medios. Para un sitio al uso es un poco arriesgado dejar que WP genere el tamaño X cuando un usuario visite tu esa página.
2.2.2.1. Dejar de crear tamaños por defecto
Para que WordPress no genere alguna o todas las versiones que por defecto crea (thumbnail, medium y large) de cada imagen podemos ir a Ajustes > Medios y definir en cero los anchos y altos de las imágenes que nos sobren.
Con esta configuración no se crearían imágenes de tamaño medio (‘medium’)
2.2.2.2. Dejar de crear el tamaño responsive medium-large
Igual quieres que WP no cree una versión de 768px de ancho de todas tus imágenes, quizás no porque no te preocupa esto de las imágenes responsive sino porque tu tema ya crea una imagen de este tamaño o casi y ves absurdo tener dos.
2.2.2.3. Dejar de crear tamaños de plugins y temas
Podemos evitar que se creen imágenes inútiles desde plugins o temas, simplemente conociendo el nombre de esa imagen. Si la función que hemos visto antes la añades al archivo functions.php debe estar después de que se haya definido el tamaño con add_image_size de ahí que os recomiendo hacerlo mejor desde un tema hijo.
3. Conclusiones
Tener optimizado tu WordPress es un trabajo de detalles, hay muchos factores en los que pensar, uno de ellos son los archivos. Como empezamos el artículo, tu servidor tiene un espacio finito.
Resumen de pasos facilito y con plugins:
1. Hagas una copia de seguridad
2. Instales Image Regenerate & Select Crop y veas todos los tamaños que se están generando por cada imagen ¿De verdad los necesitas todos? Imagino que si estás leyendo esto es porque piensas que no
3. Elimina las imágenes de los tamaños que no necesitas
4. Desactiva los tamaños que no necesites para que no se vuelvan a crear
5. Opcional: Si ves que alguno de los tamaños al margen de Miniatura, Medio y Grande te pueden ser útiles para incluirlos en alguna publicación en vez de tener que recortar o escalar la imagen instala el plugin Simple Image Sizes para añadirlo a los tamaños de inserción de imágenes del editor.
Además si has cambiado de tema o los ajustes de medios
1. Regenera los tamaños que han sido afectados
2. Instala el plugin Regenerate Thumbnails HTML para actualizar los cambios en el HTML de inserciones de imágenes de tamaños que han cambiado.
Te puede interesar también este otro artículo: Todo sobre la Imagen Destacada en WordPress
Cualquier aporte, corrección o duda en los comentarios.
Actualización 29-01-18
He publicado el artículo Cómo optimizar las imágenes de tu WordPress con los resultados finales.
12 de julio de 2018
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
5 plugins gratuitos para Photoshop (Parte VII)
Seguimos ampliando la colección de plugins gratuitos para Photoshop, ya vamos por la parte VIII y con esta llegamos a los 82 plugins, extensiones y acciones para Photoshop. Para mejorar la productividad, para diseño web, para crear iconos 3D, para fotografía… Espero que os sean útiles.
Estas son todas las colecciones:
1. Perfect Exposure
Un plugin para Lightroom, Photoshop, Photoshop Elements y Corel PaintShop Pro que mejora la exposición y el contraste de una fotografía. Viene con 8 ajustes preestablecidos para que mejores los detalles de tu fotografía de una forma más fácil y rápida.
2. FREE POLAR PROJECTION GENERATOR
Convierte tus fotos panorámicas en pequeños planetas o discos 3D.
Para Photoshop CS6, CC-2014 y CC-2015
3. FREE ISOMETRICON PHOTOSHOP PLUGIN
Con este plugin puedes convertir tus diseños planos en figuras isométricas con un simple clic. Muy útil para la creación de iconos.
Para Photoshop CC-2014 / CC-2015
4. Craft
Una estupenda colección de plugins gratuitos para Photoshop y Sketch desarrollado por InVision ( Styles, Type, Photos, y Duplicate) para mejorar la productividad de nuestros diseños.
Un panel que ye va a permitir insertar datos e imágenes rápidamente en tus mockups, de tu equipo, de Dropbox o de Unsplash. Imagina que quieres hacer una lista de usuarios, con esta herramienta creas una con foto, nombre y email y la duplicas las veces que quieras con contenido aleatorio. Que quieres fotos de animales, sin problema y sin salir de Photoshop, con un clic la tienes. También sincronizas estilos, fuentes, en fin, mejor que veas el vídeo.
~~5. Pyroclasm~~
Con esta acción para Photoshop arderá tu fotografía.
Actualización
Agradezco a mi amigo Diego Mattei que me avisara que esta acción de Pyroclasm no es gratuita, cuesta 5 dólares.
Pero como prometí 5 plugins en este artículo añado otra que precisamente he visto en el estupendo blog de Diego.
5. Elimina las barras en los degradados
No more banding es una excelente acción para Photoshop que elimina ese maldito efecto de banding en los degradados, esas horrorosas barras en las transiciones de color.
Esta acción lo corregirá aunque hará que el archivo pese mucho más porque lo convierte a un documento de 16 bits. Cuando exportes se recomienda que vuelvas a convertirlo a 8 bits.
30 de marzo de 2016
5 plugins gratuitos para Photoshop (Parte V)
Una nueva entrega de plugins gratuitos para Photoshop.
5 plugins más para aumentar tu productividad con variables, renombrar capas masivamente, escalar archivos y para trabajar con código HTML y CSS dentro de Photoshop.
1. Photoshop HTML Block
Con este plugin puedes meter código HTML y CSS dentro de tu PSD, lo representa con el motor WebKit de forma que puedes ver por ejemplo cualquier recurso externo: fuentes web, imágenes externas, css externo como por ejemplo Bootstrap, etc.
Podrás cambiar el tamaño de los elementos sin problemas. Una de las grandes ventajas es por ejemplo cuando diseñamos un formulario, en vez de crear los elementos simplemente añade el HTML.
Photoshop CC 2015, de momento sólo disponible para Mac OS
2. Ditto: Variables en Photoshop
Crea y usas variables en Photoshop y úsalas poniendo #nombrevariable como nombre de la capa. Por ejemplo para colores con el valor hexadecimal, tamaño de la fuente, visibilidad, etc.
Para Photoshop CC 2015 – Mac y Windows.
3. Renamy
Para renombrar capas de forma masiva, la versión gratuita tiene una limitación de 5 capas.
Para Photoshop CC 2015
4. Bjango plantillas para iconos y acciones
Bjango ofrece dos recursos, por un lado una colección de plantillas para iconos para Photoshop, Illustrator, Sketch y Affinity Designer.
Y por otra una colección de útiles acciones y scripts para Photoshop para diseñadores y desarrolladores web.
5. Cell
Una colección de 3 scripts para mejorar el uso de los objetos inteligentes, para agruparlos, desagruparlos de forma masiva y para guardarlos como png
9 de marzo de 2016
Cómo instalar WordPress en local paso a paso
Para crear un entorno de desarrollo local de WordPress lo primero que necesitamos hacer de nuestra máquina un servidor local, para ello utilizaremos un software *AMP
- A – Apache
- M – MySQL
- P – PHP
* Le precede la letra del SO: WAMP, MAMP, LAMP
Entre las opciones existentes destacamos cuatro: MAMP, XAMPP, Instant WordPress y AMPPS. Comentamos sus ventajas y desventajas y explicamos porqué AMPPS me parece la mejor de ellas.
Al final vemos cómo instalar manualmente WordPress en local paso a paso.
1. MAMP & MAMP PRO
MAMP es muy popular entre usuarios de Mac OS X, también está disponible para Windows. Además de PHP podrás desarrollar proyectos con Python y Perl.
A pesar de tener una demo gratuita sólo con la versión de pago, la versión PRO de 39€ obtendrás todo su potencial como el uso de virtual hosts, dynDNS, email, múltiples versiones de PHP.
2. XAMPP (servicio Bitnami)
XAMPP es la aplicación más popular desde hace tiempo entre usuarios de Windows aunque también está disponible para Linux y Mac OS X. Tendrás MariaDB, PHP y Perl.
Puedes utilizar los paquetes del servicio Bitnami para instalar con un asistente WordPress o cualquiera de los más de 130 aplicaciones de este servicio. Bitnami también puede ser usado de forma independiente sin necesidad de instalar XAMPP primero.
3. Instant WordPress (portable)
Instant WordPres no es la solución óptima para un entorno de desarrollo pero tiene una particularidad de la que puedes sacarle provecho en alguna situación. Es una aplicación portable por tanto puedes llevarte tu instalación local de WordPress en un lápiz USB o en un disco duro.
4. Softaculous AMPPS (la mejor opción)
De entre todas las opciones gratuitas encuentro AMPPS la más completa. Contiene Apache, MySQL, MongoDB, PHP, Perl & Python.
El Panel de control es muy, muy completo, accesos directos a phpMyAdmin, gestión y creación de dominios, FTP, etc. y en el panel izquierdo más de 300 aplicaciones (la primera es WordPress) con información muy completa y asistente de instalación.
Instalar WordPress en local con Softaculous AMPPS
Pero su mayor ventaja es que puedes crear tus propios dominios virtuales y trabajar más cómodamente que con localhost/carpeta y al igual que con Bitnami puedes instalar WordPress y cientos de aplicaciones con un asistente al margen de que lo hagas de forma manual. La ventaja sobre Bitnami es que ese asistente tiene bastantes más opciones como:
- la de elegir algún dominio que hayas creado, deja en blanco el campo directorio para que se instale en la raíz.
- instalar un Multisitio,
- elegir el idioma,
- instalar algún tema, etc.
En un par de minutos tendrás instalado de forma limpia y transparente tu WordPress.
Todas tus instalaciones quedan registradas y puedes hacer backups, clonarlas, actualizarlas o simplemente eliminarlas con un clic.
Cómo instalar WordPress manualmente en local paso a paso
Una vez expuestas las opciones cuando tengas instalada tu elegida deberás iniciar los servicios de Apache y MySQL. (Ver más abajo si no puedes iniciar el servicio de Apache).
Con Bitnami, Instant WordPress o AMPPS puedes saltarte estos pasos y hacer una instalación automatizada pero si prefieres hacerlo de forma manual sigue estos pasos.
1. Crea una nueva carpeta dentro del directorio de instalación del software AMP que hayas elegido, por ejemplo «miwordpress»
  - En XAMPP sería una carpeta que crees en htdocs
  - en AMPPS sería dentro del directorio www
  - si has creado un dominio virtual con AMPPS la carpeta con el nombre del dominio ya habrá sido creada dentro de www y no necesitas crear una nueva
2. Descarga el paquete del core de WordPress desde WordPress.org
3. Descomprime y extrae el contenido de la carpeta wordpress en el directorio que creaste en el paso nº 1. Ej: «miwordpress»
4. Una vez hecho esto si te diriges en tu navegador a la dirección localhost/miwordpress o en el caso de que hayas creado un dominio accedes a ese dominio. WordPress te informará que necesitas una base de datos, su usuario y contraseña.
5. Vamos a crear la Base de Datos. Desde tu navegador ve a localhost/phpmyadmin y en el panel izquierdo eliges «Nueva». Le pones un nombre a tu Base de Datos y como cotejamiento utf8mb4_general_ci.
6. Volvemos a WordPress en el navegador localhost/miwordpress (o el dominio virtual) y seguimos con el asistente. Introducimos el nombre de la Base de Datos, en usuario ponemos root y por defecto la contraseña en XAMPP la dejas vacía y en AMPPS pones mysql
7. Si lo hemos hecho correctamente podremos ejecutar la instalación, sólo nos queda rellenar nuestro datos de administración para nuestro nuevo sitio local.
¡Listo!
Si la instalación la vas a llevar en un servidor real que hayas contratado el proceso sería muy similar salvo que lo normal es que el core de WordPress lo subirías por FTP a tu carpeta raíz del dominio, normalmente «public_html» y que el usuario y contraseña de la Base de Datos los crearás tú mismo bien desde phpMyAdmin o desde el panel de control de tu hosting (Ej: cPanel o Plesk) con algún asistente de creación de Bases de Datos.
Solución si da error al iniciar Apache
Si te salta un error porque por ejemplo el puerto 80 ya está en uso comprueba qué servicio es el que crea conflicto.
Por ejemplo en Windows si pones en la línea de comandos encontrarás el PID de ese servicio
```
C:\> netstat -aon | findstr 0.0:80
```
En XAMPP te lo dice el propio panel de control.
En el administrador de tareas puedes buscar con el PID qué servicio es. Además de Skype suele crear conflictos el «Servicio de Publicación World Wide Web» con el PID 4. Lo mejor es que vayas a Servicios de Windows, lo detengas y lo configures para que se inicie de forma manual.
21 de diciembre de 2015
Descarga los colores corporativos de grandes marcas
Las grandes marcas suelen (o deben) tener una buena imagen corporativa y los colores corporativos son una parte importante de ella.
En BrandColors puedes encontrar cuáles son esos colores corporativos para inspirarte. Encontrarás los colores corporativos de grandes compañías y marcas: Starbucks, Rolls-Royce o Playstation y también los colores de muchos sitios y aplicaciones webs como Reddit, Skype, Vimeo, Pocket, Smashing Magazine, 50px, Spotify, WordPress, WordPress.com y un largo etcétera. Si quieres aportar algún otro puedes hacerlo a través de la página del proyecto en GitHub
Lo interesante es que puedes crear tu colección y descargarla en varios formatos: CSS, ASE (Adobe), Sass, LESS o Stylus.
Enlace: BrandColors | Official color codes for the world’s biggest brands
Bonus: Al estar creado por Galen Gidman, un gran desarrollador de WordPress, puedes descargar el tema de WordPress que ha creado para este proyecto: brandcolors
4 de julio de 2015
5 plugins gratuitos para Photoshop (Parte IV)
Publicamos una nueva selección de plugins gratuitos para Photoshop.
5 plugins para aumentar tu productividad y crear máscaras de luminosidad, versiones de archivos y formatos, traducciones, colorear cómics o para crear animaciones.
1. Easy Panel
Como su nombre indica es un panel con muchas acciones útiles que van a ahorrarnos algunos clic. Un total de 14 acciones que además en la descarga vienen también separadas para que puedas instalarlas como acciones de forma individual sin el panel.
Es gratuito, para descargarlo sólo tienes que suscribirte a la lista de correo para recibir los tutoriales del gran Jimmy McIntyre.
2. Generator Layer Names
Con este plugin puedes indicar el formato (GIF, PNG, JPEG o SVG) y el tamaño en que quieres que se guarde una determinada capa.
Por ejemplo:
200% logo.png, logo.jpg60%
Guardará dos archivos distintos de esa capa, uno en PNG al doble de su tamaño y otro en JPEG al 60% de compresión. Un buen plugin para diseño web y diseño de apps.
3. Colorization
Son 3 paneles en 1 para colorear cómics.
4. The Animator’s Toolbar (info)
Un buen recurso para quienes hacéis animaciones con Photoshop. Puede funcionar como panel independiente o junto al panel de la línea de tiempo.
5. Get Localization for PS (info)
Con este plugin puedes extraer un XML con los textos de tu PSD para crear los archivos finales traducidos al idioma que necesites. Es un plugin del servicio de traducciones Get Localization
22 de junio de 2015
Themify Flow: crea temas WordPress desde el front-end
Themify Flow es un framework para crear temas de forma muy visual dentro de tu mismo WordPress.
Una vez instalado, como cualquier otro tema, nos ofrece un menú con opciones como ya tienen muchos otros temas pero en Themify Flow destaca la posibilidad de editar en vivo desde el front-end.
Un panel de estilos para editar CSS

Si quieres por ejemplo añadir un loop a una página no tienes más que arrastrar y soltar ese módulo.
Además:
- puedes exportar los temas que vayas creando para utilizarlos en otros sitios o incluso venderlos,
- preparado para WooCommerce
- ¡Ah! Y es 100% gratuito no como Upfront
Aquí lo tienes en acción
Descarga y documentación: Themify Flow
Desde luego otra buena posibilidad para tenerlo como Starter Theme, una alternativa a Undesrcores, FoundationPress, Bones o estos frameworks y Starter Themes que publiqué en 2009.
12 de junio de 2015