Como criar um plugin de widget para WordPress

O WordPress é um incrível sistema de gerenciamento de conteúdo com muitos recursos excelentes, como widgets. Neste tutorial, explicarei como criar seus próprios widgets em um pequeno plug-in. Esta postagem abordará alguns pontos extras que você precisa entender antes de criar o próprio widget. Aqui vamos nós!


Etapa 1: crie seu plug-in de widget

Recentemente, criei um plugin chamado “Freelancer Widgets Bundle”, e algumas pessoas me perguntaram como criar um plug-in, então decidi escrever este post. O primeiro passo é a criação do plugin. E como você verá, não é a parte mais difícil. Um plug-in é um código extra adicionado ao WordPress depois que você o ativa. O WordPress cria um loop através de uma pasta para recuperar todos os plugins disponíveis e listá-los no back office. Para criar seu plug-in, você precisará de um editor como Coda (Mac) ou Dreamweaver (PC e Mac). Eu recomendo que você crie seu plug-in em uma instalação local do WordPress. Torná-lo em um servidor ativo pode causar alguns problemas se você cometer um erro. Então, por favor, espere para testar nosso plugin antes de colocar sua hospedagem.

Abra agora a pasta wp-content / plugins. É aqui que você adicionará seu plugin. Crie um novo diretório e chame-o de “widget-plugin” (na verdade, esse nome pode ser o que você quiser). Mesmo que nosso plug-in tenha apenas um arquivo, é sempre melhor usar uma pasta para cada plug-in. No seu diretório, crie um novo arquivo chamado “widget-plugin.php” (esse nome também pode ser alterado) e abra-o. Agora estamos prestes a adicionar nossas primeiras linhas de código. A definição de um plugin no WordPress segue algumas regras que você pode ler aqui no codex. Aqui está como o WordPress define um plugin:

Portanto, precisamos modificar esse código para ajustá-lo às nossas necessidades:

Salve seu arquivo. Ao adicionar apenas código ao nosso arquivo widget-plugin.php, criamos um plugin! Bem, por enquanto o plug-in não faz nada, mas o WordPress o reconhece. Para garantir que seja esse o caso, vá à sua administração e vá ao menu "Plugins". Se o seu plug-in aparecer na lista de plug-ins, você é bom; caso contrário, siga as minhas instruções e tente novamente. Agora você pode ativar o plugin.

Etapa 2: criar o widget

Agora vamos criar o próprio widget. Este widget será uma classe PHP que estende a classe principal do WordPress WP_Widget. Basicamente, nosso widget será definido desta maneira:

// A classe do widget
classe My_Custom_Widget estende WP_Widget {

// Construtor principal
função pública __construct () {
/ * ... * /
}

// O formulário do widget (para o back-end)
formulário de função pública ($ instance) {
/ * ... * /
}

// Atualizar configurações do widget
atualização da função pública ($ new_instance, $ old_instance) {
/ * ... * /
}

// Exibe o widget
widget de função pública ($ args, $ instance) {
/ * ... * /
}

}

// Registre o widget
função my_register_custom_widget () {
register_widget ('My_Custom_Widget');
}
add_action ('widgets_init', 'my_register_custom_widget');

Esse código fornece ao WordPress todas as informações que o sistema precisa para poder usar o widget:

  1. o construtor, para iniciar o widget
  2. função form () para criar o formulário do widget na administração
  3. o função update (), salvar dados do widget durante a edição
  4. E a função widget () para exibir o conteúdo do widget no front-end

1 - O construtor

O construtor é a parte do código que define o nome do widget e os principais argumentos; abaixo, um exemplo de como ele pode ser.

// Construtor principal
função pública __construct () {
parent :: __ construct (
'my_custom_widget',
__ ('Meu widget personalizado', 'domínio_de_texto'),
matriz (
'customize_selective_refresh' => true,
)
);
}

Por favor, não use __ () ao redor do nome do widget, esta função é usada pelo WordPress para tradução. Eu realmente recomendo que você sempre use essas funções, para tornar seu tema totalmente traduzível. E o uso do parâmetro "customize_selective_refresh" permite que o widget seja atualizado em Aparência> Personalizar ao editar o widget, portanto, em vez de atualizar a página inteira, apenas o widget é atualizado ao fazer alterações.

2 - A função form ()

Essa função é a que cria as configurações do formulário do widget na área de administração do WordPress (em Aparência> Widgets ou Aparência> Personalizar> Widgets). É aqui que você insere seus dados para serem exibidos no site. Explicarei como você pode adicionar campos de texto, áreas de texto, caixas de seleção e caixas de seleção às configurações do formulário do widget.

// O formulário do widget (para o back-end)
formulário de função pública ($ instance) {

// Definir padrões do widget
$ padrões = matriz (
'title' => '',
'texto' => '',
'textarea' => '',
'caixa de seleção' => '',
'selecionar' => '',
);

// Analisar as configurações atuais com os padrões
extrair (wp_parse_args ((matriz) $ instance, $ defaults)); ?>


/>

Este código está simplesmente adicionando 5 campos ao widget (título, texto, área de texto, marque e caixa de seleção). Então, primeiro você define os padrões para o seu widget e, em seguida, a próxima função analisa as configurações atuais definidas / salvas para o seu widget com os padrões (para que todas as configurações que não existem voltem ao padrão, como quando você adiciona um widget ao sua barra lateral). E por último é o html para cada campo. Observe o uso de esc_attr () ao adicionar os campos do formulário, isso é feito por razões de segurança. Sempre que você repetir uma variável definida pelo usuário em seu site, verifique se ela é higienizada primeiro.

3 - A função update ()

A função update () é realmente simples. Como os principais desenvolvedores do WordPress adicionaram uma API de widgets realmente poderosa, precisamos adicionar este código apenas para atualizar cada campo:

// Atualizar configurações do widget
atualização da função pública ($ new_instance, $ old_instance) {
$ instance = $ old_instance;
$ instance ['title'] = isset ($ nova_instância ['title'])? wp_strip_all_tags ($ new_instance ['title']): '';
$ instance ['text'] = isset ($ nova_instância ['text'])? wp_strip_all_tags ($ new_instance ['text']): '';
$ instance ['textarea'] = isset ($ nova_instância ['textarea'])? wp_kses_post ($ new_instance ['textarea'])): '';
$ instance ['checkbox'] = isset ($ new_instance ['checkbox'])? 1: falso;
$ instance ['select'] = isset ($ nova_instância ['select'])? wp_strip_all_tags ($ new_instance ['select']): '';
return $ instance;
}

Como você pode ver, tudo o que precisamos fazer é verificar cada configuração e, se não estiver vazia, salve-a no banco de dados. Observe o uso das funções wp_strip_all_tags () e wp_kses_post (); elas são usadas para limpar os dados antes de serem adicionados ao banco de dados. Sempre que você estiver inserindo QUALQUER conteúdo enviado por um usuário em um banco de dados, verifique se ele não possui código malicioso. A primeira função wp_strip_all_tags remove tudo, exceto o texto básico, para que você possa usá-lo para qualquer campo em que o valor final seja uma string e a segunda função wp_kses_post () é a mesma função usada para o conteúdo da postagem e remove todas as tags, além de links básicos como HTML. , vãos, divs, imagens etc..

4 - A função widget ()

A função widget () é a que produzirá o conteúdo no site. É o que seus visitantes verão. Essa função pode ser personalizada para incluir classes CSS e tags específicas para combinar perfeitamente com a exibição do seu tema. Aqui está o código (não se pode modificar facilmente esse código para atender às suas necessidades):

// Exibe o widget
widget de função pública ($ args, $ instance) {

extrato ($ args);

// Verifique as opções do widget
$ title = isset ($ instance ['title'])? apply_filters ('widget_title', $ instance ['title']): '';
$ text = isset ($ instance ['text'])? $ instance ['text']: '';
$ textarea = isset ($ instance ['textarea'])? $ instance ['textarea']: '';
$ select = isset ($ instance ['select'])? $ instance ['select']: '';
$ checkbox =! vazio ($ instance ['checkbox'])? $ instance ['checkbox']: false;

// Núcleo do WordPress antes do gancho do widget (sempre inclui)
echo $ before_widget;

// Exibe o widget
eco '
'; // Exibe o título do widget, se definido if ($ title) { echo $ before_title. $ title. $ after_title; } // Exibir campo de texto if ($ text) { eco '

' $ text. "

'; } // Exibir campo de área de texto if ($ textarea) { eco '

' $ textarea. "

'; } // Exibir campo de seleção if ($ select) { eco '

' $ select. "

'; } // Exibe algo se a caixa de seleção for verdadeira if ($ checkbox) { eco '

Algo incrível

'; } eco '
'; // Gancho after_widget do núcleo do WordPress (sempre inclui) echo $ after_widget; }

Esse código não é complexo, tudo o que você precisa se lembrar é verificar se uma variável está definida, se você não deseja e se deseja imprimi-la, receberá uma mensagem de erro.

O código completo do plug-in do widget

Agora, se você seguiu corretamente, seu plugin agora deve estar totalmente funcional e você pode personalizá-lo para atender às suas necessidades. Se você não seguiu o guia ou deseja verificar o código novamente, visite a página do Github para ver o código completo.

Ver código completo no Github

Conclusão

Vimos que a criação de um widget dentro de um plug-in é muito interessante, agora você deve saber como criar um plug-in simples contendo um widget com diferentes tipos de campos e aprendeu a ir um pouco mais longe usando técnicas avançadas para personalizar o widget. Parabéns, você fez um trabalho incrível!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map