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.
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á.
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 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.
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.
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.
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 ...
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.
- Como exibir a descrição das categorias no WordPress
- Como otimizar seu arquivo WordPress Robots.txt para um SEO perfeito
- Como criar um mercado com WordPress
- Como adicionar um widget para o cabeçalho do seu blog WordPress
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.
...
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
Não encontrei em nenhum lugar um .po em que este texto seja encontrado no arquivo comments.php
Obrigado pela vossa ajuda
Bom Dia,
Você tem que procurar nos arquivos de tema do WordPress que você usa.
Eu procurei todos os arquivos de idiomas, mas não encontrei nada
Nesse caso, entre em contato com o vendedor do tema se for premium.
Não sei escrever aqui