O WordPress pode mais de 40% da Web e grande parte de sua flexibilidade vem de plugins. Os plugins são feixes independentes de PHP, JavaScript e outros ativos que estendem o que o WordPress pode fazer-fortalecendo tudo, desde ajustes simples a recursos de negócios complexos. Se você é um desenvolvedor novo no WordPress, aprender a criar plugins é o gateway para personalizar e dimensionar a plataforma para qualquer necessidade.
Neste guia, você aprenderá os itens essenciais do desenvolvimento do plug -in, configurará um ambiente local usando o WordPress Studio e criará um plug -in de exemplo totalmente funcional. No final, você entenderá a anatomia de um plug -in, como os ganchos funcionam e as práticas recomendadas para um código sustentável e seguro.
Índice
Configurando um ambiente de desenvolvimento local
Antes de escrever uma única linha de código, você precisa de um ambiente local do WordPress. O WordPress Studio é a maneira mais rápida de começar. O Studio é de código aberto, mantido pela Automattic e projetado para o desenvolvimento contínuo do WordPress.
Siga estas etapas:
Etapa 1: Baixe e instale o estúdio
Visite desenvolvedor.wordpress.com/studio e faça o download do instalador para macOS ou Windows.
Etapa 2: Crie seu primeiro site local
Para criar um site local, lance o estúdio e clique Adicionar site. Você verá uma janela simples, onde pode nomear seu novo site. Depois de entrar em um nome e clicar Adicionar siteO Studio configura automaticamente um ambiente completo do WordPress para você – não é necessário o conhecimento da linha de comando. Uma vez concluído, seu novo site aparece na barra lateral do Studio, fornecendo links convenientes para visualizá -lo no seu navegador ou acessar o painel administrativo do WordPress.
Etapa 3: Abra seu site WordPress e sua seção de administrador
Clique no link “Abrir site” para abrir seu site no navegador. Você também pode clicar no botão “WP Admin” no estúdio para acessar o painel do seu site em /wp-admin. Você será efetuado automaticamente como administrador. É aqui que você gerenciará plugins, funcionalidade de teste e configurações.
Etapa 4: Abra o código em seu IDE
O Studio fornece botões convenientes “abertos em …” que detectam seu editor de código instalado (como código visual ou cursor) e permita que você abra seu projeto no seu editor preferido. Você pode configurar seu editor de código padrão nas configurações do Studio. Uma vez aberto no seu editor de código, você terá acesso completo para navegar, editar e depurar os arquivos de instalação do WordPress.
Depois de ter seu ambiente local para o desenvolvimento do WordPress configurado, a execução, Localize a pasta Plugins . Na sua raiz do projeto, navegue para:
wp-content/
└── plugins/
É aqui que todos os plugins vivem. Para construir o seu próprio, crie uma nova pasta (por exemplo, tempo de leitura rápida) e adicione seus arquivos de plug-in. O servidor do Studio reflete instantaneamente as alterações quando você recarregue o site local.
Criando seu primeiro plugin
Todo plug -in inicia como uma pasta com pelo menos um arquivo PHP. Vamos construir um plugin mínimo de “Hello World” para desmistificar o processo.
- Em
wp-content/plugins/crie uma pasta chamadaquick-reading-time. - Dentro dessa pasta, crie um arquivo chamado
quick-reading-time.php.
Sua estrutura de arquivo deve ficar assim:
wp-content/
└── plugins/
└── quick-reading-time/
└── quick-reading-time.php
Adicione o seguinte código a quick-reading-time.php:
Este cabeçalho é um comentário PHP, mas o WordPress o verifica para listar seu plug -in Plugins → plugins instalados. Ative -o – nada acontece ainda (isso é bom; nada está quebrado).
Dica: Cada campo de cabeçalho tem um propósito. Por exemplo, o domínio de texto permite a tradução e a licença é necessária para distribuição no diretório do plug -in. Saiba mais no manual do desenvolvedor de plug -in.
Compreendendo ganchos: ações e filtros
Os plugins do WordPress interagem com eventos principais usando ganchos. Existem dois tipos:
- Ações: Acionado quando o WordPress faz algo (por exemplo, carregando scripts, salvando postagens).
- Filtros: Permita que você modifique os dados antes de serem exibidos ou salvos.
Vamos adicionar um crachá no tempo de leitura usando o the_content filtro:
function qrt_add_reading_time( $content ) {
// Only on single posts in the main loop
if ( ! is_singular( 'post' ) || ! in_the_loop() || ! is_main_query() ) {
return $content;
}
// 1. Strip HTML/shortcodes, count words
$plain = wp_strip_all_tags( strip_shortcodes( get_post()->post_content ) );
$words = str_word_count( $plain );
// 2. Estimate: 200 words per minute
$minutes = max( 1, ceil( $words / 200 ) );
// 3. Build the badge
$badge = sprintf(
'%s
',
esc_attr__( 'Estimated reading time', 'quick-reading-time' ),
/* translators: %s = minutes */
esc_html( sprintf( _n( '%s min read', '%s mins read', $minutes, 'quick-reading-time' ), $minutes ) )
);
return $badge . $content;
}
add_filter( 'the_content', 'qrt_add_reading_time' );
Este trecho adiciona um crachá de tempo de leitura para postar conteúdo usando o the_content filtro. Ele verifica o contexto com is_singular()Assim, in_the_loop()e is_main_query() Para garantir que o crachá apareça apenas em postagens únicas no loop principal.
O código tira html e códigos de curto wp_strip_all_tags() e strip_shortcodes()conta palavras e estima o tempo de leitura. A saída está localizada com esc_attr__() e _n(). A função está registrada com add_filter().
Com este plug -in ativado, cada postagem agora também exibirá o tempo de leitura:
Carregando ativos da maneira WordPress
Para estilizar seu crachá, faça uma folha de estilo usando o wp_enqueue_scripts Ação:
function qrt_enqueue_assets() {
wp_enqueue_style(
'qrt-style',
plugin_dir_url( __FILE__ ) . 'style.css',
array(),
'1.0'
);
}
add_action( 'wp_enqueue_scripts', 'qrt_enqueue_assets' );
Crie a style.css Arquivo na mesma pasta:
.qrt-badge span {
margin: 0 0 1rem;
padding: 0.25rem 0.5rem;
display: inline-block;
background: #f5f5f5;
color: #555;
font-size: 0.85em;
border-radius: 4px;
}
Melhor prática: Somente carregue ativos quando necessário (por exemplo, no front -end ou tipos de postagens específicos) para melhor desempenho.
Com essa alteração, as informações do tempo de leitura em cada post devem ficar assim:
Opcional: Adicionando uma tela de configurações
Para tornar a velocidade média de leitura configurável, vamos adicionar uma página de configurações e conectá -la à lógica do plug -in. Continuaremos o valor de palavras preferidas por minuto (WPM) do usuário na tabela de opções do WordPress e o usará em nosso cálculo do tempo de leitura.
Etapa 1: Registre a configuração
Adicione este código ao seu arquivo de plug -in para registrar uma nova opção e configurar o campo:
// Register the setting during admin_init.
function qrt_register_settings() {
register_setting( 'qrt_settings_group', 'qrt_wpm', array(
'type' => 'integer',
'sanitize_callback' => 'qrt_sanitize_wpm',
'default' => 200,
) );
}
add_action( 'admin_init', 'qrt_register_settings' );
// Sanitize the WPM value.
function qrt_sanitize_wpm( $value ) {
$value = absint( $value );
return ( $value > 0 ) ? $value : 200;
}
Este código registra uma opção de plug-in (qrt_wpm) para palavras por minuto, usando register_setting() no admin_init gancho. O valor é higienizado com um retorno de chamada personalizado usando absint() para garantir que seja um número inteiro positivo.
Etapa 2: adicione a página de configurações
Adicione uma nova página em Configurações no Admin WordPress:
function qrt_register_settings_page() {
add_options_page(
'Quick Reading Time',
'Quick Reading Time',
'manage_options',
'qrt-settings',
'qrt_render_settings_page'
);
}
add_action( 'admin_menu', 'qrt_register_settings_page' );
Este código adiciona uma página de configurações para o seu plug -in no menu “Configurações” do Admin WordPress. Ele usa add_options_page() para registrar a página e conecta a função para admin_menu Então, aparece no painel. O retorno de chamada (qrt_render_settings_page) produzirá o conteúdo da página.
Etapa 3: Renderize a página de configurações
Exiba um formulário para o valor WPM e salve -o usando a API de configurações:
function qrt_render_settings_page() {
if ( ! current_user_can( 'manage_options' ) ) {
return;
}
?>
Esta função renderiza a página Configurações do plug -in, exibindo um formulário para atualizar o valor WPM. Ele verifica as permissões de usuário com current_user_can()produz o formulário usando settings_fields()Assim, do_settings_sections()e recupera o valor salvo com get_option(). O formulário é submetido ao sistema de opções do WordPress para salvar seguras.
Etapa 4: use a configuração na lógica do seu plug -in
Atualize seu cálculo de tempo de leitura para usar o valor WPM salvo:
function qrt_add_reading_time( $content ) {
if ( ! is_singular( 'post' ) || ! in_the_loop() || ! is_main_query() ) {
return $content;
}
$plain = wp_strip_all_tags( strip_shortcodes( get_post()->post_content ) );
$words = str_word_count( $plain );
$wpm = (int) get_option( 'qrt_wpm', 200 );
$minutes = max( 1, ceil( $words / $wpm ) );
$badge = sprintf(
'%s
',
esc_attr__( 'Estimated reading time', 'quick-reading-time' ),
esc_html( sprintf( _n( '%s min read', '%s mins read', $minutes, 'quick-reading-time' ), $minutes ) )
);
return $badge . $content;
}
Esta função adiciona um crachá de tempo de leitura para postar conteúdo. Ele verifica o contexto com is_singular()Assim, in_the_loop()e is_main_query() Para garantir que seja executado apenas em postagens únicas no loop principal. Ele tira html e códigos de curto wp_strip_all_tags() e strip_shortcodes()), conta palavras e recupera o valor do WPM com get_option(). O crachá é emitido com escape e localização adequados usando esc_attr__()Assim, esc_html()e _n()).
Com essas alterações, seu plugin agora fornece uma página de configurações amigáveis em Configurações → Tempo de leitura rápida. Os administradores do site podem definir a velocidade média de leitura para o público, e seu plug -in usará esse valor para calcular e exibir o tempo de leitura estimado para cada postagem.
Código completo do plug -in
Antes de encerrarmos as práticas recomendadas, vamos revisar o código completo para o plug -in “Rick Reading Time” que você construiu neste guia. Esta seção reúne todos os conceitos abordados – cabeçalhos, ganchos, carregamento de ativos e configurações – em um exemplo único e coeso. A revisão do código completo ajuda a solidificar sua compreensão e fornece uma referência para seus próprios projetos.
Nesta fase, você deve ter uma pasta chamada quick-reading-time dentro do seu wp-content/plugins/ diretório e um arquivo chamado quick-reading-time.php Com o seguinte conteúdo:
'integer',
'sanitize_callback' => 'qrt_sanitize_wpm',
'default' => 200,
) );
}
add_action( 'admin_init', 'qrt_register_settings' );
// Sanitize the WPM value.
function qrt_sanitize_wpm( $value ) {
$value = absint( $value );
return ( $value > 0 ) ? $value : 200;
}
// Add a settings page under Settings.
function qrt_register_settings_page() {
add_options_page(
'Quick Reading Time',
'Quick Reading Time',
'manage_options',
'qrt-settings',
'qrt_render_settings_page'
);
}
add_action( 'admin_menu', 'qrt_register_settings_page' );
// Render the settings page.
function qrt_render_settings_page() {
if ( ! current_user_can( 'manage_options' ) ) {
return;
}
?>
post_content ) );
$words = str_word_count( $plain );
$wpm = (int) get_option( 'qrt_wpm', 200 );
$minutes = max( 1, ceil( $words / $wpm ) );
$badge = sprintf(
'%s
',
esc_attr__( 'Estimated reading time', 'quick-reading-time' ),
esc_html( sprintf( _n( '%s min read', '%s mins read', $minutes, 'quick-reading-time' ), $minutes ) )
);
return $badge . $content;
}
add_filter( 'the_content', 'qrt_add_reading_time' );
// Enqueue the plugin stylesheet.
function qrt_enqueue_assets() {
wp_enqueue_style(
'qrt-style',
plugin_dir_url( __FILE__ ) . 'style.css',
array(),
'1.0'
);
}
add_action( 'wp_enqueue_scripts', 'qrt_enqueue_assets' );
Você também deve ter um style.css Arquive na mesma pasta com o seguinte conteúdo para estilizar o crachá:
.qrt-badge span {
margin: 0 0 1rem;
padding: 0.25rem 0.5rem;
display: inline-block;
background: #f5f5f5;
color: #555;
font-size: 0.85em;
border-radius: 4px;
}
Este plug -in demonstra vários conceitos fundamentais no desenvolvimento do WordPress:
- Cabeçalho do plug -in: O comentário do bloco na parte superior registra seu plug -in com o WordPress, tornando -o descoberta e gerenciável no painel do administrador.
- Ganchos: O plugin usa as duas ações (
admin_initAssim,admin_menuAssim,wp_enqueue_scripts) e um filtro (the_content) para integrar -se ao WordPress nos momentos certos. - API de configurações: Ao registrar uma opção personalizada e renderizar uma página de configurações, o plug-in permite que os administradores do site configurem a velocidade média de leitura, tornando o recurso flexível e fácil de usar.
- Sanitização e segurança: Toda a entrada do usuário é higienizada e a saída é escapada, seguindo as melhores práticas para evitar vulnerabilidades de segurança.
- Carregamento de ativos: Os estilos são carregados usando o sistema de ENQUEUE do WordPress, garantindo compatibilidade e desempenho.
- Internacionalização: Todas as seqüências de strings voltadas para o uso são envolvidas nas funções de tradução, preparando o plug-in para localização.
Ao reunir esses elementos, você tem uma base de plug -in robusta, sustentável e extensível. Use isso como um modelo para suas próprias idéias e continue explorando o manual do desenvolvedor de plug -in do WordPress para obter um conhecimento mais profundo.
Melhores práticas para desenvolvimento de plug -in
Construir um plug -in do WordPress é mais do que apenas fazer algo funcionar – trata -se de criar código robusto, seguro e sustentável nos próximos anos. À medida que o seu plug -in cresce ou é compartilhado com outras pessoas, as melhores práticas se tornam essenciais para evitar armadilhas que podem levar a bugs, vulnerabilidades de segurança ou problemas de compatibilidade. Os hábitos que você formar no início de sua jornada de desenvolvimento moldarão a qualidade e a reputação do seu trabalho.
Vamos explorar os princípios fundamentais que separam o desenvolvimento profissional de plug -in do WordPress.
- Prefixo tudo (por exemplo, qrt_) para evitar colisões de nome. O WordPress é um espaço para nome global, portanto, prefixos exclusivos para funções, classes e até nomes de opções ajudam a evitar conflitos com outros plugins ou temas.
- Escapar e higienizar Toda a saída e entrada para evitar problemas de XSS e segurança. Sempre valide e limpe os dados antes de salvá -los no banco de dados ou exibi -los no navegador. Use funções como
esc_html()Assim,esc_attr()esanitize_text_field()Para manter seu plugin seguro. - Traduzir strings usando
__()e_n()para localização. A internacionalização (I18N) garante que seu plug -in seja acessível aos usuários em todo o mundo. Enrole todo o texto voltado para o usuário nas funções de tradução e forneça um domínio de texto. - Use o controle da versão (Git) e ajudantes wp-cli (
wp scaffold pluginAssim,wp i18n make-pot). O controle da versão é a sua rede de segurança, permitindo rastrear alterações, colaborar e reverter erros. As ferramentas WP-CLI podem automatizar tarefas repetitivas e aplicar a consistência. - Navio a readme.txt Para o diretório de plug -in e Changelog. Uma leitura bem escrita ajuda os usuários a entender os recursos do seu plug-in, as etapas de instalação e o histórico de atualizações. Também é necessário para a distribuição no wordpress.org.
- Depuração: Habilitar
WP_DEBUGe use ferramentas como Monitor de consulta para solução de problemas. As superfícies proativas de depuração emitem mais cedo, facilitando a corrigindo e melhorando a confiabilidade do seu plug -in. - Siga o Manual do desenvolvedor de plug -in e Padrões de codificação do WordPress. Esses recursos são o padrão -ouro para o desenvolvimento do WordPress, oferecendo orientação sobre tudo, desde o estilo de código até a segurança.
Dica: Adote esses hábitos cedo – a retrofitamento das melhores práticas mais tarde é muito mais difícil. Ao torná -los parte do seu fluxo de trabalho desde o início, você economizará tempo, reduzirá o estresse e criará plugins dos quais você pode se orgulhar.
Próximas etapas e recursos
Agora você tem um plug -in que demonstra os três ganchos “dourados”:
Onde você vai em seguida é com você – TRATE adicionando tipos de postagem personalizados (init), Pontos de extremidade da API REST (rest_api_init), eventos programadosou Gutenberg Blocks (register_block_type). O modelo mental é o mesmo: Encontre o gancho, escreva um retorno de chamada, deixe o WordPress executá -lo.
Sua jornada de plug -in começa aqui
Todo plug -in – seja 40 kb ou 40 MB – inicia com uma pasta, um cabeçalho e um gancho. Domine essa base, e o restante do ecossistema do WordPress se abre. Experimente localmente, mantenha seu código legível e seguro e iterar em pequenos passos. Com a prática, o salto de “Eu gostaria que o WordPress pudesse …” a “WordPress faz” se torna uma segunda natureza.
Pronto para construir seu próprio plugin? Experimente as etapas acima, compartilhe seus resultados nos comentários ou explore tópicos mais avançados em nosso Blog de desenvolvedor. Codificação feliz!
