O tema padrão do WordPress em 2014 era Vinte 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 tema livre atual padrão Vinte e Vinte.
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.
Se você estiver interessado em ver outros temas WordPress, recomendamos olhar para outros temas populares como Divi de Elegant Themes. Confira nossa análise completa aqui.
Crie um tema infantil para WordPress
Ao personalizar os arquivos de modelo de um tema WordPress para criar uma área de widget, é uma boa prática criar um tema criança.
O conceito de um tema filho é bastante direto - 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.
Se você deseja aprender mais dicas e truques relacionados ao WordPress, visite o restante da seção sobre CollectiveRay.
1. Crie o diretório e os arquivos do tema filho
Como primeira etapa, crie uma pasta dentro do wp-content> temas pasta. 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.
Então, se o pai é chamado vinte e quinze, a criança deve ser chamada filho de vinte e quinze anos. Da mesma forma, se o tema que você está personalizando for chamado vinte e vinte, o tema filho precisa ser chamado de tpassou vinte criança.
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 chamado style.css. Nós também precisamos do functions.php arquivo para o tema filho, onde podemos adicionar alguns recursos necessários.
Esses dois arquivos vão para a pasta vinte e quinze filhos ou respectiva pasta que você criou para o tema filho.
2. Adicione o arquivo para a área do widget do WordPress (no rodapé ou onde você preferir)
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.
Neste caso, pegue o footer.php do tema Twenty Fifteen, ou do tema Twenty Twenty ou qualquer que seja o tema que você está personalizando é chamado 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 no topo do style.css. Abrir style.css em seu editor de código favorito e adicione este trecho de código.
/*Theme Name: Twenty Fifteen ChildTheme URI: http://example.com/twenty-fifteen-child/Description: Twenty Fifteen Child ThemeAuthor: John DoeAuthor URI: http://example.comTemplate: twentyfifteenVersion: 1.0.0License: GNU General Public License v2 or laterLicense URI: http://www.gnu.org/licenses/gpl-2.0.htmlTags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-readyText Domain: twentyfifteenchild*/
A parte realmente importante aqui está no Modelo então, no exemplo acima, é Modelo: vinte e quinze. 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ê enqueue a folha de estilo do tema pai usando o função wp_enqueue_style ().
Isso garante que o tema filho herde os estilos de seu pai enquanto sobrescreve qualquer regra de estilo específica em seu próprio style.css arquivo.
<?php
//Importa estilos pai da maneira correta e adiciona outras folhas de estilo se necessário.
função vinte_fifteen_child_styles() {
wp_enqueue_style( 'estilo pai', get_template_directory_uri().'/style.css' );
}
add_action('wp_enqueue_scripts', 'vinte_fifteen_child_styles');
Seu tema infantil está quase pronto!
Acessar o Temas painel na instalação do WordPress e você deve ver seu tema Twenty Fifteen Child pronto para uso. Clique Ativação 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 vai para functions.php.
/ ** * Registra a área do widget do rodapé. * * @since Twenty Fifteen Child 1.0 * * @link https://codex.wordpress.org/Function_Reference/register_sidebar * / function 2thfifteen_child_widgets_init () {register_sidebar (array ('name' => __ ('Footer Widgets', '1th -fifteen-child '),' id '=>' sidebar-2 ',' description '=> __ (' Adicionar widgets aqui para aparecerem na sua área de rodapé. ',' vinte e quinze-child '),' before_widget ' => ' ',' after_widget '=>' ',' before_title '=>' ',' after_title '=>' ',)); } add_action ('widgets_init','entyfifteen_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 widgets_init () gancho de ação.
A seguir, vamos adicionar a nova barra lateral ao rodapé. Abrir footer.php em um editor de código e insira este snippet logo abaixo desta linha de código: <footer id="colophon" class="site-footer" role="contentinfo">.
O código acima primeiro verifica 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.
A imagem 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 vai melhorar a aparência consideravelmente.
.site-footer .widget {margin: 0; preenchimento: 10% 20% 0; } .site-footer .widget: último filho {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')):
?>
">
if (is_active_sidebar ('sidebar-2')) {?>
<?php }
if (is_active_sidebar ('sidebar-3')) {?>
</div>
O código que você precisa usar depende do tema que você está usando na realidade.
Seu widget de rodapé do WordPress está pronto!
Neste post, vimos como adicionar uma nova área de widget ao rodapé do tema Twenty Fifteen WordPress. Embora tenhamos colocado a área de 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.
. deixe um útil comente com suas ideias, depois compartilhe com seu (s) grupo (s) do Facebook, que considerariam isso útil e vamos colher os benefícios juntos. Obrigado por compartilhar e ser legal!
Divulgação: Esta página pode conter links para sites externos de produtos que amamos e recomendamos de todo o coração. Se você comprar produtos que sugerimos, podemos receber uma taxa de referência. Essas taxas não influenciam nossas recomendações e não aceitamos pagamentos por análises positivas.
e muitos mais ...