Share
Bienvenidos a la segunda parte de la serie. En el primer artículo, explicamos los estándares de codificación de WordPress, cómo evitar colisiones de espacios de nombres, comentarios en el código y algunos consejos de seguridad básicos..
Hoy vamos a profundizar un poco más, escribiremos más código y aprenderemos algunas técnicas para mejorar el rendimiento y la seguridad de nuestros complementos. Los temas que cubriremos son los siguientes:
Coge tu editor de código y prepárate para jugar con WordPress!
Lo primero que debes tener en cuenta es que WordPress tiene dos funciones maravillosas (wp_enqueue_script y wp_enqueue_style) para permitirle incluir sus scripts y estilos. Para ello, no los agregue manualmente en el encabezado o usando wp_head gancho de acción.
Si utiliza los métodos de WordPress, los complementos de almacenamiento en caché y de reducción podrán incluir sus scripts en sus funciones, podrá elegir colocarlos en el pie de página o en el encabezado muy fácilmente, podrá agregar scripts dependientes y también usar todos Trucos explicados a continuación junto con otras características..
Incorrecto:
Accentsconagua
add_action ('wp_head', 'my_custom_scripts'); función my_custom_scripts () echo ''; Correcto:
add_action ('wp_enqueue_scripts', 'my_customs_scripts'); function my_customs_scripts () wp_enqueue_script ('script-handler', get_template_directory_uri (). '/js/my.js', array ('jquery'), '1.0.0', true); No le daré un tutorial completo sobre cómo usar wp_enqueue_xxxx ya que hay muchos de ellos disponibles (¡y el Códice es un gran recurso!) Y estoy tratando de simplemente señalar cómo debe agregar scripts en sus temas o complementos..
Lo que necesitas siempre tener en cuenta es dejar la huella más ligera posible. Esto significa que no debes incluir archivos donde no se supone que estén.
Puede pensar que "es solo un archivo, no afectará al sitio web" y con esa mentalidad es como tirar un papel al suelo en el parque porque es solo una hoja de papel, pero no es así como funcionan las cosas: si todos los desarrolladores dejan sus scripts en todas partes, el usuario final terminará con un sitio totalmente hinchado y no queremos eso.
Ahora que hemos cubierto eso, veamos algunos consejos sobre cómo incluir sus scripts solo cuando sea necesario.
// FRONT END ONLY add_action ('wp_enqueue_scripts', 'my_front_customs_scripts'); function my_customs_scripts () wp_enqueue_script ('script-handler', get_template_directory_uri (). '/js/my.js', array ('jquery'), '1.0.0', true); // BACKEND SOLAMENTE add_action ('admin_enqueue_scripts', 'my_back_customs_scripts'); function my_customs_scripts () wp_enqueue_script ('script-handler', get_template_directory_uri (). '/js/my.js', array ('jquery'), '1.0.0', true); ¡Pero espera! Vayamos un paso más allá e solo incluyamos scripts en las páginas que realmente los necesitan. Un buen método es registrarlos primero y luego ponerlos en la cola en las páginas necesarias.
// FRONT END ONLY add_action ('wp_enqueue_scripts', 'my_front_customs_scripts'); function my_customs_scripts () wp_register_script ('script-handler', get_template_directory_uri (). '/js/my.js', array ('jquery'), '1.0.0', true); if (is_page ('my-page')) wp_enqueue_script ('script-handler'); // Sea creativo para incluir archivos solo cuando sea necesario // if (is_single ()) // if (is_home ()) // if ('cpt-name' == get_post_type ()) // BACKENDEND ONLY add_action (' admin_enqueue_scripts ',' my_back_customs_scripts '); function my_customs_scripts ($ hook) wp_register_script ('script-handler', get_template_directory_uri (). '/js/my.js', array ('jquery'), '1.0.0', true); // Para incluirlo solo cuando se edita una publicación if ('edit.php' == $ hook) wp_enqueue_script ('script-handler'); // Si agregó una página de opciones como esta // $ plugin_screen_id = add_options_page (…) // puede hacer $ screen = get_current_screen (); if ($ plugin_screen_id == $ screen-> id) wp_enqueue_script ('script-handler'); / * Otra forma de utilizar la ID de pantalla * / add_action ('admin_print_styles-'. $ Plugin_screen_id, 'my_back_customs_scripts');// FRONT END ONLY add_action ('wp_enqueue_scripts', 'my_front_customs_scripts'); function my_customs_scripts () wp_register_script ('script-handler', get_template_directory_uri (). '/js/my.js', array ('jquery'), '1.0.0', true); // si necesita que se incluya un script para un shortcode // No lo agregue en todas partes // En su lugar, puede incluirlo solo cuando sea necesario $ post global; if (is_a ($ post, 'WP_Post') && has_shortcode ($ post-> post_content, 'custom-shortcode')) wp_enqueue_script ('script-handler'); Mientras que los otros fragmentos de código se aplican tanto a scripts como a estilos, los siguientes solo funcionarán con wp_enqueue_style (por ahora).
// FRONT END ONLY add_action ('wp_enqueue_scripts', 'my_front_customs_styles'); function my_front_customs_styles () wp_register_style ('my-plugin-css', plugins_url ('my-plugin / css / plugin.css')); // Incluyamos este css solo para los navegadores antiguos (y de mierda) wp_enqueue_style ('my-plugin-css'); global $ wp_styles; $ wp_styles-> add_data ('my-plugin-css', 'conditional', 'lte IE 9'); Puedes ver algunos ejemplos más en el Codex. Otro excelente ejemplo que puede usar para iniciar todos sus complementos es el Plugin de WordPress. Eche un vistazo al código para ver cómo se incluyen los scripts y los estilos. El complemento Wpfavs (basado en la plantilla de WordPress Plugin Boiler) es un buen ejemplo de cómo crear un complemento para el backend de Wordpress.
Para este tema, compartiré algunos malos hábitos que he visto mucho al hacer Ajax en WordPress y podrían dividirse en las siguientes oraciones:
wp_localize_scriptSé que jQuery hace que Ajax llame pan comido, y simplemente podemos crear un archivo llamado ajax.php, incluirwp-load.php en él y hacer nuestro Ajax allí. Pero esa no es la "manera de WordPress", no está preparada para el futuro. Más aún, es menos seguro y se perderá una gran cantidad de funciones de WordPress.
La forma correcta es usar el wp_ajax_my_action y wp_ajax_nopriv_my_action ganchos de acción. La principal diferencia entre los dos es que el primero se usa para usuarios registrados y el segundo para usuarios no registrados.
Tenga en cuenta que "my_action" se debe cambiar para su nombre de acción. Veremos como funciona eso en un momento..
Veamos todo esto en un ejemplo simple con un poco de código e imaginación. Imaginemos que queremos mostrar 5 publicaciones cuando un usuario (registrado o no) hace clic en un botón. Vamos a nombrar esta acción como cool_ajax_example, así que comencemos a agregar las funciones de devolución de llamada Ajax que devolverán los datos.
Puede incluir este código en su funciones.php o dentro de tu plugin.
// Primero agregamos los ganchos de acciones add_action ('wp_ajax_cool_ajax_example', 'cool_ajax_example_callback'); add_action ('wp_ajax_nopriv_cool_ajax_example', 'cool_ajax_example_callback'); función cool_ajax_example_callback () …Como puede ver, ambos ganchos usan la misma función de devolución de llamada que devolverá los datos. Observe también que nuestro nombre de acción está al final del nombre del enlace wp_ajax_cool_ajax_example
Es muy importantepara escribir el nombre de la acción en todas partes o esto no funcionará en absoluto.
Antes de continuar con la función de devolución de llamada, pasemos a la jQuery necesaria para la llamada Ajax. La secuencia de comandos jQuery se activará cuando presionemos un simple botón HTML, y debemos enviar esa solicitud a la admin-ajax.php archivo que es la secuencia de comandos que maneja todas las solicitudes AJAX en Wordpress. También necesitamos agregar un nonce como ya dijimos que queremos hacerlo seguro, así que aquí entra en acción el wp_localize_script función.
Si incluyó sus scripts de la manera correcta, tal como se explica al principio de este artículo, tiene un nombre de controlador de script (en los ejemplos anteriores, "controlador de script"), así que utilícelo para pasar nuestros valores de PHP a nuestro archivo javascript. Puede incluir este bit de código justo después de la wp_enqueue_function solía incluir el JavaScript.
wp_localize_script ('script-handler', 'MyVarName', array ('ajax_url' => admin_url ('admin-ajax.php'), 'nonce' => wp_create_nonce ('return_posts')));Como puedes ver wp_localize_script es una forma bastante fácil de pasar cualquier variable de PHP a nuestros archivos de JavaScript e imprimirá un código html válido debido a la etiquetas El código anterior se imprimirá en el encabezado cuando el archivo JavaScript con manejador de guiones como se carga el nombre y se verá algo así como:
Ahora es el momento de crear nuestro archivo javascript, llamémoslo my.js y se verá algo así como:
(function ($) $ (function () $ ('# button'). click (función (e) e.preventDefault (); $ .ajax (url: myVarName.ajax_url, data: action: ' cool_ajax_example ', nonce: myVarName.nonce, success: function (response) $ (' # response-container '). html (response);, escriba: "POST",););); ) (jQuery);Tenga en cuenta cómo estamos utilizando el nonce y ajax_url que pasamos con wp_localize_script. También verifique que estamos pasando un valor POST llamado "acción" que coincida con el nombre de acción que usamos en el wp_ajax manos.
Ahora es el momento de terminar nuestra función de devolución de llamada. Lo primero que debemos hacer es verificar que el nonce sea correcto y luego podemos devolver algunas publicaciones.
function cool_ajax_example_callback () $ nonce = $ _POST ['nonce']; // Lo primero que hacemos es verificar el nonce y matar el script si es incorrecto si (! Wp_verify_nonce ($ nonce, 'return_posts')) die ('Wrong nonce!'); $ args = array ('post_type' => 'post', 'post_status' => 'publish', 'posts_per_page' => 5,); // The Query $ the_query = new WP_Query ($ args); // The Loop if ($ the_query-> have_posts ()) echo ''; while ($ the_query-> have_posts ()) $ the_query-> the_post (); eco ''. get_the_title (). '
'; eco ''; else echo 'Mensajes no encontrados'; / * Restaurar datos de publicación originales * / wp_reset_postdata (); // no olvides esto // estamos haciendo una llamada simple, no queremos que nada más ejecute die (); En caso de que necesite algo más complejo, como eliminar una publicación, compruebe siempre los permisos de los usuarios, como mencioné al principio de este tema. Por ejemplo, si solo quiere que los administradores realicen ciertas acciones, puede hacer en su script algo como:
if (current_user_can ('administrador')) wp_delete_post ($ postid, $ force_delete); Con todos los consejos anteriores, ahora eres un maestro en WordPress Ajax y puedes realizar cualquier acción que desees. Intenta jugar con lo anterior y ajústalo a tus necesidades. Personalmente me gusta usar json Tipo de datos y lo hago echo json_encode () En lugar de hacer simples ecos en mis guiones, pero eso es otro asunto..
El propósito de esta sección no será enseñarle cómo funcionan los filtros y las acciones, existen excelentes tutoriales sobre ese tema que lo explican con gran detalle. Lo que voy a explicar aquí es por qué debería agregar filtros y acciones en sus complementos y mostrarle algunos ejemplos para una fácil comprensión..
Pero primero hagamos una introducción a estos conceptos:
Comprobar el API de plugin Para más información sobre ganchos de acción y filtros..
Es simple: porque hace que tu plugin sea mejor. De esta forma, los desarrolladores y los usuarios normales podrán extender, adaptar o mejorar su complemento más allá de su propósito original sin afectar el núcleo del mismo..
Tomemos, por ejemplo, un plugin de comercio electrónico. Debido a los ganchos y filtros, puede crear nuevos complementos que se enganchan en ellos, como por ejemplo, nuevas pasarelas de pago, funciones de envío y mucho más..
No te vuelvas loco agregando acciones y filtros por todas partes. Al principio, esto te resultará un poco difícil o molesto, así que piensa como si fueras otro desarrollador que está viendo un nuevo complemento y pregúntate "¿Necesito un gancho de acción?". También se agregará un gran porcentaje de acciones y filtros a pedido una vez que comience a recibir la solicitud de soporte (sí, ¡siempre los obtendrá!) O comentarios de sus usuarios.
Como todo en la vida, una vez que esto se convierta en un hábito, verás claramente dónde incluirlos..
Algunas recomendaciones para donde incluir filtros:
Usemos la función de devolución de llamada utilizada en este artículo para ver un ejemplo de las recomendaciones anteriores. Para crear variables filtrables en este caso usamos apply_filters ()
function cool_ajax_example_callback () $ nonce = $ _POST ['nonce']; // Lo primero que hacemos es verificar el nonce y matar el script si es incorrecto si (! Wp_verify_nonce ($ nonce, 'return_posts')) die ('Wrong nonce!'); $ args = array ('post_type' => 'post', 'post_status' => 'publish', 'posts_per_page' => 5,); // The Query $ the_query = new WP_Query (apply_filters ('cool_ajax_query', $ args)); // The Loop if ($ the_query-> have_posts ()) echo ''; while ($ the_query-> have_posts ()) $ the_query-> the_post (); eco ''. get_the_title (). '
'; eco ''; else echo 'Mensajes no encontrados'; / * Restaurar datos de publicación originales * / wp_reset_postdata (); // no olvides esto // estamos haciendo una llamada simple, no queremos que nada más ejecute die (); Como puedes ver he añadido un filtro a la $ args variable que se ejecutará justo antes WP_Query ejecuta la consulta. Con un simple filtro, cualquier usuario puede cambiar, por ejemplo, cuántas publicaciones se devuelven.
función wpt_alter_coolajax_query ($ args) $ args ['posts_per_page'] = 10; devuelve $ args; add_filter ('cool_ajax_query', 'wpt_alter_coolajax_query');Puedes usar filtros en diferentes escenarios, solo usa tu imaginación. Por ejemplo, en mi plugin WordPress Social Invitations, permito a los usuarios cambiar la hoja de estilos emergente con un filtro en caso de que tengan un estilo completamente diferente..
O en esta ocasión, cuando el complemento envía correos electrónicos, le doy la oportunidad de cambiar el "De correo electrónico" que wp_mail () va a usar.
función get_from_email () if (isset ($ this -> _ user_data)) return apply_filters ('wsi_from_email', $ this -> _ user_data-> user_email); return apply_filters ('wsi_from_email', get_bloginfo ('admin_email')); Cuando se trata de acciones esto cambia un poco. Desea agregar enlaces de acción en los siguientes escenarios (no limitados a):
Para crear estas áreas enganchadas utilizamos el acción_ () función. Vamos a aplicarlos en nuestro ejemplo..
function cool_ajax_example_callback () $ nonce = $ _POST ['nonce']; // Lo primero que hacemos es verificar el nonce y matar el script si es incorrecto si (! Wp_verify_nonce ($ nonce, 'return_posts')) die ('Wrong nonce!'); $ args = array ('post_type' => 'post', 'post_status' => 'publish', 'posts_per_page' => 5,); // The Query $ the_query = new WP_Query (apply_filters ('cool_ajax_query', $ args)); // El bucle si ($ the_query-> have_posts ()) // ejecutamos el enganche antes de que se procese el bucle do_action ('cool_ajax_before_loop', get_the_ID ()); eco ''; while ($ the_query-> have_posts ()) $ the_query-> the_post (); // ejecutamos el enlace antes de que se imprima el título do_action ('cool_ajax_before_title', get_the_ID ()); eco ''. get_the_title (). '
'; // ejecutamos el enlace después de que se imprima el título do_action ('cool_ajax_after_title', get_the_ID ()); eco ''; // ejecutamos el enganche después de que se procese el bucle do_action ('cool_ajax_after_loop', get_the_ID ()); else echo 'Mensajes no encontrados'; / * Restaurar datos de publicación originales * / wp_reset_postdata (); // no olvides esto // estamos haciendo una llamada simple, no queremos que nada más ejecute die (); Como puedes ver, estoy pasando un argumento a los ganchos con get_the_ID () . Cualquier función que se enganche a nuestro gancho de acción podrá usar ese argumento. Veamos algunos ejemplos:
/ ** * Mostrar la imagen destacada de la publicación antes del título * / function wpt_show_post_image ($ post_id) echo get_the_post_thumbnail ($ post_id, 'thumbnail'); add_action ('cool_ajax_before_title', 'wpt_show_post_image'); / ** * Mostrar categorías de publicación después del título * / function wpt_show_post_cats ($ post_id) echo get_the_category_list (",", $ post_id); add_action ('cool_ajax_after_title', 'wpt_show_post_cats');También puedes usar acción_ () se engancha para ejecutar otras acciones en lugar de agregar un nuevo marcado como el ejemplo anterior. Por ejemplo, en WordPress Social Invitations tengo un gancho de acción que se activa cada vez que se envía un mensaje. Entonces usando myCRED plugin puedo enganchar la acción de dar puntos al usuario que acaba de enviar el mensaje.
Como puede ver, agregar ganchos y filtros no solo beneficiará a su complemento, también beneficiará a otros desarrolladores y usuarios. Entonces, ¿por qué no empiezas a agregar algunos filtros y acciones alrededor??
Hoy aprendimos cómo incluir secuencias de comandos y estilos, cómo hacerlo Ajax llama a WordPress y algunos consejos básicos para el filtro y las acciones. Ya tenemos mucha información para desarrollar un buen complemento y ahora puedo decir que estas series están cerca del final..
En el próximo artículo final, hablaré sobre la internacionalización, la depuración y la documentación para resumir lo que creo que son las principales cosas a considerar al desarrollar un complemento..
