Shortcode para Avaliação por Estrelas no WordPress

Este snippet permite que você adicione uma funcionalidade de avaliação por estrelas em seus posts do WordPress, baseada em um campo personalizado chamado avaliacao. Isso melhora a interação com os usuários, fornecendo uma maneira visual de exibir avaliações.

0
				
					function shortcode_avaliacao_estrelas() {
    global $post;

    // Obtém a avaliação do campo personalizado
    $avaliacao = floatval( get_post_meta( $post->ID, 'avaliacao', true ) );
    
    // Gera as estrelas com base na avaliação
    $html = '<div class="avaliacao-estrelas">';
    for ( $i = 1; $i = $i ) {
            // Estrela cheia
            $html .= '<i class="fas fa-star"></i>';
        } elseif ( $avaliacao >= $i - 0.5 ) {
            // Meia estrela
            $html .= '<i class="fas fa-star-half-alt"></i>';
        } else {
            // Estrela vazia
            $html .= '<i class="far fa-star"></i>';
        }
    }
    $html .= '</div>';

    return $html;
}
add_shortcode( 'avaliacao_estrelas', 'shortcode_avaliacao_estrelas' );
				
			

Quer ajuda de um especialista para implementar?

Instruções de Uso

Este snippet cria um shortcode avaliacao_estrelas que exibe uma avaliação por estrelas em um post no WordPress. A avaliação é baseada em um campo personalizado chamado avaliacao.

Como funciona:

  1. Função do Shortcode:
    • function shortcode_avaliacao_estrelas() { ... }: Define a função shortcode_avaliacao_estrelas que gera o HTML para a avaliação por estrelas.
  2. Obtenção da Avaliação:
    • global $post;: Acessa o objeto global $post para obter informações sobre o post atual.
    • $avaliacao = floatval( get_post_meta( $post->ID, 'avaliacao', true ) );: Obtém o valor da avaliação do campo personalizado avaliacao e o converte para um valor float.
  3. Geração das Estrelas:
    • $html = '<div class="avaliacao-estrelas">';: Inicia o HTML para o contêiner das estrelas.
    • for ( $i = 1; $i <= 5; $i++ ) { ... }: Itera de 1 a 5 para gerar até 5 estrelas.
      • Estrela Cheia: if ( $avaliacao >= $i ) { $html .= '<i class="fas fa-star"></i>'; }
      • Meia Estrela: elseif ( $avaliacao >= $i - 0.5 ) { $html .= '<i class="fas fa-star-half-alt"></i>'; }
      • Estrela Vazia: else { $html .= '<i class="far fa-star"></i>'; }
    • $html .= '</div>';: Fecha o contêiner das estrelas.
  4. Retorno do HTML:
    • return $html;: Retorna o HTML gerado para ser exibido no local onde o shortcode é usado.
  5. Registro do Shortcode:
    • add_shortcode( 'avaliacao_estrelas', 'shortcode_avaliacao_estrelas' );: Registra o shortcode [ avaliacao_estrelas ] no WordPress, associando-o à função shortcode_avaliacao_estrelas.

Instruções de Uso

Este código pode ser adicionado ao arquivo functions.php do seu tema ou, preferencialmente, em um plugin específico para o site.

Para usar o shortcode, basta adicionar [ avaliacao_estrela ] no conteúdo de um post ou página onde você deseja exibir a avaliação por estrelas.

[ avaliacao_estrelas ]

Outros Snippets

WooCommerce
Este snippet cria um shortcode que exibe os detalhes de uma reserva do WooCommerce com base no ID do pedido fornecido na URL.
WordPress
Este snippet redireciona todos os visitantes do site que não estejam logados para uma página específica (não a página de login).
WordPress
Este snippet redireciona todos os visitantes do site que não estejam logados para a página de login do WordPress. Isso é útil se você deseja restringir o acesso ao conteúdo do seu site apenas para usuários autenticados.

Últimos Posts

Como Estilizar Blocos Gutenberg com CSS e Classes Dinâmicas

Estilizando Blocos Gutenberg com CSS e Classes Dinâmicas

Aprenda como aplicar estilos personalizados aos seus blocos Gutenberg, com atributos dinâmicos e uso correto de CSS modular no editor e frontend.

Criando Campos Dinâmicos e InspectorControls no Gutenberg

Campos Dinâmicos e InspectorControls no Gutenberg: Deixe Seu Bloco Interativo

Aprenda a criar blocos Gutenberg com campos dinâmicos usando attributes e InspectorControls. Torne seu bloco interativo com React e WordPress moderno

Criando Blocos Personalizados com Gutenberg e React

Criando Blocos Personalizados com Gutenberg e React

Aprenda a criar blocos personalizados com React no WordPress usando o editor Gutenberg e o pacote @wordpress/scripts. Desenvolvimento moderno de verdade

Como Criar Comandos WP-CLI Personalizados para Plugins

Criando Comandos WP-CLI Personalizados para Plugins WordPress

Aprenda como criar comandos WP-CLI personalizados para seu plugin WordPress, executando lógica direto no terminal. Agilize seu fluxo como um dev profissional.

Como Funciona o apply_filters no WordPress

Como Funciona o apply_filters() no WordPress (com Exemplos Práticos)

Entenda o que é o apply_filters no WordPress, como ele funciona, e como usá-lo para tornar seu código mais flexível e extensível. Inclui exemplos práticos e dicas de uso.

Criando Hooks Personalizados com do_action e apply_filters

Hooks Avançados no WordPress: apply_filters, do_action e boas práticas

Aprenda como criar hooks personalizados com do_action e apply_filters para deixar seus plugins WordPress modulares e extensíveis. Arquitetura profissional de verdade

Comentários

Você precisa estar logado para ver esta informação.

Adicione seu Snippet

Título *
Resumo *
Descrição Completa *
Código *
Instruções de uso *

Solicitar Orçamento

Torne-se um Assinante e Eleve seu Conhecimento do WordPress!

Acesso Exclusivo, Suporte Especializado e Muito Mais.

Se você está aproveitando nosso conteúdo gratuito, vai adorar os benefícios exclusivos que oferecemos aos nossos assinantes! 

Não perca a oportunidade de maximizar seu potencial no WordPress. Clique no botão abaixo para se tornar um assinante e leve suas habilidades ao próximo nível!