Faça um plano
Para esta demonstração, criaremos um novo tema WordPress simples e personalizado (Parque infantil). Sua estrutura de arquivos ficará assim:
Iremos hospedá-lo em um repositório GitHub de onde você poderá baixá-lo e, em seguida, instalá-lo e ativá-lo em um site WordPress.
Como já sabemos pelas demonstrações, nosso rodapé consiste em quatro colunas. As três primeiras colunas incluem um título e uma lista com links, enquanto a quarta inclui um título e alguns ícones sociais com links para os canais associados.
O objetivo é manter os estilos existentes, mas permitir que os administradores do site atualizem o conteúdo das colunas. Por exemplo, eles podem querer remover um link ou alterar o texto de um título. Para conseguir isso, passaremos por dois métodos:
- Defina novas áreas de widget/rodapé usando o
register_sidebar()função integrada. - Use a versão gratuita do plugin ACF – um dos plugins WordPress mais populares – para definir um Opções página que tratará o conteúdo do rodapé.
Dependendo do método selecionado, o código associado responsável por exibir as colunas de rodapé no front end ficará no main-footer-widgets.php ou main-footer-acf.php arquivos.
Para testá-lo, após a ativação do tema, navegue até a URL raiz do seu site e certifique-se de ver algo assim. No meu caso, estou usando o WordPress 6.3, que é a versão mais recente no momento em que este livro foi escrito.
Obviamente, as colunas do rodapé estarão vazias. Para preenchê-lo, use um dos métodos descritos nas próximas seções.
No mundo WordPress, widgets são informações adicionadas a diferentes seções do site, como barras laterais, cabeçalhos e rodapés. Eles vivem dentro de uma área de widgets, ou como costuma ser chamado de Barra Lateral. Cada área de widget pode ter um ou mais widgets.
Exemplos comuns de widgets populares incluem aqueles que mostram categorias de postagens, comentários de postagens, menus de navegação, links de páginas, links sociais, formulários de boletins informativos, etc.
O WordPress vem com vários widgets predefinidos, mas você sempre pode adicionar os seus próprios, codificando-os ou instalando um plugin.
Dependendo das configurações do seu tema, você pode encontrar as áreas de widgets registradas e alimentá-las com widgets no Personalizador de tema ou Aparência > Widgets nas telas de administração do WordPress.
Widgets de rodapé sem plug-in
O register_sidebar() função integrada nos permite criar novas áreas de widgets. No nosso caso, precisamos de quatro colunas, então chamaremos essa função quatro vezes. Mas quando vamos ligar? Na verdade, quando todos os widgets padrão do WordPress tiverem sido registrados. Isso é o que widgets_init gancho é responsável por.
Aqui está o código que precisamos inserir no functions.php arquivo:
1 |
function playground_sidebar_registration() { |
2 |
$shared_args = array( |
3 |
'before_title' => ' |
4 |
'after_title' => '', |
5 |
'before_widget' => ' |
6 |
'after_widget' => '', |
7 |
);
|
8 |
|
9 |
register_sidebar( |
10 |
array_merge( |
11 |
$shared_args, |
12 |
array( |
13 |
'name' => __( 'Footer 1', 'playground' ), |
14 |
'id' => 'footer-1', |
15 |
'description' => __( 'Add widgets here.', 'playground' ), |
16 |
)
|
17 |
)
|
18 |
);
|
19 |
|
20 |
register_sidebar( |
21 |
array_merge( |
22 |
$shared_args, |
23 |
array( |
24 |
'name' => __( 'Footer 2', 'playground' ), |
25 |
'id' => 'footer-2', |
26 |
'description' => __( 'Add widgets here.', 'playground' ), |
27 |
)
|
28 |
)
|
29 |
);
|
30 |
|
31 |
register_sidebar( |
32 |
array_merge( |
33 |
$shared_args, |
34 |
array( |
35 |
'name' => __( 'Footer 3', 'playground' ), |
36 |
'id' => 'footer-3', |
37 |
'description' => __( 'Add widgets here.', 'playground' ), |
38 |
)
|
39 |
)
|
40 |
);
|
41 |
|
42 |
register_sidebar( |
43 |
array_merge( |
44 |
$shared_args, |
45 |
array( |
46 |
'name' => __( 'Footer 4', 'playground' ), |
47 |
'id' => 'footer-4', |
48 |
'description' => __( 'Add widgets here.', 'playground' ), |
49 |
)
|
50 |
)
|
51 |
);
|
52 |
}
|
53 |
add_action( 'widgets_init', 'playground_sidebar_registration' ); |
O título do widget que adicionamos por meio do código estará disponível apenas nos widgets legados (veja a próxima seção).
Depois de fazer isso, veremos as áreas de widget recém-adicionadas dentro do Widgets página de administração.
A partir daqui, podemos adicionar blocos como faríamos no Post Editor.
Nas três primeiras áreas de widgets, adicionaremos dois blocos de texto: um Cabeçalho e um Lista.
Na quarta área de widget, adicionaremos um HTML personalizado bloco onde inseriremos o código das redes sociais.
Uma implementação alternativa, em vez de usar o bloco HTML personalizado, seria armazenar os links sociais em uma página de opções de tema e gerar a marcação acima usando um shortcode. De qualquer forma, é provável que os links sociais apareçam em outras partes do site, como cabeçalho e páginas de contato.
Então, para mostrar os widgets no front end, usaremos o dynamic_sidebar() e passe como parâmetro o ID da área do widget cadastrada associada. Além disso, antes de imprimir os widgets no front end, usaremos o is_active_sidebar() função para verificar se as áreas do widget contêm algum deles.
Aqui está o código completo adicionado dentro do main-footer-widgets.php arquivo:
1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
if ( is_active_sidebar( 'footer-1' ) ) : ?>
|
10 |
|
11 |
dynamic_sidebar( 'footer-1' ); ?>
|
12 |
|
13 |
|
14 |
endif; |
15 |
|
16 |
if ( is_active_sidebar( 'footer-2' ) ) : |
17 |
?>
|
18 |
|
19 |
dynamic_sidebar( 'footer-2' ); ?>
|
20 |
|
21 |
|
22 |
endif; |
23 |
|
24 |
if ( is_active_sidebar( 'footer-3' ) ) : |
25 |
?>
|
26 |
|
27 |
dynamic_sidebar( 'footer-3' ); ?>
|
28 |
|
29 |
|
30 |
endif; |
31 |
|
32 |
if ( is_active_sidebar( 'footer-4' ) ) : |
33 |
?>
|
34 |
|
35 |
dynamic_sidebar( 'footer-4' ); ?>
|
36 |
|
37 |
endif; ?>
|
38 |
|
39 |
|
40 |
|
Remova o editor de blocos de widgets
O WordPress 5.8 substituiu os widgets clássicos por aqueles baseados em blocos de Gutenberg. Ainda assim, existem muitas opções caso queiramos desabilitar o Widgets Block Editor e criar os widgets usando o Classic Widgets Editor. Uma abordagem é adicionar o seguinte código ao functions.php arquivo ou instale o plugin Classis Widgets.
1 |
function playground_setup() { |
2 |
remove_theme_support( 'widgets-block-editor' ); |
3 |
}
|
4 |
add_action( 'after_setup_theme', 'playground_setup' ); |
Ao fazer isso, teremos disponível o clássico Texto widget para preencher as áreas de widgets.
Para obter mais informações sobre a compatibilidade dos widgets clássicos e baseados em blocos, consulte a documentação oficial.
Widgets de rodapé com ACF
Existem muitos plug-ins disponíveis para configurar widgets de rodapé. Um dos meus favoritos são os Advanced Custom Fields (ACF), que fornecem controle total da marcação de saída. O principal uso dele é a criação de campos personalizados, tipos de postagem e taxonomias. Um dos ótimos complementos de sua versão premium (ACF PRO) é o Página de opções. Funciona como a página principal de opções de tema, onde especificamos configurações genéricas que devem estar disponíveis em qualquer página, como links sociais, banners, APIs, etc.
Vale ressaltar que no momento em que escrevo este artigo, estou usando a versão mais recente do plugin (6.2.0).
No nosso caso, não teremos esta página integrada, pois instalaremos a versão gratuita do plugin. No entanto, podemos construí-lo de alguma forma. Dito isto, vamos criar um modelo de página personalizado (Página de opções) dentro de page-templates pasta.
Em seguida, definiremos um novo Grupo de Campos (Campos da página de opções) que aparecerá apenas na página de opções. Dentro deste grupo, declararemos como widgets:
- Quatro Wysiwyg campos e
- um Grupo campo para os sociais. Este campo será composto por quatro URL campos para armazenar os links sociais.
Agora, se formos para a página de opções, veremos esses novos campos e poderemos adicionar conteúdo a eles.
Para exibir o conteúdo da página de opções, primeiro teremos que pegar seu ID. A consulta abaixo fará este trabalho:
1 |
$options_page_id = get_posts( |
2 |
array( |
3 |
'post_type' => 'page', |
4 |
'posts_per_page' => 1, |
5 |
'fields' => 'ids', |
6 |
'meta_key' => '_wp_page_template', |
7 |
'meta_value' => 'page-templates/options.php', |
8 |
)
|
9 |
)[0]; |
É mais sensato evitar codificar o ID da página no código, pois, em algum momento, podemos usar outra página como página de opções ou querer traduzi-la para outros idiomas.
Então, usando ACF get_field() função, pegaremos os campos dos quatro Campos Wysiwyg e produza-os após fazer as verificações essenciais.
Aqui está o código necessário adicionado dentro do main-footer-acf.php arquivo:
1 |
|
2 |
$footer1 = get_field( 'footer_1', $options_page_id ); |
3 |
$footer2 = get_field( 'footer_2', $options_page_id ); |
4 |
$footer3 = get_field( 'footer_3', $options_page_id ); |
5 |
$footer4 = get_field( 'footer_4', $options_page_id ); |
6 |
?>
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
if ( $footer1 ) : ?>
|
17 |
|
18 |
echo wp_kses_post( $footer1 ); ?>
|
19 |
|
20 |
|
21 |
endif; |
22 |
|
23 |
if ( $footer2 ) : |
24 |
?>
|
25 |
|
26 |
echo wp_kses_post( $footer2 ); ?>
|
27 |
|
28 |
|
29 |
endif; |
30 |
|
31 |
if ( $footer3 ) : |
32 |
?>
|
33 |
|
34 |
echo wp_kses_post( $footer3 ); ?>
|
35 |
|
36 |
endif; ?>
|
37 |
|
38 |
|
39 |
|
40 |
if ( $footer4 ) : |
41 |
echo wp_kses_post( $footer4 ); |
42 |
endif; |
43 |
// SOCIALS HERE
|
44 |
?>
|
45 |
|
46 |
|
47 |
|
48 |
|
Seguindo em frente, dentro da quarta coluna, adicionaremos também o código para exibição das redes sociais. Neste caso, adicionaremos algumas verificações, pois algumas contas sociais podem não estar disponíveis.
Aqui está o código:
1 |
|
2 |
$socials = get_field( 'socials', $options_page_id ); |
3 |
$socials_fb = $socials['facebook']; |
4 |
$socials_in = $socials['instagram']; |
5 |
$socials_link = $socials['linkedin']; |
6 |
$socials_yt = $socials['youtube']; |
7 |
|
8 |
<ul class="socials"> |
9 |
php if ( $socials_fb ) : ?>
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 |
|
18 |
endif; |
19 |
if ( $socials_in ) : |
20 |
?>
|
21 |
|
22 |
|
23 |
|
24 |
|
25 |
|
26 |
|
27 |
|
28 |
|
29 |
endif; |
30 |
if ( $socials_link ) : |
31 |
?>
|
32 |
|
33 |
|
34 |
|
35 |
|
36 |
|
37 |
|
38 |
|
39 |
|
40 |
endif; |
41 |
if ( $socials_yt ) : |
42 |
?>
|
43 |
|
44 |
|
45 |
|
46 |
|
47 |
|
48 |
|
49 |
|
50 |
endif; ?>
|
51 |
|
Conforme discutido anteriormente, uma implementação social alternativa é construir um shortcode e passá-lo para o quarto widget.
