COMO CODIFICAR SEU PRÓPRIO WIDGET PERSONALIZADO DO WORDPRESS

Você já quis criar um widget personalizado para o seu site WordPress? Enquanto o WordPress inclui um widget de texto incorporado, que você pode usar para exibir HTML juntamente com CSS e JavaScript incorporados, se você quiser fazer algo mais do que o widget de texto, não o cortará.

E se você quiser pegar um pouco de conteúdo no banco de dados do seu site e exibi-lo em um widget? A solução é codificar um widget de barra lateral personalizado. Embora isso possa parecer uma tarefa assustadora, desde que você tenha habilidades básicas de PHP, ele está ao seu alcance.

Então, acompanhe esse tutorial e você aprenderá a criar dois widgets diferentes:

• Um widget simples que exibe o título do widget, o título do site e o slogan do site.
• Um widget um pouco mais complexo que exibe uma lista de todas as categorias ordenadas alfabeticamente e divididas em duas colunas.

Pronto para aprender os conceitos básicos da criação de widgets personalizados do WordPress? Vamos lá.

WordPress Widget Building Basics

Você precisará de três coisas para acompanhar esse tutorial:

• Um ambiente de desenvolvimento do WordPress
• Habilidades básicas de codificação PHP
• Experiência básica de desenvolvimento do WordPress

Tudo o que é preciso é uma única vírgula errada ou uma correia curvada faltante para travar um site do WordPress e, se você é relativamente novo na programação, seu site pode estar desativado por vários minutos ou mais enquanto tenta localizar o código ofensivo. Por esse motivo, você deve ter seu widget funcionando usando um ambiente de desenvolvimento local antes de tentar usá-lo em um site ao vivo.

Se você atender a esses três requisitos básicos, você está pronto para começar a codificar. Vamos lá.

A API de Widgets do WordPress

Você cria um novo widget do WordPress adicionando código a um dos dois lugares:

• Um plugin personalizado, que você deve usar se desejar usar o widget com mais de um tema ou em mais de um site.
• O arquivo functions.php do tema ativo – que deve ser um tema filho ou um tema completamente personalizado.

Apenas por causa do exemplo, você pode encontrar o código completo para o widget da barra lateral simples descrito neste tutorial disponível no GitHub. Se você não tem certeza de onde escrever seu código, ou simplesmente deseja ver o código inteiro ao mesmo tempo, baixe uma cópia desse plugin .

Os widgets do WordPress são criados com um pouco de programação orientada a objetos . A WP_Widgetclasse é estendida para criar cada widget. A WP_Widgetclasse inclui cerca de 20 métodos diferentes. No entanto, para widgets básicos, você só precisa usar quatro deles:

• __construct(): Registra informações básicas de widgets.
• widget(): Contém a saída do widget – o que você realmente vê no front-end do seu site quando o widget é adicionado a uma área de widget.
• form(): Define as configurações do widget exibidas na área de administração do WordPress.
• update(): Atualiza as configurações do widget quando as novas configurações são salvas na área de administração do WordPress.

Além desses quatro métodos, a add_actionfunção é usada para amarrar a função de widget personalizada ao widgets_initgancho.

Exemplo de Widget # 1: Exibe o Título do Widget, o Título do Site e o Lema

A primeira coisa a fazer é estender a WP_Widgetclasse assim:

Nesse caso, o nome da nova função do widget é jpen_Example_Widget. Observe que jpen é simplesmente um prefixo que adiciono a todas as funções personalizadas para evitar conflitos com quaisquer funções em outros plugins, temas ou o núcleo do WordPress. Você pode usar qualquer nome apropriado para o seu widget e adicionar um prefixo se quiser seguir as melhores práticas.

Escreveremos funções usando os quatro métodos mencionados na lista acima e aninhamos todos os quatro dentro da nossa função de widget. Então, no último passo, escreveremos uma função para registrar o widget.

Vamos começar o processo de escrita do __construct()método com o método.

WP_Widget :: __ buildt ()

O __construct()método é usado para atribuir um id, título, nome da classe e descrição ao widget. Veja como funciona a função do construtor para criar nosso primeiro exemplo de widget:

Para entender esta função, comece com a linha que começa com parent::__construct(). O que está acontecendo é que esta linha cria um novo widget com o id 'example-widget', o nome 'Example Widget'e duas opções de widget: um nome de classe e uma breve descrição.

Todo esse código vai dentro jpen_Example_Widgete é usado para registrar o widget com o WordPress e depois exibir o título e a descrição do widget na área de administração.

WP_Widget :: widget ()

O próximo passo é usar o widget()método para definir a saída do widget que será exibida no front-end do site.

O widget()que é contém o código que gera o conteúdo real exibido pelo seu widget. O conteúdo de widget()poderia ser praticamente qualquer coisa, mas geralmente incluirá algum PHP. Caso contrário, você usaria apenas o widget de texto incorporado no WordPress.

No nosso caso, vamos dar aos usuários a opção de exibir um título de widget personalizado. Então, precisamos pegar esse título e usar get_bloginfo()para exibir o título e o slogan do blog. Aqui está o código que usamos para fazer isso:

Há algumas coisas acontecendo naquela função que você vai querer aproveitar o tempo para entender:

• $args[]: Esta variável carrega uma matriz de argumentos que podem ser usados ao criar a saída do widget . Os valores contidos $argssão definidos pelo tema ativo quando a região da barra lateral está registrada.
• $instance[]: Esta variável carrega valores associados à instância atual do widget. Se você adicionou um widget à barra lateral duas vezes, cada um $instancemanteria os valores específicos para cada instância do widget.
• widget_title filter: Retorna o título da instância do widget atual.
• get_bloginfo(): Uma função que pode ser usada para retornar todo tipo de metadados sobre um site do WordPress, incluindo o nome do site e o slogan.

Depois de definir algumas variáveis usando as informações na lista acima, o código passa a produzir a saída real, que consiste em informações do $argstítulo e do nome do site e do slogan.

Note-se que praticamente todos os widget deve incluir os 'before_widget', 'after_widget', 'before_title', e 'after_title'argumentos. Eles são necessários para garantir que cada widget esteja aninhado dentro das tags HTML específicas do tema.

Todo o widget()método deve ser aninhado dentro de jpen_Example_Widget.

WP_Widget :: form ()

O form()método é usado para adicionar campos de configuração ao widget que será exibido na área de administração do WordPress.

Widgets que incluem muitas opções serão bastante complexos neste departamento. No entanto, no caso do nosso widget de exemplo, tudo o que queremos fazer é permitir aos usuários atribuir ao widget um título personalizado. Então, as coisas são bastante simples.

Esta função retorna os valores atuais desta instância particular do widget, chamando o $instanceparâmetro. Em seguida, verificamos as informações da instância atual para ver se o título está vazio. Se não estiver, mostramos o título atual.

Em seguida, o rótulo e os elementos de entrada aninhados dentro das tags de parágrafo criam um campo de entrada rotulado para que o usuário adicione um novo título.

Com este bit de código adicionado jpen_Example_Widget, as configurações do widget ficarão assim:

WP_Widget :: update ()

O próximo passo é atualizar as informações no banco de dados do WordPress usando o update()método.

Este método leva dois parâmetros: $new_instancee $old_instance. O primeiro contém os valores adicionados ao formulário de configuração do widget. O segundo contém as configurações existentes – se existir.

O update()método deve validar as novas configurações conforme apropriado e depois atribuí-las à $instancevariável e retornar essa variável atualizada . Se isso parecer um pouco complexo, o exemplo a seguir deve esclarecer as coisas.

No caso do nosso widget de exemplo, tudo o que estamos fazendo é atualizar o título. Então, tudo o que precisamos fazer é:

1. Pegue o título da nova instância,
2. Retire todas as tags HTML ou PHP que possam ter adicionado ao título do widget,
3. Atribua esse título à instância, e
4. Retorna a instância atualizada.

Registre o Widget

A etapa final no processo é registrar o widget usando a add_actionfunção e o widget_initgancho. Veja como fazer isso:

Primeiro, criamos uma função para registrar o widget e usar o nome do objeto do widget para identificá-lo. Em seguida, amarramos a função de registro para o WordPress usando o widgets_initgancho e o nome da nossa função de registro.

Este bit de código é adicionado fora de jpen_Example_Widget. Quando é chamado, ele irá abrir o widget com o nome apropriado, jpen_Example_Widgetneste caso, e executar todo o código contido no widget.

Com este último bit de código, podemos adicionar nosso widget a uma barra lateral, configurá-lo ao nosso gosto e exibir o título e o slogan do site na barra lateral, assim:

Example Widget # 2: exibe categorias em duas colunas

Pouco tempo atrás, escrevi um tutorial explicando como você pode transformar qualquer modelo HTML5 em um tema do WordPress . No entanto, o que eu não fiz nesse tutorial é recriar qualquer um dos widgets da barra lateral incluídos no modelo. Então, nosso segundo widget de exemplo será o widget da barra lateral da lista de categorias do modelo HTML5 do Blog Postário por Iniciar o Bootstrap .

Veja como o widget da barra lateral está no modelo original HTML5:

Recriar este widget exige um código um pouco mais do que o nosso exemplo simples, mas, na realidade, não é muito complexo. Por uma questão de fato, os _construct(), form()e update()funções são basicamente inalterado. A única diferença real entre este widget e nosso exemplo anterior é que o widget()método de saída inclui um pouco mais de código.

A razão para isso é que, para criar o conteúdo do widget, precisamos gerar uma lista de todas as categorias, classificar a lista em ordem alfabética e, em seguida, organizar as categorias em duas colunas. Embora existam várias maneiras, isso pode ser realizado, aqui está uma maneira de fazer o trabalho.

Para iniciantes, criei a widget()função:

	<? Php
	Widget de função ( $ args , $ instance ) {
	// Toda a saída do widget irá aqui
	}
	? >

Veja owidget raw() function.php hospedado com ❤ by GitHub

Em seguida, criei algumas variáveis:

	<? Php
	$ Title = apply_filters ( ‘ widget_title ‘ , $ instance [ ‘ title ‘ ]);
	$ Categories = get_categories ( array (
	‘ Orderby ‘ => ‘ nome ‘ ,
	‘ Order ‘ => ‘ ASC ‘
	));
	$ Cat_count = 0 ;
	$ Cat_col_one = [];
	$ Cat_col_two = [];
	? >

Veja asvariáveis de widget () raw.php hospedado com ❤ by GitHub

As variáveis título e categoria são bastante auto-explicativas. Eles mantêm o título do widget e uma lista de todas as categorias.

A $cat_countvariável será usada para acompanhar o número total de categorias para que possamos classificá-las em duas listas. As duas variáveis da coluna, $cat_col_onee $cat_col_twoserão usadas para dividir as categorias em duas colunas.

Em seguida, vem a função que itera através de todas as categorias e as divide em duas colunas.

	<? Php
	foreach ( $ categorias como $ category ) {
	$ Cat_count ++ ;
	$ Category_link = sprintf (
	‘ <Li class = “list-unstyled”> <a href=”%1$s” alt=”%2$s”>% 3 $ s </a> </ li> ‘ ,
	Esc_url (get_category_link ( $ category -> term_id )),
	Esc_attr ( sprintf (__ ( ‘ Ver todas as postagens em% s ‘ , ‘ textdomain ‘ ), $ category -> name )),
	Esc_html ( $ category -> name )
	);
	Se ( $ cat_count % 2 ! = 0 ) {
	$ Cat_col_one [] = $ category_link ;
	} Else {
	$ Cat_col_two [] = $ category_link ;
	}
	}
	? >

Veja rawforeach ($ categorias como $ category) .php hospedado com ❤ por GitHub

Para cada categoria, a $cat_countvariável itera e a $category_linké criada. Então, com base na corrente $cat_count– seja igual ou ímpar -, $category_variableé adicionado à coluna uma ou a variável da coluna dois.

Além disso, esse código também inclui cada categoria em um item de lista com uma classe "list-unstyled"para coincidir com as classes e o HTML usado no modelo original.

Finalmente, precisamos realmente imprimir $cat_col_onee $cat_col_tworenderizar a lista de categorias:

	<? Php
	Echo $ args [ ‘ before_widget ‘ ] . $ Args [ ‘ before_title ‘ ] . $ Título . $ Args [ ‘ after_title ‘ ]; ? >
	< Div class = “ row “ >
	< Div class = “ col-lg-6 “ > <? Php
	foreach ( $ cat_col_one como $ cat_one ) {
	Echo $ cat_one ;
	} ? >
	</ Div >
	< Div class = “ col-lg-6 “ > <? Php
	foreach ( $ cat_col_two como $ cat_two ) {
	Echo $ cat_two ;
	} ? >
	</ Div >
	</ Div > <? Php
	Echo $ args [ ‘ after_widget ‘ ];
	? >

Vejaecho $ $ args e content.php hospedados com ❤ por GitHub

Esse código itera através de cada uma das variáveis de coluna da categoria e imprime cada lista de categorias em uma div. As classes e a estrutura HTML atribuídas ao widget espelham as classes e estrutura incluídas no modelo original para garantir que o estilo incluído nos recursos CSS do modelo original seja aplicado corretamente ao novo widget.

Veja como o widget da barra lateral parecia a conclusão. Se você dar uma olhada na versão original no modelo na imagem acima, você verá que é uma combinação perfeita!

Se você quiser ver o código completo que cria esse widget da barra lateral, procure a instânciajpen_Category_List_Widget da WP_Widgetclasse no arquivofunctions.php do Tema do Blog Simples no GitHub.

Criando seu próprio widget personalizado

Criar um widget de barra lateral personalizado envolve trabalhar com a WP_Widgetclasse bastante complexa . Embora pareça um pouco assustador, a boa notícia é que você pode reduzir o processo para cinco etapas:

1. Use __construct()para definir as informações básicas do widget.
2. Use widget()para definir a saída do widget.
3. Use form()para criar o menu de configurações do administrador.
4. Use update()para atualizar as configurações do widget.
5. Use add_action()para amarrar o objeto do widget ao gancho apropriado.

Ao criar um widget personalizado pode ser um pouco complexo, há um conhecimento relativamente estreito de conhecimento que você precisa para dominar para criar widgets personalizados poderosos. Enrole sua cabeça em torno dessas cinco funções e você poderá transformar praticamente qualquer idéia de que você possa surgir em um widget do WordPress.