Como criar um widget personalizado do WordPress (passo a passo)

Os widgets permitem que você adicione elementos que não sejam de conteúdo a uma barra lateral ou a qualquer área pronta para widgets em seu site WordPress. Você pode usá-los para adicionar banners, anúncios, formulários de inscrição em boletins informativos e outros elementos ao seu site.

Você também pode criar um widget personalizado para incorporar funções exclusivas com um toque personalizado, como feeds de mídia social, publicações recentes ou tags HTML.

No WPBeginner, usamos widgets personalizados para exibir diferentes tipos de conteúdo na barra lateral de nosso site. Neste artigo, mostraremos a você como criar um widget personalizado do WordPress, passo a passo.

Observação: este tutorial é para usuários de WordPress DIY que estão aprendendo a desenvolver e codificar o WordPress.

O que é um widget do WordPress?

Os widgets do WordPress contêm partes de código que você pode adicionar às barras laterais do seu site ou às áreas prontas para widgets.

Pense neles como módulos que você pode usar para adicionar diferentes elementos e recursos ao seu site.

Por padrão, o WordPress vem com um conjunto padrão de widgets que você pode usar com qualquer tema do WordPress. Para obter mais detalhes, consulte nosso guia para iniciantes sobre como adicionar e usar widgets no WordPress.

O WordPress também permite que os desenvolvedores criem seus próprios widgets personalizados.

Muitos temas e plug-ins premium do WordPress vêm com seus próprios widgets personalizados que você pode adicionar às barras laterais.

Por exemplo, você pode adicionar um formulário de contato, um formulário de login personalizado, uma galeria de fotos, um formulário de inscrição em uma lista de e-mail e muito mais a uma barra lateral sem escrever nenhum código.

Dito isso, vamos ver como você pode criar facilmente seus próprios widgets personalizados no WordPress.

Antes de criar um widget personalizado no WordPress

Se estiver aprendendo a programar o WordPress, precisará de um ambiente de desenvolvimento local. Isso lhe dá a liberdade de aprender e testar coisas sem a preocupação de seu site estar ativo.

Você pode instalar o WordPress localmente no Mac usando o MAMP ou no Windows usando o WAMP.

Se você já tiver um site ativo, poderá movê-lo para um host local. Para obter mais detalhes, consulte nosso guia sobre como mover um site WordPress ativo para um servidor local.

Depois disso, há várias maneiras de adicionar seu código de widget personalizado no WordPress.

O ideal é criar um plug-in específico para o site e colar o código do widget nele. Isso permite que você adicione código ao WordPress que não dependa do seu tema do WordPress.

Você também pode colar o código no arquivo functions.php do seu tema. No entanto, ele só estará disponível quando esse tema específico estiver ativo.

Outra ferramenta que você pode usar é o plug-in WPCode, que permite adicionar facilmente códigos personalizados ao seu site.

Neste tutorial, criaremos um widget simples que apenas cumprimenta os visitantes. O objetivo aqui é familiarizar-se com a classe de widget do WordPress.

Pronto? Vamos começar.

Criação de um widget básico do WordPress

O WordPress vem com uma classe integrada de widget do WordPress. Cada novo widget do WordPress estende a classe de widget do WordPress.

Há 19 métodos mencionados no manual do desenvolvedor do WordPress que podem ser usados com a classe WP Widget.

No entanto, para fins deste tutorial, vamos nos concentrar nos seguintes métodos.

• __construct() : Esta é a parte em que criamos o ID, o título e a descrição do widget.
• widget : É aqui que definimos a saída gerada pelo widget.
• formulário : Essa parte do código é onde criamos o formulário com opções de widget para o backend.
• atualização: Esta é a parte em que salvamos as opções do widget no banco de dados.

Para criar um widget personalizado, você pode copiar e colar o seguinte trecho de código em seu arquivo functions.php ou no WPCode (recomendado):

<?php

// Creating the widget
class wpb_widget extends WP_Widget {
	function __construct() {
		parent::__construct(
		// Base ID of your widget
			'wpb_widget',

			// Widget name will appear in UI
			__( 'WPBeginner Widget', 'textdomain' ),

			// Widget description
			[
				'description' => __( 'Sample widget based on WPBeginner Tutorial', 'textdomain' ),
			]
		);
	}

	// Creating widget front-end
	public function widget( $args, $instance ) {
		$title = apply_filters( 'widget_title', $instance['title'] );

		// before and after widget arguments are defined by themes
		echo $args['before_widget'];
		if ( ! empty( $title ) ) {
			echo $args['before_title'] . $title . $args['after_title'];
		}

		// This is where you run the code and display the output
		echo __( 'Hello, World!', 'textdomain' );
		echo $args['after_widget'];
	}

	// Widget Settings Form
	public function form( $instance ) {
		if ( isset( $instance['title'] ) ) {
			$title = $instance['title'];
		} else {
			$title = __( 'New title', 'textdomain' );
		}

		// Widget admin form
		?>
        <p>
            <label for="<?php echo $this->get_field_id( 'title' ); ?>">
				<?php _e( 'Title:', 'textdomain' ); ?>
            </label>
            <input
                    class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>"
                    name="<?php echo $this->get_field_name( 'title' ); ?>"
                    type="text"
                    value="<?php echo esc_attr( $title ); ?>"
            />
        </p>
		<?php
	}

	// Updating widget replacing old instances with new
	public function update( $new_instance, $old_instance ) {
		$instance          = array();
		$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';

		return $instance;
	}

	// Class wpb_widget ends here
}

// Register and load the widget
function wpb_load_widget() {
	register_widget( 'wpb_widget' );
}

add_action( 'widgets_init', 'wpb_load_widget' );

A maneira mais fácil de adicionar código personalizado ao seu site WordPress é usar o WPCode. Ele é o melhor plug-in de snippet de código que ajuda a gerenciar e inserir snippets de código em seu site sem correr o risco de quebrar nada.

Primeiro, você precisará instalar e ativar o plug-in WPCode em seu site. Se precisar de ajuda, consulte nosso guia sobre como instalar um plug-in do WordPress.

Após a ativação, você pode acessar Code Snippets ” + Add Snippet no painel de administração do WordPress. A partir daí, selecione a opção “Add Your Custom Code (New Snippet)” (Adicionar seu código personalizado (novo snippet)).

Depois disso, você pode colar o código do widget personalizado na área Code Preview (Visualização de código).

Você também precisará clicar no menu suspenso “Code Type” (Tipo de código) e selecionar a opção “PHP Snippet”.

Em seguida, você pode rolar para baixo e selecionar o método de inserção para seu código.

O WPCode permite que você escolha onde executar o código. Para este tutorial, você pode usar as opções padrão e executá-lo em qualquer lugar.

Feito isso, você pode rolar de volta para a parte superior para salvar o snippet.

Para ativar o snippet, basta clicar no botão de alternância para “Ativo”.

Para saber mais, consulte nosso guia sobre como adicionar código personalizado ao seu site WordPress.

Depois de adicionar o código ao WordPress, você precisa ir até a página Appearance ” Widgets no painel de administração do WordPress.

Em seguida, clique no ícone de adicionar bloco “Plus”, procure por “WPBeginner Widget” e selecione o novo widget.

Esse widget tem apenas um campo de formulário a ser preenchido.

Você pode adicionar seu texto e clicar no botão “Update” (Atualizar) para armazenar suas alterações.

Agora, você pode visitar seu site do WordPress para ver o widget personalizado em ação.

Aqui está um exemplo de como ele se parece em nosso site de demonstração.

Adição de widget personalizado no editor clássico do WordPress

Se você estiver usando o editor de widgets clássico para adicionar novos widgets ao seu site, o processo será semelhante.

Haverá um novo widget chamado “WPBeginner Widget” na lista de widgets disponíveis. Você precisa arrastar e soltar esse widget em sua barra lateral.

Em seguida, insira um título e clique em “Save” (Salvar) para salvar as configurações do widget.

Seu novo widget personalizado agora estará ativo em seu site.

Agora, vamos estudar o código novamente.

Primeiro, registramos o “wpb_widget” e carregamos nosso widget personalizado. Depois disso, definimos o que esse widget faz e como exibir o back-end do widget.

Por fim, definimos como lidar com as alterações feitas no widget.

Agora, há algumas perguntas que você pode querer fazer. Por exemplo, qual é a finalidade do textdomain?

O WordPress usa o ‘gettext’ para lidar com a tradução e a localização. Esse textdomain e _e informam ao ‘gettext’ para disponibilizar uma string para tradução. Para saber mais, consulte nosso guia sobre como encontrar temas do WordPress prontos para tradução.

Se estiver criando um widget personalizado para o seu tema, poderá substituir textdomain pelo domínio de texto do seu tema.

Como alternativa, você pode usar um plug-in de tradução do WordPress para traduzir o WordPress facilmente e criar um site multilíngue do WordPress.

Bônus: Adicione estilos personalizados aos seus widgets do WordPress

Depois de criar um widget do WordPress, você também pode adicionar estilos personalizados a ele. Isso pode melhorar a aparência do seu site, manter a consistência e chamar a atenção para informações importantes.

Para fazer isso, visite a página Appearance ” Widgets e adicione o widget que você deseja personalizar. Agora você verá algumas opções para alterar as cores e a tipografia no painel de blocos à direita.

No entanto, se o widget não exibir essa opção, você poderá personalizá-lo adicionando classes CSS após expandir a guia “Advanced” (Avançado).

Agora, você pode adicionar CSS personalizado ao seu tema do WordPress visando a essa classe CSS específica.

Para isso, vá até a página Aparência ” Personalizar e alterne para a guia CSS adicional. Aqui, você verá uma visualização do seu site com uma caixa para adicionar suas regras de CSS.

Agora você pode usar CSS personalizado para personalizar a aparência do seu widget. Para obter detalhes, consulte nosso tutorial sobre como adicionar estilos personalizados aos seus widgets do WordPress.

Esperamos que este artigo tenha ajudado você a aprender como criar facilmente um widget personalizado do WordPress. Talvez você também queira ver nosso guia sobre como desativar blocos de widgets no WordPress e nosso tutorial sobre como remover widgets inativos no WordPress.

Se você gostou deste artigo, inscreva-se em nosso canal do YouTube para receber tutoriais em vídeo sobre o WordPress. Você também pode nos encontrar no Twitter e no Facebook.