Share
Una de las razones principales por las que WordPress es la plataforma de CMS más popular disponible es el gran nivel de personalización que ofrece. Hoy, revisaremos el proceso de integración de una de esas características populares, los códigos cortos, de la manera más fácil para el usuario, en nuestro tema.
A pesar de que hay algunos trillones de opciones para elegir, WordPress ha tomado la corona cómodamente como el rey de los CMS y las plataformas de blogs con su increíble flexibilidad. Un shortcode es una de esas características que incrementa la facilidad de uso del sistema..
Sin embargo, la mayoría de las implementaciones aún requieren que recuerdes el shortcode en sí. Cuando ha creado una obra maestra de un tema, la facilidad de uso no debería quedarse atrás. Le mostraré cómo crear códigos cortos y luego integrarlos con el editor mismo, para que el usuario no tenga que revisar sus documentos solo para recordar la sintaxis correcta para incrustar un botón. Intrigado? Empecemos de inmediato!
Se llama un Código corto y ha sido parte de la instalación básica de WordPress desde que llegó a la versión 2.5. Básicamente, estos son similares a los bbcodes utilizado en el popular software de tableros de mensajes: marcado ligero utilizado para dar formato al contenido.
Aquí, puedes definir tus propios códigos para usar dentro de tu tema. Sin embargo, a diferencia de los BBCodes, los códigos cortos se utilizan principalmente para proteger al usuario de marcas tediosas y posibles errores. Mediante el uso de un código corto, por ejemplo, un botón, el usuario no tiene que recordar el complicado marcado que se debe ingresar para crear el botón. En general, es un gran impulso para la facilidad de uso de un tema y, posiblemente, la amabilidad de noob.
Si no está familiarizado con el concepto de BBCode y, por extensión, con shortcode, así es como se ve la versión más simple:
[mi galería]
Si alguna vez has incrustado una galería con WordPress, ya has usado un shortcode!
Hay dos variaciones más con las que también debes estar familiarizado..
[botón] Contenido [/ botón] [enlace a = "www.net.tutsplus.com"] NetTuts + [/ link]
Implementaremos cada una de estas variaciones antes de pasar a otras cosas más ocupadas..
Cada implementación de shortcode requiere un proceso de dos pasos:
Independientemente de la complejidad del código abreviado, los pasos básicos siguen siendo los mismos.
Primero aprenderemos cómo implementar el shortcode más simple posible. Como caso de uso, supongamos que finaliza cada publicación con un texto de cierre de sesión común. Copiar y pegar puede ser un enfoque simple, pero puede sentirse como un ludita al hacerlo. Vamos a arreglar esto con un poco de velocidad WP!
A menos que se indique lo contrario, todo el código de abajo entra en funciones.php
La función principal se ocupa de la lógica central de su código abreviado. Tendremos que crear esto primero antes de continuar.
function signOffText () return '¡Muchas gracias por leer! Y recuerda suscribirte a nuestro feed RSS. ';
El siguiente paso, como puede suponer, es conectarse al sistema de WordPress para asociar el código abreviado con este texto. Esto se hace usando el add_shortcode método.
Accentsconagua
add_shortcode ('signoff', 'signOffText'); Sí, una sola línea es todo lo que se necesita. El primer parámetro define el shortcode que usarás en el editor, mientras que el segundo apunta a la función que creamos hace un momento..
Nota: los add_shortcode El método siempre viene después del método manejador..
Deberias hacer eso. Sólo tipo [cerrar sesión] en su editor y WordPress reemplazará dinámicamente el texto según sea necesario.
A continuación, vamos a echar un vistazo a otra variación: envolviendo un poco de contenido con un poco de marcado. Tendrías que usarlo así:
[cita] Algunos textos [/ cita]
La función primaria tiene que ser modificada un poco aquí. Notamos que nuestra función recibe dos parámetros: atributos a través de atts variable y el contenido en sí a través de la contenido variable.
El siguiente paso es simplemente devolver el marcado envuelto alrededor del texto seleccionado.
función de presupuesto ($ atts, $ contenido = nulo) return '"'. $ content.'"';
Este paso sigue siendo el mismo:
add_shortcode ("quote", "quote"); Me gusta nombrar mis códigos cortos exactamente igual que las funciones primarias a menos que la denominación se vuelva difícil de manejar. Puede tener sus propios estilos, así que no dude en cambiar el esquema de nombres. No hay buenas prácticas aceptadas.
Finalmente, también veremos cómo agregar atributos a la mezcla. Tendrías que usarlo así:
[link to = "www.net.tutsplus.com"] NetTuts + [/ link]
La función principal debe ser refaccionada para manejar todas las nuevas funcionalidades que estamos incorporando. Primero, fusionamos los atributos pasados con el código corto y los atributos que estamos esperando. Puedes leer más sobre el proceso aquí.
El paso final, como siempre, es simplemente devolver el marcado que queremos después de llenarlo adecuadamente. Aquí, he usado los datos enviados con el código corto para completar el ancla href atributo así como contenido.
enlace de la función ($ atts, $ content = null) extract (shortcode_atts (array ("to" => 'http://net.tutsplus.com'), $ atts)); devuelve ''. $ content. ''; Este paso se mantiene sin cambios, pero es esencial. Recuerde, sin esto, WordPress no tiene qué hacer con el código corto.
add_shortcode ("enlace", "enlace"); Aquí es donde esperas que este tutorial termine, pero no, lo has adivinado mal. Como mencioné anteriormente, los códigos cortos quitan mucho dolor, pero hay pocos errores. Por un lado, el usuario debe recordar los códigos cortos que tiene a su disposición para hacer un uso significativo de ellos..
Si tienes solo una pareja, todo está bien, pero con temas cargados de características, recordar que cada uno de ellos se convierte en una tarea rutinaria. Para corregir esto, vamos a agregar botones directamente a la interfaz de TinyMCE, de modo que el usuario puede simplemente hacer clic en el botón para hacerlo todo.
Como ejemplo, voy a enseñarte cómo agregar la segunda variación al editor. Espero que pueda extrapolar esta información para la funcionalidad específica que tiene en mente.
El primer paso en el proceso es conectarse a WordPress y agregar nuestro código de inicialización. El siguiente fragmento se encarga de eso. Recuerde, todo esto debe estar en su funciones.php expediente.
add_action ('init', 'add_button'); Estamos pidiendo a WordPress que ejecute la función llamada botón de agregar cuando la pagina esta cargada inicialmente. add_action es nuestro gancho en los internos de WordPress.
función add_button () if (current_user_can ('edit_posts') && current_user_can ('edit_pages')) add_filter ('mce_external_plugins', 'add_plugin'); add_filter ('mce_buttons', 'register_button'); Este pequeño fragmento de código se ejecutará cuando se cargue la página. Anteriormente, estamos verificando si el usuario tiene la autorización necesaria para editar una página o una publicación antes de continuar.
Una vez hecho esto, conectamos dos de nuestras funciones [para ser escritas] a filtros específicos. Ambos en realidad se conectan a la arquitectura frontal de TinyMCE a través de WordPress. El primero se ejecuta cuando el editor carga los complementos, mientras que el segundo se ejecuta cuando los botones están a punto de cargarse..
En el ejemplo anterior, procedemos independientemente del modo en que se encuentre el editor. Si desea mostrarlo solo cuando el editor está en, por ejemplo, el modo visual, deberá realizar una comprobación rápida. Si get_user_option ('rich_editing') evalúa a cierto, estás en modo visual De lo contrario, el modo HTML. Normalmente tiendo a agregar estos botones solo en modo visual, pero siéntase libre de mezclar y combinar aquí.
función register_button ($ buttons) array_push ($ buttons, "quote"); devuelve $ botones;
La función simplemente agrega nuestro shortcode a la matriz de botones. También puede agregar un divisor entre su nuevo botón y los botones anteriores al ingresar una | antes de.
function add_plugin ($ plugin_array) $ plugin_array ['quote'] = get_bloginfo ('template_url'). '/ js / customcodes.js'; devuelve $ plugin_array; El fragmento anterior le permite a TinyMCE, y WordPress, saber cómo manejar este botón. Aquí, mapeamos nuestro citar código corto a un archivo JavaScript específico. Usamos el get_bloginfo Método para obtener la ruta a la plantilla actual. Por el bien de la organización, mantengo mi plugin tinyMCE junto con mis otros archivos JS.
Ahora en la parte final de nuestro esfuerzo. Recuerde, el siguiente código entra en un archivo llamado customcodes.js colocado en el directorio JS de tu tema. Si pensabas que iba a entrar funciones.php Como todo el código anterior, ninguna cookie para ti.!
(function () tinymce.create ('tinymce.plugins.quote', init: function (ed, url) ed.addButton ('quote', title: 'Add a Quote', image: url + '/ image .png ', onclick: function () ed.selection.setContent (' [quote] '+ ed.selection.getContent () +' [/ quote] '););, createControl: function (n, cm) return null;,); tinymce.PluginManager.add ('quote', tinymce.plugins.quote);) (); Parece un poco complejo pero te aseguro que no es nada. Vamos a dividirlo en una sección más pequeña para facilitar el análisis..
primero El orden del día es un cierre rápido para evitar contaminar el espacio de nombres global. Por dentro, llamamos al crear Método para crear un nuevo complemento que pase el nombre y otros atributos variados. En aras de la brevedad, solo voy a llamar a mi complemento citar.
Una vez dentro, definimos la en eso Función que se ejecuta en la inicialización. ed apunta a la instancia del editor mientras url apunta a la URL del código del plugin.
La mayoría de los atributos deben ser bastante autoexplicativos. Tenga en cuenta que la imagen que pasa es relativa a la carpeta principal del archivo JS que contiene el código. Aqui estaria directorio de temas / js.
Siguiente arriba, creamos el controlador de eventos para este botón a través de al hacer clic función. La línea de un solo que contiene esencialmente obtiene el texto seleccionado, si lo hubiera, y lo envuelve sin código corto. setContent y obtener el contenido son métodos auxiliares proporcionados por tinyMCE para manipular el texto seleccionado.
Finalmente, en la última línea, agregamos el complemento recién creado al administrador de complementos de tinyMCE. Presta atención a los nombres que usas en cada paso. Es propenso a errores si no estás prestando atención. Y eso es todo! Hemos terminado Carga el editor y asegúrate de que tu nuevo botón esté funcionando.
Y ahí lo tienes. Hemos integrado con éxito códigos cortos en un tema de WordPress de una manera muy fácil de usar. Esperemos que hayas encontrado este tutorial para ser de ayuda. Siéntase libre de reutilizar este código en cualquier otra parte de sus proyectos e incorpore los comentarios si necesita ayuda.
Preguntas? Cosas bonitas que decir? Criticas? Pulsa la sección de comentarios y déjame un comentario. Feliz codificación y muchas gracias por leer.!
