Modificar el contenido de cualquier widget de WordPress

widget

No entiendo por qué no hay un filter o un action cuando se trata de los contenidos de los widgets. A no ser que el autor los haya metido, no hay forma de modificar ni el form del widget ni su contenido.

Me he encontrado en la necesidad de tener que indicar en el footer el tamaño de columnas de Bootstrap para cada uno de los widgets de un sidebar, para lo cual es necesario modificar la salida de cada widget e incluir en el form un campo que indique el ancho y en el html del widget el código de Bootstrap para indicar el ancho de la columna:

En el function.php meteremos el siguiente código:

Primero modificaremos los datos del widget para que añada el nuevo campo que vamos a meter (widget_bootstrap_columns), milagrosamente sí hay un filtro para ello:

// Modificamos los datos enviados al guardar el widget
add_filter( 'widget_update_callback', 'sw_widget_update');
function sw_widget_update($instance, $new_instance, $old_instance, $obj ) {
  if (isset($_POST['widget_bootstrap_columns'])) $instance['widget_bootstrap_columns'] = $_POST['widget_bootstrap_columns'];
  return $instance;
}

Después vamos a modificar la variable global $wp_registered_widgets que contiene la llamada a la función widget del widget (la que escribe el HTML). Encapsularemos esta llamada dentro de una función anónima para realizar las tareas que sean necesarias, en mi caso dibujar un div con el class col-sm-N:

// Modifico el display del widget para meterle el código de bootstrap
add_action('dynamic_sidebar_before', 'sw_modify_widgets_display', 10, 2);
function sw_modify_widgets_display($index, $bool) {
  global $wp_registered_widgets;
  $sidebars_widgets = wp_get_sidebars_widgets();
  foreach ( (array) $sidebars_widgets[$index] as $id ) {
    if ( !isset($wp_registered_widgets[$id]) ) continue;
    $wp_registered_widgets[$id]['_callback'] = $wp_registered_widgets[$id]['callback'];
    $wp_registered_widgets[$id]['callback'] = function($args, $widget_args) use ($id) {
      global $wp_registered_widgets;
      // Recuperamos los datos del widget
      $instance = get_option($wp_registered_widgets[$id]['_callback'][0]->option_name);
      $bootstrap = isset($instance[$wp_registered_widgets[$id]['_callback'][0]->number]['widget_bootstrap_columns'])? $instance[$wp_registered_widgets[$id]['_callback'][0]->number]['widget_bootstrap_columns'] : false;
      // Pintamos el tamaño de la columna si así procede
      if ($bootstrap) echo '
'; call_user_func_array($wp_registered_widgets[$id]['_callback'], array($args, $widget_args)); if ($bootstrap) echo '
'; }; } }

Y por último haremos lo mismo para el formulario, modificar la variable global $wp_registered_widget_controls para encapsular la función form del widget y dibujar antes un input donde almacenemos el valor de widget_bootstrap_columns:

// Modifica el form de los widgets
add_action( 'load-widgets.php', 'sw_modificar_widgets_forms' );
function sw_modificar_widgets_forms() {
  global $wp_registered_widget_controls;
  foreach($wp_registered_widget_controls as $id=>$widget) {
    $wp_registered_widget_controls[$id]['_callback'] = $wp_registered_widget_controls[$id]['callback'];
    $wp_registered_widget_controls[$id]['callback'] = function($data) use ($id) {
      global $wp_registered_widget_controls;
      // Recuperamos los datos del widget para incluir el valor de widget_bootstrap_columns
      $instance = get_option($wp_registered_widget_controls[$id]['_callback'][0]->option_name);
      $widget_bootstrap_columns = isset($instance[$data['number']]) && isset($instance[$data['number']]['widget_bootstrap_columns'])? $instance[$data['number']]['widget_bootstrap_columns']:'';
      echo '<div  class="widget_added"><p>Número de columnas (col-sm-<input type="number" name="widget_bootstrap_columns" min="1" max="12" value="'.$widget_bootstrap_columns.'" />)</p><hr /></div>';
      call_user_func_array($wp_registered_widget_controls[$id]['_callback'], array($data));
    };
  }
}

Incrustar un SVG dentro del HTML directamente

Lo bueno de los SVG es que puedes modificarlos mediante CSS directamente en el HTML, el único problema es que el SVG debe estar incrustado en el HTML, no mediante una imagen <img>, ni mediante la propiedad content de CSS.

Encontré un script muy bueno que te modifica una etiqueta img que contiene un SVG por su contenido SVG real. El problema viene cuando yo añado el SVG como una propiedad content:

.class {
  content: url('imagen.svg');
}

Para ello he modificado el script anterior para que coja la propiedad content de los selectores CSS que se indiquen y añada el SVG directamente al elemento:

jQuery(document).ready(function() {
  var replaceWithSVG = function(selector, url) {
    jQuery('').appendTo('head');
    jQuery.get(url, function(data) {
      // Replace image with new SVG
      jQuery(selector).prepend(data.replace(/<\?xml[^>]+>/, ''));
    }, 'text');
  }
  var selectors = ['.site-title a', '.btn-video']
  for(var i in selectors) {
    var selector = selectors[i];
    var url = window.getComputedStyle(
    	document.querySelector(selectors[i]), ':before'
    ).getPropertyValue('content');
    url = url.replace(/url\(["']?([^'"\)]+)["']?\)/, '$1');
    replaceWithSVG(selectors[i], url);
  }
});

Editores visuales para WordPress

Cada vez que tengo que usar un theme y me encuentro con el Visual Composer me dan los siete males. De todas formas, entiendo que si vas a crear contenido con diferentes módulos en cada página, los editores visuales pueden ser una buena solución.

El problema es que el Visual Composer cuesta unos 30$, y sinceramente, si puede ser gratis, mejor que mejor. Aquí paso un listado de los que he encontrado y que más me han gustando:

Esto realmente es un listado para que tenerlo apuntado en algún sitio y luego tirar de él cuando lo necesite.

Revolution Slider y W3 Total Cache

Me he encontrado con un problema con RevSlider y W3 Total Cache, cuando actualizo un slider no se renueva la caché. La verdad es que no me gusta nada RevSlider, y para colmo no hay ningún action que permita añadir funciones extra, por lo que para poder borrar la caché cuando se actualiza un slider, tengo que meter mano a la acción ajax:

add_action( 'wp_ajax_revslider_ajax_action', 'purge_cache', 1);
function purge_cache() {
  // Me aseguro que sea cuando se actualiza el slider
  if (isset($_POST['client_action']) && $_POST['client_action'] == 'update_slide') {
    // Si está instalado el plugin
    if( class_exists('W3_Plugin_TotalCacheAdmin') ) {
        $plugin_totalcacheadmin = & w3_instance('W3_Plugin_TotalCacheAdmin');
        // Borro toda la caché, seguro que hay un método que borra la página específica
        $plugin_totalcacheadmin->flush_all();
    }
  }
}

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.

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] .= ' '.$c.'';
    }
  }
  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.

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');
}

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.

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

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