Widgets tornam o WordPress realmente flexível. Ao adicionar áreas de widget aos seus temas, você permite que os usuários insiram seu próprio conteúdo personalizado sem ter que escrever uma linha de código.
eles são mais comuns em barras laterais e rodapés, onde são frequentemente usados para armazenar widgets como o widget de pesquisa, o widget de Postagens mais recentes ou talvez um menu personalizado. Mas se você adicioná-los à sua página e postar modelos, você os tornará ainda mais poderosos.
você pode adicionar áreas de widget a qualquer arquivo de modelo que desejar. Gosto de adicionar muitos deles aos meus temas, em locais como o cabeçalho, antes e depois da navegação principal e antes e depois do conteúdo. Você pode adicioná-los a uma parte do modelo (como o cabeçalho) que está sendo usada por todas as páginas do seu site ou pode ser mais específico e apenas adicioná-los aos arquivos de modelo para um determinado tipo de conteúdo.
neste post, vou mostrar como fazer exatamente isso. Vou criar um tema filho do tema Twenty Seventeen padrão e, em seguida, dentro desse tema filho, criarei alguns novos arquivos de modelo: um arquivo de modelo de página personalizado, um arquivo de arquivo de categoria e um único arquivo de modelo de postagem.
em cada um deles, vou adicionar uma área de widget específica para esse tipo de conteúdo, para que os usuários só o vejam quando estiverem visualizando uma página usando o modelo de página, um arquivo de categoria ou uma única postagem, respectivamente.
então vamos começar!
Nota: Adicionei o código deste post ao GitHub para que você possa verificar se está trabalhando junto com este tutorial.
configurando o tema filho
vou usar um filho do tema twenty seventeen: se você estiver trabalhando com seu próprio tema, poderá editá-lo diretamente em vez de criar um tema filho. Mas se você estiver usando um tema de terceiros, você deve criar um tema filho. Isso ocorre porque quando você atualiza o tema, todas as alterações feitas nele serão perdidas.
então, em sua pasta wp-content/themes, crie uma nova pasta com o nome do seu tema. Estou chamando meus WPMU-template-widgets. Dentro disso, adicione um estilo.arquivo css e adicione isso a ele:
lembre-se, se você estiver trabalhando com seu próprio tema, poderá pular esta etapa. E se você estiver usando um tema pai diferente, você terá que editar a folha de estilo para refletir isso. Se você não tiver certeza, confira nossa postagem sobre como criar temas filhos.
registrando as áreas do Widget
Antes de podermos adicionar as áreas do widget aos nossos arquivos de modelo, precisamos registrá-los no arquivo de funções do tema. Abra seu arquivo de funções se o tema já tiver um, ou se for um novo tema filho, crie um arquivo chamado funções.pai.Vamos começar adicionando a função vazia para registrar os widgets e conectando-a ao gancho widgets_init. Adicione isso ao seu arquivo de funções:
dentro dessa função, registraremos quatro áreas de widget: uma cada um dos modelos de arquivo de postagem e categoria únicos e duas para o modelo de página personalizado.
comece registrando o primeiro widget:
isso usa a função register_sidebar(), com uma matriz de parâmetros da seguinte forma:
- o nome da área do widget, que aparecerá na tela de Administração de Widgets e no Personalizador. Eu tornei isso traduzível.
- um ID exclusivo para a área do widget.
- marcação para antes do widget, que usa espaços reservados para internacionalização.
- marcação para depois do widget.
- marcação para antes e depois do título do widget, que está incluído em um elemento
h3.
então esse é o primeiro. Agora, ainda dentro de sua função, adicione os outros três:
então agora temos quatro widgets:
- um após o conteúdo em postagens individuais.
- um antes do conteúdo em um arquivo de categoria.
- um antes e um depois do conteúdo em nosso modelo de página widgetized.
se você deseja mover suas Áreas de widget (por exemplo, colocar o arquivo de categoria um após o conteúdo ou o único post um antes do conteúdo), você deve renomeá-los adequadamente. Isso é para que você saiba o que está acontecendo quando vir editar seu código no futuro, e seus usuários saibam onde as áreas de widget serão exibidas quando adicionarem widgets a eles por meio da tela de Administração de Widgets. Lembre-se de que, se você alterar isso, precisará colocar o código para gerar os widgets no lugar correto em seus arquivos de modelo na próxima etapa, o que pode ser diferente de onde estou colocando o meu.
agora, se você abrir sua página de Administração de Widgets, verá suas Áreas de widgets, prontas para widgets:
mas se você adicionar widgets às suas novas áreas de widgets, eles não aparecerão no front-end do seu site. Eles ainda precisam ser codificados nos arquivos de modelo.
adicionando suas Áreas de Widget aos arquivos de modelo
agora adicionamos o código para produzir as áreas de widget. Se você estiver trabalhando com seu próprio tema, talvez seja necessário apenas editar seus arquivos de modelo de tema existentes. Se você estiver trabalhando com um tema filho (ou seu tema ainda não tiver os arquivos de modelo relevantes), você precisará criar novos arquivos.Vamos começar com o arquivo de modelo de página widgetized, pois seu tema não terá isso de qualquer maneira.
na pasta Tema, crie um novo arquivo. Estou chamando o meu page_widgetized.pai. Abra esse arquivo e adicione isso a ele:
isso diz ao WordPress que é um modelo de página personalizado. Se você quiser saber mais sobre eles, confira nosso guia detalhado.
Nota: Não use page-widgetized como seu nome de arquivo. Isso ocorre porque page – é um sufixo reservado no WordPress. Use um sublinhado em vez de um traço, ou apenas evite usar a Página no início, se preferir.
agora, abaixo desse texto comentado, copie tudo da página do seu tema (ou do tema pai).arquivo php. Uma alternativa é fazer uma cópia do arquivo e adicionar o texto comentado, depende de você.
agora você poderá selecionar este modelo ao editar uma página em seu site:
selecione-o para uma de suas páginas para que você possa experimentar os widgets. Aqui está a minha página:
não parece muito emocionante agora, pois não adicionei as áreas do widget ao arquivo de modelo. Vamos fazer isso.
em seu arquivo de modelo, adicione este código imediatamente acima do conteúdo da página, para a área do widget de Conteúdo acima:
isso verifica se a área do widget foi preenchida, usando o ID exclusivo que você criou para a área do widget quando o registrou em seu arquivo de funções. Se tiver sido preenchido, ele produz o conteúdo da área do widget.
Agora adicione a área do widget abaixo do conteúdo. Após o seu conteúdo (e dentro de qualquer elemento envolvente), adicione o seguinte:
Salve seu arquivo de modelo de página.
aqui está o código completo do meu arquivo de modelo de página, para que você possa ver onde as áreas do widget antes e depois do loop:
agora para testá-lo. Eu adicionei um widget a cada uma das novas áreas de widget:
e aqui está como eles se parecem na minha página:
então esse é o modelo de página personalizado configurado. Agora você precisa editar os outros dois arquivos de modelo de página (ou criá-los, se necessário). Siga estes passos:
- se você estiver trabalhando com um tema filho, crie um arquivo chamado categoria.pai. Copie o conteúdo da categoria.arquivo php do seu tema pai (se tiver um) ou do arquivo.arquivo php (ou índice.php se não tiver isso).
- se você não estiver trabalhando com um tema filho, mas seu tema não tiver uma categoria.arquivo php, faça um copiando o arquivo.arquivo php (ou se você não tiver um desses, o índice.arquivo php).
- adicione a área do widget acima do conteúdo em seu arquivo de arquivo de categoria-novamente, imediatamente antes do loop.
aqui está o código para a área do widget:
agora repita isso para o modelo único:
- crie uma postagem única.arquivo php se o seu tema não tiver um (ou você estiver usando um tema filho). Copie o conteúdo da postagem única do tema pai.arquivo php nele, ou a partir do próximo arquivo de modelo na hierarquia de modelos (único.php, singular.php ou índice.pai).
- novamente, adicione a área do widget – desta vez após o conteúdo.
aqui está o código:
agora, se você adicionar widgets, eles aparecerão em seu site. Aqui está o meu mostrando uma lista de Postagens recentes após uma única postagem:
adicionar áreas de Widget aos Modelos oferece flexibilidade
as áreas de Widget permitem que os usuários do seu tema adicionem conteúdo extra sem precisar escrever código. Mas eles não são apenas para a barra lateral. Adicionar áreas de widget extras aos seus arquivos de modelo oferece áreas direcionadas em seu site às quais você pode adicionar widgets, com bom controle sobre onde eles aparecerão.
você pode levar esses exemplos ainda mais, se quiser, adicionando áreas de widget a todos os seus arquivos, ou mesmo usando diferentes versões da barra lateral.arquivo php para diferentes tipos de conteúdo. O mundo é a sua ostra!