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

ByLuis

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');
?>

type == 'font_radio') {
    if ( empty( $control->choices ) )
      return;

    $name = '_customize-font-radio-' . $control->id;

    ?>
    label ); ?>

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 "";
    echo '';
  }
}

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

Similar Posts

Qwench: versión opensource de StackOverflow

ByLuis

Qwench es una versión opensource de StackOverflow, para que nos la podamos descargar e instalar en nuestro servidor.

Entre las características que ofrece nos encontramos con:

  • Permite a los usuarios escribir preguntas y respuestas
  • Sistema de puntos similar a StackOverflow
  • Posibilidad de escribir artículos de conocimiento básico
  • Posibilidad de restringir el acceso a usuarios registrados únicamente
  • Layout CSS
  • Funciona en la mayoría de los navegadores

Qwench

|

Consola remota mediante PHP y Ajax

ByLuis

Os voy a pasar una referencia a script de php que nos proporciona una consola remota para ejecutar comandos desde una página web. Con ella podréis ejecutar comandos mediante php, teniendo en cuenta los permisos de php para poder ejecutar los comandos que pasemos.
phpconsola.png
Algunos os llevaréis las manos a la cabeza y no sin razón, pero la verdad es que a mí personalmente me vendría muy bien en ciertos proyectos en los que para ejecutar el más mínimo comando casi hay que enviar cien peticiones a la gente de redes encargada de los servidores de los proyectos. O cuando el acceso a telnet lo tienes restringido desde el trabajo.
Lo que está claro es que hay que añadirle toda la seguridad habida y por haber. En el artículo al que hago referencia, se pueden ver todos los controles de seguridad que hay que usar y copiar el script php necesario.
PHP and AJAX shell console

Acceder a Google Analytics con OAuth y PHP

ByLuis

Está claro que por ahora OAuth es el futuro para el uso de APIs, y como no, Google requiere OAuth para conectarnos a su API, lo cual puede parecer bastante difícil, pero cuando le coges el truco, es bastante sencillo:

$oauth = new OAuth($consumer_key, $consumer_secret);
$oauth->setToken($access_token, $access_token_secret);
$result = $oauth->fetch('https://www.google.com/analytics/feeds/datasources/ga/accounts');

El resto es fácil, tan sólo hay que mirar la documentación y obtener los datos de las distintas peticiones.

Google Analytics Accounts API

Blitz: sistema de plantillas para PHP

ByLuis

Blitz es un sistema de plantillas para PHP que está desarrollado en C y compilado como una extensión para PHP. Habiendo ya muchos sistemas de plantillas para PHP, la pregunta es ¿por qué usar una nueva? la respuesta es simple, Blitz es uno de los sistema de plantillas más rápidos que hay y permite a los desarrolladores crear código compacto y sencillo de leer y modificar, incluso para aquellas aplicaciones con una lógica de presentación compleja.
Blitz se basa en dos conceptos: view controllers que contienen la lógica de presentación sin etiquetas HTML, y las plantillas que contienen el HTML, variables y lógica como condiciones de presentación de datos, includes y llamadas a métodos de usuario.
Blitz
Vía / International PHP Magazine

|

Laboratorio: ejemplo de CAPTCHA

ByLuis

El otro día ví en Rapidshare un ejemplo de CAPTCHA que parecía fácil de desarrollar. Se trata de las letras (tres en este caso), giradas ángulos aleatorios, pero no demasiado para que se pueda leer con facilidad, sobre un fondo de letras de tonalidad parecida, de menor tamaño y también giradas aleatoriamente.

Un ejemplo dinámico es el siguiente:

CAPTCHA

El método es muy sencillo, usamos una cadena de texto con todas las letras que queremos que aparezcan, para poder acceder aleatoriamente a cada una de ellas. Después nos crearemos el fondo de la imagen, siendo un gris claro y unas letras pequeñas, de un gris un poco más oscuro sobre ellas, que llenan toda la imagen. Y por último, creamos las tres letras del CAPTCHA para mostrarlas en el centro de la imagen y de un tamaño considerable.

En este caso he cogido la fuente de daFont, pero se puede usar la que se quiera. Yo recomiendo usar alguna que esté distorsionada para que la lectura para nosotros no presente complicaciones, pero si para algún proceso automático.

El script sería el siguiente, teniendo en cuenta que no se trata el almacenamiento en sesión de las letras del CAPTCHA para luego poder compararlas.

<?php
// Juego de letras para usar
$letras = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
// Configuración tamaño imagen y tamaño fuente
$ancho_caja = 200;
$alto_caja = 100;
$tam_letra = 16;
$tam_letra_grande = 60;
// angulo máximo que rota (izq y der) cada letra
$angmax = 20;
// Establecer el tipo de contenido
header("Content-type: image/png");
// Creamos una imagen
$im = imagecreate($ancho_caja, $alto_caja);
// Creo el color del texto, del texto del fondo y del fondo de la imagen
$gris = ImageColorAllocate($im, 200, 200, 200);
$colorLetra = ImageColorAllocate($im, 175, 175, 175);
$colorLetraFondo = ImageColorAllocate($im, 180, 180, 180);
// tipo de letra obtenido en dafont.net
$fuente = './Hotel Coral Essex.ttf';
// Calculo el número de líneas que entran
$caja_texto = imagettfbbox($tam_letra, 0, $fuente , $letras);
$alto_linea = abs($caja_texto[7]-$caja_texto[1]);
$num_lineas = intval($alto_caja / $alto_linea)+1;
// Dibujo las letras del fondo
// Cada letra de escribe de una en una para poder
// darle una rotación independiente al resto
$pos = 0;
for ($i = 0; $i<$num_lineas; $i++) {
$x = 0;
for ($j = 0; $j<30; $j++) {
$texto_linea = $letras[rand(0, strlen($letras)-1)].' ';
$caja_texto = imagettfbbox($tam_letra, 0, $fuente , $texto_linea);
imagettftext($im, $tam_letra, rand(-$angmax, $angmax), $x, $alto_linea*$i, $colorLetraFondo, $fuente , $texto_linea);
// Posicion x de la siguiente letra
$x += $caja_texto[2] - $caja_texto[0];
}
}
// Escribo las tres letras del CAPTCHA
$res = $letras[rand(0, strlen($letras)-1)];
$ang1 = rand(-$angmax, $angmax);
$caja_texto = imagettfbbox($tam_letra_grande, $ang1, $fuente , $res);
$y1 = abs($caja_texto[7]-$caja_texto[1]);
$x1 = abs($caja_texto[2]-$caja_texto[0]);
$res .= $letras[rand(0, strlen($letras)-1)];
$ang2 = rand(-$angmax, $angmax);
$caja_texto = imagettfbbox($tam_letra_grande, $ang2, $fuente , $res[1]);
$y2 = abs($caja_texto[7]-$caja_texto[1]);
$x2 = abs($caja_texto[2]-$caja_texto[0]);
$res .= $letras[rand(0, strlen($letras)-1)];
$ang3 = rand(-$angmax, $angmax);
$caja_texto = imagettfbbox($tam_letra_grande, $ang3, $fuente , $res[2]);
$y3 = abs($caja_texto[7]-$caja_texto[1]);
$x3 = abs($caja_texto[2]-$caja_texto[0]);
imagettftext($im, $tam_letra_grande, $ang1, ($ancho_caja/2)-(($x1+$x2+$x3)/2), $y1+($alto_caja-$y1)/2, $colorLetra, $fuente , $res[0]);
imagettftext($im, $tam_letra_grande, $ang2, ($ancho_caja/2)-(($x1+$x2+$x3)/2)+($x1), $y2+($alto_caja-$y2)/2, $colorLetra, $fuente , $res[1]);
imagettftext($im, $tam_letra_grande, $ang3, ($ancho_caja/2)-(($x1+$x2+$x3)/2)+($x1+$x2), $y3+($alto_caja-$y3)/2, $colorLetra, $fuente , $res[2]);
imagepng($im);
imagedestroy($im);
imagedestroy($im2);
?>

Un ejemplo lo podéis ver en la misma imagen que aparece arriba, ya que es dinámica y se modifica al recargar la página.

Código

One Comment

Comments are closed.