Recentemente, um cliente queria que uma de suas páginas do WordPress fosse protegida, sem problemas! Então ele voltou e disse, você pode mudar o texto e torná-lo mais bonito? Hum… Claro! Veja como…
Passo 1 Edite seu arquivo functions.php
Tudo bem, vamos abrir seu arquivo functions.php e adicionar este bloco de código:
1 |
|
2 |
|
3 |
add_filter( 'the_password_form', 'custom_password_form' ); |
4 |
function custom_password_form() { |
5 |
global $post; |
6 |
$label = 'pwbox-'.( empty( $post->ID ) ? rand() : $post->ID ); |
7 |
$o = ' get_option('siteurl') . '/wp-pass.php" method="post"> |
8 |
' . __( "THIS IS YOUR NEW PASSWORD INTRO TEXT THAT SHOWS ABOVE THE PASSWORD FORM" ) . ' |
9 |
$label . '">' . __( "PASSWORD:" ) . ' . $label . '" type="password" style="background: #ffffff; border:1px solid #999; color:#333333; padding:10px;" size="20" />. esc_attr__( "Submit" ) . '" /> |
10 |
|
11 |
'; |
12 |
return $o; |
13 |
}
|
14 |
?>
|
Deixe-me dissecar isso bem rápido para você. O código de proteção por senha é gerado a partir de um arquivo na pasta wp-includes. “Legal”, você pensa, “vou entrar lá e fazer minhas alterações”. Não faça isso! Por mais tentador que seja, editar o código principal é uma ideia terrível, baixa e nada boa. Por um motivo: o que acontece se você atualizar o WordPress? Ele é apagado… desculpe. Ok, então colocar este bloco de código em seu arquivo functions.php permite que você o altere e não se preocupe em perder quaisquer alterações no formulário ao atualizar.
Como você pode ver, na verdade, adicionei classes ao próprio formulário, o rótulo do formulário, o campo de senha e também o botão. Agora temos tudo o que precisamos para estilizá-lo completamente com CSS. Ah, e não estamos alterando nada na pasta wp-includes, então não estamos quebrando nenhuma regra.
Passo 2 Alterar o texto padrão de proteção por senha
O texto em maiúsculas acima também mostra o que eu mudei… o primeiro conjunto de texto:
ESTE É O SEU NOVO TEXTO DE INTRODUÇÃO DE SENHA QUE MOSTRA ACIMA DO FORMULÁRIO DE SENHA
Como você pode ver, este era o seu texto de introdução… costumava dizer o seguinte:
Este post/página é protegido por senha. Para visualizá-lo, digite sua senha abaixo
Agora podemos alterá-lo para qualquer texto que você quiser lá em cima. Você pode até excluir tudo entre essas citações e simplesmente não exibir nada lá em cima.
etapa 3 Alterar o rótulo do campo de entrada de senha
O rótulo padrão mostrado à esquerda do campo de entrada é Senha. Aqui você pode alterá-lo para o que você gostaria de dizer. No meu caso, atribuí a ele uma classe que retirou o rótulo em css colocando a exibição em nenhum.
1 |
|
2 |
.pass-label { display: none; } |
Você também pode alterar o tamanho da fonte, a cor e os trabalhos para este rótulo
Passo 4 Estilize o campo de entrada de senha
Eu odeio a aparência dos formulários, mas com essa adição ao campo de entrada de senha padrão, posso torná-lo um pouco mais “atualizado”. Sinta-se à vontade para alterá-lo da maneira que achar melhor.
1 |
|
2 |
|
Passo 5 Estilizando o botão Enviar
No código de funções, adicionei uma classe ao botão enviar chamada “botão”. Fiz isso porque queria que todos os botões no site do meu cliente tivessem exatamente a mesma aparência. A uniformidade em um site é fundamental. Aqui está o CSS que usei:
1 |
|
2 |
.button { |
3 |
background-color: #000; |
4 |
color:#fff; |
5 |
border: 0; |
6 |
font-family: Impact, Arial, sans-serif; |
7 |
margin: 0; |
8 |
height: 33px; |
9 |
padding: 0px 6px 6px 6px; |
10 |
font-size: 15px; |
11 |
cursor: pointer; |
12 |
}
|
Por algum motivo, eu estava recebendo a seta quando passei o mouse sobre o botão, então apenas mudei o cursor para mostrar o ponteiro e ele voltou para a mão ao passar o mouse.
Passo 6 Adicionando texto extra abaixo do formulário
Na verdade, eu precisava adicionar uma pequena observação para informar às pessoas que o campo de senha diferencia maiúsculas de minúsculas, portanto, para adicionar texto extra abaixo do formulário, apenas adicionei um código de parágrafo e inseri uma tag de estilo para estilizar o texto separadamente do restante do página.
E acabamos!
