Os comentários desempenham um papel crucial na construção de uma comunidade na Internet. Os comentários proporcionam uma plataforma de interação para os seus leitores, onde podem partilhar as suas ideias, o que muitas vezes os faz querer voltar.

Existem várias maneiras de incentivar os usuários a deixar um comentário em 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 a funcionalidade de comentários por meio de IDs de mídia social e como criar a funcionalidade de assinatura de comentários e muito mais. 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 sobre estilo, queremos dizer Lado CSS da coisa. Abaixo, vou mostrar como personalizar a aparência do formulário de comentários no WordPress. Cada elemento por padrão no WordPress possui um código CSS, é 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 Temas do WordPress, temos um arquivo chamado comments.php que é usado para exibir comentários e formulário de comentário em postagens e páginas de 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, esta função gera seu formulário de comentário com três campos de texto (nome, e-mail e site), uma grande caixa de texto, para o conteúdo do comentário e o botão de envio.

Você pode modificar facilmente cada um desses elementos apenas manipulando as classes e identificadores CSS padrão. Aqui está uma lista das classes CSS padrão que o WordPress adiciona em 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 lhe dar uma ideia do que podemos 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 podem ver facilmente o que estão mudando e isso dá um lado dinâmico ao seu site.

#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.

destacar-forma-campo ativo

Com o uso dessas classes, você pode alterar a maneira como o texto aparece dentro dos campos. Isso é o 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ário. No exemplo a seguir, daremos a ele 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 logins 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 gratuita acessando o seguinte endereço: https://app.oneall.com

Feito isso, você não precisará configurar uma API para cada rede que deseja usar para permitir que seus usuários se conectem por meio delas.

Embora as APIs das diferentes redes sociais estejam em constante mudança, você não terá que fazer nada, os desenvolvedores deste plugin irão atualizar sua API para você. Tudo que você precisa fazer é entrar na API OneAll.

É assim que seus formulários serão exibidos.

como personalizar o formulário 2 dos comentários do wordpresscomo personalizar o formulário de comentários do wordpress 

Descubra também alguns plugins premium do WordPress  

Você pode usar outro WordPress plugins para dar uma aparência moderna e otimizar o manuseio do seu blog ou site.

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

1. WP Instant Search & Auto Suggest

O plug-in "WP Instant Search & Auto Suggest" permite que você obtenha instantaneamente sugestões de artigos, páginas e tipos de postagem personalizados ao pesquisar seu blog do WordPress. Funciona 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 por meio de parâmetros 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 404 que redirecionará o visitante para a página inicial ou página personalizada, depois de habilitar isso WordPress Plugin.Página de erro 404 redirecionada para página inicial ou página personalizada

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

Ce WordPress Plugin não apenas redireciona, mas também pode ser uma solução adequada para melhorar a classificação do seu site nos resultados dos buscadores.

Descarregar | Demo | hospedagem na web

3. Mensagens relacionadas Pro 

O Related Posts Pro fornece uma solução simples, mas poderosa, para todo tipo de conteúdo semelhante no WordPress. Ele suporta tipos de postagem personalizados, multisite, categorias, conteúdo misto, conteúdo personalizado e muito mais ...Post Pro relacionado

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 postagem personalizados usados ​​pelos plug-ins WooCommerce, WP eCommerce, bbPress etc ..., um barra de pesquisa com filtro, ddocumentação muito descritiva e muito mais.

Descarregar | Demo | hospedagem na web

Recursos Recomendados

Descubra outros recursos recomendados para ajudá-lo a criar e gerenciar seu site.

Conclusão

Aqui ! É isso para este tutorial. Esperamos que este artigo tenha ajudado você a tornar seus formulários de feedback mais envolventes. Não hesite em nos oferecer também 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.

...