Neste tutorial veremos como podemos adicionar mais áreas de widgets no template Altitude Pro na página inicial.
Por padrão, existem 7 zonas, mas vamos ver como podemos adicionar quantas quisermos.
O processo não é difícil, mas você tem que fazer isso editando alguns dos arquivos do template, então faça uma cópia de segurança antes de começar, pois qualquer erro ao modificar o template pode deixar o site quebrado.
Antes de começarmos a editar o modelo, observemos que, alternadamente, um widget acompanha uma imagem de foto e o próximo widget não. E assim por diante.
Podemos vê-lo de uma forma simples, personalizando o template –> Front Page Backgroun images:
Como podemos ver apenas os widgets ímpares têm uma imagem de fundo, mais tarde veremos como adicionar um fundo aos novos widgets que criamos.
Vamos para a bagunça 🙂
Vídeo tutorial
Inscreva-se no meu canal:
Dentro do nosso template temos que modificar os seguintes arquivos:
- front-page.php
- functions.php
- personalizar.php
- saída.php
- style.css
Ou seja, o seguinte:
front-page.php
Se observarmos a função da linha 19, encontramos as áreas de widgets existentes listadas, pois aqui simplesmente adicionamos as que queremos, no meu caso mais duas, ou seja, 8 e 9.
Neste mesmo arquivo abaixo temos que adicionar mais código, especificamente na função altitude_front_page_widgets que está na linha 77.
No meu caso, conforme eu adiciono dois novos widgets, vou adicionar, vou copiar os dois últimos widgets que aparecem nessa função e vou colá-los abaixo. Alterando o número do widget:
Observe que o código para os widgets ímpares é diferente dos widgets pares e isso ocorre porque os widgets ímpares têm uma imagem de fundo e os widgets pares não.
funções.php
Como no arquivo anterior, verificamos onde os widgets são referenciados.
Neste caso encontramos a partir da linha 273 o registro das áreas do widget.
Aqui adicionamos mais duas zonas copiando o código das existentes e alterando o número da zona.
personalizar.php
Este arquivo é onde dizemos quais widgets têm imagens de fundo e informamos a eles na função altitude_customizer_register na linha 21
Então teremos que adicionar o widget 9 para que ele também tenha uma imagem de fundo:
saída.php
Como no anterior, temos que adicionar o número do widget que queremos ter como plano de fundo.
Vamos para a função altitude_css na linha 20 e adicioná-la:
style.css
A funcionalidade está bem agora, agora precisamos ter certeza de que o layout está correto.
Neste arquivo encontraremos onde os outros widgets são referenciados e adicionaríamos o nosso no mesmo local para que tenha o mesmo design.
Especificamente, vamos modificar as seguintes partes:
linha 1434
linha 1451
linha 1961
linha 2278
Se tudo correu bem agora, quando você for nos widgets, verá que tem 9 em vez de 7:
Além disso, se formos personalizar o modelo -> Imagens de fundo da página inicial, veremos que podemos adicionar um plano de fundo ao widget 9
E, claro, na página principal eles aparecem:
Espero que tenham gostado do tutorial 😉