Ícones de redes sociais do FontAwesome no Customizer do WordPress

Para adicionar um bloco de ícones de redes sociais do FontAwesome no Customizer do WordPress, você pode criar uma função que registre a seção e os campos para os links de redes sociais. Em seguida, use esses campos para exibir os ícones na sua interface. Vou guiar você através dos passos:

1. Registrar a seção e os campos no Customizer.
2. Adicionar o código para exibir os ícones na interface.

Passo 1: Registrar a seção e os campos no Customizer

Adicione o seguinte código ao seu arquivo functions.php para criar uma seção de ícones de redes sociais no Customizer:

<?php
function mytheme_customize_register( $wp_customize ) {
    // Adiciona uma seção para Redes Sociais
    $wp_customize->add_section( 'social_media_section', array(
        'title'      => __( 'Redes Sociais', 'mytheme' ),
        'priority'   => 30,
    ) );

    // Array com os nomes e os ícones das redes sociais
    $social_networks = array(
        'facebook' => 'Facebook',
        'twitter' => 'Twitter',
        'instagram' => 'Instagram',
        'linkedin' => 'LinkedIn',
    );

    foreach ( $social_networks as $network => $label ) {
        // Adiciona um campo de URL para cada rede social
        $wp_customize->add_setting( $network . '_url', array(
            'default' => '',
            'sanitize_callback' => 'esc_url_raw',
        ) );

        $wp_customize->add_control( $network . '_url', array(
            'label' => sprintf( __( 'URL do %s', 'mytheme' ), $label ),
            'section' => 'social_media_section',
            'type' => 'url',
        ) );
    }
}
add_action( 'customize_register', 'mytheme_customize_register' );
?>

Esse código cria uma seção chamada Redes Sociais no Customizer, onde o usuário pode inserir as URLs dos ícones de redes sociais que deseja exibir.

Esse trecho de código em PHP é responsável por gerar os ícones de redes sociais com links personalizáveis, usando os valores fornecidos no Customizer do WordPress. Vamos analisar cada parte em detalhes:

1. Declaração do Array $social_networks

$social_networks = array(
    'facebook' => 'fa-facebook',
    'twitter' => 'fa-twitter',
    'instagram' => 'fa-instagram',
    'linkedin' => 'fa-linkedin',
);

Aqui, é criado um array associativo chamado $social_networks. Cada entrada do array tem:

• Chave: o nome da rede social (ex: facebook, twitter), que será usado para identificar o link da rede social no Customizer.
• Valor: o nome da classe do ícone correspondente do FontAwesome (ex: 'fa-facebook'), que define o estilo do ícone exibido.

2. Abertura da Div .social-icons

echo '<div class="social-icons">';

Esse comando abre uma <div> com a classe social-icons. Essa div serve como contêiner para os ícones de redes sociais, ajudando a estruturar e estilizar os ícones no HTML.

3. Loop foreach para Gerar os Ícones de Redes Sociais

foreach ( $social_networks as $network => $icon ) {

Este loop foreach percorre cada item no array $social_networks, com:

• $network: a chave do array (ex: facebook, twitter).
• $icon: o valor associado à chave, que é a classe do ícone FontAwesome (ex: fa-facebook).

Para cada rede social, o código dentro do loop será executado.

4. Obtenção da URL do Customizer

$url = get_theme_mod( $network . '_url' );

Usa a função get_theme_mod() para recuperar a URL configurada no Customizer para cada rede social. A função get_theme_mod() retorna o valor associado ao nome passado como parâmetro. Nesse caso, o nome é construído concatenando o valor de $network com o sufixo '_url' (ex: facebook_url), que corresponde à configuração que foi criada anteriormente no Customizer.

5. Verificação e Exibição do Link

if ( $url ) {
    echo '<a href="' . esc_url( $url ) . '" target="_blank" rel="noopener noreferrer">';
    echo '<i class="fab ' . esc_attr( $icon ) . '"></i>';
    echo '</a>';
}

Este bloco faz duas coisas:

• Verifica se há uma URL: Só exibe o ícone se o campo $url tiver um valor. Isso evita links vazios caso o usuário não tenha configurado uma URL específica.
• Exibe o link com o ícone:
• O <a> cria um link para a URL da rede social, adicionando os atributos:
  • target="_blank" para abrir o link em uma nova aba.
  • rel="noopener noreferrer" para segurança e performance, especialmente útil ao abrir links externos.
• Dentro do <a>, há uma tag <i> para o ícone, com duas classes:
  • fab: uma classe necessária para ícones FontAwesome de marcas.
  • $icon: a classe específica da rede social (ex: fa-facebook, fa-twitter), gerada usando a função esc_attr() para segurança, evitando que valores maliciosos causem problemas.

6. Fechamento da Div .social-icons

echo '</div>';

Por fim, essa linha fecha a <div class="social-icons"> aberta anteriormente, concluindo o contêiner dos ícones.

Resumo

Este código cria uma lista de ícones de redes sociais com links personalizados, exibidos apenas se o usuário configurou URLs válidas no Customizer. Ele usa classes do FontAwesome para mostrar os ícones, além de elementos HTML (<a>, <i>) e funções de segurança (esc_url, esc_attr) para garantir que o código HTML gerado seja seguro e adequado para exibição.

Passo 2: Exibir os ícones das redes sociais

Para exibir os ícones de redes sociais usando FontAwesome, adicione o seguinte código no arquivo onde você quer que os ícones apareçam (geralmente no header.php ou footer.php do seu tema), bem como você pode também inserir no início ou final de cada post através de uma função:

<?php
// Array com os nomes e os ícones das redes sociais
$social_networks = array(
    'facebook' => 'fa-facebook',
    'twitter' => 'fa-twitter',
    'instagram' => 'fa-instagram',
    'linkedin' => 'fa-linkedin',
);

echo '<div class="social-icons">';
foreach ( $social_networks as $network => $icon ) {
    $url = get_theme_mod( $network . '_url' );
    if ( $url ) {
        echo '<a href="' . esc_url( $url ) . '" target="_blank" rel="noopener noreferrer">';
        echo '<i class="fab ' . esc_attr( $icon ) . '"></i>';
        echo '</a>';
    }
}
echo '</div>';
?>

CSS para estilizar os ícones

Adicione o seguinte código CSS no seu arquivo de estilos (style.css) para estilizar os ícones:

.social-icons {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.social-icons a {
    color: #333;
    font-size: 24px;
    transition: color 0.3s;
}

.social-icons a:hover {
    color: #0073aa; /* Altere para a cor desejada */
}

Observações

1. FontAwesome: Certifique-se de que o FontAwesome esteja carregado no seu tema. Caso não esteja, você pode incluir o CDN no functions.php do tema:

function mytheme_enqueue_scripts() {
    wp_enqueue_style( 'fontawesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css' );
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_scripts' );

Ícones adicionais: Caso precise de outras redes sociais, basta adicionar mais itens ao array $social_networks tanto no Customizer quanto no código de exibição.

Esse código adiciona uma funcionalidade prática e personalizável ao seu tema WordPress, permitindo que o usuário configure facilmente links para ícones de redes sociais diretamente no Customizer. Com isso, ele pode adicionar ou atualizar os links sem a necessidade de editar o código-fonte, facilitando o gerenciamento das redes sociais.

Além disso, o uso do FontAwesome proporciona ícones visuais de alta qualidade, que podem ser estilizados conforme o design do site, melhorando a experiência de navegação para o usuário final. Essa abordagem modular torna o tema mais flexível e amigável para futuros ajustes ou expansões, além de facilitar a manutenção.

• Veja também: Tudo sobre Hooks no WordPress com Exemplos Práticos
• wilson66