Modificar la ventana de información de Google Maps

Modificar la ventana de información de Google Maps

Nos podemos encontrar con la necesidad de modificar la ventana de información de Google Maps, entre otras cosas porque suele ser un poco feo. En mi caso lo que quise hacer es quitar el marco que te viene por defecto y cambiar la imagen.

Esta vez no voy a explicar muy bien lo que hice, pero en el código se entiende lo suficiente.

// Yo tengo una lista de destinos, que mediante WP paso a una variable mapa
// los destinos tienen una imagen, un enlace y un nombre
var infoW = new google.maps.InfoWindow({
    content: '
'+mapa.destinos[i].thumb+'

'+mapa.destinos[i].name+'

' }); google.maps.event.addListener(infoW, 'domready', function() { var idx = this.content.replace(/.*infowindow_(\d+).*/, '$1'); // El contenido que le paso a la ventana, al haber varios le tengo que meter un id con un indice var $info = jQuery('#infowindow_'+idx); // En este caso espero a que se cargue la imagen, la cual siempre va en los datos // y ajusto el tamaño de la ventana al ancho de la imagen $info.find('img').load(function() { $img = jQuery(this); // Esta capa ($ventana) contiene casi todos los elementos que tengo que modificar var $ventana = $info.parent().parent().css({top: 0, left: 0}).prev(); // Almaceno el ancho y alto original para poder desplazar la ventana segun la diferencia de tamaños var h = $ventana.parent().height(); var w = $ventana.parent().width(); // Bajo (o subo) la capa que contiene mi contenido $info.parent().parent().css({top: h-$info.height()}); // Sombre del recuadro blanco que mete gmaps, ancho como la imagen, tamaño como el contenido y posicion correcta $ventana.find('> div:eq(1)').css({width: $img.width()-1, height: $info.height()+3, top: h-$info.height()}); // Recuadro blanco que mete gmaps, ancho como la imagen, tamaño como el contenido y posicion correcta $ventana.find('> div:eq(3)').css({width: $img.width()-1, height: $info.height(), top: h-$info.height()}); // Triangulo del que mete gmaps posicion correcta $ventana.find('> div:eq(0), > div:eq(2)').each(function() { var $this = jQuery(this); $this.css({left: parseInt($this.css('left').replace(/[^\d]/g, ''))-((w-$img.width())/2)}); }); // Ventana contenedora de todo $ventana.parent().css({width: $img.width()-1, height: $info.height(), left: parseInt($ventana.parent().css('left').replace(/[^\d]/g, ''))+((w-$img.width())/2)}); // Cambio el boton de cerrar $ventana.next().next().css({width: '17px', height: '20px', top: 5+h-$info.height(), right: 5}).html(''); }); });

Permitir guardar opciones de diferentes grupos a la vez en Buddypress

Buddypress es un plugin de WordPress que permite convertirlo en una red social. El plugin está bastante bien, pero una cosa que no me gusta es cómo muestra la pantalla de opciones de tu perfil, dividiendola en distintas secciones: profile, general, … Por lo que tener una única pantalla de opciones es un dolor de cabeza, sobre todo porque cuando se guardan los datos de un grupo de opciones, hace un redirect por lo que no podemos continuar guardando datos.

Para poder solucionar esto hay que mirar qué grupos de opciones se ejecutan inicialmente, y ver que antes del redirect hay un action que deberemos tomar en cuenta:

add_action( 'bp_core_general_settings_after_save', 'iqn_more_settings_save');
function iqn_more_settings_save() {
  global $bp;

  // Guardar datos del profile
  $bp->current_action = 'profile';
  $_REQUEST['_wpnonce'] = $_REQUEST['_wpnonce_xprofile'];
  bp_xprofile_action_settings();
}

En mi caso, inicialmente, se guardaba antes el general settings, por lo que en el action bp_core_general_settings_after_save lo que hago es llamar a la siguiente función que guarda los siguientes datos.

También es necesario que _wpnonce se modifique para que el formulario no falle por temas de seguridad, por lo que hay que añadir en nuestro formulario lo siguiente:

wp_nonce_field( 'bp_xprofile_settings', '_wpnonce_xprofile' );

Permitir envío de emails desde Formularios de Contacto de WordPress en Dinahosting

La sorpresa que me he llevado cuando Dinahosting, en el hosting compartido, no permite el uso de la función mail si no le indicas en las cabeceras un email registrado en el dominio. Algo así:

$to = 'destinatario@dominio.com';
$subject = 'Prueba';
$email_text = 'El contenido del email';
$headers = "From: Yo mismo 
MIME-Version: 1.0
Content-type: text/html; charset=utf-8";
$success = mail($to, $subject, $email_text, $headers);

Normalmente, cuando usas mail, pues pones el to, el subject, el content y te olvidas, pero en este caso debes indicar el header con un from. El problema viene con el 99.9% de los plugins o themes que ofrecen formularios de contacto, que simulan el envío de email por parte del usuario para que cuando te llegue el email, le des a un reply y listo. En Dinahosting, con hosting compartido no se puede.

Para solucionar esto es necesario hacer una chapuza enorme, cambiar el FROM de las cabeceras de wp_mail, para lo que deberemos añadir esto en nuestro functions.php:

add_filter( 'wp_mail_from', 'error_dinahosting');
function error_dinahosting($from) {
  return get_bloginfo('admin_email');
}

Puedo entender y se agradece la seguridad de Dinahosting, pero creo que esto es un error.

| |

Añadir el sistema grid de Bootstrap al tinymce de WordPress

Uno de los problemas que hay en el editor de WordPress es que algunas veces los themes tienen diseños específicos que no se muestran en el editor. Actualmente, el uso de Bootstrap está cada vez más extendido, por lo que es buena idea añadir la opción de meter columnas en los posts de forma sencilla.

boton_bootstrap

Lo primero que deberemos hacer es añadir en el functions.php el código necesario para añadir un botón al TinyMCE:

add_action( 'init', 'sw_mce_buttons' );
// Filtros para añadir los botones
function sw_mce_buttons() {
    add_filter( "mce_external_plugins", "sw_mce_add_buttons" );
    add_filter( 'mce_buttons', 'sw_mce_register_buttons' );
}
// Añade el script del plugin tinymce
function sw_mce_add_buttons( $plugin_array ) {
    $plugin_array['iqn'] = get_template_directory_uri() . '/js/tinymce-plugin.js';
    return $plugin_array;
}
// Un nuevo botón que se identifica como 'bootstrap'
function sw_mce_register_buttons( $buttons ) {
    array_push( $buttons, 'bootstrap' ); 
    return $buttons;
}
// Añadimos el css de bootstrap y uno propio para personalizar cosas
function sw_mce_css($wp) {
	$wp .= ',' . get_bloginfo('stylesheet_directory') . '/bootstrap/bootstrap.min.css'.',' . get_bloginfo('stylesheet_directory') . '/css/tinymce.css';
	return $wp;
}
add_filter( 'mce_css', 'sw_mce_css' );

Después tenemos que crear el javascript para el plugin de TinyMCE:

(function() {
    // Creamos el plugin
    tinymce.create('tinymce.plugins.iqn', {
        init : function(ed, url) {
          // Muestra el dialogo que permite personalizar las columnas
          // Mostrará una caja de texto donde se pondra el ancho de la columna
          // de 1 a 12, y cuando se indique un valor, automáticamente se añadirá otra columna
          function bootstrapDialog() {
            var html = '<div class="bootstrap-dialog">';
            html += '<p class="howto">Añade columnas basadas en el sistema <a href="http://getbootstrap.com/css/#grid">grid de Bootstrap</a></p>';
            html += '<p>Rellena el ancho (1-12) de cada celda. Nuevas celdas aparecerán automáticamente</p>';
            html += '<div class="columns_container"><input type="text" class="column_width" /></div>';
            html += '<p><input type="checkbox" id="new_row" name="new_row" /> <label for="new_row">Añadir nueva fila</p>';
            html += '</div>';
            var panel = {
                type: 'container',
                html: html
            };
            // Abre el dialogo
            win = ed.windowManager.open({
                title: "Columnas de Bootstrap",
                spacing: 10,
                padding: 10,
                items: [panel], // el panel creado antes
                buttons: [ // Botones
                    {text: "Insertar", subtype: 'primary', onclick: function() {
                        var content = ed.getContent();
                        var html = ' ';
                        // Si se marca la casilla, se añade una fila
                        if (jQuery('#new_row:checked').length == 1) html += '<div class="row">';
                        // Por cada columna, se crea una capa
                        jQuery('.column_width').each(function() {
                          var $this = jQuery(this);
                          if ($this.val()) html += '<div class="col-sm-'+$this.val()+'">Columna tamaño '+$this.val()+'</div>';
                        });
                        if (jQuery('#new_row:checked').length == 1) html += '</div>';
                        ed.execCommand('mceInsertContent', false, html);
        	        win.close();
                    }},
                    {text: "Cerrar", onclick: function() {
  	                win.close();
                    }}
                ]
             });
          }
          ed.addButton('bootstrap', {
              title : 'Columnas Bootstrap',
              onclick: bootstrapDialog
          });
        },
        createControl : function(n, cm) {
            return null;
        },
        getInfo : function() {
            return {
                longname : 'Bootstrap columns',
                author : 'SentidoWeb',
                version : "0.1"
            };
        }
    });
    // Register plugin
    tinymce.PluginManager.add( 'iqn', tinymce.plugins.iqn );
})();

jQuery(document).ready(function() {
  // Se crea una casilla nueva si se actualiza el contenido de la última
  jQuery('body').on('keyup', '.column_width', function() {
    var $this = jQuery(this);
    var $inputs = jQuery('.column_width');
    if($this.val()) {
      if ($inputs.index(this) == $inputs.length - 1) {
        $this.after('<input type="text" class="column_width" />');
      }
    }
  });
});

Y ya por último, crearnos el fichero tiniymce.css que se incluirá en el contenido del editor. Yo simplemente he recuadrado los elementos para que se diferencien en el editor:

.row {padding: 4px; border: 1px dashed #bbb;}
.col-sm-1, 
.col-sm-2, 
.col-sm-3, 
.col-sm-4, 
.col-sm-5, 
.col-sm-6, 
.col-sm-7, 
.col-sm-8, 
.col-sm-9, 
.col-sm-10, 
.col-sm-11, 
.col-sm-12 {xmargin: 4px; border: 1px dotted #ccc;}

Y si modificáis el diseño del admin, podéis aprovechar ese css para añadir el css necesario para el botón.

i.mce-i-bootstrap {
	font: normal 20px/1 'dashicons';
	padding: 0;
	vertical-align: top;
	speak: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	margin-left: -2px;
	padding-right: 2px;
}
i.mce-i-bootstrap:before {
	content: '\f479';
}
.bootstrap-dialog p {padding: 5px 0;}
.bootstrap-dialog p a {color: #0074A2; text-decoration: underline;}
.mce-container .columns_container {border: 1px solid #F0f0f0; padding: 20px; border-radius: 4px; margin: 10px 0;}
.mce-container .columns_container input.column_width {
    margin-right: 5px;
    padding: 9px 3px;
    text-align: center;
    width: 39px;
}
|

Añadir Javascript relacionado con templates en WordPress

La jerarquía de las plantillas de wordpress permite definir diferentes plantillas para mostrar según el tipo de contenido. Por ejemplo, la template para mostrar el contenido de un post es single.php, pero si es un custom post type podemos crearnos la template single-miposttype.php y que use esa plantilla específica para mostrar los contenidos del custom post type. Si se trata de una página mostrará page.php, y así con todos los tipos de contenido.

Lo que nos encontramos en ocasiones es que queremos ejecutar un javascript específico asociado a esa plantilla, lo cual podemos hacerlo a la hora de añadir los scripts preguntando por el tipo de contenido. Pero si lo queremos hacer de una forma más automática, podemos añadir en el filtro template_include la acción de añadir el script.

add_filter('template_include', 'js_load_script_template');
function js_load_script_template($template) {
  // Obtenemos el fichero de la template que se usa
  $js = pathinfo($template);
  $js = $js['filename'];
  // Me gusta obtener la versión del theme para evitar caches
  $my_theme = wp_get_theme();
  $version = $my_theme->get( 'Version' );  
  // Si el fichero js existe, p.e. single-miposttype.js lo añadimos
  if (file_exists(get_template_directory().'/js/'.$js.'.js')) {
    wp_enqueue_script( $js, get_bloginfo('template_directory').'/js/'.$js.'.js', array(), $version );
  }
  // Tambien ejecuto el script relacionado con la plantilla generica, p.e. single.js
  $js_part = preg_replace('#^([^\-]+)\-.*$#', '$1', $js);
  if ($js != $js_part && file_exists(get_template_directory().'/js/'.$js_part.'.js')) {
    wp_enqueue_script( $js_part, get_bloginfo('template_directory').'/js/'.$js_part.'.js', array(), $version );
  }    
  return $template;
}

Iconos de custom post types usando fuentes

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.

| |

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); ?> /> <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.

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).

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() {
?>
    

Copia los enlaces de la hoja de cálculo con el siguiente formato: Nombre, Enlace

Borrarlos todos

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.

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.