Sentido Web

Referencias y explicaciones sobre desarrollo web, PHP, Ajax, XHTML, MySQL ...
12Mar
2014
<!-- 0 -->

Añadir editor WYSIWYG al widget Texto de WordPress

Uno de los problemas que se pueden tener a la hora de desarrollar un plugin es que el cliente sepa editar los widgets añadiendo o modificando el HTML. Es por ello que he creado la posibilidad de añadir un pequeño plugin jQuery de edición WYSIWYG a los widgets Texto que vienen en WordPress por defecto, pero lo mismo se puede hacer para cualquier otro widget, incluído los que crees personalmente.

nicedit

Lo primero será bajarnos el plugin nicEdit, el cual permite de forma muy sencilla añadir un editor WYSIWYG a cualquier elemento. He elegido este plugin y no otro porque en el poco espacio que ofrece el textarea, poner otro plugin más completo, dificultaría su uso, de todas formas, si se quiere usar otro plugin, pues sin problema.

Yo me he creado un directorio /js donde he metido los dos ficheros de nicedit: nicEdit.js y nicEditorIcons.gif.

El siguiente paso es editar nuestro functions.php para añadir el siguiente código:

// El action in_widget_form es el encargado de llamar al método 
// form del widget, el que dibuja el formulario
// Comprobaremos si es un WP_Widget_Text y si es así
// añadiremos un checkbox para permitir que el textarea
// sea WYSIWYG
add_action('in_widget_form', 'set_nicedit_form_widget', 10, 3);
function set_nicedit_form_widget($obj, $return, $instance) {
  if (is_a($obj, 'WP_Widget_Text')) { ?>
		<p><input class="nicedit" id="<?php echo $obj->get_field_id('nicedit'); ?>" name="<?php echo $obj->get_field_name('nicedit'); ?>" type="checkbox" <?php checked(isset($instance['nicedit']) ? $instance['nicedit'] : 0); ?> />&nbsp;<label for="<?php echo $obj->get_field_id('nicedit'); ?>"><?php _e('Utilizar editor HTML'); ?></label></p>
<?php 
    if (isset($instance['nicedit']) && !empty($_POST)) {
      // Si se ha marcado la opción nicedit en el form y se ha dado GUARDAR
      // llamamos la funcion init (explicada más adelante) que se encarga de
      // añadir el WYSIWYG al textarea
?>
    <script type="text/javascript">
      init();
    </script>
<?php    
    }
  }
}
// El WP_Widget_Text no tiene el checkbox nicedit en su código
// por lo que al hacer un update lo ignoraría
add_filter('widget_update_callback', 'set_nicedit_update_widget', 10, 4);
function set_nicedit_update_widget($instance, $new_instance, $old_instance, $obj) {
  if (is_a($obj, 'WP_Widget_Text')) {
    $instance["nicedit"] = isset($new_instance["nicedit"]) && $new_instance["nicedit"] == 'on';
  }
  return $instance;
}
// Añadimos los scripts y styles necesarios si estamos en la pantalla de widgets
add_action( 'admin_enqueue_scripts', 'add_admin_widget_scripts' );
function add_admin_widget_scripts() {
  global $current_screen;
  if ($current_screen->base == 'widgets') {
     wp_enqueue_script( 'nicedit', get_bloginfo('template_directory') . '/js/nicEdit.js' );
     wp_enqueue_script( 'admin', get_bloginfo('template_directory') . '/js/admin.js' );
     wp_localize_script( 'admin', 'admin', array('path'=>get_bloginfo('template_directory')) );
     wp_enqueue_style( 'admin', get_bloginfo('template_directory') . '/css/admin.css' );
  }
}

Ahora deberemos añadir la funcionalidad javascript al código que hemos metido en el widget (admin.js):

// Esta función es la encargada de añadir el WYSIWYG al textarea
function init() {
  // Busca todos los checkbox nicedit (le metimos un class) 
  // que estén seleccionados
  jQuery('input:checkbox.nicedit:checked').each(function() {
    var $this = jQuery(this);
    // Si ya tiene un nicedit nos lo cepillamos
    var niceditor = $this.data('nicedit');
    var $textearea = $this.parents('form:first').find('textarea');
    if (niceditor) niceditor.removeInstance($textearea.attr('id'));
    // Añadimos el nicedit al textarea, puedes meterle más botones, mira la doc de nicedit para ello
    var area = new nicEditor({buttonList : ['bold','italic', 'link', 'unlink', 'xhtml'], iconsPath: admin.path+ '/js/nicEditorIcons.gif'}).panelInstance($textearea.attr('id'));
    $this.data('nicedit', area);
  });
}
 
jQuery(document).ready(function() {
  // Si pulsamos el checkbox, añadimos o quitamos el nicedit
  // Almacenaremos el objeto nicedit para poder utilizarlo despues
  jQuery('.widget-liquid-right').on('click', 'input:checkbox.nicedit', function() {
    var $this = jQuery(this);
    var $textearea = $this.parents('form:first').find('textarea');
    var niceditor = $this.data('nicedit');
    if (niceditor) {
      niceditor.removeInstance($textearea.attr('id'));
      $this.data('nicedit', false);
    } else {
      var area = new nicEditor({buttonList : ['bold','italic', 'link', 'unlink', 'xhtml'], iconsPath: admin.path+ '/js/nicEditorIcons.gif'}).panelInstance($textearea.attr('id'));
      $this.data('nicedit', area);
    }
  });
 
  // nicEdit controla los submits para actualizar los valores,
  // pero en los widgets no funciona, por lo que antes del submit
  // forzamos la actualización del valor
  jQuery('#widgets-right').on('click', ':submit', function() {
    // Quizás se pueda utilizar el objeto nicedit almacenado anteriormente
    // pero esto lo hice así en una versión inicial menos genérica y no lo he tocado
    for(var i=0; i<nicEditors.editors.length; i++) for(var j=0; j<nicEditors.editors[i].nicInstances.length; j++) nicEditors.editors[i].nicInstances[j].saveContent();
  });
  // Apaño el orden de los widgets para meter nicedit a los nuevos widgets
  // Es necesario si se pusieran los nicedit seleccionados por defecto,
  // que en este ejemplo no es el caso, pero si lo añadierais a un widget propio
  // no os funcioanría si no hicierais esto.
  // Lo que hago es meter un pequeño hack a la función saveOrder
  wpWidgets._saveOrder = wpWidgets.saveOrder
  wpWidgets.saveOrder = function() {
    init();
    wpWidgets._saveOrder();
  }
  // Activo los nicedit en los textareas marcados 
  // como tal cuando se carga la página al principio
  init();
});

Y por último solo nos falta meterle el css necesario, en este caso, el nicedit tiene un pequeño bug y si el textarea tiene un width = 100% no calcula el tamaño real, por eso se lo metemos por css (admin.css).

 
textarea.widefat {
  width: 400px;
  height: 100px;
}

Y listo, ya solo falta que el cliente no os dé mucho la lata.

17Dec
2013
<!-- 1 -->

Modificar el diseño del admin de WordPress

Una de las opciones que trae WordPress 3.8 es que permite que cada usuario elija una gama de colores para el admin de WordPress. Esto puede ser bastante útil si somos una empresa y queremos que los colores propios se vean reflejados en el administrador de WordPress, por ejemplo para el blog de un cliente.

Para ello deberemos crearnos un CSS (tomando por referencia los que hay en wp-admin/css/colors) y meterlo en nuestro theme y luego añadir lo siguiente a nuestro functions.php:

add_action('admin_init', 'colores_admin');
function colores_admin() {
	wp_admin_css_color( 'id', 'Titulo', // poned el id que querais, si id = fresh modificara el diseño por defecto
		get_template_directory_uri(). "/css/admin.css" ,
		array( '#f00', '#0f0', '#00f', '#ff0' ), // los cuatro colores que muestran y que deberan corresponder a los del css que hemos creado
		array( 'base' => '#0ff', 'focus' => '#f0f', 'current' => '#fff' ) // los textos
	);
}

Recordad que WordPress ya no usa iconos, sino font icons, por lo que si queréis añadir o modificar iconos, deberéis crearos una web font con ellos (podéis usar Fontastic).

Publicidad
14Nov
2013
Comments Off

Importar listado de enlaces en los menús de WordPress

Los menús de WordPress son una de las funcionalidades menos aprovechadas de WordPress. Una de sus funciones más frecuente es la de blogroll, el problema viene cuando el cliente te pasa una lista de enlaces enorme que te toca meter a mano. Para evitar echar horas a esto, he desarrollado una caja que te aparecerá en los menús de WordPress que te permite importar lotes de enlaces sacados de un Excel, ODS, Google Drive, … tan solo tendrás que copiar las columnas y pegarlas (primera columna es el texto y la segunda el enlace):

// Añadir caja en menus para importar enlaces
function add_menu_importar_box() {
  $screen = get_current_screen();
  if ($screen->base == 'nav-menus') {
			add_meta_box( "add-importar", 'Importar enlaces', 'add_menu_importar_meta_box', 'nav-menus', 'side', 'default', null );
  }
}
add_action('admin_head', 'add_menu_importar_box');
 
function add_menu_importar_meta_box() {
?>
    <p>Copia los enlaces de la hoja de cálculo con el siguiente formato: Nombre, Enlace</p>
    <textarea id="enlaces-importar" style="width: 100%; height: 100px;"></textarea>
		<p class="button-controls">
      <span class="list-controls">
				<a href="#" class="item-delete borrartodos">Borrarlos todos</a>
			</span>    
			<span class="importar-to-menu">
				<input type="submit" class="button-secondary submit-add-to-menu right" value="<?php esc_attr_e( __( 'Importar enlaces' ) ); ?>" name="add-taxonomy-menu-item" id="importar-enlaces" />
				<span class="spinner"></span>
			</span>
		</p>
    <script type="text/javascript">
      jQuery('#importar-enlaces').click(function() {    
        var enlaces = jQuery('#enlaces-importar').val();
        enlaces = enlaces.split('\n');
        var cont = 0;
        for(var i=0; i<enlaces.length; i++) {
          var e = enlaces[i].split('\t');
          jQuery('.importar-to-menu .spinner').show();
          wpNavMenu.addLinkToMenu(e[1], e[0], wpNavMenu.addMenuItemToBottom, function() {
            cont++; 
            if(cont == enlaces.length) {jQuery('#enlaces-importar').val('');} 
            jQuery('.importar-to-menu .spinner').hide();
          });
        }
      });
      jQuery('.borrartodos').click(function() {
        wpNavMenu.removeMenuItem(jQuery('.menu-edit [id^=menu-item]'));
      });
    </script>
<?php
}

El código es sencillo, con add_menu_importar_box creo la caja y con add_menu_importar_meta_box la “pinto”, luego lo único que hay que hacer es llamar a wpNavMenu.addLinkToMenu con los datos del textarea y listo.

También he añadido botón de borrado masivo, porque borrarlos uno a uno es otra tortura.

09Nov
2013
Comments Off

Añadir class al ultimo elemento de un menú en WordPress

Muchos diseñadores suelen mostrar los menús en una línea separados entre ellos por una línea salvo el último elemento. El problema está en cómo diferenciar el último elemento para que no tenga ese estilo. Para ello tendremos que meter este código en el functions.php

add_filter( 'wp_nav_menu_objects', 'add_last', 10, 2);
function add_last($sorted_menu_items, $args) {
 
  $c = 0;
  foreach($sorted_menu_items as $i=>$item) {
    $c++;
    if ($c == count($sorted_menu_items)) {
      $sorted_menu_items[$i]->classes[] = 'last';
    }
  }
  
  return $sorted_menu_items;
}

La verdad es que se podria hacer con los selectores de CSS, pero aunque parezca mentira, no son compatibles con IE7, y algunos clientes aún usan el dichoso navegador.

23Oct
2013
Comments Off

Añadir class a la lista de categorías descriptivo en WordPress

Uno de las cosas que no me gustan de WordPress es la costumbre de añadir las clases a los elementos basados en el ID del mismo y no en su slug. Esto ocurre en todo, pero en este caso es con la lista de categorías generadas por wp_list_categories, devolviendo un HTML parecido a este:

<li class="cat-item cat-item-11"><a href="...">Mi categor&iactute;a</a></li>

Si queremos indicar estilos específicos para estas categorías, por ejemplo para añadir un icono a cada categoría, no nos sirve el class basado en ID, porque nos encontramos con que dependiendo de cuando se genere esta categoría, habrá que cambiar el css, siendo más lógico obtener un código como este:

<li class="cat-item cat-item-11 cat-item-mi-categoria"><a href="...">Mi categor&iactute;a</a></li>

Para poder conseguir esto, deberíamos añadir en nuestro functions.php lo siguiente.

 
add_filter('wp_list_categories', 'mete_slug_en_class', 10, 2);
function mete_slug_en_class($output, $args) {
  return preg_replace_callback('#<li([^>]+)class="([^"]+)"([^>]*)><a([^>]+)>([^<]+)<\/a>#', function($m) {
    return '<li'.$m[1].'class="'.$m[2].' cat-item-'.sanitize_title($m[5]).'"'.$m[3].'><a'.$m[4].'>'.$m[5].'</a>';
  }, $output);
}
Publicidad
11Jul
2013
<!-- 1 -->

Poner modo mantenimiento automáticamente en WordPress

Para poner WordPress en modo mantenimiento, cuando actualizamos el theme o plugins y nos va a llevar un tiempo, o en otra ocasión, tan solo tendremos que crear un fichero con nombre .maintenance en el raíz de WordPress.

Si además queremos mostrar un HTML específico, podemos crear el fichero /wp-content/maintenance.php que se cargará si existe.

11Oct
2012
<!-- 3 -->

Añadir contenido a los datepicker de jQuery UI

En algunas ocasiones es necesario añadir contenido al calendario que te ofrecer el datepicker de jQuery UI, por ejemplo añadir un combo que indice “horario mañanas/tarde”. Para conseguirlo será necesario ‘toquetear’ un poco el objeto jQuery.datepicker.

Tendremos que hacer dos cosas: primero deberemos evitar que cuando se selecciona un día se cierre automáticamente el popup con el calendario y después tendremos que modificar el HTML que devuelve la clase.

Para evitar el auto-cierre tenemos que añadir la opción showButtonPanel ya que nos ofrecerá el botón “Close” que nos permitirá cerrar el popup cuando hayamos indicado todos los campos necesarios. También es necesario modificar la función jQuery.datepicker._selectDate tal y como lo indican en StackOverflow:

// Añadimos datepicker al input que queremos
jQuery('.fecha')
  .datepicker({
    showButtonPanel: true,
    dateFormat: "DD, d MM, yy" 
  });
 
// Modificamos la funcion _selectDate
jQuery.datepicker._selectDateOverload = jQuery.datepicker._selectDate;
jQuery.datepicker._selectDate = function(id, dateStr) {
    var target = jQuery(id);
    var inst = this._getInst(target[0]);
    inst.inline = true;
    jQuery.datepicker._selectDateOverload(id, dateStr);
    inst.inline = false;
    this._updateDatepicker(inst);
    // Usar el .html() para luego usar el .text() es porque si usas el regional de datepicker, te salen entidades html en vez de letras acentuadas
    // Se le añade el valor del nuevo campo select que hemos incluido
    target.val(jQuery('<div />').html(dateStr).text()+' @ '+jQuery('#horario').val());
}

Bien, ya tenemos el evento onSelect modificado, ahora nos falta cambiar el HTML que se dibuja, para ello modificaremos la función jQuery.datepicker._generateHTML:

jQuery.datepicker._generateHTMLExtended = jQuery.datepicker._generateHTML;
jQuery.datepicker._generateHTML = function(inst) {
  var html = jQuery.datepicker._generateHTMLExtended(inst);
  var div = jQuery('<div />').html(html);
  div.find('table:first').after('<p>Horario:</p><select id="horario"><option value="mañanas">mañanas</option><option value="tardes">tardes</option></select>');
  return div.html();
}
 
// Incluimos tambien un evento para que cuando se seleccione el horario, se modifique el campo input
jQuery('#horario').live('change', function() {
  var $obj = jQuery('.fecha');
  $obj.val($obj.val().replace(/@.*/, '@ '+jQuery(this).val()));
});
20Jul
2012
<!-- 5 -->

Listar posts de dos categorías en WordPress

¿Qué pasa si queremos mostrar los posts que pertenezcan a dos categorías a la vez? por ejemplo, mostrar los posts que sean de “PHP” y de “Noticias” o “PHP” y “Ejemplos”.

La forma de hacerlo es fácil, primero debemos crearnos la estructura del permalink y que WordPress lo reconozco, en este caso será /categories/slug-category-A/slug-category-B. Para ello tenemos que dar de alta esta estructura el el $wp_rewrite y añadir la variable cats en los parámetros tratados por WordPress.

// Crea la estructura para el rewrite
function categories_rewrite_rules() {
  global $wp_rewrite;
  $rewrite_tag = '%categories%';
  // En la variable cats se almacenará 'slug-category-A/slug-category-B' que luego trataremos
  $wp_rewrite->add_rewrite_tag( $rewrite_tag, 'categories/([^/]+/[^/]+)', 'cats=' );
  $rewrite_keywords_structure = $wp_rewrite->root . "$rewrite_tag/";
  $new_rule = $wp_rewrite->generate_rewrite_rules( $rewrite_keywords_structure );
  $wp_rewrite->rules = $new_rule + $wp_rewrite->rules;
  return $wp_rewrite->rules;
}
 
// Permitimos que la variable cats se tenga en cuenta en las queries (URL) de WordPress
function categories_variables( $public_query_vars ) {
  $public_query_vars[] = 'cats';
  return $public_query_vars;
}
 
// Hacemos un flush para que tenga en cuenta la nueva regla en el rewrite
function me_flush_rewrite_rules() {
  global $wp_rewrite;
  $wp_rewrite->flush_rules();
}
 
add_action( 'init', 'me_flush_rewrite_rules' );
add_action( 'generate_rewrite_rules', 'categories_rewrite_rules' );
add_filter( 'query_vars', 'categories_variables' );

Vale, ya tenemos creada la estructura, ahora solo falta modificar la query para que tenga en cuenta la nueva condición: que el post tenga la categoría A y la categoría B, para lo cual modificaremos el join de la query añadiendo un left join para cada categoría

add_filter( 'posts_join' , 'categories_join' );
 
function categories_join( $join ) {
  global $wpdb, $wp_query;
  if (get_query_var('cats')) {
    // Recuperamos los slugs de las categorias
    $cats =  explode('/', $wp_query->query_vars['cats']);
    $ids = array();
    // Por cada slug recuperamos la categoría y añadimos left join
    foreach($cats as $i=>$c) {
      $obj = get_category_by_slug($c);
      if ($obj) {
        $ids[] = $obj->term_id;
        $join .= " JOIN {$wpdb->term_relationships} r{$i} on r{$i}.object_id = {$wpdb->posts}.ID and r{$i}.term_taxonomy_id = {$obj->term_id} ";
      }
    }
  }
 
  return $join;
}

Y ya está, si accedieramos a nuestro blog http://miblog.com/categories/php/noticias veríamos los posts que están dentro de PHP y Noticias, con su paginación y demás.

Si por un casual queremos utilizar una template en particular para esto, tan solo deberemos añadir lo siguiente a nuestro functions.php:

function categories_template() {
    if (get_query_var('cats')) {
        include (TEMPLATEPATH . '/category-videos.php');
        exit;
    }
}
add_action('template_redirect', 'categories_template');

O si queremos obtener el título de las categorías, podremos crearnos una función que nos lo devuelva:

function get_cats_names() {
 
  if (get_query_var('cats')) {
    $cats =  explode('/', get_query_var('cats'));
    $names = array();
    foreach($cats as $i=>$c) {
      $obj = get_category_by_slug($c);
      if ($obj) {
        $names[] = $obj->name;
      }
    }
    return implode(' | ', $names);
  }
  return '';
}
Publicidad
08Jun
2012
<!-- 3 -->

Evitar problemas de sesión con IE y las aplicaciones Facebook en iframe

Si desarrollais aplicaciones para Facebook y os encontráis con que Internet Explorer pierde la sesión, esto es debido a que Internet Explorer se hace un lío con las cookies y los iframes (que usa Facebook para incluir tu aplicación).

La solución es muy sencilla: meter un javascript comprobando si usa IE y en ese caso, mostrar un banner diciendo que si no cambias de navegador y usas Firefox o Chrome te enviaremos un par de matones a tu casa que lo harán por ti. Desgraciadamente, el kilo de matón sale muy caro, y hay mucho usuario que ni sabe que es Firefox o Chrome, así que nos tocará añadir esto a nuestro código:

header('P3P: CP="CAO PSA OUR"');

Así de simple.

Odio el Internet Explorer

Vía / Stack Overflow

10Apr
2012
<!-- 1 -->

Añadir tus propias opciones en Theme Customizer de WordPress 3.4

WordPress 3.4 ha añadido la opción de theme customizer, la cual permite modificar las opciones del theme y darle el aspecto que deseas de forma muy visual y sencilla. En estos momentos, por lo que he podido ver, solo permite modificar el background y poco más. Pero viendo y pegándome con el código he podido ver cómo añadir mis propias opciones.

El ejemplo que voy a poner permite elegir entre tres tipos de fuente de Google Webfonts y modificar las css para usar ese tipo de letra.

Aviso que el código quizás no sea el mejor, pero realizar ingeniería inversa no siempre es fácil y tampoco he visto otro sitio donde lo hagan.

Lo primero que se tiene que hacer es crear las opciones en el panel de customizer. Para ello hay que crear una sección (section “Fuente”) y asignarle unas opciones (settings) y añadirle unos controles (control) a las opciones. Existen controles por defecto, el de elegir el color está muy bien, pero en mi caso me he creado uno personalizado que muestra un control radio modificado para que el label del radio muestre la tipo de letra en cuestión.

add_action('customize_register', 'mi_theme_customizer', 1);
function mi_theme_customizer() {
  global $customize;
 
  if($customize) {
    // La seccion
    $customize->add_section('mi_font', array(
      'title'=>'Fuente'
    ) );
    // La opcion
    $customize->add_setting( 'mi_font_family', array(
      'control' => 'color', // esto ni idea de para que sirve, realmente no es un control tipo color y funciona
      'type' => 'option'
    ) );
 
    $customize->add_control( 'mi_font_family', array(
      'settings' => 'mi_font_family',
      'section'  => 'mi_font',
      'type'     => 'font_radio',
      'choices'  => array('Trocchi', 'Great Vibes', 'Bad Script') // las fuentes de google
     ) );
        
  }
}

Una vez creado los controles, añado el código que dibuja (render) mi control personalizado, primero añado los css para que dibuje las fuentes de Google y luego dibujo el control en sí. He usado Javascript en vez de PHP porque parece ser que el código no está del todo completo, y no hay un filtro para crear tu propio control, por lo que tengo que añadirlo mediante jQuery a un elemento para que el Javascript del customizer tenga en cuenta cuando selecciono una opción y refresque el preview del theme.

// Añado los css de google webfonts mediante javascript para tener luego el nombre de las fuentes y usarlo para crear los radio buttons
add_action('customize_controls_print_scripts', 'mi_customize_scripts');
function mi_customize_scripts() {
  $fonts = array('Trocchi', 'Great Vibes', 'Bad Script');
?>
<script type="text/javascript">
  var mi_fonts = <?php echo json_encode($fonts); ?>;
  WebFontConfig = {
    google: { families: [ 
<?php foreach($fonts as $i=>$f) { echo ($i>0?', ':'')."'".urlencode($f).'::latin'."'"; }?>        
      ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); </script>
<?php
}
// Este código es copy/paste del código de WP, pero convertido a JS, 
// ya que el elemento al que añado el código es el que se usa para añadir
// los eventos que refrescan el preview del theme
add_action('customize_render_control', 'mi_render_fonts_control');
function mi_render_fonts_control($control) {
  // Solo lo modifico si es mi control personalizado
  if ($control->type == 'font_radio') {
    if ( empty( $control->choices ) )
      return;
 
    $name = '_customize-font-radio-' . $control->id;
 
    ?>
    <span class="customize-control-title"><?php echo esc_html( $control->label ); ?></span>
    <div>
    <script type="text/javascript">
      var mi_font_checked = [
<?php 
  $cont = 0; 
  foreach( $control->choices as $value => $label ) {
    echo ($cont>0?', ':'');
    echo "'".checked( $control->value(), $value )."'";
    $cont++;
  }
?>      
        ]
      var html = '';
      for(var i=0; i<mi_fonts.length; i++) {
        html += '<label style="font-family: '+mi_fonts[i]+';">';
        html += '<input type="radio" value="'+mi_fonts[i]+'" name="<?php echo esc_attr( $name ); ?>" <?php $control->link(); ?> '+mi_font_checked[i]+' />';
        html += mi_fonts[i]+'<br/>';
        html += '</label>';
        // Lo dicho, tengo que añadir el codigo mediante jQuery porque no hay un filtro que me permita modificarlo
        jQuery(document).ready(function() {jQuery('#customize-control-<?php echo $control->id; ?>').html(html);});
      }
    </script>
    </div>
<?php 
  }
}

Y ya por último solo falta usar la opción guardada para mostrarla en el theme

add_action('wp_head', 'mi_custom_styles');
function mi_custom_styles() {
  $option = get_option('mi_font_family');
  // El customizer modifica este filtro para refrescar el preview
  $option = apply_filters('option_mi_font_family', $option);
  if ($option) {
    echo "<link href='http://fonts.googleapis.com/css?family=".urlencode($option)."' rel='stylesheet' type='text/css'>";
    echo '<style type="text/css">html * {font-family: \''.$option.'\';} </style>';
  }
}

Y esto es todo, no sé si hay una forma mejor de hacerlo, estoy abierto a sugerencias.