Você já quis colocar alguma coisa na barra lateral do seu site que não conseguiu trabalhar com os widgets padrão ou os plugins de terceiros?
Widgets são coisas muito úteis para compartilhar conteúdos relacionados, exibir autores, conteúdo superior e muito mais, e usar os widgets certos pode fazer ou quebrar um site.
Neste artigo, daremos uma olhada em como você pode usar algum código para criar seus próprios widgets. Você precisará de uma compreensão básica de PHP e HTML pelo menos. Se você conhece algum PHP orientado a objetos que será uma vantagem, mas não é necessário entender o processo, como eu vou explicar ao longo do caminho.
Vamos começar.
Nota: Desloque-se para a parte inferior para um plugin totalmente funcional usando o código nesta publicação!
Nosso objetivo
Aprender com o exemplo é o método mais eficaz, então vamos definir uma meta que queremos alcançar. Um widget de conteúdo destacado é um bom lugar para começar. Este widget permite que você especifique um título, adicione algum texto, uma imagem e um link. Esta informação seria apresentada de uma forma agradável na barra lateral.
As capturas de tela abaixo mostram como isso tudo será usado quando usado no novo tema padrão Twenty Fifteen:
Vamos construir o widget sem a capacidade de imagem primeiro porque é um pouco mais simples. Uma vez que descobrimos o resto, adicionaremos a imagem para tornar o widget totalmente funcional.
Criando um Plugin
Você pode adicionar todo o código neste artigo no arquivo functions.php do seu tema, mas um widget realmente é algo que deve residir em um plugin. Criar um é bastante fácil, então vamos começar com isso!
Primeiro, crie uma pasta no seu wp-content/pluginsdiretório e nomeie-a algo único. Estarei usando my-featured-content.
Em seguida, crie o arquivo principal do plugin dentro da pasta. Este deve ter o mesmo nome que a pasta com uma extensão PHP: my-featured-content.php.
Abra o novo arquivo e cole o seguinte comentário PHP. Isso é analisado pelo WordPress e a informação dentro é usada na seção de plugins para listar seu plugin.
| <? Php | |
| / * | |
| Nome do Plugin: Meu Conteúdo Destaque | |
| Versão: 1.0 | |
| Plugin URI: http://danielpataki.com | |
| Descrição: Permite adicionar um item destacado arbitrário à barra lateral. Inclui um título, imagem, descrição e um link. | |
| Autor: Daniel Pataki | |
| Autor URI: http://danielpataki.com/ | |
| * / |
Nesta fase, você possui um plugin totalmente funcional! Não faz nada, mas será listado na seção de plugins e pode ser ativado. Vamos fazer agora.
Os Componentes de um Widget
Criar um widget do WordPress leva quatro etapas. Precisamos inicializar e configurar o widget, enviar um formulário no backend, adicionar quaisquer regras para o processamento do formulário do backend e, finalmente, especificar como o widget se comporta no front-end. Essas etapas se traduzem em funções específicas. Vejamos o quadro geral criando a estrutura do nosso código.
| Add_action (‘widgets_init’, ‘mfc_init’); | |
| Função mfc_init () { | |
| Register_widget (‘mfc_widget’); | |
| } | |
| Classe mfc_widget estende WP_Widget | |
| { | |
| Função pública __construct () | |
| { | |
| // Detalhes básicos do widget | |
| } | |
| Widget de função pública ($ args, $ instance) | |
| { | |
| // Saída de Widget na parte frontal | |
| } | |
| Atualização de função pública ($ new_instance, $ old_instance) { | |
| // Lógica de economia de formulário – se necessário | |
| } | |
| Formulário de função pública ($ instância) { | |
| // Formulário de Backend | |
| } | |
| } |
Observe que estamos criando uma aula que estende a WP_Widgetclasse. Se você não tem idéia do que isso significa, não se preocupe, você não precisa saber nenhum PHP orientado a objetos para criar um bom widget. O que você precisa saber, no entanto, é como inicializar a classe.
Você precisa conectar uma função dentro widgets_inite a partir dessa função, use a register_widget()função para inicializar o widget passando o nome da sua classe.
A parte “mfc” do meu esquema de nomeação refere-se a “Meu Conteúdo Destaque”. Isso é chamado de prefixo de função e serve para criar nomes de funções mais únicos para evitar colisões de nomeação entre diferentes plugins.
Outro tidbit que pode ajudá-lo é o que é um “método” e uma “propriedade”. As funções contidas em uma classe são referidas como métodos. As variáveis definidas dentro de uma classe são chamadas de propriedades. Não há diferença significativa, mas é bom saber para que você não se confunde com a terminologia.
The Widget Constructor
O __construct()método contém algumas informações básicas sobre o widget. A classe base WP_Widgetcuida do levantamento pesado para é. Ao adicionar o código abaixo no construtor, nosso widget será exibido na seção de widgets.
| $ Widget_details = array ( | |
| ‘Classname’ => ‘mfc_widget’, | |
| ‘Description’ => h ‘Cria um item destacado consistindo de um título, imagem, descrição e link.’ | |
| ); | |
| Parent :: __ construct (‘mfc_widget’, ‘Widget do item em destaque’, $ widget_details); |
O formulário de backend
Quando o usuário arrasa nosso widget para a barra lateral, eles receberão um formulário, que é usado para preencher a exibição frontal. No nosso caso, precisamos de campos para: O título, a descrição, o texto do link e o URL do link. Adicionamos a imagem mais tarde.
A versão final do form()método está abaixo. É bastante longo, mas não tem medo – vou explicar tudo por baixo.
| Formulário de função pública ($ instância) | |
| { | |
| $ Title = ”; | |
| Se (! Empty ($ instance [‘title’])) { | |
| $ Title = $ instance [‘title’]; | |
| } | |
| $ Description = ”; | |
| Se (! Empty ($ instance [‘description’])) { | |
| $ Description = $ instance [‘description’]; | |
| } | |
| $ Link_url = ”; | |
| Se (! Vazio ($ instance [‘link_url’])) { | |
| $ Link_url = $ instance [‘link_url’]; | |
| } | |
| $ Link_title = ”; | |
| Se (! Empty ($ instance [‘link_title’])) { | |
| $ Link_title = $ instance [‘link_title’]; | |
| } | |
| ?> | |
| < P > | |
| < Label for = ” <? Php echo $ this -> get_field_name ( ‘ title ‘ ); ? > “ > <? Php _e ( ‘ Título: ‘ ); ? > </ Label > | |
| ? > “ /> | |
| </ P > | |
| < P > | |
| < Label for = ” <? Php echo $ this -> get_field_name ( ‘ description ‘ ); ? > “ > <? Php _e ( ‘ Descrição: ‘ ); ? > </ Label > | |
| ? > </ Textarea > | |
| </ P > | |
| < P > | |
| < Label for = ” <? Php echo $ this -> get_field_name ( ‘ link_url ‘ ); ? > “ > <? Php _e ( ‘ Link URL: ‘ ); ? > </ Label > | |
| ? > “ /> | |
| </ P > | |
| < P > | |
| < Label for = ” <? Php echo $ this -> get_field_name ( ‘ link_title ‘ ); ? > “ > <? Php _e ( ‘ Título do link: ‘ ); ? > </ Label > | |
| ? Php echo esc_attr ( $ link_title ); ? > “ /> | |
| </ P > | |
| <? Php | |
| } |
A única razão pela qual isso é tão longo é que temos quatro campos. Começamos determinando o valor de cada campo. A $instancevariável contém os valores de nossos campos se eles já foram salvos. Para cada campo, criamos um rótulo e um elemento de entrada do usuário usando as funções get_field_name()e get_field_id().
A razão pela qual precisamos dessas funções, em vez de apenas digitar os nomes e ids, é que pode haver várias instâncias do mesmo widget. WordPress usa alguma mágica embutida para gerenciar tudo isso para nós. O nome final do nosso elemento de entrada pode ser widget-mfc_widget[2][link_url]em vez de apenas link. É assim que o WordPress lida com várias áreas de widgets, várias barras laterais e vários widgets.
O resultado desse código deve ser um formulário na seção widgets que você pode usar para preencher os detalhes do widget.
Manipulação de dados do formulário
Usando a update()função, podemos determinar o que acontece nos dados do formulário antes de ser salvo. Na verdade, não precisamos de nada especial, então nossa função final ficará assim:
| Atualização de função pública ($ new_instance, $ old_instance) { | |
| Retornar $ new_instance; | |
| } |
Esta função é útil se quiser fazer algo aos dados do formulário antes de salvá-lo. Um bom exemplo é o widget RSS. Quando você inseriu o URL RSS e salvá-lo, os itens mais recentes são recuperados e armazenados em cache. Você pode usar a função para validar e sanificar URLs, números e outros dados também.
Exibindo o Widget
Finalmente, a widget()função exibe nosso widget. Você pode adicionar qualquer HTML aqui e será exibido na barra lateral.
A função leva dois argumentos: o primeiro contém dados sobre a área do widget em si e o segundo contém as variáveis de instância do nosso widget.
Quando as áreas do widget são configuradas, uma série de parâmetros são definidos. O conteúdo para adicionar antes / depois do widget e antes / depois do título do widget é mais proeminente. Para garantir que seus widgets sejam legais com outros plugins e o WordPress, é uma boa idéia usar o quadro a seguir ao criar plugins:
| Echo $ args [‘before_widget’]; | |
| Se (! Empty ($ instance [‘title’])) { | |
| Echo $ args [‘before_title’]. Apply_filters (‘widget_title’, $ instance [‘title’]). $ Args [‘after_title’]; | |
| } | |
| // Resto do conteúdo do widget | |
| Echo $ args [‘after_widget’]; |
Neste quadro, adicionamos o valor do campo de descrição e o link, que construímos nos campos link_urle link_title, algo assim:
| < Div class = ‘ mfc-description ‘ > | |
| <? Php echo wpautop (esc_html ( $ instance [ ‘ description ‘ ])) ? > | |
| </ Div > | |
| < Div class = ‘ mfc-link ‘ > | |
| < A href = ‘ <? Php echo esc_url ( $ instance [ ‘ LINK_URL ‘ ]) ? > ‘ > <? Php echo esc_html ( $ instance [ ‘ link_title ‘ ]) ? > </ A > | |
| </ Div > |
Não se esqueça de usar funções de escape de cadeias, que servem para proteger os dados antes de serem atendidas ao usuário. Você pode ler mais sobre isso no artigo Validating, Sanitizing and Escaping User Data no WordPress Codex. O resultado do nosso código deve ser o seguinte:
Adicionando uma imagem
Você pode usar uma série de métodos para adicionar uma imagem. No mínimo, isso exigirá alguns JS e CSS, o que significa que teremos que aprender a adicionar esses aos widgets. Usaremos a função de biblioteca de mídia incorporada do WordPress – não há necessidade de reinventar a roda. Se você estiver construindo uma solução personalizada, os métodos de incluir JavaScript e folhas de estilo são quase exatamente os mesmos.
Precisamos enqueue scripts, como faria no front-end ou no administrador do WordPress. As ações para fazer isso devem ser definidas na função de construtor. Vamos adicionar o seguinte:
| Add_action (‘admin_enqueue_scripts’, array ($ this, ‘mfc_assets’)); |
Se você não está familiarizado com o OOP (PHP orientado a objetos), a notação pode confundir você aqui. O segundo parâmetro da add_action()função geralmente é uma string que indica a função que se chama. O mesmo está acontecendo aqui, mas estamos indicando que queremos a mfc_assets()função dentro da nossa classe, e não o escopo global.
O próximo passo é criar a mfc_assets()função dentro da nossa classe e enqueue os scripts e estilos necessários dentro dela.
| Função pública mfc_assets () | |
| { | |
| Wp_enqueue_script (‘media-upload’); | |
| Wp_enqueue_script (‘thickbox’); | |
| Wp_enqueue_script (‘mfc-media-upload’, plugin_dir_url (__ FILE__). ‘Mfc-media-upload.js’, array (‘jquery’)); | |
| Wp_enqueue_style (‘thickbox’); | |
| } |
Acima, enlaçamos os scripts media-uploade thickbox. Estes estão incluídos no WordPress e são os componentes básicos do diálogo de mídia. Nós também mfc-media-upload.jsincluímos nosso próprio arquivo, que é um arquivo de JavaScript muito simples que rege o nosso processo de upload (mais sobre isso em um segundo). Por último, mas não menos thickboximportante , o estilo necessário para a funcionalidade também é enqueued.
O próximo passo é modificar o formulário do backend para adicionar o campo da imagem. Precisamos descobrir o valor do campo de imagem e exibir os controles para ele, como fizemos antes:
| $ Image = ”; | |
| Se (isset ($ instance [‘image’])) | |
| { | |
| $ Image = $ instance [‘image’]; | |
| } | |
| < P > | |
| < Label for = ” <? Php echo $ this -> get_field_name ( ‘ image ‘ ); ? > “ > <? Php _e ( ‘ Imagem: ‘ ); ? > </ Label > | |
| ? Php echo esc_url ( $ image ); ? > “ /> | |
| < Input class = “ upload_image_button “ type = “ button “ value = “ Upload Image “ /> | |
| </ P > |
Observe que isso é muito semelhante, a única adição é uma entrada de botão com a classe de upload_image_button. Nosso Javascript detectará quando este botão for pressionado para que possamos selecionar uma imagem. Crie um novo arquivo no diretório do seu plugin, nomeie-o mfc-media-upload.js. O código que você precisará colar dentro é o seguinte:
| Add_action (‘widgets_init’, ‘mfc_init’); | |
| Função mfc_init () { | |
| Register_widget (‘mfc_widget’); | |
| } | |
| Classe mfc_widget estende WP_Widget | |
| { | |
| Função pública __construct () | |
| { | |
| // Detalhes básicos do widget | |
| } | |
| Widget de função pública ($ args, $ instance) | |
| { | |
| // Saída de Widget na parte frontal | |
| } | |
| Atualização de função pública ($ new_instance, $ old_instance) { | |
| // Lógica de economia de formulário – se necessário | |
| } | |
| Formulário de função pública ($ instância) { | |
| // Formulário de Backend | |
| } | |
| } |
Este bit de código abrirá a tela do carregador de mídia quando você clicar no botão. Uma vez que você escolheu uma imagem, levará o URL da imagem e colocá-lo no elemento de entrada para que ele possa ser salvo. Para mais informações sobre isso, leia o tutorial de Paul Underwood sobre como adicionar um carregador de imagens ao seu plugin.
Finalmente, precisamos usar o valor do nosso campo de imagem para exibir uma imagem no front-end. Eu adicionei o meu acima da descrição como esta:
| < P > | |
| < Img src = ‘ <? Php echo $ instance [ ‘ image ‘ ] ? > ‘ > | |
| </ P > |
O resultado final deve parecer algo como a captura de tela abaixo:
Conclusão
Como você pode ver, criar um plugin leva um pouco de trabalho, mas uma vez que você obtém o jeito, ele só demorará 15-20 minutos para produzir um simples como este. Pode adicionar muito poder e controle para um usuário em um site, para não mencionar o estresse que pode tirar os ombros de um desenvolvedor – o cliente pode gerenciar a barra lateral.
O que você usa pode ver neste plugin? Existe uma maneira de usá-lo em seu site? Deixe-me saber nos comentários abaixo.
