O guia definitivo para construir um plug-in WordPress

O deactivate() função, que é chamada quando o plugin é desativado, recupera a página usando o get_option() função, 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 irmos para as páginas, devemos ver uma página chamada “Salvo” com um shortcode nela.

Se desativarmos o plugin, essa página será removida.

Como usamos true como um argumento em nosso wp_delete_post() , esta página não irá para a lixeira, mas será excluída completamente.

Crie uma página de configurações do plugin.

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

No entanto, se vamos adicionar algum estilo, recomendo carregar 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 comentamos:

Se você está se perguntando onde consegui isso ‘tools_page_toptal-save’ parte de.

Bem, aqui está, eu sei que vou criar uma página de configurações com um slug toptal-save e também sei que vou adicioná-la às Ferramentas ( tools.php ) tela. Então, colocando esses dois juntos, podemos dizer que o valor da variável $hook vai ser ‘tools_page_toptal-save’ - uma concatenação dos dois valores.

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

Já que não vou adicionar nenhum estilo personalizado à tela do administrador - porque quero que a tela do plug-in se pareça com a tela nativa do WordPress - não vou adicionar 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 a ApeeScape_Save_Admin classe que chamará add_submenu_page() função.

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

• Lesma-mãe: 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 dos slugs pais Aqui .

• Título da página: O texto a ser exibido nas tags de título da página quando o menu é 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 a eles. Usamos “manage_options” que permite acesso às opções do painel de administração. Você pode ler mais sobre funções e capacidades em Aqui .

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

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

A pseudo-variável $ this está disponível quando um método é chamado de dentro de um contexto de objeto. $ this é uma referência ao objeto de chamada (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).

A seguir, adicionaremos outro método à classe:

Esta função chamável está incluindo nosso modelo que irá mostrar nossa página de configurações. Você pode ver que estamos nos referindo a um arquivo localizado no admin / parciais chamado toptal-save-admin-display.php .

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

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

Não se preocupe com as ligações para add_action() já que isso é algo que vamos cobrir mais tarde.

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

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

Vamos começar a criar os campos, e isso é algo que faremos com a ajuda de 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.

Dentro do register_settings() função 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 higienizaçã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 usamos uma dessas três funções, um retorno de chamada de limpeza era fornecido. Isso permite que os dados sejam higienizados e, se for um campo, mostrar o elemento HTML apropriado (caixa de seleção, rádio, entrada, etc).

Além disso, passamos um array de dados para esses callbacks, como label_for, description ou default conforme necessário.

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

Está tudo bem, entretanto, precisamos conectar os campos em admin_init anexe e mostre a eles.

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

Primeiro, precisamos adicionar uma ação em inclui / class-toptal-save.php Arquivo.

Próximo, em admin / partials / topal-save-admin-display.php , precisamos fornecer uma visão para a área administrativa de nosso plugin:

O settings_fields() function é usado para gerar campos nonce, action e option_page para uma página de configurações.

É seguido por 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 submit_button() função.

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

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

Crie a funcionalidade do plugin.

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 textos e cores diferentes.
• Uma função que irá salvar / remover 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 .

Enquanto fazemos isso, precisaremos criar algumas funções auxiliares adicionais para cuidar de certas coisas como:

• Criação de um nome de cookie exclusivo para o site
• Criação de um cookie
• Obtendo o valor do cookie
• Obtendo o status de membro nas configurações

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

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

O toptal_set_cookie() e toptal_get_cookie() funções criarão e obterão o valor de nossos cookies, respectivamente.

O get_user_status() A função 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, criar a função que será responsável por mostrar o botão salvar. A implementação do nosso show_save_button() função 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 no momento.
• is_user_logged_in() : Verifica se o visitante atual é um usuário conectado.
• 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, usuário, sessão de usuário e janela de tempo específicos.

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.

Agora, precisamos conectar essa função ao the_content gancho.

Por quê? Porque the_content é usado para filtrar o conteúdo da postagem depois que ela for recuperada do banco de dados e antes de ser impressa na tela.

Com isso, podemos adicionar nosso botão Salvar em qualquer lugar do conteúdo. Podemos fazer isso em inclui / class-toptal-save.php em define_public_hooks() método, como este:

Agora, se você for para as configurações do plug-in e verificar as postagens e páginas, além de anexar o botão, veremos em qualquer postagem do blog que o botão é mostrado.

A partir daqui, devemos prosseguir 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 aula pública e faremos com AJAX. O código é Aqui .

Vamos ligar essa função ao WordPress AJAX.

Você pode ler mais sobre AJAX em plug-ins 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 por meio do wp_localize_script() função dentro de nossa public/class-toptal-save-public.php Arquivo.

Além disso, enquanto estamos nisso, também vamos implementar a exibição de arquivos CSS e JS, dependendo do estado de nossa caixa de seleção 'use nosso estilo'.

Agora, podemos prosseguir com nossa chamada AJAX.

Nosso script de front-end procurará elementos com a classe “botão salvar na parte superior”.

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

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

Também adicionei uma função que tratará da notificação quando o item for adicionado.

É assim que tudo funciona.

Em seguida, precisamos criar um código de acesso para os usuários inserirem onde quiserem.

Podemos fazer isso em public / class-toptal-save-public.php :

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

Dentro inclui / class-toptal-save.php adicione este código após a linha onde acrescentamos nosso botão.

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

Aqui é o código completo do inclui / class-toptal-save-loader.php Arquivo.

Eu adicionei uma nova variável protegida chamada shortcodes, então no método do 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 códigos de acesso; você pode ver que é praticamente igual à função acima (add_filter()), exceto que mudei o “filtro” para “shortcode” e “filtros” para “shortcodes”.

Além disso, no run() método, adicionei outro foreach que irá percorrer nosso array de shortcodes e registrá-los com o 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 inclui / class-toptal-save.php :

Temos mais duas coisas a fazer aqui.

1. Estilize nossa página de itens salvos.
2. Certifique-se de que, quando um usuário remove um item salvo, ele desaparece 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, eu pesquisei o div com uma classe “toptal-saved-item”.

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

Em caso afirmativo, ocultamos nosso item com fadeOut e, em seguida, após o término da animação, removemos completamente o item da tela.

Agora, vamos passar 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 é o código que pode ser modificado, interagido, adicionado ou manipulado - tudo sem nunca modificar a base do código principal.

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

Então, vamos precisar fazer algumas mudanças em nosso register_saved_shortcode() método:

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

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

Agora, se os usuários desejam interagir com nosso código, eles podem adicionar algo assim dentro de seu functions.php Arquivo: