Ir para o conteúdo principal

Como criar um widget personalizado no WordPress

Divi: o tema WordPress mais fácil de usar

Divi: O melhor tema WordPress de todos os tempos!

mais Downloads 600.000Divi é o tema WordPress mais popular do mundo. É completo, fácil de usar e vem com mais de modelos livres 62. [Recomendado]

Você quer criar seus próprios widgets personalizados no WordPress? Os widgets permitem que você arraste e solte itens em qualquer barra lateral ou área de widget pronta para o seu site. Neste artigo, mostraremos como criar facilmente um widget personalizado do WordPress.

O que é um widget WordPress?

Os widgets do WordPress contêm trechos de código que você pode adicionar às barras laterais do seu site ou às áreas compatíveis com widgets. Pense nisso como módulos que você pode usar para adicionar elementos diferentes usando uma simples interface "Arrastar e soltar".

Por padrão, o WordPress vem com um conjunto padrão de widgets que você pode usar com qualquer tema WordPress.

O WordPress também permite que os desenvolvedores criem seus próprios widgets personalizados. Muitos temas e plugins do WordPress vêm com seus próprios widgets personalizados que você pode adicionar às suas barras laterais.

Por exemplo, você pode adicionar um formulário de contato, um formulário de login personalizado ou uma galeria de fotos a uma barra lateral sem escrever nenhum código.

Você está procurando os melhores temas e plugins do WordPress?

Baixe os melhores plugins e temas WordPress no Envato e crie facilmente o seu site. Já mais do que 49.720.000 downloads. [EXCLUSIVO]

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

Como criar um widget personalizado no WordPress

Este tutorial é para pessoas que têm conhecimento de desenvolvimento web.

Antes de começar, talvez você queira criar um plug-in específico no site em que você cola o código do widget para este tutorial.

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

Neste tutorial, criaremos um widget simples que simplesmente cumprimentará os visitantes. Veja este código e cole-o em seu plug-in específico para vê-lo em ação.

// Registre-se e carregar a função Widget wpb_load_widget () {register_widget ( 'wpb_widget'); } Add_action ( 'widgets_init', 'wpb_load_widget'); // Criando o wpb_widget classe Widget estende WP_Widget {function __construct () {parent :: __ construct (// ID Base do seu widget wpb_widget '// nome do widget aparecerá na IU __ (' PCB Widget '' wpb_widget_domain ') // Descrição array widget ( 'description' => __ ( 'Simple widget WordPress', 'wpb_widget_domain'))); } // Criando Widget Widget função pública front-end ($ args, $ instance) {$ title = apply_filters ( 'widget_title' $ instance [ 'title']); // antes e depois-widget argumentos são definidos por temas echo $ args [ 'before_widget']; if (! empty ($ title)) echo $ args [ 'before_title']. $ Título. $ Args [ 'after_title']; // Isto é onde você executar o código e exibir o eco saída __ ( 'widget simples', 'wpb_widget_domain'); echo $ args [ 'after_widget']; } // widget backend forma função pública ($ exemplo) {if (isset ($ exemplo [ 'título'])) {$ title = $ exemplo [ 'título']; } Else {$ title = __ ( 'New título', 'wpb_widget_domain'); ?} // forma de administração Widget> <p> <label for = "<? Php echo $ this-> get_field_id ( 'title');>?"> <_e Php? ( 'Título:'); ?> </ 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 ($ titulo);?> "/> </ p> <? php} // Atualizando instâncias de widget Substituindo antigo com o novo update função pública ($? new_instance, old_instance $) {$ exemplo = matriz (); $ Instância [ 'title'] = (! Empty ($ new_instance [ 'title']))? strip_tags ($ new_instance [ 'title']): ''; retornar $ instance; }} // Classe wpb_widget termina aqui

Depois de adicionar o código, você deve ir para " Appearance> Widgets ". Você vai notar o novo widget " PCB widget Na lista de widgets disponíveis. Você deve arrastar e soltar este widget em uma barra lateral.

Crie facilmente seu site com Elementor

Elementor permite criar facilmente qualquer design de site com uma aparência profissional. Pare de pagar caro pelo que você pode fazer por si mesmo. [Grátis]

Agora, ao visitar seu blog, você verá um widget na barra lateral onde você adicionou o widget em questão.

Agora vamos estudar um pouco esse código.

Primeiro, gravamos " wpb_widget E carregado nosso widget personalizado. Em seguida, definimos o que esse widget faz e como exibi-lo no painel.

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

Agora, há algumas coisas que você pode querer saber. Por exemplo, qual é o propósito wpb_text_domain "?

Crie facilmente sua loja online

Baixe gratuitamente o WooCommerce, os melhores plugins de e-commerce para vender seus produtos físicos e digitais no WordPress. [FREE]

O WordPress usa "gettext" para gerenciar tradução e localização. Então " wpb_text_domain E __E informa ao gettext como recuperar uma string de tradução se ela existir.

Se você criar um widget personalizado para o seu tema, poderá substituir "wpb_text_domain" pelo campo de texto do seu tema.

Isso é tudo para este tutorial, espero que ele permita que você crie widgets personalizados em seu blog WordPress.

Deixe um comentário

Seu endereço de email não será publicado. Campos obrigatórios estão marcados com *

Este site usa Akismet para reduzir indesejados. Saiba mais sobre como seus dados de comentários são usados.

Cool WordPress temas que eu encontrei em
E há mais temas e modelos 50 000 para você escolher!

De volta ao topo
18 ações
ação16
chilrear1
Enregistrer1
Whatsapp