Share
Lo más probable es que sepa que WordPress está incluido con el editor HTML WYSIWYG, TinyMCE. La variedad de características, y la capacidad de extenderse a través de complementos, lo convierten en el editor WYSIWYG más utilizado del mundo. WordPress no hace uso de todas sus características, sin embargo. WordPress lo personaliza y solo conserva las partes que son realmente útiles para los usuarios, evitando alterar la interfaz del usuario. Eso también significa que algunas funciones, como los botones, se han ocultado a los usuarios. Puede habilitar totalmente los botones ocultos de MCE. Tipicamente son hoja de estilo, sub, cenar botones. Si incluso los ocultos aún no satisfacen sus necesidades, debe crear un complemento TinyMCE para agregar el suyo. En este tutorial, lo guiaré a través de los conceptos básicos para agregar los botones de WordPress Editor al crear un complemento TinyMCE.
Como se mencionó anteriormente, crearemos un nuevo complemento de TinyMCE cuya tarea es agregar los nuevos botones que deseamos. Entonces, ¿qué botones vamos a agregar? Intentaremos agregar dos botones simples: Dropcap y Mensajes recientes, en el que el primero te da la posibilidad de convertir una letra seleccionada en una letra mayúscula, y el segundo mostrará publicaciones recientes. El código genera estos botones que se muestran a continuación..
Vamos a crear una nueva carpeta llamada wptuts-editor-buttons (por supuesto, puedes cambiarlo a otra cosa si lo deseas) en tu directorio de temas (estoy usando TwentyTwelve). Continuar creando dos nuevos archivos., wptuts.php que invoca PHP personalizado, y el otro denominado wptuts-plugin.js donde se ubicarán los fragmentos de código JavaScript. Finalmente, abre tus temas funciones.php archivo e incluir el recién creado wptuts.php archivo en el mismo. Tenga en cuenta, recuerde que debe definir su ruta exactamente:
Accentsconagua
require ('wptuts-editor-buttons / wptuts.php'); Entonces necesitamos preparar un código para esos dos botones:
/ * Agrega este código en style.css * / .dropcap float: left; tamaño de fuente: 80px; derecho de relleno: 7px; línea de altura: 72px;
add_shortcode ('posts recientes', 'wptuts_recent_posts'); función wptuts_recent_posts ($ atts) extract (shortcode_atts (array ('numbers' => '5',), $ atts)); $ rposts = new WP_Query (array ('posts_per_page' => $ números, 'orderby' => 'fecha')); if ($ rposts-> have_posts ()) $ html = 'Mensajes recientes
Suponemos que cuando los usuarios hacen clic en el Mensajes recientes botón, el navegador abrirá un cuadro de diálogo que les pedirá la cantidad de publicaciones que quieren mostrar. Después de tener ese número, el editor lo llenará como un argumento en el código abreviado anterior. Por ejemplo, si queremos mostrar siete publicaciones recientes, el código abreviado se genera de la siguiente manera:
[Números de mensajes recientes = "7" /]
Suponiendo que ya teníamos el nuevo complemento, entonces debemos registrarlo con WordPress para integrarlo en el editor TinyMCE. El código se muestra a continuación:
add_action ('init', 'wptuts_buttons'); función wptuts_buttons () add_filter ("mce_external_plugins", "wptuts_add_buttons"); add_filter ('mce_buttons', 'wptuts_register_buttons'); función wptuts_add_buttons ($ plugin_array) $ plugin_array ['wptuts'] = get_template_directory_uri (). '/wptuts-editor-buttons/wptuts-plugin.js'; devuelve $ plugin_array; función wptuts_register_buttons ($ buttons) array_push ($ buttons, 'dropcap', 'showrecent'); // dropcap ',' recentposts return $ buttons; El importante gancho de filtro. mce_external_plugins Se utiliza para conectar el nuevo complemento a TinyMCE. Necesitamos pasar un ID de plugin (Wptuts) y la URL absoluta que apunta a nuestra wptuts-plugin.js expediente. los mce_buttons hook se utiliza para indicar al editor TinyMCE qué botones de nuestro complemento queremos mostrar. los dropcap y showrecent son los valores de ID de estos botones que planeamos crear. Ten en cuenta estos valores, serán utilizados más adelante..
En general, creo que la mejor manera de ampliar o desarrollar algo en una plataforma es consultar la documentación de esa plataforma. TinyMCE tiene su propio wiki que puede ser útil. Siguiendo un ejemplo de cómo crear un complemento TinyMCE, tenemos el siguiente código de inicialización:
(function () tinymce.create ('tinymce.plugins.Wptuts', / ** * Inicializa el complemento, esto se ejecutará después de que se haya creado el complemento. * Esta llamada se realiza antes de que la instancia del editor haya finalizado su inicialización así que use el evento onInit * de la instancia del editor para interceptar ese evento. * * @param tinymce.Editor ed instancia del editor en la que se inicializa el complemento. * @param string url URL absoluta donde se encuentra el complemento. * / init: function (ed, url) , / ** * Crea instancias de control basadas en el nombre que ingresa. Este método normalmente no es * necesario ya que el método addButton de la clase tinymce.Editor es una forma más fácil de agregar botones * pero a veces necesita crear controles más complejos como cuadros de lista, botones divididos, etc., entonces este método * se puede usar para crearlos. * * @param String n Nombre del control para crear. * @param tinymce.ControlManager cm Control Manager para usar inorder para crear nuevo control. * @return tinymce.ui.Control Nuevo control inst Ance o nulo si no se creó ningún control. * / createControl: function (n, cm) return null; , / ** * Devuelve información sobre el complemento como una matriz de nombre / valor. * Las claves actuales son longname, author, authorurl, infourl y version. * * @return Objeto Arreglo de nombre / valor que contiene información sobre el complemento. * / getInfo: function () return longname: 'Wptuts Buttons', autor: 'Lee', authorurl: 'http://wp.tutsplus.com/author/leepham', infourl: 'http: // wiki. moxiecode.com/index.php/TinyMCE:Plugins/example ', versión: "0.1"; ); // Registrar el complemento tinymce.PluginManager.add ('wptuts', tinymce.plugins.Wptuts); ) (); Recuerde agregar este código en el wptuts-plugin.js expediente. Hemos dejado los comentarios del código para que entiendas fácilmente lo que está pasando. El código anterior solo hace dos tareas principales:
crear método. El comportamiento de nuestro plugin se definirá en la en eso y crearControl funciones Puedes ver que la información del plugin está declarada en el obtener información función también Nuestro plugin tendrá el nombre Wptuts y la identificación Wptuts como puedes ver.En el en eso Función, empezamos a crear nuestros botones. El código visto de la siguiente manera:
(function () tinymce.create ('tinymce.plugins.Wptuts', init: function (ed, url) ed.addButton ('dropcap', title: 'DropCap', cmd: 'dropcap', imagen: url + '/dropcap.jpg'); ed.addButton ('showrecent', title: 'Agregar el código corto de las publicaciones recientes', cmd: 'showrecent', image: url + '/recent.jpg');, // ... Código oculto); // Registrar el complemento tinymce.PluginManager.add ('wptuts', tinymce.plugins.Wptuts);) (); Utilizando el addButton método de la ed objeto, le decimos al editor actual que queremos crear todos estos botones. Este método acepta dos argumentos:
cmd propiedad, tiene el valor de showrecent. Esa es la ID del comando que se ejecuta cada vez que se llama, en breve entraremos en detalleimagenel valor de.Ahora, revisa el editor de WordPress y veremos que nuestros botones aparecen. Sin embargo, no hacen nada en este momento..
Hemos definido el nombre de los comandos que ejecutarán nuestros botones, pero aún no hemos definido qué ejecutarán realmente. En este paso, configuraremos las cosas que harán nuestros botones. Dentro de en eso función, continúe agregando este código como se muestra:
(function () tinymce.create ('tinymce.plugins.Wptuts', init: function (ed, url) ed.addButton ('dropcap', title: 'DropCap', cmd: 'dropcap', imagen: url + '/dropcap.jpg'); ed.addButton ('showrecent', title: 'Agregar el código corto de las publicaciones recientes', cmd: 'showrecent', image: url + '/recent.jpg'); ed. addCommand ('dropcap', function () var selected_text = ed.selection.getContent (); var return_text = "; return_text = ''+ selected_text +''; ed.execCommand ('mceInsertContent', 0, return_text); ); ed.addCommand ('showrecent', function () var number = prompt ("¿Cuántas publicaciones desea mostrar?"), shortcode; if (número! == nulo) number = parseInt (número); if (número > 0 && número <= 20) shortcode = '[recent-post number="' + number + '"/]'; ed.execCommand('mceInsertContent', 0, shortcode); else alert("The number value is invalid. It should be from 0 to 20."); ); , //… Hidden code ); // Register plugin tinymce.PluginManager.add( 'wptuts', tinymce.plugins.Wptuts ); )(); Ahora el ed.addCommand El método nos ayudará a agregar un nuevo comando. Debe pasar el ID del comando y la función de devolución de llamada que se ejecutará si fue llamado por el ed.execCommand método. Tenga en cuenta que ed representa el tinyMCE.activeEditor objeto. Echemos un vistazo a las funciones de devolución de llamada:
dropcap comando, el deseo que queremos es cuando un usuario selecciona una letra y hace clic en el DropCap botón, la letra se transformará en forma de casquillo. Entonces, ¿cómo conseguimos esa carta? Bueno el ed.selection.getContent El método lo hará por nosotros. A continuación, una vez que hayamos recibido esa carta, simplemente la envolvemos dentro de un lapso elemento. Recuerde establecer el valor de clase de este elemento en dropcap que hemos definido antes, ¿verdad? Finalmente, tenemos el texto completo que se debe insertar nuevamente en el editor. TinyMCE tiene un comando predeterminado con el nombre mceInsertContent que se usa para insertar contenido específico en el editor, cómo usarlo se muestra arriba. El contenido será pasado como el tercer argumento de la mceInsertContent método.En lugar de agregar texto puro cuando los botones insertan el contenido en el editor visual, podemos hacerlo mucho más visual al registrar CSS personalizado para nuestros botones. Depende de qué tipo de datos de contenido, y puede elegir un estilo apropiado. Por ejemplo, nuestro DropcapEl estilo de 's puede tener el mismo que el que se muestra en la parte frontal. Así que puedes tomar su código CSS en la parte superior de esta publicación, luego colocarlo en el editor-style.css archivo (por defecto, vea add_editor_style para detais).
Para los códigos cortos, es posible que no tengan un elemento HTML. ¿Cómo debemos estilizarlos? Bueno, esta situación es mucho más compleja para lograr el resultado, aunque no es imposible (puedes ver algunos botones de WordPress predeterminados, como 'Agregar medios'). Sin embargo, aún puede ser complicado, envolviendo ese shortcode en un elemento HTML y luego diseñando ese elemento como se muestra arriba. Es bastante simple, aunque no completamente perfecto. En este post, no nos centraremos en ese complejo procesamiento..
Finalmente, los resultados que obtenemos se muestran a continuación:
Luego, en la parte delantera:
Y el botón de Publicaciones recientes también funciona:
Bien, cubrimos una práctica que es bastante simple y fácil de seguir. Puede observar que el botón Publicaciones recientes le permite ajustar una configuración (la cantidad de publicaciones que se mostrarán). Ciertamente sabes que usamos el JavaScript predeterminado, rápido, para lograr eso. ¿Qué sucede si desea una ventana emergente más compleja, que tiene muchas configuraciones en lugar de una sola? Bueno, en otro post discutiremos esto e intentaremos otro enfoque..
Cualquier comentario sobre esta publicación será apreciado. Gracias por leer y hasta luego..
TinyMCE_Custom_Buttons