2×1 Madrid WordPress Meetup Junio

Fecha

Miércoles 20 de Junio de 2019 a partir de las 19:00h.

Ponencias

Cómo crear tu primer plugin para WordPress

Crearemos nuestro primer plugin y definiremos un shortcode para que muestre información en nuestra web.

Crearemos otro plugin con nuestras funciones propias para «personalizar» nuestra instalación de WordPress.

Acerca de Oscar Pérez

Más de 30 años con la informática «a cuestas», donde he tocado casi «todos los palos».

Los últimos 4 años trabajando (como autónomo) con WordPress, realizando los desarrollos para el Ayuntamiento del Real Sitio de San Ildefonso (Segovia), donde creé un tema propio y realizo desarrollos de plugins según se van necesitando.

Más información sobre Oscar: http://www.oscarperez.es
@operezgomez

Ya Tengo WordPress.Ahora ¿Dónde lo meto?

¿Hosting, Servidor Dedicado, VPS? Actualmente existen miles de proveedores de servicios de alojamiento, más caros, mas baratos.. ¿cual es el mejor para mi Wordpres? Depende.

La idea es dar algunos consejillos que necesitamos tener en cuenta a la hora de escoger una infraestructura para nuestro Website. Lo barato a veces sale caro. Lo caro, no siempre es lo mejor.

Acerca de Gonzalo Mata

Administrador de sistemas «todo camino». Actualmente se mueve en el mundo del «cloud» gestionando infraestructura y resolviendo incidencias de todo tipo relacionadas con ello.

Más información sobre Gonzalo: www.linkedin.com/in/zalomata
@gmdono

Ejemplos de Código mostrado por Oscar Pérez en su ponencia Cómo crear tu primer plugin para WordPress:

Presentación: Cómo crear tu primer plugin para WordPress

Desarrollos en Gutenberg: Quítate el miedo

Fecha

Miércoles 12 de Junio de 2019 a partir de las 18:30h.

Ponencia

AVISO: Esta charla está enfocada al puro desarrollo por lo que se dará por hecho que ya tienes una base de PHP y JavaScript además de conocer qué es la REST API de WordPress y cómo funciona por dentro.

El nuevo Editor de Bloques (aka Gutenberg), introduce nuevos paradigmas a la hora de programar que puede suponer un salto en dificultad a la hora de afrontar desarrollos. En esta charla hablaremos sobre todas las tecnologías necesarias para empezar a implementar bloques, sidebars o plugins dentro de Gutenberg.

Hablaremos sobre cómo empezar a crear bloques simples en ES5 y ESNext (o ES6), es decir, JavaScript que entienden los navegadores y JavaScript que requiere una transpilación previa.

Una vez asentados todos los nuevos conceptos necesarios, empezaremos a crear bloques, plugins, sidebars y meta boxes para Gutenberg, conoceremos todas las herramientas y APIs que WordPress y Gutenberg tienen para el desarrollo y por qué es tan gratificante crear cosas en el nuevo editor comparado con el anterior.

Acerca de Ignacio Cruz

Web Engineer en Human Made http://humanmade.com. Llevo trasteando WordPress desde hace 7 años y he pasado por empresas tales como OnTheGoSystems (los creadores de WPML) o WPMU DEV, donde aprendí a utilizar WordPress multisitios a fondo para sitios de millones de visitas.

A día de hoy mi carrera se ha escorado un poco hacia el front end y actualmente me dedico a proyectos de React o Gutenberg para grandes medios como The Sun, del cual soy cada vez más defensor.

Presentación

<devs>Desarrollos en Gutenberg: Quítate el miedo </devs>

WordPress.com vs WordPress.org

Fecha

Jueves 16 de Mayo de 2019 a partir de las 18:30h.

Ponencia

WordPress es una plataforma de publicación que facilita la publicación de contenidos en línea a todo el mundo. Existen dos maneras de comenzar a utilizar WordPress:

Alojar tu propio sitio de WordPress requiere de ciertos conocimientos técnicos porque debe instalarse en un servidor web para poder funcionar. Además deberás encargarte de configurarlo y mantenerlo con cierta periodicidad.

En wordpress.com sin embargo, no tienes que descargar software, ni gestionar un servidor web. Sólo tendrás que preocuparte de crear tu contenido.

A la hora de hacer tu web ¿qué debes tener en cuenta para elegir uno u otro? ¿Qué implica cada uno? ¿Cuál es el más adecuado para tí?

En la sesión de hoy veremos en qué consisten ambas opciones y cómo funcionan, de forma que cualquier persona que esté pensando en crear su web en estos momentos pueda resolver todas sus dudas.

Álvaro Gómez

Conocido por su gran habilidad copiando y pegando código, actividad en la que se ha desenvuelto con soltura desde 1997. Tras diez años freelanceando como consultor web y docente especializado en WordPress, actualmente trabaja como Happiness Engineer en Automattic. Se dice que en otra vida fue fotógrafo profesional. Bilbaíno y padre de dos niñas.

Mónica Gastiasoro

Implementadora web especializada en WordPress y formadora de distintas herramientas tecnológicas. Mi favorita es WordPress: la solución que te permite tener cualquier tipo de web y gestionarla como tú quieras.

En clase, enseño cómo funcionan las cosas y qué hacer cuando no funcionan como deben. Aunque en realidad, lo que hago es ayudar a vencer el miedo que da la tecnología cuando no se conoce. Porque creo que cualquier persona puede aprender, aunque no tenga conocimientos técnicos previos.

Puedes encontrarme en AulaTecnologica.com, en eventos relacionados con WordPress o patinando por cualquier sitio donde no haya mucha cuesta xD

Y recordad que vosotros proponéis las Meetups, entra en https://wpmadrid.es/propuestas-meetups/ y vota por las que ya hay o propón el tema que te gustaría tratar.

Presentación

WordPress ORG & COM

2×1. 1ª Meetup de WordPress en Sierra Leona y Seguridad en WordPress y su entorno

Fecha

Jueves 25 de Abril de 2019 a partir de las 18:30h.

Ponencias

Arrancando la primera WordPress meetup en Freetown (Sierra Leona)

El pasado 18 de marzo Ángel organizó el primer Meetup de WordPress en Freetown.

En esta ponencia nos contará la historia y las razones qué le llevaron a hacerlo, qué pasos dio, las dificultades que tuvo, en qué falló, cómo fue la experiencia y mucho más sobre Sierra Leona y su gente.

Angel G Zinsel empezó como SysOp de la BBS de ATARI en 1987 y desde entonces relacionado con la informática, diseño, video digital y creación de contenidos. Creando webs desde 2010. Fundador de WordPress Combo, coorganizador de la WordCamp Madrid 2019.

Amante de África, WordPress y la comunicación oral.

¿WordPress es seguro?¿Y su entorno?

¿Qué sabes acerca de WordPress y la seguridad?

¿Son seguros los sitios con WordPress?

La seguridad en internet es muy importante, un sitio seguro no depende sólo de WordPress, sino de muchos factores a su alrededor y que debes tener en cuenta en tu proyecto web.

Repasaremos conceptos básicos de seguridad y sentido común, muy olvidado en muchos proyectos, pequeños trucos para robustecer tu sitio web con WordPress y unos cuantos consejos para mejorar tu instalación desde el punto de vista de la seguridad tuya y de tus usuarios. ¡No faltes!
La seguridad importa.

Fernando Puente es informático de vocación y de profesión, formador ocasional y beginner de comer y beber.

Con 22 años de experiencia en TI, desde 2006 trabaja en medios de comunicación online y un año después con plataformas WordPress para medios propios y proyectos de terceros.

Especializado en sitios internacionales de alto tráfico y comercio electrónico.

Presentaciones

Los días posteriores a la Meetup, colgaremos las presentaciones en este mismo artículo si es posible.

Y recordad que vosotros proponéis las Meetups, entra en https://wpmadrid.es/propuestas-meetups/ y vota por las que ya hay o propón el tema que te gustaría tratar.

2×1. Cómo gestionar de forma eficiente tu blog y Desarrollar un tema para WordPress, bien desde cero o creando un tema hijo.

Fecha

Jueves 21 de Marzo de 2019 a partir de las 18:45h.

Ponencias

Errores a evitar para ser más productiva y gestionar de forma eficiente el blog de tu marca. (Basado en hechos reales)

Gracia está detrás de COCUNA, una pequeña agencia de marketing digital y consultoría en marca personal y coaching estratégico.

Hace 3 años dejó su profesión y se reinventó para empezar su propio negocio y poder compaginar su trabajo con la crianza de sus 2 hijas.

Ha cometido muchos errores de los que ha obtenido valiosa información, ha superado algunos retos y olvidado otros y ha crecido poquito a poco, no sin esfuerzo, hasta conseguir un negocio viable.

En su ponencia repasará algunos de los errores más comunes que cometemos los emprendedores en relación a la gestión del tiempo.

Dará algunas ideas para ser más productivo/a y gestionar de forma más eficiente algunas áreas de tu negocio.

Compartirá algunas herramientas que ayudarán a organizar tu agenda, tu correo y el blog de tu marca.

Cómo desarrollar un tema para WordPress, bien desde cero o bien creando un tema hijo

Natalia cuenta con más de 12 años de experiencia conjunta en WordPress, desde el “pero esto es solo para blogs” al “vale para todo”.

Lo mismo te pone un hook que te deja un action.

Nonce, WPDB, el Loop como forma de vida y tirando de la API si hace falta.

En su ponencia, Nati hará un recorrido por los elementos necesarios e imprescindibles para crear nuestro propio Theme para WordPress y de la importancia de crear un Child Theme y como hacerlo.

Pero tranquilos, que no va a ser una ponencia muy técnica, así que si os apetece dar ese «paso adelante» no os la perdáis.

Presentaciones

Como siempre, los días posteriores a la Meetup, colgaremos las presentaciones en este mismo artículo

Y recordad que vosotros proponéis las Meetups, entra en https://wpmadrid.es/propuestas-meetups/ y vota por las que ya hay o propón el tema que te gustaría tratar.

2×1. SEO y WordPress

Apúntante

Última Meetup de 2018, como siempre en el Auditorio de Google for Startups Campus  para aprender de una forma «definitiva» cómo configurar y optimizar el SEO de nuestro WordPress, gracias a Jose B. Moreno y Fernando Tellado.

Fecha

Jueves 22 de Noviembre de 2018 a partir de las 18:30h.

Ponencias

SEO no es sólo herramientas. Aprovecha las oportunidades.

WordPress es una magnífica herramienta, muy amigable para buscadores y fácilmente mejorable…pero en el SEO no sólo es la herramienta, es un tema de aprovechamiento de oportunidades y de sentido común.

Los 5 principios del SEO WordPress para blogueros y webmasters

En esta ponencia veremos los principios que todo escritor, bloguero y webmaster debe tener en cuenta a la hora de posicionar contenidos de manera natural usando WordPress, sus características y algún truco.

Presentaciones

Como siempre, los días posteriores a la Meetup, colgaremos las presentaciones en este mismo artículo

Y recordad que vosotros proponéis las Meetups, entra en https://wpmadrid.es/propuestas-meetups/ y vota por las que ya hay o propón el tema que te gustaría tratar.

2×1 UX e Ingresos recurrentes en WordPress

Apúntante

Volvemos al que viene siendo nuestro Venue habitual, el Auditorio de Campus Madrid para aprender de dos monstruos del  UX y desarrollo en WordPress.

Fecha

Jueves 25 de Octubre de 2018 a partir de las 18:30h.

Ponencias

UX (o cómo aceptar que no somos el centro del universo).

¿Has tenido alguna vez la sensación de que has creado la página que te gustaría pero no la que tus visitantes necesitan? ¿Te has planteado por qué muchos usuarios se van a los segundos de haber llegado a tu site? ¿Te preguntas cómo saber qué es lo que realmente pasa por la cabeza de la gente que usa tu web? ¿Te suena de algo eso de la accesibilidad pero piensas que sólo vale para hacer sitios feos y monótonos?

Ingresos recurrentes en WordPress, el ingrediente esencial para un Cóctel Freelance perfecto!

Un sistema de pagos recurrentes se utiliza para hacer cobros automáticos bajo un periodo determinado a los clientes que hayan contratado un servicio o comprado un producto de suscripción (semanal, mensual, trimestral, etc). En la práctica es aplicable a multitud de modelos de negocio: sitios de membresía, productos de discovery marketing (“cajas sorpresa o Boxes”), suscripciones a productos o servicios…

Presentaciones

WP y UX (Cómo aceptar que no somos el centro del universo) (Lambiris)

Ingresos Recurrentes (Jaime Garmar)

Y recordad que vosotros proponéis las Meetups, entra en https://wpmadrid.es/propuestas-meetups/ y vota por las que ya hay o propón el tema que te gustaría tratar.

2×1 Criterios para empezar tu podcast y Cómo montar tu academia online con WP

Apúntante

¿Has disfrutado de las vacaciones? Pues prepárate porque en Septiembre arrancamos el trimestre con fuerza y estrenado ubicación: El Meetup Space de Campus Madrid.

Fecha

Jueves 27 de Septiembre de 2018 a partir de las 18:30h.

Ponencias

Criterios para empezar tu podcast con WordPress

En esta charla veremos qué criterios debemos seguir para empezar con perspectiva de futuro nuestro podcast en WordPress citando experiencias reales de los aciertos y errores.

Cómo montar tu academia online con WordPress

La educación online está a la orden del día: Cursos de formación, reciclaje, temáticos, nicho, sectoriales, reglados y no reglados, pero todos ellos con algo en común: Virtuales. Vamos a ver teoría y práctica de cómo montar una academia online usando WordPress como plataforma . ¡A por ello!

Presentaciones

Criterios para empezar tu podcast en WordPress (Santiago Jiménez)

Cómo montar tu academia online con WordPress (Joan Boluda)

Y recordad que vosotros proponéis las Meetups, entrad en https://wpmadrid.es/propuestas-meetups/ y votad por las que ya hay o proponed los temas que os gustaría tratar.

Aprovechando Slack para tus Notificaciones de WordPress

En el meetup hemos visto como aprovechar la funcionalidad de WebHooks de Slack para realizar llamadas desde WordPress y enviar mensajes a Slack. Con esta funcionalidad podemos evitar el uso de correos electrónicos, ademas tener las notificaciones en Slack en tiempo real y vía Push en nuestros teléfonos con su aplicación Movil.

Son muchas las ventajas que podemos obtener de ellos, ademas de hacer una sobre escritura de las funciones de WordPress que envían correos electrónicos aprovechando la carga previa de los plugins de WordPress también encontramos que podemos enviar mensajes desde diferentes aplicaciones e incluso desde el servidor con cUrl

He preparado dos ShellScripts que permiten monitorizar la carga del servidor y realizar un backup de base de datos con push via git del repositorio con aviso a Slack una vez completado. Queda de parte de nuestra imaginación todo lo que podemos programar y construir con Slack.

Slack & WP

WooCommerce desde otro punto de vista

A continuación dejo los datos del Meetup en el que dí la charla el día 02-03-2017. Muchas gracias a todos los asistentes.

Y en especial muchas gracias a SiteGround por dejarnos el espacio y prepararnos las cervezas para después 😉

==============================================

Charla: WooCommerce desde otro punto de vista

Más allá de la instalación y configuración de WooCommerce, veremos aspectos buenos y no tan buenos de la herramienta número uno en ecommerce para WordPress: WooCommerce.

Aspectos que influyen a todo el equipo que trabaja con esta herramienta, desde el equipo técnico, pasando por los usuarios backoffice, hasta el usuario final; trucos, seguridad, mejoras, puntos débiles, plantillas, extensiones, plugins, … .

En resumen, WooCommerce desde otro punto de vista, el que no suele venir en los primeros resultados de Google.

Pablo Poveda Ortega

Trabajando en proyectos web desde 2009. Ingeniero informático por la Universidad de Alicante, programando en tecnología LAMP desde 2009 y en el último año y medio en stack MEAN.

He trabajado para grandes y pequeñas cuentas, en proyectos de cualquier índole. Muchos de los proyectos en los que he trabajado ha sido sobre WordPress, en especial, los últimos dos años, gestionando una red de WordPress de más de 150 proyectos web con WooCommerce, en los que he podido obtener mucha experiencia.

Diapositivas de la charla

 

Vídeo: https://www.facebook.com/fernando.puente/videos/vb.1307718135/10212369679779580/?type=3&theater

Mostrar campos personalizados ACF en front sin modificar las plantillas

Muchas veces nos hemos encontrado con el gran problema que nos plantean muchos clientes: quieren que al cambiar la plantilla, no cambie el site. Y muchos diseñadores también se encuentran con el problema de que no tienen conocimientos suficientes de PHP como para poder hacer un sencillo listado de Custom Fields en una página o una ficha concreta de un campo personalizado. En la charla que dimos el 16 de febrero dábamos un solución muy sencilla a este tipo de cuestiones.

Como la charla fue una demo in situ de cómo crear un tipo personalizado e insertarlo en una página estática, he escrito un artículo extenso con capturas de pantalla incluidas en el que se explica cómo, con los plugins ACF, ACF Custom Type y Custom Content Shortcode podemos conseguir con muy poco esfuerzo sacar un listado de libros en este caso, incluyendo un campo fecha. Básicamente se trata de aprender a usar los shortcodes que nos brinda Custom Content Shortcode para poder mostrar en entradas y páginas estáticas la información recogida en ACF. Más información en este enlace

Creación de shortcodes para que los use «el Cliente»

Hace unas semanas me liaron para dar una charla así que elegí un tema con el que me había estado peleando unos días antes: Creación de shortcodes para que lo use “El Cliente”.

Lo primero es lo primero, ¿qué son los shortcodes?

Básicamente son «llamadores» de funciones que se utilizan en el contenido de nuestras páginas y entradas. Para eso utilizamos los corchetes como indicadores de que lo que hay dentro es un shortcode:  [soyunshortcode]

Hay varios tipos de shortcodes: simples, con atributos y con contenido.

La creación será básicamente lo mismo (con pequeñas diferencias) en nuestro functions.php mediante la función add_shortcode. Con esta función lo que vamos a hacer va ser definir el nombre del shortcode (lo que irá entre los corchetes) y la función que WP ejecutará cuando se lo encuentre.

En el caso de un shortcode simple, nuestra función no necesitará de ningún parámetro de entrada, y lo que nos devuelva será lo que se «pintará» en nuestra entrada. Mientras que si queremos añadir parámetros, tendremos que especificarlos como atributos de nuestro shrotcode. En nuestro caso, nuestros shortcodes serán [elshortcode] y [conatributos] respectivamente:

add_shortcode('elshortcode', 'elshortcode_shortcode_function');

function elshortcode_shortcode_function() {
   $salida = '<div style="background: red;">Hola que tal…</div>';

   return $salida;
}
add_shortcode('constaributos', 'conatributos_shortcode_function');

function conatributos_shortcode_function($atts, $content = null) {
   extract( shortcode_atts(array('titulo' => '',), $atts ));

   $salida = '<div>';
   if($titulo)
      $salida .= '<h2>'.$titulo.'</h2>';

   $salida .= $content.'</div>';

   return $salida;
}

La función shortcode_atts() es similar a array_merge(): fusiona la segunda lista de argumentos en la primera. La diferencia es que se fusiona sólo las claves presentes en el primer argumento. Extract () toma las claves del array, las define como nombres de variables y sus valores como valores de variable.

Los shortcodes con contenido tienen “cierre” como en las etiquetas HTML
Si queremos que el contenido ejecute posibles shortcodes, lo hacemos con la función do_shortcode($content). En este caso sería de la siguiente forma:

[concontenido]Mi contenido dentro del shortcode[/concontenido]

add_shortcode('concontenido', 'concontenido_shortcode_function');

function concontenido_shortcode_function($atts, $content = null) {
   extract( shortcode_atts(array('titulo' => '',), $atts ));

   $salida = '<div>';
   if($titulo)
      $salida .= '<h2>'.$titulo.'</h2>';

   $salida .= do_shortcode($content).'</div>';

   return $salida;
}

Ahora que ya sabemos lo que son, y como crear los shortcodes, vamos a ver un poquito en profundidad el editor TinyMCE de WordPress, que es el editor WYSIWYG (What you see is what you get) que viene por defecto.

El editor TinyMCE es un plugin que puede usarse fuera de WordPress, que tenemos integrado en el framework. Gracias a este plugin, podemos poner negritas, cambiar alineaciones, etc.

Por defecto, se han eliminado algunos botones del editor.
Si queremos que aparezcan en la primera línea, utilizamos el filtro mce_buttons o ponemos añadir una tercera línea con mce_buttons_3. El máximo de líneas para el TinyMCE en WordPress es de 4
Para el orden podemos utilizar array_unshift, para añadirlos al inicio, array_push para ponerlos al final o incluso usar array_splice.

En nuestro ejemplo vamos a añadir los botones en la segunda línea:

add_filter('mce_buttons_2', 'botones_extra_editor');

function botones_extra_editor( $buttons ) {
   array_unshift( $buttons, 'styleselect' );
   array_unshift( $buttons, 'fontsizeselect' );
   array_push($buttons, 'fontselect');

   return $buttons;
}

Otros botones que se podrían añadir: backcolor, newdocument, charmap, hr, etc… Se puede encontrar más información en la documentación de TinyMCE.

Si quisiéramos eliminar botones utilizaríamos el mismo filtro pero hacemos unset($buttons[3]), siendo3 la posición en la que aparece el botón en el editor que queremos eliminar.

Además de los botones, también podemos añadir estilos personalizados a nuestro editor, como se explica en el Codex. Sería algo así:

add_filter('tiny_mce_before_init', 'mi_mce_mod');

function mi_mce_mod( $init ) {

   $style_formats = array (
     array( 'title' => __('H1 Page Title', 'understrap'), 'block' => 'h1', 'classes' => 'page-title' ),
     array( 'title' => __('Color button', 'understrap'), 'inline' => 'a', 'classes' => 'colorbutton' ),
   );

   $init['style_formats'] = json_encode( $style_formats );

   $init['style_formats_merge'] = true;

   return $init;

}

Le añadimos una función callback a la inicialización del editor.
La opción block, sustituye los bloques del elemento seleccionado mientras que inline, lo añade. Las classes se ponen separadas por comas.

Si ponemos $init[‘style_formats_merge’] a false sólo mostrará los estilos que hemos añadido aquí.

Y después de esta introducción, ya podemos meterno de lleno en la creación de nuestros botones personalizados para el TinyMCE, para ello usamos el hook admin_head y la función par ello sería:

add_action('admin_head', 'mis_botones');

function mis_botones() {
   if ( !current_user_can( 'edit_posts' ) && !current_user_can( 'edit_pages' ) ) {
     return;
   }

   if ( get_user_option( 'rich_editing' ) !== 'true' ) {
     return;
   }

   add_filter( 'mce_external_plugins', 'nuevos_botones' );
   add_filter( 'mce_buttons', 'registrar_botones' );
}

En esta función lo que hacemos es comprobar los permisos del usuario y la configuración. Si se cumplen las condiciones, añadimos los dos filtros:

function nuevos_botones( $plugin_array ) {
   $plugin_array['miboton'] = get_template_directory_uri().'/js/tinymce_buttons.js';
   $plugin_array['miboton2'] = get_template_directory_uri().'/js/tinymce_buttons.js';
   return $plugin_array;
}

function registrar_botones( $buttons ) {
   array_push( $buttons, 'miboton', 'miboton2');
   return $buttons;
}

El primero de los filtros lo utilizamos para especificar la localización del script con nuestro plugin, mientras que el segundo se utiliza para añadir nuestro botón al editor.

El código para crear y definir las acciones de nuestros botones se encuentra en archivo tinymce_buttons.js así que vamos a ver cómo se crearía un botón sencillo:

(function() {
   tinymce.PluginManager.add('miboton', function( editor, url ) {
     editor.addButton( 'miboton', {
       text: 'Mi botón',
       icon: false,
       onclick: function() {
         editor.insertContent('Qué pasa tronquitos!!');
       }
     });
   });
})();

En este caso, lo que mostrará el editor será un botón con una etiqueta de texto, definido en la propiedad «text». Si lo que queremos es mostrar un icono, sustituimos «text» por «title» y a «icon» le damos el valor que queramos para nuestro icono, que en este caso serán los dashicons de WP. Así si le damos el valor «wp_code» nuestro botón se verá así:  

El texto que hemos definido en «title» aparecerá como tooltip del botón. También podemos empezar a trabajar con los shortcodes, básicamente añadiéndolo al texto que insertamos como contenido.

(function() {
   tinymce.PluginManager.add('miboton', function( editor, url ) {
     editor.addButton( 'miboton', {
       title: 'Mi botón',
       icon:"wp_code",
       onclick: function() {
         editor.insertContent('[elshortcode]');
       }
     });
   });
})();

Hay otras formas de customizar el icono de nuestro botón, podemos utilizar el atributo image o añadirle otras clases (que es el valor de «icon»). Así, si le añadimos el valor «icon mi-icono» y cargamos nuestros estilos en la parte de administración podríamos personalizarlo totalmente:

add_action('admin_enqueue_scripts', 'extra_mce_css');

function extra_mce_css() {

   wp_enqueue_style('extra_mce', get_template_directory_uri().'/css/mimce.css');

}

Y en nuestro CSS le damos los estilos necesarios al botón:

i.mce-i-icon {

    font: 400 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.mi-icono {

    background-image: url('mi-icono-customizado.png');

}

Ahora bien, para poder utilizar nuestros botones y nuestros shortcodes de la forma más óptima vamos a crear un popup de opciones para que el usuario pueda añadirle todos los valores necesarios a nuestro shortcode sin tener que escribirlos, simplemente dándole valores a las opciones que se le muestren en el popup.

(function() {
  tinymce.PluginManager.add('miboton2', function( editor, url ) {
    editor.addButton( 'miboton2', {
      title: 'Mi botón 2',
      icon: 'bubble',
      onclick: function() {
        editor.windowManager.open( {
          title: 'Título del shortcode',
          body: [{
            type: 'textbox',
            name: 'titulo',
            label: 'Atributo titulo'
          }],
          onsubmit: function( e ) {
            editor.insertContent( '[conatributo titulo="' +e.data.titulo+ '"]');
          }
        });
      }
    });
  });
})();

Este código nos mostraría un popup sencillo con un único campo de texto, que se corresponde con uno de los tributos del shortcode y que el usuario rellenará. Así, si tenemos shortcodes mucho más complejos, especificar el valor de estos atributos se realiza de forma rápida y sencilla para el usuario.

minipopup

A continuación os muestro lo que sería un botón más complicado, con muchas más opciones en el popup y la posibilidad de añadir el contenido seleccionado.

(function() {

  tinymce.PluginManager.add('miboton', function( editor, url ) {

    editor.addButton( 'miboton', {

      title: 'Shortcode con atributos',

      icon: 'icon mi-icono-customizado',

      onclick: function (){

            var win = editor.windowManager.open( {

              title: 'Opciones del shortcode',

              body: [

                {

                  type: 'textbox',

                  name: 'imagen',

                  label: 'Imagen',

                  value: '',

                  classes: 'imgblock_input_image',

                },

                {

                  type: 'button',

                  name: 'imgblock_upload_button',

                  label: '',

                  text: 'Subir imagen',

                  classes: 'imgblock_upload_button',

                },

                {

                  type: 'textbox',

                  name: 'multilinea',

                  label: 'Pseudo textarea',

                  value: 'Aquí puedes poner un montón de texto',

                  multiline: true,

                  minWidth: 300,

                  minHeight: 100

                },

                {

                  type: 'colorpicker',

                  label: "Color de fondo",

                  name: "bgcolorpicker",                                   

                  onchange: function(e) {                  

                    win.find('#fondo').value(this._color.toHex());                                      

                  }

                },

                {

                  type: 'textbox',                   

                  name: 'fondo',

                  label: ' ',                  

                  size: 6,

                  maxLength: 6,

                  tooltip: 'Color de fondo en Hexadecimal',

                },

                {

                  type   : 'checkbox',

                  name   : 'miniatura',

                  label  : 'Usar miniatura de la imagen',

                  text   : 'Miniatura',

                  checked : false

                },                

                {

                  type: 'listbox',

                  name: 'posicion',

                  label: 'Posicion de la imagen',

                  'values': [

                    {text: 'Izquierda', value: 'left'},

                    {text: 'Centrada', value: 'center'},

                    {text: 'Derecha', value: 'right'},                    

                  ],

                  value : 'left'

                }

              ],

              onsubmit: function( e ) {                

                var selectedText = tinymce.activeEditor.selection.getContent({format : "html"});

                editor.insertContent( '[imgblock imagen=' + e.data.imagen + ' miniatura="' + e.data.miniatura + '"  posicion="' + e.data.posicion + '" fondo="'+e.data.fondo+'"]'+selectedText+'[/imgblock]');

              }

            });

          }

    });

  });

})();

En el código anterior lo que hemos hecho ha sido añadir muchas más opciones a nuestro popup, de las cuales hay dos que merecen especial consideración ya que requieren un pequeño trabajo extra para que funcionen según nuestras necesidades.

popup

Para el caso de la imagen, lo que hemos hecho ha sido utilizar dos elementos propios del TinyMCE, el textbox llamado «imagen» y el button «imgblock_upload_button». Por si solos estos dos elementos no nos proporcionarán la posibilidad de utilizar el uploader propio de WordPress, para ello vamos a añadir un poco más de código javascript con lo que podremos obtener, bien la URL de la imagen o bien su ID (según nuestras necesidades):

jQuery(document).ready(function($){

  $(document).on('click', '.mce-imgblock_upload_button', upload_image_tinymce);

  function upload_image_tinymce(e) {

    e.preventDefault();

    var $input_field = $('.mce-imgblock_input_image');

    var custom_uploader =  wp.media({

      title: 'Añadir Imagen',

      button: {

          text: 'Añadir Imagen'

      },

      multiple: false

    });

    custom_uploader.on('select', function() {

      var attachment = custom_uploader.state().get('selection').first().toJSON();

      $input_field.val(attachment.id);

    });

    custom_uploader.open();

  }

});

Con el javascript que hemos añadido lo que hacemos es invocar al uploader propio de WP al hacer click en el botón de subir imagen, una vez seleccionada la imagen lo que le devolveremos a nuestro campo de texto será el id de la imagen subida.

El otro caso es nuestro colorpicker, TinyMCE nos proporciona un colorpicker totalmente funcional para que el usuario pueda seleccionar un color, pero en ningún momento puede ver de qué color se trata, o tiene opción de introducir ese dato manualmente. Por eso en este caso también utilizamos dos campos para realizar el trabajo: «bgcolorpicker» para seleccionar el color y «fondo», el campo de texto en el que lo mostraremos y podremos modificar. En este caso vamos a utilizar un poco de código extra, ya que al asignarle todo el popup a una variable (win) podremos ver qué valor se ha seleccionado en el colorpicker mediante un evento onchange asociado al mismo. Luego lo único que hacemos es pasar ese valor a Hexadecimal y lo añadimos al campo de texto para que el usuario pueda verlo.

Para poder añadir el texto que se había seleccionado al hacer click en el botón, y poder añadir un shortcode que además de atributos utiliza el contenido hemos utilizado el método de TinyMCE:

tinymce.activeEditor.selection.getContent({format : "text"});

Si en lugar de format html utilizamos «text» obtendríamos el texto plano.

Como veis hay muchísimas opciones para elegir a la hora de darle a nuestros usuarios la posibilidad de seleccionar valores para los atributos de nuestros shortcodes, con un poco de investigación en la documentación de TinyMCE y algo de ayuda extra (sobre todo para esos «truquitos») podemos presentarle al usuario final un montón de posibilidades a la hora de añadir contenido.