El otro día hablábamos sobre el modo de personalizar la página de error de página no encontrada. Decíamos que se le podría añadir una lista de entradas relacionadas con la url que hemos introducido incorrectamente. Y como no hay nada mejor que los ejemplos, vamos a explicar como se podría realizar para Word Press.
Las últimas versiones de WordPress usan fuentes (dashicons) en vez de iconos. Cuando creamos un custom post type se le puede indicar el icono para el menú y se podía añadir un action para meter un css en el header del admin para meterle el icono que quisieramos. Ahora esto es más fácil, porque como ya existen bastantes iconos/fuentes, tan solo hay que indicar el class que querramos.
Primero, en la definición del post type, debemos indicar en el menu_icon la clase que queremos usar y que aparecerá en el menú:
// Aqui deberemos poner todos los argumentos
// yo solo pongo el que me interesa para abreviar
$args = array('menu_icon' => 'dashicons-cart'); // carrito de la compra
register_post_type('loquesea', $args);
Y por último solo tenemos que añadir un css para añadir este icono en la cabecera de la página:
add_action('admin_head', 'iq_home_slider_admin_header');
function iq_home_slider_admin_header() { ?>
Para saber que caráter debemos elegir para el content: "\f174", debemos ir al fichero /wp-includes/css/dashicons.css, buscar la clase correspondiente y copiar el carácter.
poMMo es una de las mejores herramientas para envío de newsletters o mailing, el problema es que la última versión es del 2008 y no tienen ni API ni nada parecido, pero se puede simular mediante CURL, lo cual nos puede venir muy bien para añadir mailing a nuestras aplicaciones con CodeIgniter o WordPress.
Creo que para ciertos blogs es muy útil ofrecer la opción de añadir OpenSearch para que la gente puede realizar búsquedas en nuestro blog. Algo también bastante útil es que nos ofrezca sugerencias de búsquedas (tal y como hace Google). Para ello tan sólo hay que añadir una opción al XML de OpenSearch y modificar nuestro functions.php.
En el fichero XML deberemos añadir la siguiente etiqueta:
Y añadir xmlns:suggestions="http://www.opensearch.org/specifications/opensearch/extensions/suggestions/1.1" a la etiqueta inicial OpenSearchDescription
Yo en este caso he preferido usar una URL amigable, sobre todo para practicar con el wp_rewrite, pero se podría hacer perfectamente con una variable con parámetros.
Una vez cambiado el opensearch.xml deberemos modificar el functions.php, para lo cual tendremos que coger el término que se quiere sugerir y buscar entre las categorías y tags y entre los títulos de los posts para así mostrar una unión de ambos. Las categorías se ordenarán por el número de veces que aparece y los posts por fecha descendente.
add_filter('init','suggestion_init');
add_filter('query_vars','suggestion_insertMyRewriteQueryVars');
add_filter('rewrite_rules_array','suggestion_rewrite');
// Acciones iniciales
function suggestion_init(){
// Reescribe las reglas
global $wp_rewrite;
$wp_rewrite->rewrite_rules();
// Obtiene el termino a buscar
$req = explode('/', substr($_SERVER['REQUEST_URI'], 1), 2);
if ($req[0] == 'suggestion') {
$result = wp_cache_get( 'suggestion_'.$req[1] );
if ( false == $result ) {
global $wpdb;
$list = array();
// Recupera las 4 categorias/tags que coincidan
$res = $wpdb->get_results("select name from $wpdb->terms t, $wpdb->term_taxonomy tx where name like '%".$req[1]."%' and t.term_id = tx.term_id group by name order by count desc limit 4");
foreach ($res as $item) $list[] = $item->name;
// Recupera las 4 anotaciones que coincidan
$res = $wpdb->get_results("select post_title from $wpdb->posts where post_title like '%".$req[1]."%' order by ID desc limit 4");
foreach ($res as $item) $list[] = $item->post_title;
// Devuelve en formato JSON
$result = json_encode(array($req[1], $list));
wp_cache_set( 'suggestion_'.$req[1], $result );
}
echo $result;
exit();
}
}
// Permite que WP acepte un nueva parametro en la query de la URL
function suggestion_insertMyRewriteQueryVars($vars) {
array_push($vars, 'suggestion');
return $vars;
}
// Reescribe la regla
function suggestion_rewrite($rules)
{
$newrules = array();
$newrules['suggestion/([^/]+)/(.*)$'] = 'index.php?suggestion=$matches[1]';
return $newrules + $rules;
}
En el código he añadido caché, porque es altamente recomendable, puediendo usar el plugin WP File Cache. También debo decir que me encontré con el problema del timeout que tiene Firefox para esperar la respuesta para la sugerencia, muy pequeño para mi servidor, por lo que si quieres modificarlo, busca el fichero nsSearchSuggestions.js y modifica el valor de _suggestionTimeout.
Este es un ejemplo raro de uso de WordPress, pero el otro día una persona lo preguntaba en el foro de soporte de WordPress. El usuario tenía los posts geolocalizados (latitud/longitud), supongo con postmetas correspondientes.
Para poder realizar este tipo de búsquedas es necesario usar MySQL procedures, claro que no todos los hosting lo permiten:
CREATE PROCEDURE geodist (IN mylat decimal(18,12), IN mylon decimal(18,12), IN dist float)
BEGIN
declare lon1 float;
declare lon2 float;
declare lat1 float;
declare lat2 float;
set lon1 = mylon-dist/abs(cos(radians(mylat))*69);
set lon2 = mylon+dist/abs(cos(radians(mylat))*69);
set lat1 = mylat-(dist/69);
set lat2 = mylat+(dist/69);
SELECT p.*, 3956 * 2 * ASIN(SQRT( POWER(SIN((mylat -lat.meta_value) * pi()/180 / 2), 2) +COS(mylat * pi()/180) * COS(lat.meta_value * pi()/180) *POWER(SIN((mylon - lon.meta_value) * pi()/180 / 2), 2) )) as distance FROM wp_posts as p, wp_postmeta lat, wp_postmeta lon WHERE p.ID = lat.post_id and lat.meta_key = 'latitude' and p.ID = lon.post_id and lon.meta_key = 'longitude' and lon.meta_value between lon1 and lon2 and lat.meta_value between lat1 and lat2
and post_status = 'publish'
having distance < dist ORDER BY Distance;
END
Una vez creado el procedure deberemos llamarlo para obtener los resultados:
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.