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]

Voulez-vous créer vos propres widgets personnalisés sur WordPress ?

Les widgets vous permettent de faire glisser et de déposer des éléments dans n’importe quelle barre latérale ou zone de widget prête de votre site web. Dans cet article, nous vous montrerons donc comment créer facilement un widget WordPress personnalisé.

Mas antes, se você nunca instalou o WordPress, descubra Como instalar um blog WordPress em etapas 7 et Como pesquisar, instalar e ativar um tema WordPress em seu blog

Então, voltemos ao porquê de estarmos aqui.

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.

Descubra também nossos melhores temas premium para 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 contacto, um formulário de login personnalisé ou uma galeria de fotos dans une barre latérale sans écrire de code.

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.

Avant de commencer, il serait préférable de créer un plugin spécifique sur le site web où vous collez le code du widget de ce tutoriel.

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. [Grátis]

Vous pouvez également coller le code dans le fichier « functions.php » de votre thème WordPress. Cependant, il ne sera disponible que lorsque ce thème WordPress particulier sera actif.

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.

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

Maintenant étudions un peu ce code.

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.

Maintenant, il y a quelques choses que vous voudrez peut-être savoir. Par exemple, quel est l’objectif « wpb_text_domain "?

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

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

WordPress utilise «gettext» pour gérer la traduction et la localisation. Donc « wpb_text_domain E __E informa ao gettext como recuperar uma string de tradução se ela existir.

Si vous créez un widget personnalisé pour votre thème WordPress, vous pouvez remplacer « wpb_text_domain » par le texte du domaine de votre thème.

Descubra também alguns plugins WordPress premium

Você pode usar outros plugins WordPress para dar uma aparência moderna e otimizar a aderência do seu blog ou site.

Oferecemos a você aqui alguns plugins premium do WordPress que ajudarão você a fazer isso.

1. Galaxy Funder

O Galaxy Funder é um sistema de crowdfunding projetado para qualquer site WooCommerce e rico em recursos. Usando o plug-in WordPress premium Galaxy Funder, você pode gerenciar seu próprio site de crowdfunding ou adicionar campanhas de angariação de fundos no cabeçalho da sua loja online WooCommerce.

Você também pode usar qualquer gateway de pagamento suportado pelo WooCommerce. Observe que o "Galaxy Funder" funciona diretamente na página do e-shop, o que facilita o processo de entrada do usuário.

Download | Demonstração | Web Hosting

2. Clique para WhatsApp Chat

O plug-in WordPress premium O Chat Click to WhatsApp permite que os clientes do WordPress se conectem facilmente ao proprietário do site ou ao suporte ao cliente usando sua conta do WhatsApp.

Basta um clique na conta do WhatsApp e ela será direcionada diretamente para a conta do WhatsApp móvel com uma mensagem padrão. E se o cliente estiver no desktop ou laptop, ele será redirecionado para o WhatsApp Web.

Este plug-in requer o número, a hora e o dia do WhatsApp, que o proprietário do site ou a equipe de suporte usará para conversar. O botão Bate-papo pode ser adicionado à página de detalhes do produto WooCommerce, que está diretamente relacionado a este produto.

Download | Demonstração | Web Hosting

3. Baixar Image Watermark

Esta extensão premium do WordPress permite que você adicione marcas d'água facilmente às suas imagens Fácil Digital Downloads.marca d'água fácil digital de download de arquivo-imagem

Ces marcas d'água peuvent être une image symbole Copyright, un logo da empresaou parte da imagem da marca como uma imagem PNG transparente.

Download | Demonstração | Web Hosting

Crie facilmente sua loja on-line

Faça o download gratuito do WooCommerce, os melhores plugins de comércio eletrônico para vender seus produtos físicos e digitais no WordPress. [Recomendado]

Outros recursos recomendados

Também convidamos você a consultar os recursos abaixo para ir mais longe na aderência e controle do seu site e blog.

Conclusão

Voila ! C’est tout pour ce tutoriel, j’espère qu’il vous permettra de créer des widgets personnalisé sur votre blog WordPress. Se você tem Comentários ou sugestões, não hesite em nos informar na seção reservada.

No entanto, você também poderá consultar nossos Ressources, se você precisar de mais elementos para realizar seus projetos de criação de sites na Internet, consultando nosso guia sobre Criação de blogs WordPress ou aquele em Divi: o melhor tema WordPress de todos os tempos.

Mas enquanto isso, compartilhe este artigo em suas diferentes redes sociais.

...

Este artigo contém comentários 0

Deixe um comentário

Seu endereço de email não será publicado. Os campos obrigatórios são indicados com *

Este site usa o Akismet para reduzir o spam. Saiba mais sobre como seus dados de feedback são usados.

De volta ao topo
10 ações
ação8
chilrear1
Enregistrer1