¿Qué es "hoy he aprendido..."?

<!--

Lo primero que os llamará la atención es el diseño del blog, los que me conocéis sabéis que soy una fan incondicional de "Sublime Text" como editor para desarrollo, y me ha parecido un bonito homenaje, simular su espacio de trabajo.

Por otro lado, las entradas de este blog, no pretenden ser documentación exacta y correcta. Me limito a compartir con vosotros la forma de solucionar determinados problemas que me voy encontrando en mi trabajo.

Unas estarán bien, y otras serán un "apaño", por lo que os agradecería que me comentéis lo que queráis, y me corrijáis errores de concepto o burradas que veáis.

Simplemente quiero devolver un poco a la comunidad, ya que yo he aprendido muchísimo gracias a la gente que se molesta en compartir sus conocimientos y experiencias.

Espero que os sirva.

-->

Ejecutar gulp desde Sublime Text

Trabajo habitualmente con Gulp y hasta ahora lo ejecutaba en el terminal (como la mayoría, por lo que he visto en distintos vídeos), pero acabo de descubrir un plugin para Sublime Text que me permite ejecutarlo directamente desde el editor, algo que me parece comodísimo si no necesitas el terminal para nada más.

Me ha sorprendido muy gratamente porque puedes lanzar las tareas que quieras de manera independiente y porque es super fácil de usar.

POR SUPUESTO doy por hecho que tenemos Gulp instalado en nuestro proyecto, con su gulpfile, su package.json, su carpeta node_modules, su camisita y su canesú… A ver si vamos a querer ejecutar Gulp en una carpeta donde no hay Gulp. :-/

Bueno, al lío:

Lo primero, evidentemente, instalar el plugin Gulp en Sublime Text, yo lo hice desde el Package Control:

Una vez instalado, podemos abrir las opciones con CMD+SHIFT+P desde el Command Palette:

Si desde aquí seleccionamos la primera opción donde dice solo “Gulp”, se nos muestra una lista con las tareas que tiene nuestro gulpfile.js, para que elijamos la que queremos lanzar. Mola poder lanzar tareas independientes, además nos indica las dependencias que tienen las tareas entre ellas.

También podemos acceder a las opciones del plugin desde el menú de Sublime, en Tools:

Como podéis ver, hay un montón de cosas que podemos hacer directamente desde ambos sitios, lanzar la tarea por defecto, la última tarea, terminarlas todas, etc… en la página del plugin podéis ver qué hace cada una de ellas, si queréis una info más extendida.

Yo prefiero contaros cómo me hice unos atajos de teclado para evitar toda esta navegación por menús y Command Palette, que me resultaba un poco peñazo.

Antes de empezar con los atajos, os enseño el panel que aparece cuando ejecuto alguna tarea, yo ejecutaré “default”:

Como veis, se abre una especie de consola en la parte de abajo donde nos salen los mismos mensajes que salían en el terminal. Evidentemente podemos hacerla más pequeña e incluso esconderla, que es lo más lógico porque molesta, pero también porque necesitaremos hacer búsquedas y ese espacio es el mismo que tiene el buscador. Cerramos el panel simplemente con la tecla ESC

(Nota: los de los Macbook nuevos que no tienen tecla ESC, pues ni puñetera idea.)

Yo quería hacer con el teclado directamente una serie de cosas:

  • Que se me ejecutara la tarea “default”, que es lo que hago habitualmente.
  • Mostrar el panel de Gulp de forma rápida (porque lo tendré oculto, como os decía arriba).
  • Que me mostrara la lista de tareas.
  • Terminar todas las tareas.
  • Terminar todas las tareas y cerrar Sublime.

Para crear los atajos de teclado nos tenemos que ir a los Keybindings de usuario:

Y ahí, me creo mis propios atajos con cada una de ellas, SIEMPRE EN LA PARTE DE USUARIO, ya sabéis que no hay que tocar ni modificar los valores por defecto de Sublime, cuando queramos modificar algún atajo, se sobreescribe en la parte de “User”:

Y ahí podéis ver los atajos que he creado para los comandos que os decía arriba.

De esta manera, solo necesito hacer CMD+G+D para que se lance la tarea “default”, CMD+G+S para mostrar el panel, y así el resto de comandos.

(Para el que no lo sepa, no hace falta pulsar todas a la vez en plan “Twister”, sería más incómodo que los menús. Dejas pulsada CMD y las otras dos como una secuencia, primero “G” y después “D”, p.e.)

Por cierto, aclarar que los atajos aparecían en el menú de Tools porque yo ya los tengo creados, a vosotros no os saldrán:

Y eso es to, eso es to, eso es todo amigos!

 

Cuadrados responsive con CSS

Hoy os traigo un truquito para hacer cuadrados perfectos responsive, o rectángulos, también responsive, que mantengan sus proporciones.

Cuando queremos hacer un cuadrado responsive con porcentajes, el problema viene con el alto, porque lógicamente, el porcentaje que demos al alto, se refiere al alto del contenedor y lo normal es que si estamos haciendo un sitio responsive, desconozcamos el alto del padre porque será fluido. Por ello no podremos igualarlo al ancho.

La gracia está en saber que los paddings siempre se refieren al ancho, de modo que voy a utilizarlo para hacer un “falso height” y que sea igual que el ancho.

¿Cómo lo hacemos? Añadiendo un pseudo-elemento con un padding 100%, que como hemos dicho será el 100% del ancho, y por lo tanto igual, ¡ya tenemos nuestro cuadrado responsive!

Revisión del 26/07/2016

Como respuesta a una duda que me preguntaron, acerca de cómo meter contenido en los cuadrados (podéis ver debajo los comentarios), Gabriel Mondragón nos daba una solución que yo no conocía y me parece muy buena. Ya la he incluido en el pen.

Lo que yo he hecho siempre para meter contenido en los cuadrados era meterlo en un nuevo contenedor y posicionarlo al centro, porque normalmente el diseño que acompaña a este tipo de cajas suele llevar el contenido centrado. Pero si lo que queremos es usar el cuadrado como un div normal, flotando el pseudo-elemento a la izquierda como propone Gabriel, lo tengo solucionado y puedo meter el contenido que quiera.

Lo único que tenéis que tener en cuenta es que cuando el contenido sea mayor que el alto del cuadrado, dejará de ser un cuadrado, pero está bien porque no habrá desbordamientos como ocurre si lo posicionamos.

Podéis ver el ejemplo aquí:

See the Pen Responsive Squares by Diana (@diana_aceves) on CodePen

Custom Google Maps markers: estilos y animaciones CSS3

Hace unos meses, tuvimos que personalizar los marcadores (markers) de un mapa de Google para un proyecto, y aunque la API Javascript de Google Maps realmente me pareció amplia y fácil de entender, me di cuenta que en lo que más tiempo perdimos, fue en tener claro cómo empezar (que como siempre era una chorrada) pero la primera vez lees y lees sin tener muy claro qué hacer. Otra parte que también nos hizo perder bastante tiempo fue dar con el marker exacto que necesitábamos.

En nuestro caso, los markers debían ser redondos, de colores, y debían tener una animación inicial…ya ves, simpático que estaba el diseñador cuando lo pensó.

Empezaré por el principio para que veáis lo fácil que es presentar el mapa y después pasamos a los markers.

(Nota: Para entender bien este post hay que tener unos mínimos conocimientos de JS y de programación orientada a objetos.)

1. EL HTML: En nuestro HTML necesitamos un div que contendrá el mapa, le ponemos un id para que sea más fácil identificarlo.
Para este ejemplo vamos a hacer un mapa que ocupe el 100% del documento.
También tendremos que poner el link a la API de Maps:

2. EL MAPA: Ahora tenemos que crear el mapa, al constructor debemos pasarle dos parámetros: el elemento html que va a contener el mapa, y un objeto que agrupa las opciones de configuración del mismo.

El objeto mapOptions debe tener la configuración mínima para mostrar nuestro mapa, lo normal es especificar; zoom inicial, punto central del mapa y tipo de mapa (MapTypeId), aunque tenemos un montón de parámetros opcionales para configurar, que podéis ver aquí.

Yo voy a añadir disableDefaultUI, para que no se muestren los controles del zoom, ni el resto de elementos de la UI por defecto.

El punto central lo obtenemos mediante google.maps.LatLng(latitud, longitud), y los tipos de mapa básicos son 4;
ROADMAP, SATELLITE, HYBRID y TERRAIN.
Nosotros usaremos el ROADMAP que es el más común. (Más información acerca de tipos de mapas aquí)

Y para dejar nuestro mapa hecho un primor y ser limpios y ordenados, vamos a meter todo en una función init, para que el mapa se cargue en el evento load.

Hasta aquí hemos creado el mapa con la configuración que queremos y centrado en las coordenadas deseadas, recopilamos código:

3. EL CUSTOM MARKER SIMPLE:

Para dibujar un marker a nuestro gusto, en vez de el típico de Google Maps rojo con el punto negro, tenemos que asociar a nuestro mapa un nuevo objeto que lo defina, para ello utilizaremos la clase google.maps.Marker.

– Le decimos dónde queremos que se coloque el marcador, en nuestro caso, en el centro del mapa, y utilizamos el método .getCenter().
– Le decimos también cómo debe representarse mediante “icon”, que a su vez tiene varios parámetros, veamos:
path determina la forma, aquí podríamos meter notación SVG que queramos (ver ejemplo). En nuestro caso vamos a utilizar unas constantes que ya nos ofrece Google, porque queremos un círculo sin más.
– Definimos el tamaño, colores de borde y relleno y opacidad.
– Y por último, a qué mapa debe asociarse (myMap)

Con todo esto ya tenemos un mapa con un marker personalizado, que quedaría así:

Captura de pantalla 2014-09-14 a la(s) 21.09.43

El código completo sería el siguiente:

4. ANIMAR EL MARKER:

Aquí empezó nuestra odisea de prueba/error porque la API tiene muchas maneras de personalizar los markers (cambiar formas y tamaños, poner una imagen propia…), pero una vez que conseguimos pintar lo que queríamos, no podíamos acceder a él para animarlo, los markers simples de maps, no tienen entidad dentro del DOM, de modo que no podemos atacarlos ni con CSS ni con js.

Existen dos animaciones predeterminadas para ellos (BOUNCE y DROP), pero que no nos servían. Por otro lado, también tenemos la opción de animarlos con el método setTimeout(), pero sinceramente me parece muchísimo más complicado que la solución que encontramos nosotros.

NUESTRO AMIGO EL MARKERWITHLABEL: (Te queremos MarkerWithLabel)

Descubrimos un tipo de marcadores que pueden llevar asociada una etiqueta, totalmente personalizable y…

redoble de tambores…

se puede asociar una clase CSS!!! Albricias!! Yujuuu!!!

El truco está en utilizar el “label” como “marker”, escondiendo el propio marker, y como podemos hacer con CSS “casi” lo que queramos, es mucho más versátil que los markers estándar.

Para ello, en vez de usar la clase google.maps.Marker, usaremos la clase MarkerWithLabel y tendremos que añadir una librería que nos permite utilizarla.

Vais a ver que la sintaxis es muy parecida a los markers que ya hemos visto, la diferencia esencial es el juego que vamos a darle después con CSS, os pongo el código js y seguimos.

Por último, el CSS que hará la animación, como en este caso no hemos definido ni forma ni colores porque no queremos que se vea el marker real, tenemos que hacer que el “label” parezca un marker y darle los estilos que buscamos.

Vamos a pintar un círculo verde con un borde azul, y con una sombra y todo!!!, y que al cargar tenga una animación que lo hace crecer y decrecer 3 veces, el CSS no os lo explico porque si habéis llegado hasta aquí, doy por hecho que lo sabéis interpretar:

Como podéis ver, nuestro círculo es de 20x20px, y ahora os explico el parámetro “labelAnchor: new google.maps.Point(10, 10)”:
Este parámetro coloca el “label” respecto del centro del marker que tiene asociado, si no lo ponemos quedaría así:

Captura de pantalla 2014-09-14 a la(s) 21.40.09

En la imagen vemos un punto negro, que sería el marker (lo he pintado para que se vea) y veis que el label (circulo verde y azul) no está centrado. Como mi label mide 20x20px, lo muevo 10 arriba y 10 a la izquierda.

Tenéis varios ejemplos de MarkerWithLabel aquí.

Pues ya está, podéis ver el mapa final con las animaciones en este Pen:

See the Pen Custom CSS styles and animations in Google Maps markers by Diana (@diana_aceves) on CodePen.

Espero que os sirva! Nos vemos! 😉

Cambia el nombre de varios archivos a la vez con Automator

Ya sabía que Automator es una herramienta potentísima para Mac, pero no lo había usado hasta ahora.

Pierdo mucho tiempo cambiando los nombres de grupos de archivos, (por ejemplo, capítulos de series donde te pone el nombre completo, dirección, fecha de nacimiento de su padre, y web personal del tío que la subió) y hoy me decidí a probar Automator para hacerlo, en vez de ir uno por uno.

Me ha resultado tan sencillo que os pongo el proceso para que empecéis a trastear con él.

1. Abrimos Automator y seleccionamos “Servicio” para crear uno nuevo.
automator1

2. Si no tenemos visible la Biblioteca, la ponemos visible en el botón de la izquierda del panel.
3. Seleccionamos las opciones correspondientes en la parte superior derecha:

– “El servicio recibe la selección de:” -> “ARCHIVOS O CARPETAS” en “FINDER.APP”.
– en la Biblioteca, buscamos “Renombrar ítems del Finder” y arrastramos al espacio de la derecha, (si nos sale un aviso del sistema, aceptamos).
automator2
– nos salen dos bloques de acciones:
automator3
La primera yo me la he cargado porque no quiero que me copie los archivos en ningún directorio nuevo, sino que simplemente los cambie de nombre. Así que lo elimináis, y os queda así:
automator4
– Es importante que seleccionéis en “Opciones” la casilla “Mostrar esta acción al ejecutar el flujo” si queréis que os muestre todos los campos para editar cuando ejecutéis el nuevo servicio, si no, lo hará automático sin que podáis personalizar los nombres cada vez.

En mi caso, como quería cambiar los nombres largos de la serie, me interesa que sea un cambio secuencial y me añada los números de capítulos, pero ahora no concreto nada más para poder elegir lo que me interesa cuando lo utilice.
(No obstante todo lo que vamos a establecer cuando lo ejecutemos, podemos ajustarlo ahora y crear tareas más concretas.)

Nosotros lo vamos a dejar así:
automator5

4. Ahora sólo queda guardar la nueva acción automatizada con el nombre que queráis, con Archivo->Guardar. (Yo lo llamé “Renombrar Grupo Archivos”)

Ya tenemos la acción creada y está accesible en nuestro menú contextual, para cuando queramos utilizarla.

Vamos a ver cómo se usa:

1. Selecciono los archivos a los que quiero cambiar el nombre -> botón derecho -> Servicios -> Renombrar Grupo Archivos

automator6

2. Establezco el patrón que quiero que tenga el nombre, yo quería NombreSerie_NúmeroTemporadaxNúmeroCapítulo (el número de capítulo es la secuencia que va a ponerme automáticamente). Como véis, el patrón me lo muestra debajo para que vea si es realmente lo que quiero.
automator7

Aceptamos y está, tenemos nuestros archivos renombrados de un plumazo.
automator8

Ahora ya sólo os queda googlear para buscar más tareas que os interesen, en Apple por ejemplo, nos enseñan a crear capturas.

Por último que sepáis que los servicios que creáis, se guardan en la carpeta de vuestro usuario, en Librería -> Services, y para verla tenéis que tener la opción de “mostrar archivos ocultos”. Ahí podéis borrar los servicios que ya no utilicéis.

Hasta otra!

Limpiar floats con overflow:hidden

Una de las cosas más útiles que me enseñó mi profe Luis Herrero cuando estudiaba front, fue utilizar overflow:hidden en lugar del poco elegante clearfix.

Utilizando sus propias palabras:

“Cuando un contenedor tiene a todos sus hijos flotando, se queda sin altura”.

Esto impide que podamos ponerle un background, que tengamos límites para “empujar” elementos por arriba y por abajo, que podamos usar padding o margin en el elemento padre, etc…

No voy a entrar en las razones del porqué overflow:hidden funciona como os voy a contar, pero básicamente lo que hace es provocar que el contenedor crezca tanto como sus hijos, es decir, los “envuelve”. No hace falta que os diga lo necesario que es este comportamiento para situaciones como por ejemplo, pintar un menú.

Ejemplo simple:

See the Pen ntjqL by Diana (@diana_aceves) on CodePen.

Quitad el overflow y veréis como el background desaparece, el ul deja de tener altura.

Hay más formas de limpiar los floats, pero eso ya lo dejo para otro post más largo.

El bug de la altura en los iPad landscape con iOS 7

Hoy comparto un bug que me trajo de cabeza en uno de mis últimos proyectos, porque es un bug bug, de esos que no tienen ningún sentido y es imposible arreglar…pero que conociéndolo, podemos buscar soluciones fácilmente.

El bug consiste en que en iPads en landscape con iOS 7, si tenemos un elemento con altura 100% relativa a la ventana, resulta que mide 20px más que ella, ¿cómo te quedas? pues así es.

En mi caso concreto me volvía loca buscando por qué razón un texto que debía posicionarse a una determinada distancia del bottom, salía perfecta en todos los dispositivos, navegadores y SO, excepto en mi iPad mini en horizontal, que se descolocaba…

Podéis ver un ejemplo muy clarificador en la siguiente página, http://krpano.com/ios/bugs/ios7-ipad-landscape/ en ella, si lo véis desde un ipad con iOS 7 en horizontal, lo veréis así, el borde rojo que debería estar abajo, igual que el resto, no sale.

la-foto

Yo lo solucioné mezclando un par de cosas que encontré, básicamente se trata de detectar tanto el dispositivo, como el sistema operativo, por javascript a través del userAgent  y meterle una clase específica al html, al que después atacamos con una media query:

Os paso un enlace donde proponen obligar al html a medir lo que debería medir, mediante un position:fixed y el height, pero a mí esa solución no me servía por la naturaleza de mi proyecto y además no me acaba de convencer algo tan drástico, llamadme rara…

https://gist.github.com/benhuson/8664741

En mi caso, sencillamente puse más distancia al elemento que se me quedaba pegado al bottom y solucionado.

Bueno niños, espero que os sirva!

Cargar solo iframe de youtube cuando el usuario pinche en la miniatura del vídeo

Una entrada rápida hoy!

Optimización, optimización y optimización… para los desarrolladores es como un mantra.

En páginas donde tenemos que mostrar varios vídeos, meter los iframes es una carga brutal de archivos innecesarios antes de saber si el usuario va a ver alguno de ellos.

Para evitar esta sobrecarga de estilos, imágenes, etc que trae asociado el iframe de un vídeo de Youtube, existe un script que sólo lo hace cuando el usuario quiera verlo.

Es muy sencillo, simplemente muestra la miniatura del vídeo y la sustituye por el iframe al pinchar.

El script es el siguiente:

(Evidentemente si no vamos a meter el script en el html/php, le quitamos las etiquetas y lo podemos añadir a nuestro archivo .js).

Donde queramos poner la miniatura/vídeo, metemos la siguiente tag:

El id=”XXX..” lo sustituís por el del vídeo y el tamaño, a gusto del consumidor.

Migra tus playlist de Grooveshark a Spotify

Si googleamos un poco, vemos que hay varias formas de hacer la operación contraria, es decir, exportar nuestras playlist de Spotify a Grooveshark, pero yo que soy una inconformista nunca utilicé Spotify, ya véis! chula que es una…

Bueno al rollo! que ahora me encuentro con que todos mis amiguitos frikis de Twitter comparten sus playlists, y yo no existo en su mundo, nadie sabe si me gusta escuchar a “Foo Fighters” o a “Enrique y Ana” y eso no puede ser, mi ego twittero necesita compartir también la música.

He encontrado una forma bastante efectiva de migrar las listas de Grooveshark a Spotify, os la cuento:

  1. Entrad en groovebackup.com, os pedirá vuestros datos de acceso de Grooveshark (no os pongáis tontitos con ésto, que ya sabemos todos, que para que determinadas apps os digan quién os deja de seguir en Twitter, metéis las claves y no tenéis tantos remilgos).
  2. Buscáis la playlist que queréis exportar, click derecho ->guardar enlace como-> csv
  3. Abrís el csv con OpenOffice Calc (vaaaale o Excel…)
  4. Borráis la columna “Album name”.
  5. Intercambiáis el orden de las columnas del artista y canción, de modo que la primera sea el artista.
  6. Cambiáis el título de las columnas: “ArtistName” -> “Artist” y “SongName” -> “Title”.
  7. Guardamos como csv otra vez.
  8. Entráis en ivyishere.org, importáis el csv que acabáis de guardar.

Os dirá las canciones que tenéis, le dais para que cree la playlist y cuando termina os dice cuántas canciones ha encontrado, ya sabéis que en Spotify no están todas, pero puedo deciros que de una lista de 316 canciones que subí YO a Grooveshark, me ha encontrado 256…no está nada mal yo creo, considerando que la mitad de mis canciones tienen la información bastante cochambrosa…

Habéis leído lo de que “… 316 canciones que yo subí a Grooveshark… ” -> “…playlist Spotify…” pues eso… no digo más.

Por cierto, la playlist para el que quiera Diana Playlist Good Music ohhh yeahhh!!

¿Instalación de 5 minutos? ¡No!, instala WordPress en 30 segundos.

Los que tenéis MAC y trabajáis con WordPress estáis de enhorabuena, WordPress new project config os va a permitir hacer una instalación de WordPress… ¡en 30 segundos!

Los requerimientos para poder utilizar esta maravilla son:

  • MAMP
  • Tener instalado Sublime Text o Codekit
  • sFTP para Sublime, sólo si vas a necesitar la conexión remota.

Se trata de un script que se encarga de hacer todo lo que os pongo a continuación, en tiempo récord:

  • Crea los directorios en MAMP.
  • Instala la última versión de WordPress.
  • Borra los archivos readme.html, license.txt, los themes por defecto de WordPress y el plugin “Hello Dolly”.
  • Crea la base de datos y le pone a las tablas el prefijo que tú digas.
  • Configura el wp-config.php y crea un wp-config-local.php para los parámetros de la base de datos local.
  • Configura un proyecto de Sublime Text o Codekit.

Adicionalmente puedes decirle que haga más cosas:

  • Instalar la lista de plugins que desees.
  • Crear el archivo de conexión remota para sFTP en el servidor que le indiques.

Parecen muchas cosas para hacer en 30 segundos ¿verdad? pues sí, pero lo hace, a través del terminal te pregunta el nombre del proyecto y un par de cosas más, y en unos segundos se te abre el proyecto de Sublime o Codekit, y el navegador por defecto con el wordpress montado.

  1. Descargarte el script desde el repositorio https://github.com/jeremycastelli/Wordpress-new-project-config
  2. Renombra el archivo config-sample.cfg -> config.cfg
  3. Edítalo para verificar las opciones de MAMP y poner el theme y los plugins que quieres que instale por defecto.
    editar archivo .command
    El theme debe existir en Github, sin embargo los plugins ya los coge del repositorio de wordpress.org , un gran avance respecto de versiones anteriores del script, que creo recordar, que también necesitaba plugins que estuvieran en Github, y  limitaba mucho los que podías instalar.
  4. Guardas el archivo y ejecutas newproject.command
  5. ¡Empieza la magia! Se te abre el terminal y te pregunta el nombre de tu proyecto, el prefijo que quieres poner a las tablas de la base de datos, si quieres configurar el sFTP, y voilá! Ya tienes tu WordPress.
Captura de pantalla 2013-12-03 a la(s) 10.09.36

Cómo sobreescribir widgets de Woocommerce

Nuestro último proyecto fue un Woocommerce, donde me tocó modificar varias funcionalidades del propio Woocommerce para adaptarlas al especial funcionamiento que debía tener la tienda.

Para evitar que una actualización de Woocommerce, se cargue todas las modificaciones que yo hago, debía sobreescribir los archivos en una carpeta especial del Theme que estábamos utilizando y después deshabilitar el widget original, para que cargase el modificado por mí. Os digo cómo hacerlo:

1. Copio el archivo de la clase donde está el widget.

2. Dentro de la carpeta de mi Theme, habrá un directorio llamado “woocommerce”, debo crear una carpeta nueva dentro llamada “widgets” si no la hay ya: woocommerce/widgets.

3. Cambio el nombre al archivo (por ejemplo custom_elnombreoriginal.php).

4. Lo abro, extiendo mi nueva clase de la que ya existe, y sólo dejo la función widget():

Ej:

class Custom_WC_Widget_Brand_Nav extends WC_Widget_Brand_Nav {

function widget( $args, $instance ) {

//esta función es la que hay en el wc_widget_brand_nav original, y aquí es donde hago los cambios que quiera.
}

}

5. En mi archivo functions.php deshabito el que viene por defecto y activo el mío.

Ej:

add_action( ‘widgets_init’, ‘override_woocommerce_widgets’, 15 );
function override_woocommerce_widgets() {

if ( class_exists( ‘WC_Widget_Brand_Nav’ ) ) {

unregister_widget( ‘WC_Widget_Brand_Nav’ );
include_once( ‘woocommerce/widgets/custom-wc-widget-brand-nav.php’ );
register_widget( ‘Custom_WC_Widget_Brand_Nav’ );

}

}

Listo!