Traduce tu plugin para Gutenberg

Traducir los plugins desde WordPress es bastante fácil, tan solo tienes que ejecutar este comando para generar los ficheros .pot.

wp i18n make-pot .

Una vez generados los ficheros de traducción, yo uso PoEdit, el siguiente paso es generar los ficheros JSON, ya que Gutenberg es lo que usa.

Para ello utilizaremos la herramienta po2json, que podrás instalar ejecutando:

npm i -g po2json

Cuando se haya instalado tendremos que generar el fichero json ejecutando desde el directorio donde están los ficheros de traducción:

po2json mi-plugin-es_ES.po mi-plugin-es_ES-mi-plugin-handler.json -f jed

Ahora viene la parte más complicada, y digo complicada porque sinceramente he tenido que mirar el código porque algo me fallaba cuando seguía lo que decía la documentación.

El nombre del fichero JSON tiene el siguiente formato [dominio de traducción]-[idioma]-[handler del fichero].json, total nada.

  • Dominio será el que usemos para traducir, en el ejemplo sería mi-plugin:
__( 'Hola que tal', 'mi-plugin' );
  • Idioma es el código del idioma, en este caso es_ES
  • Y por último el handler del fichero es el primer parámetro que usamos en wp_enqueue_script

Lo podemos ver todo en un ejemplo final:

wp_enqueue_script(
	'mi-plugin-handler', // El handler mencionado anteriormente
	$blocks_script, // Nuestro path
	[
		'wp-i18n', // De referenciar al menos a wp-i18n
	],
);

wp_set_script_translations( 'mi-plugin-handler, 'mi-plugin', plugin_dir_path( __FILE__ ) . 'languages' );

Snippets Block en WordPress.org

Snippets Block en WordPress.org

El otro día comentaba que estaba haciendo un plugin para WordPress que permitiera añadir snippets como bloques en Gutenber.

Por fin el otro día aprobaron el plugin en el directorio de WordPress.org, así que ya sabéis, si os viene bien, podéis instalarlo en vuestras webs.

Por cierto, echad un ojo al script que venía incluído dentro del boilerplate que usé. Está genial para poder subir al SVN de WordPress.org los cambios realizados en GitHub. Etiqueta versiones, sube a WP.org, …

Snippets Blocks en WordPress.org

Gutenberg Snippet block

Últimamente estoy trabajando bastante con Gutenberg, tiene sus cosas buenas y malas. Sea como sea, es el futuro de WordPress, así que toca aprender.

Lo más interesante de todo es poder usar lo que sabía de webpack, React, HMR, … Y para practicar he hecho un plugin que permite añadir snippets de código en los posts usando los bloques de Gutenberg

Para ello uso la librería highlight.js que permite destacar código de forma sencilla. Aquí un ejemplo

//  Import CSS.
import './scss/style.scss';
import './scss/editor.scss';
import icon from './icon';
import edit from './edit';
import save from './save';
import attributes from './attributes';

import { __ } from '@wordpress/i18n'; // Import __() from wp.i18n

export const name = 'sentidoweb/snippet';

export const settings = {
	// Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
	title: __( 'Snippets editor', 'sw-snippet' ), // Block title.
	icon: icon,
	category: 'common', // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.
	keywords: [
		__( 'code', 'sw-snippet' ),
		__( 'format', 'sw-snippet' ),
		__( 'snippet', 'sw-snippet' ),
	],

	attributes,
	edit,
	save,
};

Snippet Block en Github

Testear un plugin de WordPress con PHPUnit

Algo que casi nunca hago, pero que debería ser obligatorio, es realizar pruebas unitarias de los plugins que realizo en WordPress. Si normalmente casi no tengo tiempo de realizarlos con detalle, imagínate hacer pruebas unitarias.

Para realizar esas pruebas voy a hacer uso de PHPUnit, el cual no voy a explicar cómo usarlo, pero sí voy a poner el bootstrap.php que uso:

// Cargar WP, la ruta supuestamente está en el directorio wp-content/plugins
define('WP_PATH', dirname(__FILE__).'/../../..');
include(WP_PATH.'/wp-load.php');

/**
 * Loads/activates a plugin
 */
function run_activate_plugin( $plugin ) {
    $current = get_option( 'active_plugins' );
    $plugin = plugin_basename( trim( $plugin ) );

    if ( !in_array( $plugin, $current ) ) {
        $current[] = $plugin;
        sort( $current );
        do_action( 'activate_plugin', trim( $plugin ) );
        update_option( 'active_plugins', $current );
        do_action( 'activate_' . trim( $plugin ) );
        do_action( 'activated_plugin', trim( $plugin) );
    }

    return null;
}
// Activa el plugin si no lo está, que no debería al estar en testing...
run_activate_plugin( 'wordpress-nonce-object/class-wp-nonce.php' );

Chrome Debug – plugin para WordPress

Cuando estoy desarrollando para PHP siempre hago uso de la consola del navegador, antes de Firebug, pero ahora me he pasado a Firefox Web Console. Este plugin permite debuggear en la consola de Chrome o en la de Firefox (no Firebug).

Su uso es bastante sencillo:

// Normal debug
_debug($var, 'log');

// Info message
_debug($var, 'info');

// Warn message
_debug($var, 'warn');

// Error message
_debug($var, 'error');

// Message in table format
_debug(
  array(
    'idx_1' => 'val_1',
    'idx_2' => 'val_2',
    'idx_3' => 'val_3'
  ), 'table');

// Groups
_debug('New group', 'group');
_debug($var1, 'info');
_debug($var2, 'error');
// ...
_debug('', 'groupEnd');

Puedes bajarte el código directamente desde este ZIP o desde mi cuenta de GitHub

|

Búsquedas geolocalizadas en WordPress

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:

global $wpdb;
$posts = $wpdb->query($wpdb->prepare('call geodist(?, ?, ?)', $lat, $lon, $dis));

Acceder al código en Gist

Modificar el contenido de cualquier widget de WordPress

Modificar el contenido de cualquier widget de WordPress

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 '<div class="col-sm-'.$bootstrap.'">';
      call_user_func_array($wp_registered_widgets[$id]['_callback'], array($args, $widget_args));
      if ($bootstrap) echo '</div>';
    };
  }
}

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

Puedes bajarte el código en mi GitHub

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.