O tema WordPress padrão em 2014 era  Twenty Fifteen , um modelo com uma barra lateral fixa à esquerda que se transforma em um cabeçalho na visualização móvel, uma área mínima de rodapé, ótima tipografia e uma bela área de imagem em destaque. Desde então, vimos o lançamento de TwentySixteen, TwentySeventeen, TwentyEighteen, TwentyNineteen e o atual tema gratuito padrão TwentyTwenty .

Esses temas são fantásticos, eles passam por todo um processo para serem escolhidos como o tema padrão do WordPress, no entanto, podemos entender que os usuários ainda querem personalizá-lo e torná-lo seu. 

Como esses temas geralmente oferecem algumas limitações, como uma única barra lateral (chamada de área pronta para widget no WordPress), mostraremos como adicionar um widget ao rodapé ou como ajustar o código de qualquer tema para adicionar mais áreas de widget para um tema. 

Adicionar uma área de widget ao rodapé TwentyFifteen a TwentyTwenty não é diferente de adicionar uma área de widget na maioria dos temas WordPress.

Crie um tema infantil para WordPress

Ao personalizar os arquivos de modelo de um tema do WordPress para criar uma área de widget, é uma boa prática criar um  tema filho.

O conceito de um tema filho é bastante simples – não queremos quebrar a possibilidade de atualizar o tema para qualquer versão recém-lançada.

Ao criar personalizações para um tema filho, suas modificações serão adicionadas ao tema filho em vez de ao tema original. Quando uma versão atualizada do tema original for lançada, você poderá atualizar sua cópia do tema original e deixar suas alterações intactas no tema filho.

1. Crie o diretório e os arquivos do tema filho 

Como uma primeira etapa, crie uma pasta dentro da pasta wp-content>themes . Chame a pasta de vinte e quinze filhos, vinte e vinte anos. É importante que o tema filho siga a convenção de nomenclatura dos pais.

Portanto, se o pai é chamado de vinte e quinze anos , o filho deve ser chamado de vinte e quinze filhos . Da mesma forma, se o tema que você está personalizando é chamado TwentyTwenty , as necessidades temáticos criança a ser chamado t wentytwenty-filho .

Depois de criar o tema filho, você precisa criar dois arquivos adicionais.

O arquivo que será usado para realizar mudanças nos estilos CSS deve ser denominado style.css . Também precisamos do   arquivo functions.php para o tema filho, onde podemos adicionar alguns recursos necessários.

Esses dois arquivos vão para a pasta Twentyfifteen-child ou respectiva pasta que você criou para o tema filho.

Como a área do widget deve ser adicionada ao rodapé do tema, você precisa ter um arquivo para o código do rodapé.

A maneira mais segura de codificar um arquivo de modelo do WordPress é começar a partir de um modelo pronto e, em seguida, adicionar o que deseja e / ou excluir o que não deseja.

Nesse caso, pegue o  footer.php  do tema Twenty Fifteen, ou do tema Twenty Twenty ou qualquer que seja o nome do tema que você está personalizando e cole-o em seu tema filho.

3. Adicione o código aos arquivos do tema filho para criar o widget

No momento, só temos arquivos vazios, portanto, o tema filho não pode fazer nada.

Para que possamos efetuar mudanças, um tema filho de trabalho precisa de alguns comentários na parte superior de  style.css . Abra  style.css  em seu editor de código favorito e adicione este trecho de código. 

/*
 Theme Name:   Twenty Fifteen Child
 Theme URI:    http://example.com/twenty-fifteen-child/
 Description:  Twenty Fifteen Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentyfifteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twenty-fifteen-child
*/

A parte realmente importante aqui está no “Template”, portanto, no exemplo acima, é o  Template: twentyfifteen . Isso instrui o WordPress sobre o nome do tema pai.

Certifique-se de que o nome seja exatamente igual ao nome da pasta do tema pai (letras maiúsculas ou quaisquer espaços, travessões, sublinhados, etc. são importantes: tudo deve corresponder exatamente ao nome da pasta do tema pai).

Em seguida, abra  functions.php   e adicione o seguinte trecho de código.

Embora essa etapa não seja estritamente obrigatória, ela é altamente recomendada porque, com esse código, o tema filho herdará a aparência de seu pai.

Então, vamos escrever uma função que se  conecte ao gancho de ação wp_enqueue_scripts () . Dentro da função, você  enfileira  a folha de estilo do tema pai usando a  função wp_enqueue_style () . 

Isso garante que o tema filho herde os estilos de seu pai enquanto substitui qualquer regra de estilo específica em seu próprio   arquivo style.css .

<?php 
//Importe estilos pais da maneira correta e adicione outras folhas de estilo, se necessário.
function twenty_fifteen_child_styles() {
  wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}
add_action( 'wp_enqueue_scripts', 'twenty_fifteen_child_styles' );

Seu tema infantil está quase pronto!

Acesse o   painel Temas na instalação do WordPress e você verá seu tema Twenty Fifteen Child pronto para uso. Clique em  Ativar  e visite seu site. Deve ser exatamente igual ao tema pai.

Adicionando a Área do Widget

Agora precisamos adicionar o código para definir a área do widget de rodapé. Aqui está o trecho que entra em  functions.php . 

/**
 * Registre a área do widget do rodapé.
 *
 * @since Twenty Fifteen Child 1.0
 *
 * @link https://codex.wordpress.org/Function_Reference/register_sidebar
 */
function twentyfifteen_child_widgets_init() {
  register_sidebar( array(
    'name'          => __( 'Footer Widgets', 'twenty-fifteen-child' ),
    'id'            => 'sidebar-2',
    'description'   => __( 'Add widgets here to appear in your footer area.', 'twenty-fifteen-child' ),
    'before_widget' => '<aside id="%1$s" class="widget %2$s">',
    'after_widget'  => '</aside>',
    'before_title'  => '<h2 class="widget-title">',
    'after_title'   => '</h2>',
  ) );
}
add_action( 'widgets_init', 'twentyfifteen_child_widgets_init' );

O código acima adiciona uma função que registra uma barra lateral com o ID de sidebar-2 (o tema Twenty Fifteen já tem uma barra lateral com o ID de sidebar-1) e, em seguida, conecta essa função ao  gancho de ação widgets_init () .

A seguir, vamos adicionar a nova barra lateral ao rodapé. Abrir  footer.php  em um editor de código e entrar neste trecho logo abaixo esta linha de código: 

 <footer id="colophon" class="site-footer" role="contentinfo">

<?php if ( is_active_sidebar( 'sidebar-2' )  ) : ?>

 <div class="widget-area" role="complementary">
 
  <?php dynamic_sidebar( 'sidebar-2' ); ?>
 
 </div>
 
<?php endif; ?>

O código acima verifica primeiro se a barra lateral-2 tem algum widget, se tiver, ele exibe a barra lateral dentro de uma div com a classe “área de widget”. 

A próxima coisa que você precisa fazer é ir ao painel Widgets do back-end do WordPress, localizar a barra lateral de widgets do rodapé e adicionar alguns widgets a ela. Salve os widgets à medida que os adiciona e verifique o resultado.

Widgets de rodapé no tema Twenty Fifteen

O exemplo acima mostra alguns widgets na barra lateral do rodapé dos Twenty Fifteen Child e você pode ver que o texto estava muito próximo da parte superior do contêiner e a margem inferior dos widgets estava muito alta. Este pequeno trecho em  style.css  melhorará a aparência consideravelmente. 

.site-footer .widget {
  margin: 0;
  padding: 10% 20% 0;
}
.site-footer .widget:last-child {
  margin-bottom: 10%;
}

Aqui está outro exemplo de adição de outra barra lateral:

if ( is_active_sidebar( 'sidebar-2' ) 
  || is_active_sidebar( 'sidebar-3' ) ) : 
?> 

<aside class="widget-area" role="complementary" aria-label="<?php esc_attr_e( 'Footer', 'twentyseventeen' ); ?>"> 

<?php 
  if ( is_active_sidebar( 'sidebar-2' ) ) { ?> 
    <div class="widget-column footer-widget-1"> 
      <?php dynamic_sidebar( 'sidebar-2' ); ?> 
    </div> <?php } 
  if ( is_active_sidebar( 'sidebar-3' ) ) { ?> 
    <div class="widget-column footer-widget-2"> 
      <?php dynamic_sidebar( 'sidebar-3' ); ?> 
    </div> 
<?php } ?>

O código que você precisa usar depende do tema que você está usando na realidade.

Neste post, vimos como adicionar uma nova área de widget ao rodapé do tema Twenty Fifteen WordPress. Embora tenhamos colocado a área do widget no rodapé do tema, você pode usar essa lógica para adicionar áreas de widget em praticamente todos os lugares em um tema, seguindo etapas semelhantes.