Traducir Contact Form 7 en widgets usando WPML

O bien no me enteré, o bien la solución que plantean desde Contacto Form 7 para traducir formularios no me servía. Ellos proponen crear otro formulario en otro idioma y añadir cada formulario en la página correspondiente a su idioma. ¿Pero qué pasa cuando el formulario no está en una página sino en un widget dentro de un sidebar?, pues que necesitaremos traducir las cadenas de texto mediante WPML.

Para ello nos creamos un filtro que coge los values de la etiqueta, las registra en WPML y las traduce:

add_filter( 'wpcf7_form_tag', 'wpml_cf7_tags');
function wpml_cf7_tags($scanned_tag, $exec ) {
  foreach($scanned_tag['values'] as $i=>$v) {
    icl_register_string('Contact Form 7', $v, $v);
    $scanned_tag['values'][$i] = icl_t('Contact Form 7', $v, $v);
  }
  return $scanned_tag;
}

Ahora solo falta traducir las cadenas desde WPML.

Share Button

Añadir notificación de actualizaciones en el menú del admin de WordPress

Si queremos indicar que hay novedades en algún elemento del menú del admin de WordPress, tendremos que añadir un simple filtro en nuestro functions.php. Esto puede ser necesario por ejemplo si tenemos un Custom Post Type y se actualiza mediante un cron, el usuario podría tener un vistazo rápido de como ha ido el cronjob si usamos ese tipo de notificaciones.

Clipboard01

Para añadir estas notificaciones tendremos que hacer uso del filtro add_menu_classes, que aunque no creo que esté pensado para esto, nos permite modificar el menú antes de ser dibujado. En el filtro tendremos que buscar la opción del menú por la acción que realiza (posición 2 del array) y añadir un pequeño HTML en el título (posición 0 del array). Buscamos por la acción y no por el título ya que si usamos multi-lenguaje nos puede dar problemas.

add_filter( 'add_menu_classes', 'admin_menu_updates');
function admin_menu_updates( $menu ) {
  foreach($menu as $i=>$item) {
    if ($item[2] == 'edit.php?post_type=miposttype') {
      $c = get_transient( 'contador_updates_miposttype' );
      if ($c) $menu[$i][0] .= ' <span class="update-plugins"><span class="update-count">'.$c.'</span></span>';
    }
  }
  return $menu;
}

Yo en este caso el valor lo almaceno usando la API de Transients, pero vosotros lo podéis gestionar como os venga mejor.

Share Button

Acceder a WordPress en localhost desde tu red WIFI

Uno de los problemas a los que nos enfrentamos al desarrollar en responsive es que en local es difícil acceder a nuestro localhost desde móviles y tablets. Aunque con unos sencillos pasos podremos acceder sin problemas.

Primero tendremos que modificar nuestro vhosts de Apache para que acepte peticiones desde la red, añadiendo lo siguiente:

<VirtualHost [IP de nuestro ordenador en la red]>
    ServerAdmin [IP de nuestro ordenador en la red]
    DocumentRoot "[path a nuestro WP]"
    ServerName [IP de nuestro ordenador en la red]
    LogLevel debug
    ErrorLog "logs/wordpress-error.log"
    CustomLog "logs/wordpress-access.log" combined
</VirtualHost>

A continuación tenemos que modificar el wp-config.php para decirle el WP_SITEURL y el WP_HOME que variará si se accede desde nuestro ordenador o desde un móvil o tablet.

// Hay que ver si la IP desde la que accedemos es del rango de nuestra red que normalmente suele ser 192.168.1.x
if(preg_match('#^192\.168\.1\.\d+#', $_SERVER['HTTP_HOST'])) {
  define('WP_HOME', 'http://'.$_SERVER['HTTP_HOST'].'/');
  define('WP_SITEURL', 'http://'.$_SERVER['HTTP_HOST'].'/');
}

Y ya por último nos creamos un plugin que sustituirá toda referencia a la URL de local por la correspondiente que se encuentre en el contenido de los posts y que activaremos cuando trabajemos en local, o bien lo metemos en el functions.php, pero esto sería guarrear el código:

if(preg_match('#^192\.168\.1\.\d+#', $_SERVER['REMOTE_ADDR'])) {
  function replace_domain($buffer) {
    // modify buffer here, and then return the updated code
    return str_replace('http://localhost/', 'http://'.$_SERVER['HTTP_HOST'].'/', $buffer);
  }
  
  function buffer_start() { ob_start("replace_domain"); }
  
  function buffer_end() { ob_end_flush(); }
  
  add_action('wp', 'buffer_start');
  add_action('wp_footer', 'buffer_end');
}
Share Button

Consejos para quitar malware de WordPress

No es la primera vez que me toca buscar malware en algún WordPress, y la verdad, suele ser un dolor de cabeza. Básicamente usan dos funciones: eval y base64_decode. Con eval nos meterán el código malicioso, que estará codificado en base64 para evitar que lo encontremos fácilmente.

Si tenéis acceso al SSH del servidor, una llamada a find . -name '*.php' -exec grep -l 'base64' {} \; suele bastar para encontrar este tipo de llamadas, o buscar eval en vez de base64.

Desgraciadamente esto no siempre funciona, ya que la función eval puede estar codificada de la siguiente forma:

$foo = "b"."a"."s"."e"...;
$code = 'ev'.'al($a);';$s = create_function('$a',$code);

Otro punto a tener en cuenta es la posibilidad de que hayan modificado el código de nuestro WordPress, lo cual se puede solucionar reinstalando el WP desde el admin. Aunque también pueden haber modificado el wp-config.php e incluir un fichero php que aparenta ser de WP (normalmente metindo en la carpeta wp-includes) pero que no lo es. Por lo cual es recomendado comprobar el wp-config.php con cualquier versión en local.

A parte de todo esto, es importante el tema de los permisos de los ficheros, etc…

Actualización 29/05/2015: también es aconsejable buscar esta cadena \142\x61\163\145\66\x34\x5f\144\x65\143\x6f\144\145, ya que al hacer un echo nos devuelve la función base64_decode.

Actualización 02/07/2015: buscar también la cadena \x65\x76\x61\x6c, ya que devuelve la función eval.

Share Button

Como modificar las URLs de la BD de WordPress al exportar

Cuando se exporta la versión de desarrollo de WordPress a otro dominio, nos encontramos con el problema de las URLs. WordPress permite modificar las URLs fácilmente desde el wp-config mediante WP_HOME y WP_SITEURL. Desgraciadamente, WP puede estar lleno de URLs en la BD como en wp_options, o directamente en posts, …

Para solucionar esto existe un script que realizar esta tarea por nosotros directamente sobre la BD.

Database Search and Replace Script in PHP

Vía / WP Beaches

Share Button

Añadir taxonomías en la creación del menú

Cuando creamos un custom post type e incluimos sus propias taxonomias, solemos necesitar añadir en el menú enlaces a diferentes taxonomías. Hay plugins que te añaden esa opción, pero realmente es tan sencillo como añadir este código a tu functions.php.

  function add_menu_atributos_box() {
    $screen = get_current_screen();
    if ($screen->base == 'nav-menus') {
      $taxs = array('taxonomia1'=>'Nombre taxonomía 1', 'taxonomia2'=>'Nombre taxonomía 2');
      foreach($taxs as $t=>$titulo) {
        $tax = get_taxonomy($t);
          add_meta_box( "add-$t", $titulo, 'wp_nav_menu_item_taxonomy_meta_box', 'nav-menus', 'side', 'default', $tax );
      }
    }
  }
  add_action('admin_head', 'add_menu_atributos_box');
Share Button

Modificar la ventana de información de Google Maps

infowindow

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: '<div class="infowindow" id="infowindow_'+i+'">'+mapa.destinos[i].thumb+'<h3><a href="'+mapa.destinos[i].permalink+'">'+mapa.destinos[i].name+'</a></h3></div>'
  });
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('<img src="'+mapa.close+'" />');
  });
});
Share Button

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' );
Share Button

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 <contacto@midominio.com>
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.

Share Button

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;
}
Share Button