La guía definitiva para crear un complemento de WordPress

Los complementos son una parte vital de los sitios web de WordPress que necesitan funcionalidades específicas.

Si bien el repositorio oficial de WordPress tiene más de 45,000 complementos para elegir, muchos de estos complementos no dan en el blanco.

El hecho de que un complemento esté en el repositorio no significa que no obstaculice su rendimiento o comprometa su seguridad.

¿Entonces que puedes hacer? Bueno, puedes construir el tuyo propio.

La creación de un excelente complemento de WordPress comienza con una planificación cuidadosa.

Ya sea que esté creando uno desde cero o basado en un modelo estándar, seguir las mejores prácticas bien documentadas es absolutamente esencial.

En este tutorial, aprenderá cómo crear un complemento simple de WordPress de la manera correcta.

Si desea revisar el código fuente final a medida que lee, puede encontrarlo aquí.

Comience con un plan.

Primero, enumeremos las funciones que tendrá nuestro complemento y describamos exactamente lo que debe hacer.

El complemento que estamos creando permitirá a los visitantes del sitio guardar contenido para leerlo más tarde.

Para usuarios registrados, almacenaremos la lista en la base de datos, y para usuarios anónimos, guardaremos la lista usando cookies.

A continuación se muestra un resumen de las características y funcionalidades que proporcionará nuestro complemento.

Pantalla de configuración

• La posibilidad de que los administradores agreguen el botón "Guardar elemento" al final del contenido.
• La posibilidad de elegir el tipo de publicaciones donde queremos que se agregue este botón.
• Ofrezca a los usuarios la opción de decidir si quieren usar nuestro estilo predefinido o no
• Proporcione una opción para habilitar la funcionalidad solo para usuarios registrados.
• Proporcione una opción para cambiar los mensajes que aparecen en la parte del complemento que enfrenta el visitante.

Guardar el contenido

• Si el usuario ha iniciado sesión, guarde el contenido en un campo de usuario personalizado
• Si el usuario no ha iniciado sesión, guardar contenido en cookies

Mensajes

Los siguientes mensajes aparecerán en la pantalla en respuesta a la interacción de un visitante con el complemento o como etiquetas en elementos procesables:

• "Guardar elemento".
• "Desguardar elemento".
• "Salvado. Ver elementos guardados.”
• "No tienes ningún elemento guardado".

Pantalla guardada

Aquí es donde los visitantes ven la lista de publicaciones que han guardado.

• Mostrar una lista de elementos guardados
• Crear una página guardada al activar el complemento
• Eliminar página guardada al desactivar el complemento

Código corto

Con un shortcode, la página guardada se puede representar donde sea que se agregue.

Usa un repetitivo.

Este es el mejor repetitivo que he encontrado. Está bien estructurado, orientado a objetos y es eficiente. Sigue todas las mejores prácticas. Y es rápido y ligero.

Puede usar esta página para generar un código base de complemento basado en este modelo de complemento de WordPress:

Debería obtener un archivo .zip .

Extráigalo y colóquelo en su carpeta de instalación de WordPress: wp-content/plugins/ .

Si abre su panel de WordPress y va a complementos, verá que su complemento aparece allí. No lo actives todavía.

Manejar la activación y desactivación.

Es importante que nuestro complemento maneje correctamente la activación y desactivación.

Cuando nuestro complemento esté activado, crearemos una página llamada "Guardado", que contendrá los elementos guardados del usuario.

Al crear esa página, agregaremos un código abreviado para nuestros elementos guardados en el contenido de esa página.

Al final, guardaremos la página; obtener su identificación; y almacenarlo en la base de datos, para que podamos acceder a él más tarde al desactivar el complemento.

Cuando nuestro complemento esté desactivado, obtendremos la ID de la página "Guardada" de la base de datos y luego eliminaremos la página "Guardada", eliminando cualquier rastro del propio complemento.

Podemos hacer todo esto en include/class-toptal-save-activator.php e include/class-toptal-save-deactivator.php .

Comencemos con el proceso de activación:

 <?php // includes/class-toptal-save-activator.php // ... class Toptal_Save_Activator { /** * On activation create a page and remember it. * * Create a page named "Saved", add a shortcode that will show the saved items * and remember page id in our database. * * @since 1.0.0 */ public static function activate() { // Saved Page Arguments $saved_page_args = array( 'post_title' => __( 'Saved', 'toptal-save' ), 'post_content' => '[toptal-saved]', 'post_status' => 'publish', 'post_type' => 'page' ); // Insert the page and get its id. $saved_page_id = wp_insert_post( $saved_page_args ); // Save page id to the database. add_option( 'toptal_save_saved_page_id', $saved_page_id ); } }

La función activate() se llama cuando se activa el complemento.

Crea una nueva página usando la función wp_insert_post() y guarda la ID de la página en la base de datos usando add_option() .

Ahora, procedamos con la desactivación del complemento.

 <?php // includes/class-toptal-save-activator.php // ... class Toptal_Save_Deactivator { /** * On deactivation delete the "Saved" page. * * Get the "Saved" page id, check if it exists and delete the page that has that id. * * @since 1.0.0 */ public static function deactivate() { // Get Saved page id. $saved_page_id = get_option( 'toptal_save_saved_page_id' ); // Check if the saved page id exists. if ( $saved_page_id ) { // Delete saved page. wp_delete_post( $saved_page_id, true ); // Delete saved page id record in the database. delete_option( 'toptal_save_saved_page_id' ); } } }

La función deactivate() , que se llama cuando se desactiva el complemento, recupera la página usando la función get_option() , elimina la página correspondiente de la base de datos usando wp_delete_post() y elimina la ID guardada de la tabla de opciones usando delete_option() .

Si activamos nuestro complemento y vamos a las páginas, deberíamos ver una página llamada "Guardado" con un código abreviado.

Si tuviéramos que desactivar el complemento, esa página sería eliminada.

Dado que usamos true como argumento en nuestro método wp_delete_post() , esta página no irá a la papelera, sino que se eliminará por completo.

Cree una página de configuración del complemento.

Podemos crear nuestra página de configuración dentro del archivo admin/class-toptal-save-admin.php , y lo primero que debemos hacer en ese archivo es eliminar o comentar la llamada a wp_enqueue_style() dentro de la función enqueue_styles() y llame a wp_enqueue_script() dentro de la función enqueue_scripts() si no agregaremos ningún CSS/JS a la pantalla de administración.

Sin embargo, si vamos a agregar algo de estilo, recomiendo que carguemos esos archivos solo en la página de configuración de nuestro complemento, en lugar de en todas las páginas de administración de WordPress. Podemos hacerlo colocando el siguiente código directamente encima de las líneas que habríamos comentado:

 if ( 'tools_page_toptal-save' != $hook ) { return; } wp_enqueue_style( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'css/toptal-save-admin.css', array(), $this->version, 'all' );

 if ( 'tools_page_toptal-save' != $hook ) { return; } wp_enqueue_script( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'js/toptal-save-admin.js', array( 'jquery' ), $this->version, false );

Si se pregunta de dónde saqué esa parte de 'tools_page_toptal-save' .

Bueno, aquí está la cosa, sé que voy a crear una página de configuración con un slug toptal-save, y también sé que voy a agregarlo a la pantalla Herramientas ( tools.php ). Entonces, juntando esos dos, podemos decir que el valor de la variable $hook será 'tools_page_toptal-save' , una concatenación de los dos valores.

Si no estamos en la página de configuración de nuestro complemento, usamos return para finalizar inmediatamente la ejecución de la función en la que nos encontramos.

Como no agregaré ningún estilo personalizado a mi pantalla de administración, porque quiero que la pantalla de mi complemento se vea como la pantalla nativa de WordPress, no agregaré ese código.

Ahora, podemos continuar con la creación de nuestra página de configuración.

Vamos a comenzar agregando un método simple a la clase Toptal_Save_Admin que llamará a la función add_submenu_page() .

 /** * Register the settings page for the admin area. * * @since 1.0.0 */ public function register_settings_page() { // Create our settings page as a submenu page. add_submenu_page( 'tools.php', // parent slug __( 'Toptal Save', 'toptal-save' ), // page title __( 'Toptal Save', 'toptal-save' ), // menu title 'manage_options', // capability 'toptal-save', // menu_slug array( $this, 'display_settings_page' ) // callable function ); }

Esos son bastantes argumentos que estamos pasando a la función add_submenu_page() . Esto es lo que significa cada uno de ellos.

• Slug principal : el nombre de slug para el menú principal (o el nombre de archivo de una página de administración estándar de WordPress). Puede ver la lista completa de slugs principales aquí.

• Título de la página: el texto que se mostrará en las etiquetas de título de la página cuando se seleccione el menú.

• Título del menú: el texto que se utilizará para el título del menú.

• Capacidad: la capacidad requerida por el usuario para que se le muestre este menú. Hemos utilizado “manage_options” que permite el acceso a las opciones del Panel de Administración. Puede leer más sobre roles y capacidades aquí.

• Slug del menú: el nombre del slug para hacer referencia a este menú.

• Función invocable: la función que se llamará para generar el contenido de esta página. Como hemos definido el nombre de nuestra función invocable, debemos crearla, pero antes de hacerlo, usamos $this para hacer referencia a una instancia de una clase desde dentro de sí misma. Esto es lo que la documentación de PHP tiene que decir al respecto:

La pseudovariable $this está disponible cuando se llama a un método desde el contexto de un objeto. $esta es una referencia al objeto que llama (generalmente el objeto al que pertenece el método, pero posiblemente otro objeto, si el método se llama estáticamente desde el contexto de un objeto secundario).

A continuación, agregaremos otro método a la clase:

 /** * Display the settings page content for the page we have created. * * @since 1.0.0 */ public function display_settings_page() { require_once plugin_dir_path( dirname( __FILE__ ) ) . 'admin/partials/toptal-save-admin-display.php'; }

Esta función invocable incluye nuestra plantilla que mostrará nuestra página de configuración. Puede ver que estamos haciendo referencia a un archivo ubicado en admin/ partials llamado toptal-save-admin-display.php .

Ahora, si vas a Herramientas, no verás esa pantalla. ¿Por qué? Porque no hemos enganchado nuestro método register_admin_page() al gancho admin_menu .

Podemos hacerlo abriendo nuestro archivo include/class-toptal-save.php y agregando este trozo de código dentro del método define_admin_hooks() , justo debajo de $plugin_admin = new Toptal_Save_Admin( $this->get_plugin_name(), $this->get_version() ); parte es.

 /** * Register all of the hooks related to the admin area functionality * of the plugin. * * @since 1.0.0 * @access private */ private function define_admin_hooks() { $plugin_admin = new Toptal_Save_Admin( $this->get_plugin_name(), $this->get_version() ); $this->loader->add_action( 'admin_menu', $plugin_admin, 'register_settings_page' ); $this->loader->add_action( 'admin_enqueue_scripts', $plugin_admin, 'enqueue_styles' ); $this->loader->add_action( 'admin_enqueue_scripts', $plugin_admin, 'enqueue_scripts' ); }

No se preocupe por las llamadas a add_action() ya que eso es algo que cubriremos más adelante.

Por ahora, simplemente abra la página Herramientas y podrá ver la página Guardar de Toptal. Si lo abrimos, funciona, pero vemos una pantalla en blanco ya que no hay nada en ella.

Estamos haciendo algunos progresos, pero bueno, necesitamos mostrar algunas configuraciones aquí, así que hagámoslo.

Vamos a comenzar a crear los campos, y eso es algo que vamos a hacer con la ayuda de la API de configuración de WordPress.

Si no está familiarizado con él, nos permite crear campos de formulario que podemos usar para guardar nuestros datos.

 /** * Register the settings for our settings page. * * @since 1.0.0 */ public function register_settings() { // Here we are going to register our setting. register_setting( $this->plugin_name . '-settings', $this->plugin_name . '-settings', array( $this, 'sandbox_register_setting' ) ); // Here we are going to add a section for our setting. add_settings_section( $this->plugin_name . '-settings-section', __( 'Settings', 'toptal-save' ), array( $this, 'sandbox_add_settings_section' ), $this->plugin_name . '-settings' ); // Here we are going to add fields to our section. add_settings_field( 'post-types', __( 'Post Types', 'toptal-save' ), array( $this, 'sandbox_add_settings_field_multiple_checkbox' ), $this->plugin_name . '-settings', $this->plugin_name . '-settings-section', array( 'label_for' => 'post-types', 'description' => __( 'Save button will be added only to the checked post types.', 'toptal-save' ) ) ); // ... }

Dentro de la función register_settings() podemos agregar y configurar todos los campos. Puede encontrar la implementación completa de la función aquí. Hemos utilizado lo siguiente en la función que se muestra arriba:

• register_setting() : registra una configuración y su devolución de llamada de saneamiento.
• add_settings_section() : Agrega una nueva sección a una página de configuración.
• add_settings_field() : Agrega un nuevo campo a una sección de una página de configuración.

Cada vez que usamos una de esas tres funciones, se proporcionó una devolución de llamada de desinfección. Esto permite desinfectar los datos y, si se trata de un campo, mostrar el elemento HTML apropiado (casilla de verificación, radio, entrada, etc.).

Además, hemos pasado una matriz de datos a esas devoluciones de llamada, como label_for, description o default, según sea necesario.

Ahora, podemos crear esas devoluciones de llamada de saneamiento. Puede encontrar el código para esas devoluciones de llamada aquí.

Todo esto está bien, sin embargo, necesitamos enlazar los campos en el admin_init y luego mostrarlos.

Usaremos add_action que es un gancho que el núcleo de WordPress inicia en puntos específicos durante la ejecución, o cuando ocurre un evento específico. admin_init se activa antes que cualquier otro enlace cuando un usuario accede al área de administración.

Primero, necesitamos agregar una acción en el archivo include/class-toptal-save.php .

 /** * Register all of the hooks related to the admin area functionality * of the plugin. * * @since 1.0.0 * @access private */ private function define_admin_hooks() { $plugin_admin = new Toptal_Save_Admin( $this->get_plugin_name(), $this->get_version() ); // Hook our settings page $this->loader->add_action( 'admin_menu', $plugin_admin, 'register_settings_page' ); // Hook our settings $this->loader->add_action( 'admin_init', $plugin_admin, 'register_settings' ); $this->loader->add_action( 'admin_enqueue_scripts', $plugin_admin, 'enqueue_styles' ); $this->loader->add_action( 'admin_enqueue_scripts', $plugin_admin, 'enqueue_scripts' ); }

A continuación, en admin/partials/topal-save-admin-display.php , debemos proporcionar una vista para el área de administración de nuestro complemento:

 <?php /** * Provide a admin area view for the plugin * * This file is used to markup the admin-facing aspects of the plugin. * * @link https://www.toptal.com/resume/ratko-solaja * @since 1.0.0 * * @package Toptal_Save * @subpackage Toptal_Save/admin/partials */ ?> <!-- This file should primarily consist of HTML with a little bit of PHP. --> <div> <form method="post" action="options.php"> <?php settings_fields( 'toptal-save-settings' ); do_settings_sections( 'toptal-save-settings' ); submit_button(); ?> </form> </div>

La función settings_fields() se utiliza para generar campos nonce, action y option_page para una página de configuración.

Le sigue do_settings_sections() que imprime todas las secciones de configuración agregadas a una página de configuración en particular.

Finalmente, se agrega un botón de envío usando el texto proporcionado y la(s) clase(s) apropiada(s) usando la función submit_button() .

Ahora, si echamos un vistazo a nuestra página, se verá así:

Esto es todo lo que tenemos que hacer en nuestra área de administración. Comencemos a trabajar en la parte pública de nuestro complemento.

Cree la funcionalidad del complemento.

Aquí viene la parte interesante. Necesitamos crear múltiples funciones para separar nuestra funcionalidad:

• Una función que mostrará el botón "Guardar elemento". Esto debe verificar si el usuario actual ya ha guardado ese elemento o no, dependiendo de eso, mostraremos texto y color diferentes.
• Una función que guardará/desguardará un elemento (AJAX).
• Una función que mostrará todos los elementos guardados.
• Una función que generará nuestros shortcodes.

Entonces, comencemos mostrando el botón. Haremos todo esto en public/class-toptal-save-public.php .

Mientras hacemos esto, necesitaremos crear algunas funciones de ayuda adicionales para encargarnos de ciertas cosas como:

• Creación de un nombre de cookie único para el sitio web
• Creando una galleta
• Obtener el valor de la cookie
• Obtener el estado de membresía desde la configuración

El código para estas funciones auxiliares se puede encontrar aquí.

La función get_unique_cookie_name() nos ayudará a generar un nombre de cookie único a partir de la URL del sitio web, el nombre del sitio web y nuestro sufijo definido personalizado. Esto es para que el nombre de la cookie generada no entre en conflicto cuando se use en varios sitios de WordPress bajo el mismo dominio.

Las toptal_set_cookie() y toptal_get_cookie() crearán y obtendrán el valor de nuestras cookies respectivamente.

La función get_user_status() obtendrá el estado de nuestra casilla de verificación de membresía en la configuración (devolviendo 1 cuando esté marcada, 0 de lo contrario).

Ahora, la parte jugosa, crear la función que se encargará de mostrar el botón de guardar. La implementación de nuestra función show_save_button() se puede encontrar aquí. Y hemos utilizado algunas funciones nuevas de la API de WordPress aquí:

• get_queried_object_id() : Recupera el ID del objeto consultado actual.
• is_user_logged_in() : Comprueba si el visitante actual es un usuario que ha iniciado sesión.
• get_user_meta() : Recupera el campo de metadatos del usuario para un usuario.
• wp_create_nonce() : crea un token criptográfico vinculado a una acción, usuario, sesión de usuario y ventana de tiempo específicos.

Ahora, creemos una función que agregará nuestro botón al final del contenido. Aquí, tenemos dos requisitos clave.

1. Asegúrese de que el botón se muestre solo en los tipos de publicaciones que están seleccionadas en la configuración.
2. Asegúrese de que la casilla de verificación para agregar el botón esté marcada.

 /** * Append the button to the end of the content. * * @since 1.0.0 */ public function append_the_button( $content ) { // Get our item ID $item_id = get_queried_object_id(); // Get current item post type $current_post_type = get_post_type( $item_id ); // Get our saved page ID, so we can make sure that this button isn't being shown there $saved_page_id = get_option( 'toptal_save_saved_page_id' ); // Set default values for options that we are going to call below $post_types = array(); $override = 0; // Get our options $options = get_option( $this->plugin_name . '-settings' ); if ( ! empty( $options['post-types'] ) ) { $post_types = $options['post-types']; } if ( ! empty( $options['toggle-content-override'] ) ) { $override = $options['toggle-content-override']; } // Let's check if all conditions are ok if ( $override == 1 && ! empty( $post_types ) && ! is_page( $saved_page_id ) && in_array( $current_post_type, $post_types ) ) { // Append the button $custom_content = ''; ob_start(); echo $this->show_save_button(); $custom_content .= ob_get_contents(); ob_end_clean(); $content = $content . $custom_content; } return $content; }

Ahora, necesitamos enganchar esta función al gancho the_content .

¿Por qué? Porque the_content se usa para filtrar el contenido de la publicación después de que se recupera de la base de datos y antes de que se imprima en la pantalla.

Con esto, podemos agregar nuestro botón Guardar en cualquier parte del contenido. Podemos hacer eso en include/class-toptal-save.php en el método define_public_hooks() , así:

 /** * Register all of the hooks related to the public-facing functionality * of the plugin. * * @since 1.0.0 * @access private */ private function define_public_hooks() { $plugin_public = new Toptal_Save_Public( $this->get_plugin_name(), $this->get_version() ); // Append our button $this->loader->add_action( 'the_content', $plugin_public, 'append_the_button', 45 ); $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'enqueue_styles' ); $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'enqueue_scripts' ); }

Ahora, si va a la configuración del complemento y verifica las publicaciones y páginas, además de agregar el botón, veremos en cualquier publicación de blog que se muestra el botón.

A partir de aquí, debemos seguir adelante y diseñar ese botón.

Podemos hacerlo en public/css/toptal-save-public.css . Encuentre el archivo CSS actualizado aquí.

Ahora, creemos una función que realmente guarde el elemento.

Vamos a hacer esto en nuestra clase pública y lo haremos con AJAX. El código está aquí.

Conectemos esta función a WordPress AJAX.

 /** * Register all of the hooks related to the public-facing functionality * of the plugin. * * @since 1.0.0 * @access private */ private function define_public_hooks() { $plugin_public = new Toptal_Save_Public( $this->get_plugin_name(), $this->get_version() ); // Append our button $this->loader->add_action( 'the_content', $plugin_public, 'append_the_button', 45 ); // Save/unsave AJAX $this->loader->add_action( 'wp_ajax_save_unsave_item', $plugin_public, 'save_unsave_item' ); $this->loader->add_action( 'wp_ajax_nopriv_save_unsave_item', $plugin_public, 'save_unsave_item' ); $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'enqueue_styles' ); $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'enqueue_scripts' ); }

Puede leer más sobre AJAX en complementos aquí.

Antes de terminar esta parte, necesitamos hacer dos cosas más.

1. Localizar un guión.
2. Crea nuestra llamada AJAX en public/js/toptal-save-public.js

La localización de un script se realizará a través de la función wp_localize_script() dentro de nuestro archivo public/class-toptal-save-public.php .

Además, mientras estamos en eso, también nos aseguraremos de implementar la visualización de archivos CSS y JS según el estado de nuestra casilla de verificación "usar nuestro estilo".

 /** * Register the stylesheets for the public-facing side of the site. * * @since 1.0.0 */ public function enqueue_styles() { /** * This function is provided for demonstration purposes only. * * An instance of this class should be passed to the run() function * defined in Toptal_Save_Loader as all of the hooks are defined * in that particular class. * * The Toptal_Save_Loader will then create the relationship * between the defined hooks and the functions defined in this * class. */ $options = get_option( $this->plugin_name . '-settings' ); if ( ! empty( $options['toggle-css-override'] ) && $options['toggle-css-override'] == 1 ) { wp_enqueue_style( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'css/toptal-save-public.css', array(), $this->version, 'all' ); } } /** * Register the JavaScript for the public-facing side of the site. * * @since 1.0.0 */ public function enqueue_scripts() { /** * This function is provided for demonstration purposes only. * * An instance of this class should be passed to the run() function * defined in Toptal_Save_Loader as all of the hooks are defined * in that particular class. * * The Toptal_Save_Loader will then create the relationship * between the defined hooks and the functions defined in this * class. */ wp_enqueue_script( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'js/toptal-save-public.js', array( 'jquery' ), $this->version, false ); // Get our options $options = get_option( $this->plugin_name . '-settings' ); // Get our text $item_save_text = $options['text-save']; $item_unsave_text = $options['text-unsave']; $item_saved_text = $options['text-saved']; $item_no_saved = $options['text-no-saved']; $saved_page_id = get_option( 'toptal_save_saved_page_id' ); $saved_page_url = get_permalink( $saved_page_id ); wp_localize_script( $this->plugin_name, 'toptal_save_ajax', array( 'ajax_url' => admin_url( 'admin-ajax.php' ), 'item_save_text' => $item_save_text, 'item_unsave_text' => $item_unsave_text, 'item_saved_text' => $item_saved_text, 'item_no_saved' => $item_no_saved, 'saved_page_url' => $saved_page_url ) ); }

Ahora, podemos continuar con nuestra llamada AJAX.

Nuestro script de front-end buscará elementos con la clase "toptal-save-button".

Se registrará un controlador de clics para todos los elementos coincidentes, que realizará la llamada a la API y actualizará la interfaz de usuario en consecuencia.

Puedes encontrar el código aquí y el CSS necesario aquí.

También he agregado una función que manejará la notificación cuando se agregue el elemento.

Así es como funciona todo.

A continuación, debemos crear un código abreviado para que los usuarios lo inserten donde quieran.

Podemos hacer eso en public/class-toptal-save-public.php :

 /** * Create Shortcode for Users to add the button. * * @since 1.0.0 */ public function register_save_unsave_shortcode() { return $this->show_save_button(); }

También necesitamos registrarlo, ya que la función por sí sola no hará nada.

En include/class-toptal-save.php agregue este código después de esa línea donde agregamos nuestro botón.

 // Add our Shortcodes $this->loader->add_shortcode( 'toptal-save', $plugin_public, 'register_save_unsave_shortcode' );

Ahora, esto no va a funcionar porque aún no hemos cargado el método add_shortcode() dentro de nuestra clase de cargador.

Aquí está el código completo del archivo include/class-toptal-save-loader.php .

Agregué una nueva variable protegida llamada shortcodes , luego, en el método constructor de la clase, la convertí en una matriz.

En la línea 104, agregué una función que será responsable de la creación de nuestros códigos cortos; puede ver que es más o menos lo mismo que la función anterior ( add_filter() ), excepto que cambié el "filtro" a "código corto" y "filtros" a "códigos cortos".

Además, en el método run() , agregué otro foreach que revisará nuestra matriz de códigos cortos y los registrará con WordPress.

Eso fue fácil.

Recuerde, al principio, usamos un código [toptal-saved] , así que creemos un método que muestre todos nuestros elementos guardados.

Encuentre el código completo para este método aquí.

Ahora, como siempre, debemos registrar el código abreviado en include/class-toptal-save.php :

 /** * Register all of the hooks related to the public-facing functionality * of the plugin. * * @since 1.0.0 * @access private */ private function define_public_hooks() { $plugin_public = new Toptal_Save_Public( $this->get_plugin_name(), $this->get_version() ); // Append our button $this->loader->add_action( 'the_content', $plugin_public, 'append_the_button', 45 ); // Add our Shortcodes $this->loader->add_shortcode( 'toptal-save', $plugin_public, 'register_save_unsave_shortcode' ); $this->loader->add_shortcode( 'toptal-saved', $plugin_public, 'register_saved_shortcode' ); // Save/unsave AJAX $this->loader->add_action( 'wp_ajax_save_unsave_item', $plugin_public, 'save_unsave_item' ); $this->loader->add_action( 'wp_ajax_nopriv_save_unsave_item', $plugin_public, 'save_unsave_item' ); $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'enqueue_styles' ); $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'enqueue_scripts' ); }

Tenemos dos cosas más que hacer aquí.

1. Dale estilo a nuestra página de elementos guardados.
2. Asegúrese de que cuando un usuario elimine un elemento guardado, desaparezca de la página de elementos guardados.

Para la primera tarea, puede encontrar el código CSS necesario aquí.

Para el segundo, implica un poco de secuencias de comandos front-end.

El código JavaScript completo para eso se puede encontrar aquí.

Como verá en la línea 52, busqué el div con una clase "elemento guardado superior".

Luego, en las líneas 70-75, verificamos si ese div principal tiene un elemento guardado superior de clase.

Si es así, ocultamos nuestro elemento con fadeOut y luego, una vez que finaliza la animación, eliminamos completamente el elemento de la pantalla.

Ahora, pasemos a la parte más difícil: hacerlo modular.

Haga que el complemento sea modular.

La definición básica de un complemento modular es:

El código extensible o modular es un código que se puede modificar, interactuar, agregar o manipular, todo sin modificar la base del código central.

Ahora, cuando se trata de este complemento, me aseguraría de que los usuarios puedan cambiar el HTML dentro del elemento guardado en la página de elementos guardados.

Entonces, necesitaremos hacer algunos cambios en nuestro método register_saved_shortcode() :

• Cambie html_to_return a inner_html_to_return donde queramos que los usuarios puedan cambiar el HTML. Asegúrese de que la primera declaración de nuestra variable inner_html_to_return tenga "=" sin un punto que la preceda.
• Usa el método apply_filters() para registrar nuestro filtro.

Con estos dos cambios, deberías terminar con algo como esto.

Ahora, si los usuarios quieren interactuar con nuestro código, pueden agregar algo como esto dentro de su archivo functions.php :

 <?php add_filter( 'toptal_saved_item_html', 'change_toptal_saved_item_html'); function change_toptal_saved_item_html( $inner_html_to_return ) { // Some custom code return $inner_html_to_return; }

Generar archivos de traducción.

La traducción es muy importante porque permite que los miembros de la comunidad de WordPress y los políglotas traduzcan su complemento, haciéndolo accesible para los sitios que no están en inglés.

Dicho esto, profundicemos en algunos detalles técnicos sobre cómo WordPress maneja las traducciones.

WordPress utiliza el marco de localización de GNU gettext para la traducción. En este marco, hay tres tipos de archivos:

• Plantilla de objeto portátil (POT)
• Objeto portátil (PO)
• Objeto de máquina (MO)

Cada uno de estos archivos representa un paso en el proceso de traducción.

Para generar un archivo POT, necesitamos un programa que busque a través del código de WordPress y pase todo el texto a nuestras funciones de traducción, como __e() y _e() . Puede leer más sobre las funciones de traducción aquí.

Aquí traducimos el texto del archivo POT, guardamos tanto el inglés como nuestra traducción en un archivo PO, y convertimos el archivo PO en un archivo MO.

Hacer esto manualmente tomaría mucho tiempo ya que tendría que escribir algunas líneas de código para cada archivo traducible que tenga en su complemento. Afortunadamente, hay una mejor manera, utilizando un pequeño y práctico complemento llamado Loco Translate.

Una vez que lo instale y active, vaya a Loco Translate > Complementos > Toptal Save.

Desde allí, haga clic en Editar plantilla, luego en Sincronizar y guardar. Esto editará nuestro archivo toptal-save.pot dentro de nuestra carpeta de idiomas.

Ahora, el complemento está disponible para su traducción.

Cree su complemento de WordPress ahora.

Hemos creado un complemento bastante simple en este artículo, pero en el proceso, seguimos las prácticas y estándares que nos permitirían mantener y extender este complemento fácilmente.

Hemos utilizado las funcionalidades de WordPress de manera que no obstaculicen el rendimiento general de la plataforma.

Ya sea que se trate de un complemento simple o complicado, ya sea que sea un desarrollador individual o una empresa de desarrollo de WordPress, la planificación y el seguimiento de las mejores prácticas es clave para crear un complemento sólido.