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.
Mucha es la gente que utiliza WordPress y no todo el mundo debe saber ni diseño, ni CSS, ni XHTML, ni mucho menos el sistema de plantillas de WordPress. Para aquellos que sepan algo, pero necesiten una ayuda, existe Templatr, una herramienta online que permite modificar una plantilla base de WordPress y añadirle los estilos que necesitemos.
Ahora que Google ha sacado el botón +1, puede ser interesante saber que puntuación llevan nuestros posts en Google. Una forma rápida (y un tanto cutre) sería crear un fichero (por ejemplo en la raíz del blog que tenga el siguiente código:
get_results("SELECT * from $wpdb->posts where post_status = 'publish' order by ID desc limit 20");
?>
+1 de Google de mis posts
$p) { $url = get_permalink($p->ID); ?>
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() {
?>
Copia los enlaces de la hoja de cálculo con el siguiente formato: Nombre, Enlace
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.
Nos hubiera gustado tardar tan poco como la gente de Mozilla, pero problemas con la conexión y demás, no hemos podido subirlo antes.