Siguiendo con AJAX, hoy vamos a realizar un ejemplo que puede ser útil para los usuarios de WordPress. Se trata de un marco que muestra una lista con las entradas de nuestro blog, con paginación y efecto de fundido para darle más vistosidad.
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.
Últimamente no ando muy sobrado de tiempo, por lo que no posteo tanto como me gustaría, además, hay pocos temas que considere interesantes como para hacer un post, pero si son lo suficientemente interesantes para realizar un post rapidillo, a ser posible automático.
Es por ello que me he creado un plugin para WordPress, que cuando tenga tiempo lo puliré y publicaré, que me permite postear directamente desde Google Reader usando lo de “Enviar a”, vamos que con una llamada a una URL tipo http://sentidoweb.com/[path_seguridad]/[token]/${title}%20${source} publicaré directamente en mi blog, así podré pasaros posts que considere interesantes.
¿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 '';
}
Interesante artículo en el que nos explican cómo crear un plugin de wordpress usando su propia tabla, algo que no suele necesitarse porque para almacenar datos propios se usan las “options”, pero en algún momento podemos necesitarlo.
Nos explica paso a paso qué hay que hacer:
Declarar la función y las variables globales que se necesitan
Darle un nombre a nuestra tabla y usar el prefijo de WP