Você já tentou encontrar uma funcionalidade para um propósito específico no WordPress, mas não conseguiu encontrar um plugin ou widget que faz o trabalho? Este post mostra como você pode criar um widget do WordPress, mesmo que você tenha conhecimento limitado de codificação.

Os Widgets do WordPress são blocos de código – estáticos, dinâmicos ou uma combinação de ambos – que podem ser adicionados a qualquer área específica do seu site WordPress. Existem muitos widgets embutidos no WordPress – como nuvem de tags e categorias – mas este post ajuda você a criar um widget do zero em um curto espaço de tempo. Provavelmente, você demorará mais para terminar de ler este artigo do que para criar o widget depois de obter o conhecimento!

Para fins de ilustração, estamos analisando a criação de um widget com conteúdo dinâmico na forma de dados em tempo real de partidas de críquete. O objetivo da criação de conteúdo dinâmico é familiarizá-lo com várias funções associadas aos widgets do WordPress.

Pré-requisitos

Antes de iniciar qualquer código, certifique-se de fazer o backup do seu código do WordPress, pois você pode acabar com uma tela branca da morte. Como alternativa, você pode querer explorar o controle de versão do WordPress com o Git.

Além disso, é recomendável que você tenha algum conhecimento de OOP no PHP antes de tentar criar um widget.

Este tutorial foi criado no WordPress versão 4.9.8.

Onde colocar o código?

Antes de discutirmos as nuances do desenvolvimento de um widget do WordPress, vamos considerar onde manter o código. A resposta para isso está no propósito de desenvolver o widget. Caso você queira que o widget apareça apenas em um tema específico, é possível colocar o código no arquivo functions.php do tema. No entanto, isso torna o widget acessível apenas se o tema estiver ativo.

Este tutorial se concentra na criação de um widget que pode ser acessado em todos os temas do seu site. Assim, criamos um novo plug-in, que hospeda o widget que mostra uma lista de partidas de críquete ao vivo de uma API.

Noções básicas de desenvolvimento de widgets

Para criar um widget no WordPress, você precisa estender a classe WP_Widget. Dentro da sua classe widget, você pode criar uma lista de funções:

a função de construtor
a função widget para exibir o conteúdo do widget
a função de formulário, se você precisa definir um formulário que leva a entrada
a função de atualização se você precisar atualizar as configurações do widget.
No exemplo de exibição de feeds de críquete, precisamos definir apenas as duas primeiras funções. Além disso, depois de criarmos a classe widget, precisamos registrá-la com a função register_widget.

Vamos agora passar para a criação de um plugin básico no WordPress e, em seguida, usar uma API para gerar conteúdo dinâmico. Antes de criar o widget, um plug-in vazio precisa ser criado. Vá para o / wp-content / plugins / e crie um novo diretório com o slug do nome do seu plugin. Dentro desse diretório, crie um arquivo index.php com o seguinte conteúdo.

Este é essencialmente um arquivo PHP em branco com comentários, como sugerido na página do WordPress Codex sobre como criar um novo plugin. Estes comentários são lidos pelo WordPress ao exibir informações sobre o plugin no WP Admin.

Depois de criar o plug-in vazio com comentários, você poderá ver que seu plug-in está ativo na lista de plug-ins do WP Admin. Ative o plugin antes de prosseguir.

A próxima etapa é criar um código de amostra do widget. Como discutido anteriormente, estaríamos estendendo a classe WP_Widget. Depois de definir a turma, registramos o widget usando o método register_widget:

class My_Custom_Widget extends WP_Widget {

public function __construct() {
}

public function widget( $args, $instance ) {
// Define the widget
}
}
// Register the widget
function my_register_custom_widget() {
register_widget( ‘My_Custom_Widget’ );
}
add_action( ‘widgets_init’, ‘my_register_custom_widget’ );

Agora que o código do nosso esqueleto está pronto, vamos preencher as funções do construtor e do widget:

public function __construct() {
// Define the constructor

$options = array(
‘classname’ => ‘custom_livescore_widget’,
‘description’ => ‘A live score widget’,
);

parent::__construct(
‘live_score_widget’, ‘Live Score Widget’, $options
);
}

O construtor pode ser estendido do construtor pai. Nas opções, também podemos fornecer uma classe CSS que é adicionada a todo o elemento do widget no HTML DOM durante a exibição. Em seguida, vamos definir as opções de exibição do widget:

public function widget( $args, $instance ) {
// Keep this line
echo $args[‘before_widget’];

echo $args[‘before_title’] . apply_filters( ‘widget_title’, ‘Live Criket Matches’ ) . $args[‘after_title’];
echo ‘Hello, World!’;

// Keep this line
echo $args[‘after_widget’];
}

Na classe de widget, definimos o que precisa ser exibido no widget. Primeiro, adicionamos um título de widget, “Live Cricket Matches” e, em seguida, um simples “Hello, World!”

Depois que o código for salvo, vamos voltar para Appearance> Widgets no WP Admin e adicionar o widget recém-criado a uma parte da página.

Depois de adicionar o widget, você pode atualizar sua página inicial e verificar se o widget apareceu.

Você pode perceber que a classe na qual definimos o widget foi adicionada ao elemento do widget. Você pode alterar o estilo do widget, se necessário. Se você estiver interessado, confira este tutorial sobre como personalizar o estilo de um tema do WordPress.

Rafael Sartori é fundador da ZionLab, empresário de tecnologia, internet e comunicação e hoje é um dos maiores especialistas em growth hacking no Brasil.

Responder