O guia definitivo para construir um plugin WordPress

Os plugins são uma parte vital dos sites WordPress que precisam de funcionalidades específicas.

Embora o repositório oficial do WordPress tenha mais de 45.000 plugins para você escolher, muitos desses plugins erram o alvo.

Só porque um plugin está no repositório não significa que ele não irá prejudicar seu desempenho ou comprometer sua segurança.

Então o que você pode fazer? Bem, você pode construir o seu próprio.

Construir um ótimo plugin WordPress começa com um planejamento cuidadoso.

Esteja você criando um do zero ou baseado em um clichê, seguir as práticas recomendadas bem documentadas é absolutamente essencial.

Neste tutorial, você aprenderá como construir um plugin WordPress simples da maneira certa.

Se você quiser revisar o código-fonte final enquanto lê, pode encontrá-lo aqui.

Comece com um plano.

Primeiro, vamos listar os recursos que nosso plugin terá e descrever exatamente o que ele precisa fazer.

O plugin que estamos construindo permitirá que os visitantes do site salvem conteúdo para ler mais tarde.

Para usuários registrados, armazenaremos a lista no banco de dados e, para usuários anônimos, salvaremos a lista usando cookies.

Abaixo está um resumo dos recursos e funcionalidades que nosso plugin fornecerá.

Tela de configurações

• A capacidade de os administradores adicionarem o botão “Salvar item” ao final do conteúdo.
• A capacidade de escolher o tipo de postagens onde queremos adicionar este botão.
• Ofereça aos usuários a opção de decidir se querem usar nosso estilo predefinido ou não
• Forneça uma opção para habilitar a funcionalidade apenas para usuários conectados.
• Forneça uma opção para alterar as mensagens que aparecem na parte voltada para o visitante do plug-in.

Salvando o conteúdo

• Se o usuário estiver logado, salve o conteúdo em um campo de usuário personalizado
• Se o usuário não estiver logado, salve o conteúdo em cookies

Mensagens

As mensagens abaixo aparecerão na tela em resposta à interação de um visitante com o plug-in ou como marcadores em itens acionáveis:

• “Salvar item.”
• “Cancelar item”.
• "Salvou. Veja os itens salvos.”
• "Você não tem nenhum item salvo."

Tela salva

É aqui que os visitantes visualizam a lista de postagens que salvaram.

• Mostrar uma lista de itens salvos
• Crie uma página salva na ativação do plugin
• Excluir página salva na desativação do plug-in

Código curto

Com um shortcode, a página Salva pode ser renderizada onde quer que seja adicionada.

Use um clichê.

Este é o melhor clichê que encontrei. É bem estruturado, orientado a objetos e eficiente. Ele segue todas as melhores práticas. E é rápido e leve.

Você pode usar esta página para gerar uma base de código de plugin com base neste WordPress Plugin Boilerplate:

Você deve obter um arquivo .zip .

Extraia-o e coloque-o na pasta de instalação do WordPress: wp-content/plugins/ .

Se você abrir seu painel do WordPress e acessar plugins, verá que seu plugin está listado lá. Não o ative ainda.

Lidar com ativação e desativação.

É importante que nosso plugin lide adequadamente com a ativação e desativação.

Quando nosso plugin for ativado, criaremos uma página chamada “Saved”, que conterá os itens salvos do usuário nela.

Ao criar essa página, adicionaremos um código de acesso para nossos itens salvos no conteúdo dessa página.

Ao final, salvaremos a página; obter o seu ID; e armazená-lo no banco de dados, para que possamos acessá-lo posteriormente na desativação do plugin.

Quando nosso plug-in for desativado, obteremos o ID da página “Salva” do banco de dados e, em seguida, excluiremos a página “Salva”, removendo qualquer vestígio do próprio plug-in.

Podemos fazer tudo isso em includes/class-toptal-save-activator.php e includes/class-toptal-save-deactivator.php .

Vamos começar com o processo de ativação:

 <?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 ); } }

A função activate() é chamada quando o plugin é ativado.

Ele cria uma nova página usando a função wp_insert_post() e salva o ID da página no banco de dados usando add_option() .

Agora, vamos prosseguir com a desativação do plugin.

 <?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' ); } } }

A função deactivate() , que é chamada quando o plugin é desativado, recupera a página usando a função get_option() , remove a página correspondente do banco de dados usando wp_delete_post() e remove o ID salvo da tabela de opções usando delete_option() .

Se ativarmos nosso plugin e formos para as páginas, devemos ver uma página chamada “Salvo” com um código de acesso.

Se tivéssemos de desativar o plugin, essa página seria removida.

Como usamos true como argumento em nosso método wp_delete_post() , esta página não irá para a lixeira, mas sim será deletada completamente.

Crie uma página de configurações do plug-in.

Podemos criar nossa página de configurações dentro do arquivo admin/class-toptal-save-admin.php , e a primeira coisa que precisamos fazer nesse arquivo é remover ou comentar a chamada para wp_enqueue_style() dentro da função enqueue_styles() e chame wp_enqueue_script() dentro da função enqueue_scripts() se não for adicionar CSS/JS à tela de administração.

No entanto, se vamos adicionar algum estilo, recomendo que carreguemos esses arquivos apenas na página de configurações do nosso plugin, em vez de em todas as páginas de administração do WordPress. Podemos fazer isso colocando o seguinte código diretamente acima das linhas que terí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 );

Se você está se perguntando de onde eu consegui essa 'tools_page_toptal-save' .

Bem, é o seguinte, eu sei que vou criar uma página de configurações com um slug toptal-save, e também sei que vou adicioná-lo à tela Tools ( tools.php ). Então, juntando esses dois, podemos dizer que o valor da variável $hook será 'tools_page_toptal-save' - uma concatenação dos dois valores.

Se não estivermos em nossa página de configurações do plugin, usamos return para encerrar imediatamente a execução da função em que estamos.

Como não vou adicionar nenhum estilo personalizado à minha tela de administração – porque quero que a tela do meu plugin se pareça com a tela nativa do WordPress – não adicionarei esse código.

Agora, podemos prosseguir com a criação de nossa página de configurações.

Vamos começar adicionando um método simples à classe Toptal_Save_Admin que chamará a função 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 ); }

Isso é um punhado de argumentos que estamos passando para a função add_submenu_page() . Aqui está o que cada um deles significa.

• Slug pai: O nome do slug para o menu pai (ou o nome do arquivo de uma página de administração padrão do WordPress). Você pode ver a lista completa de slugs pai aqui.

• Título da página: O texto a ser exibido nas tags de título da página quando o menu for selecionado.

• Título do menu: O texto a ser usado para o título do menu.

• Capacidade: A capacidade exigida pelo usuário para que este menu seja exibido para ele. Usamos “manage_options” que permite o acesso às opções do Painel de Administração. Você pode ler mais sobre Funções e Capacidades aqui.

• Menu slug: O nome do slug para se referir a este menu.

• Função que pode ser chamada : A função a ser chamada para gerar o conteúdo desta página. Como definimos o nome de nossa função que pode ser chamada, precisamos criá-la, mas antes disso, usamos $this para referenciar uma instância de uma classe de dentro dela mesma. Aqui está o que a documentação do PHP tem a dizer sobre isso:

A pseudovariável $this está disponível quando um método é chamado de dentro de um contexto de objeto. $this é uma referência ao objeto chamador (geralmente o objeto ao qual o método pertence, mas possivelmente outro objeto, se o método for chamado estaticamente a partir do contexto de um objeto secundário).

Em seguida, adicionaremos outro método à classe:

 /** * 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'; }

Essa função que pode ser chamada inclui nosso modelo que mostrará nossa página de configurações. Você pode ver que estamos referenciando um arquivo localizado em admin/ partials chamado toptal-save-admin-display.php .

Agora, se você for em Ferramentas, não verá essa tela. Por quê? Porque não conectamos nosso método register_admin_page() ao gancho admin_menu .

Podemos fazer isso abrindo nosso arquivo includes/class-toptal-save.php e adicionando este pedaço de código dentro do método define_admin_hooks() , logo abaixo de onde $plugin_admin = new Toptal_Save_Admin( $this->get_plugin_name(), $this->get_version() ); parte é.

 /** * 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' ); }

Não se preocupe com as chamadas para add_action() , pois isso é algo que abordaremos mais tarde.

Por enquanto, basta abrir a página Ferramentas e você poderá ver a página Salvar Toptal. Se abrimos, funciona, mas vemos uma tela em branco, pois não há nada nela.

Estamos fazendo algum progresso, mas precisamos exibir algumas configurações aqui, então vamos fazer isso.

Vamos começar a criar os campos, e isso é algo que vamos fazer com a ajuda da API de configurações do WordPress.

Se você não estiver familiarizado com ele, ele nos permite criar campos de formulário que podemos usar para salvar nossos dados.

 /** * 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 da função register_settings() podemos adicionar e configurar todos os campos. Você pode encontrar a implementação completa da função aqui. Usamos o seguinte na função mostrada acima:

• register_setting() : Registra uma configuração e seu retorno de chamada de sanitização.
• add_settings_section() : Adiciona uma nova seção a uma página de configurações.
• add_settings_field() : Adiciona um novo campo a uma seção de uma página de configurações.

Sempre que usávamos uma dessas três funções, um retorno de chamada de sanitização era fornecido. Isso permite que os dados sejam higienizados e, se for um campo, mostre o elemento HTML apropriado (caixa de seleção, rádio, entrada, etc).

Além disso, passamos uma matriz de dados para esses retornos de chamada, como label_for, descrição ou padrão, conforme necessário.

Agora, podemos criar esses retornos de chamada de sanitização. Você pode encontrar o código para esses retornos de chamada aqui.

Está tudo bem, no entanto, precisamos conectar os campos no gancho admin_init e mostrá-los.

Usaremos add_action que é um gancho que o núcleo do WordPress inicia em pontos específicos durante a execução, ou quando ocorre um evento específico. admin_init é acionado antes de qualquer outro gancho quando um usuário acessa a área de administração.

Primeiro, precisamos adicionar uma ação no arquivo includes/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' ); }

Em seguida, em admin/partials/topal-save-admin-display.php , precisamos fornecer uma visualização para a área de administração do nosso plugin:

 <?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>

A função settings_fields() é usada para gerar campos nonce, action e option_page para uma página de configurações.

É seguido pelo do_settings_sections() que imprime todas as seções de configurações adicionadas a uma página de configurações específica.

Finalmente, um botão de envio é adicionado usando o texto fornecido e as classes apropriadas usando a função submit_button() .

Agora, se dermos uma olhada em nossa página, ela ficará assim:

Isso é tudo o que temos que fazer em nossa área de administração. Vamos começar a trabalhar na parte pública do nosso plugin.

Crie a funcionalidade do plug-in.

Aí vem a parte interessante. Precisamos criar várias funções para separar nossa funcionalidade:

• Uma função que mostrará o botão “Salvar item”. Isso precisa verificar se o usuário atual já salvou esse item ou não, dependendo disso, mostraremos texto e cores diferentes.
• Uma função que irá salvar/cancelar o salvamento de um item (AJAX).
• Uma função que mostrará todos os itens salvos.
• Uma função que irá gerar nossos códigos de acesso.

Então, vamos começar mostrando o botão. Faremos tudo isso em public/class-toptal-save-public.php .

Ao fazer isso, precisaremos criar algumas funções auxiliares adicionais para cuidar de algumas coisas como:

• Criando um nome de cookie exclusivo para o site
• Criando um biscoito
• Obtendo o valor do cookie
• Obtendo o status de associação nas configurações

O código para essas funções auxiliares pode ser encontrado aqui.

A função get_unique_cookie_name() nos ajudará a gerar um nome de cookie exclusivo a partir do URL do site, nome do site e nosso sufixo definido personalizado. Isso é para que o nome do cookie gerado não entre em conflito quando usado em vários sites do WordPress no mesmo domínio.

As toptal_set_cookie() e toptal_get_cookie() irão criar e obter o valor de nossos cookies respectivamente.

A função get_user_status() obterá o status de nossa caixa de seleção de associação nas configurações (retornando 1 quando marcada, 0 caso contrário).

Agora, a parte suculenta, criando a função que será responsável por mostrar o botão salvar. A implementação da nossa função show_save_button() pode ser encontrada aqui. E usamos algumas novas funções da API do WordPress aqui:

• get_queried_object_id() : Recupera o ID do objeto consultado atual.
• is_user_logged_in() : Verifica se o visitante atual é um usuário logado.
• get_user_meta() : Recupera o campo de metadados do usuário para um usuário.
• wp_create_nonce() : Cria um token criptográfico vinculado a uma ação específica, usuário, sessão do usuário e janela de tempo.

Agora, vamos criar uma função que anexará nosso botão ao final do conteúdo. Aqui, temos dois requisitos principais.

1. Certifique-se de que o botão seja mostrado apenas no(s) tipo(s) de postagem selecionado(s) nas configurações.
2. Certifique-se de que a caixa de seleção para anexar o botão esteja 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; }

Agora, precisamos ligar esta função ao gancho the_content .

Por quê? Porque the_content é usado para filtrar o conteúdo do post depois que ele é recuperado do banco de dados e antes de ser impresso na tela.

Com isso, podemos adicionar nosso botão salvar em qualquer lugar do conteúdo. Podemos fazer isso em includes/class-toptal-save.php no método define_public_hooks() , assim:

 /** * 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' ); }

Agora, se for para as configurações do plugin, e verificar as postagens e páginas, bem como anexar o botão, veremos em qualquer postagem do blog que o botão é mostrado.

A partir daqui, devemos seguir em frente e estilizar esse botão.

Podemos fazer isso em public/css/toptal-save-public.css . Encontre o arquivo CSS atualizado aqui.

Agora, vamos criar uma função que realmente salvará o item.

Faremos isso em nossa classe pública e faremos com AJAX. O código está aqui.

Vamos conectar esta função no 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' ); }

Você pode ler mais sobre AJAX em plugins aqui.

Antes de terminarmos esta parte, precisamos fazer mais duas coisas.

1. Localize um script.
2. Crie nossa chamada AJAX em public/js/toptal-save-public.js

A localização de um script será feita através da função wp_localize_script() dentro do nosso arquivo public/class-toptal-save-public.php .

Além disso, enquanto estamos nisso, também nos certificaremos de implementar a exibição de arquivos CSS e JS dependendo do estado de nossa caixa de seleção “use our style”.

 /** * 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 ) ); }

Agora, podemos prosseguir com nossa chamada AJAX.

Nosso script de front-end procurará elementos com a classe “toptal-save-button”.

Um manipulador de cliques será registrado para todos os elementos correspondentes, que realizarão a chamada da API e atualizarão a interface do usuário de acordo.

Você pode encontrar o código aqui e o CSS necessário aqui.

Eu também adicionei uma função que manipulará a notificação quando o item for adicionado.

Aqui está como tudo funciona.

Em seguida, precisamos criar um shortcode para os usuários inserirem onde quiserem.

Podemos fazer isso em 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(); }

Também precisamos registrá-lo, pois a função por si só não fará nada.

Em include/class-toptal-save.php adicione este código após a linha onde anexamos nosso botão.

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

Agora, isso não vai funcionar porque ainda não carregamos o método add_shortcode() dentro de nossa classe de carregador.

Aqui está o código completo do arquivo includes/class-toptal-save-loader.php .

Eu adicionei uma nova variável protegida chamada shortcodes , então no método construtor da classe, eu a transformei em um array.

Na linha 104, adicionei uma função que será responsável pela criação de nossos shortcodes; você pode ver que é praticamente o mesmo que a função acima dela ( add_filter() ), exceto que eu mudei o “filter” para “shortcode” e “filters” para “shortcodes”.

Além disso, no método run() , adicionei outro foreach que passará pelo nosso array de códigos de acesso e os registrará no WordPress.

Essa foi fácil.

Lembre-se, no início, usamos um shortcode [toptal-saved] , então vamos criar um método que mostrará todos os nossos itens salvos.

Encontre o código completo para este método aqui.

Agora, como sempre, precisamos registrar o shortcode em includes/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' ); }

Temos mais duas coisas para fazer aqui.

1. Estilize nossa página de itens salvos.
2. Certifique-se de que quando um usuário remover um item salvo, ele desapareça da página de itens salvos.

Para a primeira tarefa, você pode encontrar o código CSS necessário aqui.

Para o segundo, envolve um pouco de script de front-end.

O código JavaScript completo para isso pode ser encontrado aqui.

Como você verá na linha 52, procurei o div com uma classe “toptal-saved-item”.

Então, nas linhas 70-75, verificamos se essa div pai tem uma classe toptal-saved-item.

Se isso acontecer, ocultamos nosso item com fadeOut e, após o término da animação, removemos completamente o item da tela.

Agora, vamos para a parte mais difícil – torná-la modular.

Torne o plugin modular.

A definição básica de um plugin modular é:

Código extensível, ou modular, é um código que pode ser modificado, interagindo, adicionado ou manipulado - tudo sem nunca modificar a base do código principal.

Agora, quando se trata deste plugin, eu me certificaria de que os usuários possam alterar o HTML dentro do item salvo na página de itens salvos.

Então, vamos precisar fazer algumas alterações em nosso método register_saved_shortcode() :

• Altere html_to_return para inner_html_to_return sempre que quisermos que os usuários possam alterar o HTML. Certifique-se de que a primeira declaração de nossa variável inner_html_to_return tenha “=” sem um ponto antes.
• Use o método apply_filters() para registrar nosso filtro.

Com essas duas mudanças, você deve acabar com algo assim.

Agora, se os usuários quiserem interagir com nosso código, eles podem adicionar algo assim dentro do arquivo 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; }

Gere arquivos de tradução.

A tradução é muito importante porque permite que membros da comunidade WordPress e poliglotas traduzam seu plugin, tornando-o acessível a sites que não sejam em inglês.

Dito isto, vamos mergulhar em alguns detalhes técnicos sobre como o WordPress lida com traduções.

O WordPress usa a estrutura de localização GNU gettext para tradução. Neste framework, existem três tipos de arquivos:

• Modelo de objeto portátil (POT)
• Objeto Portátil (PO)
• Objeto Máquina (MO)

Cada um desses arquivos representa uma etapa no processo de tradução.

Para gerar um arquivo POT, precisamos de um programa que pesquise no código do WordPress e obtenha todo o texto passado para nossas funções de tradução, como __e() e _e() . Você pode ler mais sobre as funções de tradução aqui.

Aqui traduzimos o texto do arquivo POT, salvando o inglês e nossa tradução em um arquivo PO, e convertemos o arquivo PO em um arquivo MO.

Fazer isso manualmente levaria muito tempo, pois você teria que escrever algumas linhas de código para cada arquivo traduzível que você possui em seu plug-in. Felizmente, há uma maneira melhor, usando um pequeno plugin útil chamado Loco Translate.

Depois de instalá-lo e ativá-lo, vá para Loco Translate > Plugins > Toptal Save.

A partir daí, clique em Editar modelo, depois em Sincronizar e Salvar. Isso editará nosso arquivo toptal-save.pot dentro de nossa pasta de idiomas.

Agora, o plugin está disponível para tradução.

Construa seu plugin WordPress agora.

Construímos um plugin bastante simples neste artigo, mas no processo seguimos as práticas e padrões que nos permitiriam manter e estender este plugin facilmente.

Usamos as funcionalidades do WordPress de forma a não prejudicar o desempenho geral da plataforma.

Seja um plugin simples ou complicado, seja você um desenvolvedor individual ou uma empresa de desenvolvimento WordPress, planejar e seguir as melhores práticas é a chave para construir um plugin robusto.