Cada site vem com links de perfis de mídia social. Dependendo do layout, eles aparecem em locais diferentes, como cabeçalho, rodapé e barras laterais. Neste tutorial, aprenderemos como criar um shortcode de mídia social WordPress que você pode reutilizar em seus temas. Para configurar os links sociais, estenderemos o WordPress Customizer.
Estenda o personalizador do WordPress
Vamos começar acessando o WordPress Customizer, então navegamos até Aparência > Personalizar no painel do nosso site. A partir daí, podemos modificar diferentes partes do nosso site, como definir a página inicial padrão ou adicionar alguns estilos.
Criaremos um novo Links Sociais seção que aparecerá apenas quando nosso tema estiver ativo. No meu caso, estou trabalhando com um tema WordPress personalizado (Parque infantil) que também usei em um tutorial recente do WordPress.
Nesta seção, registraremos quatro configurações e seus controles associados.
Para construir essa funcionalidade, usaremos a API Customize. Dentro do functions.php arquivo do nosso tema, adicionaremos este código:
1 |
function playground_customize_register( $wp_customize ) { |
2 |
$wp_customize->add_section( |
3 |
'social_links', |
4 |
array( |
5 |
'title' => __( 'Social Links', 'playground' ), |
6 |
)
|
7 |
);
|
8 |
|
9 |
$wp_customize->add_setting( |
10 |
'facebook', |
11 |
array( |
12 |
'sanitize_callback' => 'esc_url_raw', |
13 |
)
|
14 |
);
|
15 |
|
16 |
$wp_customize->add_control( |
17 |
'facebook', |
18 |
array( |
19 |
'type' => 'url', |
20 |
'section' => 'social_links', |
21 |
'label' => __( 'Facebook', 'playground' ), |
22 |
)
|
23 |
);
|
24 |
|
25 |
$wp_customize->add_setting( |
26 |
'instagram', |
27 |
array( |
28 |
'sanitize_callback' => 'esc_url_raw', |
29 |
)
|
30 |
);
|
31 |
|
32 |
$wp_customize->add_control( |
33 |
'instagram', |
34 |
array( |
35 |
'type' => 'url', |
36 |
'section' => 'social_links', |
37 |
'label' => __( 'Instagram', 'playground' ), |
38 |
)
|
39 |
);
|
40 |
|
41 |
$wp_customize->add_setting( |
42 |
'linkedin', |
43 |
array( |
44 |
'sanitize_callback' => 'esc_url_raw', |
45 |
)
|
46 |
);
|
47 |
|
48 |
$wp_customize->add_control( |
49 |
'linkedin', |
50 |
array( |
51 |
'type' => 'url', |
52 |
'section' => 'social_links', |
53 |
'label' => __( 'LinkedIn', 'playground' ), |
54 |
)
|
55 |
);
|
56 |
|
57 |
$wp_customize->add_setting( |
58 |
'youtube', |
59 |
array( |
60 |
'sanitize_callback' => 'esc_url_raw', |
61 |
)
|
62 |
);
|
63 |
|
64 |
$wp_customize->add_control( |
65 |
'youtube', |
66 |
array( |
67 |
'type' => 'url', |
68 |
'section' => 'social_links', |
69 |
'label' => __( 'Youtube', 'playground' ), |
70 |
)
|
71 |
);
|
72 |
}
|
73 |
add_action( 'customize_register', 'playground_customize_register' ); |
Torne-o mais legível
Podemos tornar esse código um pouco mais legível armazenando as configurações/controles dentro de um array de objetos, conforme mostrado abaixo:
1 |
function playground_customize_register( $wp_customize ) { |
2 |
$settings = array( |
3 |
(object) array( |
4 |
'id' => 'facebook', |
5 |
'label' => __( 'Facebook', 'playground' ), |
6 |
),
|
7 |
(object) array( |
8 |
'id' => 'instagram', |
9 |
'label' => __( 'Instagram', 'playground' ), |
10 |
),
|
11 |
(object) array( |
12 |
'id' => 'linkedin', |
13 |
'label' => __( 'LinkedIn', 'playground' ), |
14 |
),
|
15 |
(object) array( |
16 |
'id' => 'youtube', |
17 |
'label' => __( 'YouTube', 'playground' ), |
18 |
),
|
19 |
);
|
20 |
|
21 |
$wp_customize->add_section( |
22 |
'social_links', |
23 |
array( |
24 |
'title' => __( 'Social Links', 'playground' ), |
25 |
)
|
26 |
);
|
27 |
|
28 |
foreach ( $settings as $setting ) : |
29 |
$wp_customize->add_setting( |
30 |
$setting->id, |
31 |
array( |
32 |
'sanitize_callback' => 'esc_url_raw', |
33 |
)
|
34 |
);
|
35 |
|
36 |
$wp_customize->add_control( |
37 |
$setting->id, |
38 |
array( |
39 |
'type' => 'url', |
40 |
'section' => 'social_links', |
41 |
'label' => $setting->label, |
42 |
)
|
43 |
);
|
44 |
endforeach; |
45 |
}
|
46 |
add_action( 'customize_register', 'playground_customize_register' ); |
Você pode adicionar mais links de mídia social (como o X em nossa demonstração estática) adicionando novas entradas no $settings variedade.
Alterar localização do item do menu
Para alterar a localização da nossa seção personalizada, temos que modificar sua prioridade padrão que é 160. Por exemplo, uma prioridade inferior a 20 será colocada acima da Identidade do site seção.
Veja como deve ser o código para isso:
1 |
$wp_customize->add_section( |
2 |
'social_links', |
3 |
array( |
4 |
'title' => __( 'Social Links', 'playground' ), |
5 |
'priority' => 19, |
6 |
)
|
7 |
);
|
As modificações do tema são armazenadas no wp_options tabela do banco de dados WordPress. No meu caso, onde tenho o Parque infantil tema ativado, posso ver as configurações do meu tema dentro do theme_mods_playground nome da opção.
Gere o código curto
Nosso [socials] shortcode consistirá nos três atributos opcionais a seguir:
- O
titleatributo que será responsável por mostrar um cabeçalho antes dos ícones. - O
fillatributo que especificará a cor de preenchimento dos ícones SVG. A cor padrão será preta. - O
fill_hoveratributo que especificará a cor de preenchimento dos ícones SVG ao passar o mouse. A cor padrão do foco será vermelha.
Para chamá-lo em qualquer lugar que quisermos (por exemplo, em uma barra lateral ou widget), podemos então usar esta sintaxe:
API de código curto do WordPress
Para construí-lo, usaremos a API Shortcode. Dentro de functions.php arquivo do nosso tema, adicionaremos este código:
1 |
function socials_func( $atts ) { |
2 |
$atts = shortcode_atts( |
3 |
array( |
4 |
'title' => '', |
5 |
'fill' => '#000', |
6 |
'fill_hover' => '#FF0000', |
7 |
),
|
8 |
$atts
|
9 |
);
|
10 |
|
11 |
$title = $atts['title']; |
12 |
$fill = $atts['fill']; |
13 |
$fill_hover = $atts['fill_hover']; |
14 |
$facebook = get_theme_mod( 'facebook' ); |
15 |
$instagram = get_theme_mod( 'instagram' ); |
16 |
$linkedin = get_theme_mod( 'linkedin' ); |
17 |
$youtube = get_theme_mod( 'youtube' ); |
18 |
ob_start(); |
19 |
?>
|
20 |
|
21 |
if ( $title ) : ?>
|
22 |
|
23 |
echo esc_html( $title ); ?>
|
24 |
|
25 |
endif; ?>
|
26 |
|
27 |
if ( $facebook ) : ?>
|
28 |
|
29 |
|
30 |
|
31 |
|
32 |
|
33 |
|
34 |
|
35 |
|
36 |
endif; |
37 |
if ( $instagram ) : |
38 |
?>
|
39 |
|
40 |
|
41 |
|
42 |
|
43 |
|
44 |
|
45 |
|
46 |
|
47 |
endif; |
48 |
if ( $linkedin ) : |
49 |
?>
|
50 |
|
51 |
|
52 |
|
53 |
|
54 |
|
55 |
|
56 |
|
57 |
|
58 |
endif; |
59 |
if ( $youtube ) : |
60 |
?>
|
61 |
|
62 |
|
63 |
|
64 |
|
65 |
|
66 |
|
67 |
|
68 |
endif; ?>
|
69 |
|
70 |
|
71 |
|
72 |
return ob_get_clean(); |
73 |
}
|
74 |
add_shortcode( 'socials', 'socials_func' ); |
Considere estas coisas:
- Nós usamos o
get_theme_mod()função para recuperar os valores de links sociais do Personalizador. - Fazemos algumas verificações para garantir que apenas os ícones sociais que não possuem valores vazios aparecerão.
- Usamos o conveniente
ob_start()eob_get_clean()funções para gerar a marcação. - Passamos as cores selecionadas nos SVGs como variáveis inline e as tratamos no CSS.
- Se você precisar deste shortcode para um site multilíngue, faça o
aria-labeletitleatributos traduzíveis.
Estilos
Por último, mas não menos importante, precisamos adicionar os seguintes estilos aos nossos estilos:
1 |
.socials-wrapper h4 { |
2 |
font-size: 20px; |
3 |
text-align: center; |
4 |
margin: 0 0 20px; |
5 |
}
|
6 |
|
7 |
.socials { |
8 |
list-style: none; |
9 |
padding: 0; |
10 |
margin: 0; |
11 |
display: flex; |
12 |
justify-content: center; |
13 |
gap: 15px; |
14 |
}
|
15 |
|
16 |
.socials a { |
17 |
display: flex; |
18 |
}
|
19 |
|
20 |
.socials a svg { |
21 |
fill: var(--fill); |
22 |
transition: all 0.25s; |
23 |
}
|
24 |
|
25 |
.socials a:hover svg { |
26 |
fill: var(--fill-hover); |
27 |
transform: scale(1.2); |
28 |
}
|
Conclusão
Hoje aprendemos como criar um shortcode de mídia social com dados provenientes do WordPress Customizer, que você pode usar em qualquer lugar do seu tema WordPress. Esperançosamente, você expandiu seu conhecimento com uma ou duas coisas novas.
Exercício: pratique estendendo este shortcode. Por exemplo, você pode querer fornecer uma opção de cor para cada ícone social criando novas configurações/controles no Personalizador.
Como sempre, muito obrigado pela leitura!
