Ir para o conteúdo principal

Como personalizar o formulário de comentários sobre WordPress

Divi: o tema WordPress mais fácil de usar

Divi: O melhor tema WordPress de todos os tempos!

mais Downloads 600.000Divi é o tema WordPress mais popular do mundo. É completo, fácil de usar e vem com mais de modelos livres 62. [Recomendado]

Os comentários desempenham um papel crucial na criação de uma comunidade na internet. Os comentários fornecem uma plataforma interativa para seus leitores, onde eles podem compartilhar seus pensamentos, o que muitas vezes os faz querer voltar.

Existem várias maneiras de incentivar os usuários a deixar um comentário no seu blog. Uma dessas maneiras é criar um formulário de comentário bonito, utilizável e acessível.

Neste tutorial, mostraremos como estilizar o formulário de comentários padrão do WordPress, também mostraremos como adicionar funcionalidade de comentários por meio de credenciais de redes sociais e como criar um recurso de inscrição de comentários. mais.

Mas antes, se você nunca instalou o WordPress, descubra Como instalar um blog WordPress passos 7 et Como encontrar, instalar e ativar um tema WordPress em seu blog

Então, voltemos ao porquê de estarmos aqui.

Como mudar o estilo de comentários WordPress

Quando falamos de estilo, nos referimos a Lado CSS da coisa. Abaixo, mostrarei como personalizar a aparência do formulário de comentários no WordPress. Cada item padrão no WordPress tem um código CSS, como é o caso da lista de comentários, menus de navegação, o formulário de comentários, o Widgets e mais.

Entre os arquivos de tema do WordPress, temos um arquivo chamado comments.php que é usado para exibir comentários e formulário de comentários nas postagens e nas páginas do blog. Para exibir o formulário de comentários do WordPress, o " comment_form () É usado.

Discover Como encontrar o link para a página de login do WordPress

Por padrão, essa função gera seu formulário de comentário com três campos de texto (nome, email e site), uma caixa de texto grande para o conteúdo do comentário e o botão Enviar.

Você pode modificar facilmente cada um desses elementos simplesmente manipulando as classes e identificadores CSS padrão. Aqui está uma lista das classes CSS padrão que o WordPress adiciona a cada formulário de comentário.

#respond {#} resposta-título {#} cancelar-how-reply-link {} {} #commentform #author #email {} {} {} #url #COMMENT #submit .comment Notes {} {} .required .como-form-autor {} .comment-form-mail} {.como-form-url} {.como-form-how {} permitiu-.form-tags {} .form a apresentar

Simplesmente ajustando essas classes CSS, você pode alterar completamente a aparência do formulário de comentários. Vamos tentar mudar algo para ter uma idéia do que você pode fazer.

Discover Como substituir links de imagem após a instalação do SSL no WordPress

Primeiro, começaremos destacando o campo ativo do formulário. Ao destacar os campos ativos, os usuários poderão saber facilmente o que estão editando e isso dá ao seu site uma pequena vantagem dinâmica.

#respond {background: #ececec; padding: 0 5 0px 5px; } / * Destacando o campo de texto ativa * / entrada #respond [type = text] textarea {-webkit-transição: todos 0.30s aliviar-in-out; -moz-transição: todos 0.30s aliviar-in-out; -ms-transição: todos 0.30s aliviar-in-out; -o-transição: todos 0.30s aliviar-in-out; delinear: none; padding: 3px 0px 3px 3px; margem: 5px 1px 3px 0px; fronteira: #dddddd 1px sólido; } #respond input [type = text]: foco, textarea: foco {box-shadow: 0 0 5px rgba (81, 203, 238, 1); margem: 5px 1px 3px 0px; fronteira: rgba 1px sólido (81, 203, 238, 1); }

Aqui está a aparência do seu formulário de comentários com o Twenty Twelve.

Crie facilmente seu site com Elementor

Elementor permite criar facilmente qualquer design de site com uma aparência profissional. Pare de pagar caro pelo que você pode fazer por si mesmo. [Grátis]

destacar-forma-campo ativo

Com o uso dessas classes, você pode alterar a maneira como o texto aparece dentro dos campos. É isso que faremos no exemplo a seguir.

#author {font-family: Lagosta "Lagosta 1.4", "Droid Sans", Arial; fonte de tamanho: 16px; Cor: #1d1d1d; letter-spacing: .1em; #url} {color: #21759b; font-family: "Luicida Console", "Courier New", "Courier", minivan; } 

Aqui está o resultado que o código anterior produzirá.

como forma de entrada de estilo

Você também pode alterar o estilo do botão do formulário de comentários. No exemplo a seguir, forneceremos um fundo gradiente.

#submit {font-family: Arial; cor: #ffffff; fonte de tamanho: 20px; padding: 10px; text-decoration: none; box-shadow: 0px 1px 3px #666666; -webkit-box-shadow: 0px 1px 3px #666666; -moz-box-shadow: 0px 1px 3px #666666; text-shadow: 1px 1px 3px #666666; fundo: -webkit de gradiente (linear, 0 0, 0 100%, a partir de (#006ad4) a (#003366)); fundo: -moz-linear de gradiente (topo, #006ad4, #003366); } #submit: pairar {fundo: -webkit de gradiente (linear, 0 0, 0 100%, a partir de (#003366) a (#006ad4)); fundo: -moz-linear de gradiente (topo, #003366, #006ad4)}

Aqui está o resultado que será exibido.

como a apresentar-button

Como adicionar interação social nos comentários

Vamos começar adicionando conexões sociais ao formulário de comentários do WordPress. A primeira coisa que você precisa fazer é instalar e ativar o plugin Entrada sociais

Discover Como instalar um plugin no WordPress Para ativar este plugin, você deve criar uma conta gratuitamente, acessando o seguinte endereço: https://app.oneall.com

Você está procurando os melhores temas e plugins do WordPress?

Baixe os melhores plugins e temas WordPress no Envato e crie facilmente o seu site. Já mais do que 49.720.000 downloads. [EXCLUSIVO]

Depois de concluído, você não precisará configurar uma API para cada rede que deseja usar para permitir que seus usuários se conectem através deles.

Embora as APIs de diferentes redes sociais estejam constantemente mudando, você não terá nada para fazer, os desenvolvedores deste plugin atualizarão sua API para você. Tudo o que você precisa fazer é conectar-se à API do OneAll.

Veja como seus formulários serão exibidos.

Descubra também alguns plugins premium do WordPress

Você pode usar outros plugins do WordPress para dar uma aparência moderna e otimizar a aderência do seu blog ou site.

Oferecemos a você aqui alguns plugins premium do WordPress que ajudarão você a fazer isso.

1. Pesquisa instantânea do WP e sugestão automática

O plug-in Pesquisa instantânea e Sugestão automática do WP permite obter instantaneamente sugestões de artigos, páginas e tipos personalizados de postagens quando você pesquisa no seu blog WordPress. Trabalha com WPBakery et Pedra angular. wp-time-search-wordpress-plugin-para-pesquisa

Suas características incluem: orpesquisar no modo de tela cheia, orPesquisa instantânea por tipos personalizados de publicações, compatibilidade com Visual Composer, Ttrês estilos de design integrado, esquemas de cores 5 para escolher, opsuporte a teclado e mouse, eTotalmente personalizável via configurações etc ...

Descarregar | Demo | hospedagem na web

2. Redirecionamento de página de erro 404 para página inicial ou página personalizada

Aqui está uma das melhores maneiras de adicionar facilmente uma página de erro do 404 que redirecionará o visitante para a página inicial ou a página personalizada, depois de ativar este plugin do WordPress.

Todas as páginas de erro do 404 serão redirecionadas para a página inicial ou para um URL personalizado. Usando este plugin do WordPress, você permitirá que o Google reduza a pagerank do seu site, se houver muitas páginas de erro do 404.

Este plugin do WordPress não apenas redireciona, mas também pode ser uma solução adequada para melhorar a classificação do seu site nos resultados dos mecanismos de pesquisa.

Descarregar | Demo | hospedagem na web

3. Mensagens relacionadas Pro

Posts relacionados Pro fornece uma solução simples, mas poderosa, para qualquer tipo de conteúdo semelhante no WordPress. Ele suporta tipos de publicação personalizados, vários sites, categorias, conteúdo misto, conteúdo personalizado e muito mais ...

Como recursos, oferece entre outros: 3 diferentes tipos de layouts, Modelos predefinidos 65 para cada layout, umnenhuma codificação será necessária, o apoio de tnavegação e reprodução automática, compatibilidade com os tipos de post personalizado que os plugins usam WooCommerce, WP eCommerce, bbPress etc ..., um barra de pesquisa com filtro, ddocumentação muito descritiva e muito mais.

Descarregar | Demo | hospedagem na web

Crie facilmente sua loja online

Baixe gratuitamente o WooCommerce, os melhores plugins de e-commerce para vender seus produtos físicos e digitais no WordPress. [Recomendado]

Recursos Recomendados

Descubra outros recursos recomendados que o acompanharão na criação e gerenciamento de seu site.

Conclusão

É isso aí! É isso neste tutorial. Esperamos que este artigo tenha ajudado você a tornar seus formulários de comentários mais atraentes. Sinta-se à vontade para também oferecer suas dicas sobre como personalizar o WordPress e, principalmente, compartilhe este artigo com seus amigos em suas redes sociais favoritas.

No entanto, você também poderá consultar nossos Ressources, se você precisar de mais elementos para realizar seus projetos de criação de sites da Internet, consultando nosso guia no site Criação de blog WordPress.

Se você tiver sugestões ou comentários, deixe-os em nossa seção Comentários.

...

Este artigo contém comentários 5
  1. Obrigado por este tutorial, mas como modificar a tradução inicial
    Por exemplo, Enviar um Comentário é traduzido por Publicar o comentário
    Eu gostaria de mudar em Postar um comentário
    Eu encontrei em nenhum lugar um .po onde está este texto que aparece bem no arquivo comments.php

    Obrigado pela vossa ajuda

Deixe um comentário

Seu endereço de email não será publicado. Campos obrigatórios estão marcados com *

Este site usa Akismet para reduzir indesejados. Saiba mais sobre como seus dados de comentários são usados.

De volta ao topo
1 ações
ação1
chilrear
Enregistrer