Como criar temas para WordPress
WordpressCOMMENTS.PHP
Esse arquivo é destinado a criação do modelo de comentários que iremos utilizar em nosso tema. Ele substitui o modelo padrão do WordPress.
O código desse arquivo não é muito amigável, portanto preste bastante atenção no tutorial, pois irei tentar explicar o melhor possível.
PASSO 1: SEGURANÇA
Primeiramente precisamos criar um código para assegurar que nosso arquivo não será acessado diretamente e que caso o artigo esteja protegido por senha, os comentários também não poderão ser apresentados.
Segue o código.
|
1
2
3
4
5
6
7
8
9
|
<?php
// Não excula essas linhas
if (!empty($_SERVER[‘SCRIPT_FILENAME’]) && ‘comments.php’ == basename($_SERVER[‘SCRIPT_FILENAME’]))
die (‘Por favor, não tente acessar este arquivo diretamente. Obrigado!’);
if ( post_password_required() ) { ?>
<p class=“nocomments”>Este artigo está protegido por senha. Insira-a para ver os comentários.</p>
<?php return; }
?>
|
No código acima você pode estilizar as mensagens como quiser.
PASSO 2: EXISTÊNCIA
Nesse passo nós iremos verificar se existem comentários registrados para o determinado artigo.
Iremos também criar uma paginação e apresentar mensagens de existência dos comentários.
Copiem o código abaixo e colem dentro do arquivo comments.php.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<div id=“comments”>
<header>
<h3>DEIXE SEU COMENTÁRIO!</h3>
</header>
<?php if ( have_comments() ) : ?>
<div class=“navigation”>
<?php paginate_comments_links(); ?>
</div>
<ol class=“commentlist”>
<?php wp_list_comments(‘avatar_size=64&type=comment&callback=mytheme_comment’); ?>
</ol>
<div class=“navigation”>
<?php paginate_comments_links(); ?>
</div>
<?php else : echo “Não existem comentários”; ?>
<?php endif; ?>
</div>
|
ANALISANDO O CÓDIGO
Iremos analisar somente os códigos PHP que realmente fazem diferença, mas lembrem-se que a parte em HTML também é muito importante e deve ter sua sintaxe correta.
| Trecho | Descrição |
|---|---|
<?php if ( have_comments() ) : ?></code> |
Aqui nós estamos realizando uma condição para verificar se exintem comentários |
<?php wp_list_comments('...'); ?> |
A função wp_list_comments() exibe todos os comentários para um post ou página com base em uma variedade de parâmetros, incluindo os estabelecidos na área de administração. Nós adicionamos alguns argumentos à essa função (avatar_size, type e callbak). Iremos falar deles posteriormente, pois irão fazer a diferença durante o processo de criação dete tutorial. Apenas guardem essa informação. |
<?php paginate_comments_links(); ?> |
Adiciona a paginação dos comentários. |
ATIVANDO A PAGINAÇÃO NOS COMENTÁRIOS
Para que a paginação nos comentários funcione, é necessário que você faça algumas configurações no menu do adm do WordPress Configurações > Discussão.
Ative o checkbox Dividir comentários em páginas em …...
Sem essa configuração, a paginação não irá funcionar, ok?
Nesta página você também pode realizar outras configurações que irão ser destinadas aos comentários, como: Moderação, ordem dos comentários, entre outros.
NOSSO CÓDIGO ATÉ AGORA
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
<?php
// Não excula essas linhas
if (!empty($_SERVER[‘SCRIPT_FILENAME’]) && ‘comments.php’ == basename($_SERVER[‘SCRIPT_FILENAME’]))
die (‘Por favor, não tente acessar este arquivo diretamente. Obrigado!’);
if ( post_password_required() ) { ?>
<p class=“nocomments”>Este artigo está protegido por senha. Insira-a para ver os comentários.</p>
<?php return; }
?>
<div id=“comments”>
<header>
<h3>DEIXE SEU COMENTÁRIO!</h3>
</header>
<?php if ( have_comments() ) : ?>
<div class=“navigation”>
<?php paginate_comments_links(); ?>
</div>
<ol class=“commentlist”>
<?php wp_list_comments(‘avatar_size=64&type=comment&callback=mytheme_comment’); ?>
</ol>
<div class=“navigation”>
<?php paginate_comments_links(); ?>
</div>
<?php else : echo “Não existem comentários”; ?>
<?php endif; ?>
</div>
|
PASSO 3: FUNÇÃO
Na função wp_lis_comments() que codificamos no passo 2, informamos alguns argumentos: “avatar_size”, “type” e “callbak”. Esses argumentos fazem toda a diferença durante esse processo, pois com eles nós estamos decidindo:
- avatar_size: tamanho da imagem do avatar do autor do comentário.
- type: o tipo de comentário, que no nosso caso é “comment”. Existem outros tipos (trackback, ping, ping back, pings).
- callback: Esse argumento, nete momento, é o que vai fazer a diferença. Ele chama uma função chamada “mytheme_comment”. Essa função nós iremos criar agora neste passo. É com ela que iremos criar a estrutura dos comentários.
Como disse acima, a função mytheme_comment, que pode receber o nome que vocês quiseres, é que vai estruturar os comentários.
O código desta função é um pouco extenso, portanto deixei diversos comentários para facilitar a vida de vocês.
Copiem o código abaixo e colem no arquivo functions.php.
Somente uma consideração antes de colar: a linha 1
<?phpe a ultima linha devem ser excluídas caso você esteja adicionando todas as funções do documento dentro de uma só abertura php<?php ?>. Caso você esteja criando cada função dentro de uma chamada php, deixe o código como está.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
|
<?php
// FUNCAO PARA APRESENTACAO DOS COMENTARIOS
function mytheme_comment($comment, $args, $depth) {
$GLOBALS[‘comment’] = $comment;
extract($args, EXTR_SKIP);
// VERIFICA QUAL O ESTILO DO COMENTARIO “LI, DIV” E ACRESCENTA A TAG CORRETA AOS COMENTARIOS
if ( ‘div’ == $args[‘style’] ) {
$tag = ‘div’;
$add_below = ‘comment’;
} else {
$tag = ‘li’;
$add_below = ‘div-comment’;
}
?>
<!– VERIFICA SE O COMENTARIO E REPLICA –>
<<?php echo $tag; ?>
<?php comment_class( empty( $args[‘has_children’] ) ? ” : ‘parent’ ) ?> id=“comment-<?php comment_ID() ?>“>
<!– INICIO DO CORPO DO COMENTARIO –>
<?php if ( ‘div’ != $args[‘style’] ) : ?>
<div id=“div-comment-<?php comment_ID() ?>“ class=“comment-body”>
<?php endif; ?>
<div class=“comment-author vcard”>
<div class=“avatar-autor”>
<?php if ( $args[‘avatar_size’] != 0 ) echo get_avatar( $comment, $args[‘avatar_size’] ); ?>
</div>
<!– DADOS DO COMENTARIO (AUTOR, DIA, HORA) –>
<div class=“comment-meta commentmetadata”>
<?php
printf( __( ‘<cite class=”fn”>%s</cite>’ ), get_comment_author_link() );
echo ‘ em ‘;
?>
<a href=“<?php echo htmlspecialchars( get_comment_link( $comment->comment_ID ) ); ?>“>
<?php printf( __(‘%1$s at %2$s’), get_comment_date(), get_comment_time() ); ?>
</a>
<!– EDITAR COMENTARIO –>
<?php edit_comment_link(__(‘Editar’), ‘<p>’, ‘</p>’); ?>
</div>
</div>
<!– VERIFICA SE O COMENTARIO AINDA NAO FOI APROVADO –>
<?php if ( $comment->comment_approved == ‘0’ ) : ?>
<em class=“comment-awaiting-moderation”><?php _e( ‘Seu comentário ainda não foi aprovado.’ ); ?></em>
<br />
<?php endif; ?>
<!– TEXTO DO COMENTARIO –>
<?php comment_text(); ?>
<!– LINK PARA REPLICA DO COMENTARIO –>
<div class=“reply”>
<?php comment_reply_link( array_merge( $args, array( ‘add_below’ => $add_below, ‘depth’ => $depth, ‘max_depth’ => $args[‘max_depth’] ) ) ); ?>
</div>
<?php if ( ‘div’ != $args[‘style’] ) : ?>
</div>
<?php endif; ?>
<?php
}
?>
|
Salvem o arquivo e abram seu site em algum comentário para analisar como se encontra a área de comentários. Ela deve apresentar a mensagem “Não existem comentários.” caso vocês ainda não tenham criado nenhuma comentário, é claro!
PASSO 4: FORMULÁRIO
Existem 2 formas de trabalharmos com a criação do formulário para inserção de comentários no tema.
FORMA 1 – FORM PADRÃO DO WORDPRESS
Você pode utilizar o modelo padrão do WordPress, apenas inserindo o código abaixo em seu arquivo comments.php antes do fechamento da div#comments:
Existe a possibilidade de adicionarmos alguns argumentos para alterarmos a forma de apresentação, como: modificar o título do formulário, alterar a nomenclatura do botão de comentar, do botão de responder, cancelar e etc.
Abaixo apresento os valores default desses argumentos:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
$defaults = array(
‘fields’ => apply_filters( ‘comment_form_default_fields’, $fields ),
‘comment_field’ => ‘<p class=”comment-form-comment”>…’,
‘must_log_in’ => ‘<p class=”must-log-in”>…’,
‘logged_in_as’ => ‘<p class=”logged-in-as”>…’,
‘comment_notes_before’ => ‘<p class=”comment-notes”>…’,
‘comment_notes_after’ => ‘<dl class=”form-allowed-tags”>…’,
‘id_form’ => ‘commentform’,
‘id_submit’ => ‘submit’,
‘title_reply’ => __( ‘Leave a Reply’ ),
‘title_reply_to’ => __( ‘Leave a Reply to %s’ ),
‘cancel_reply_link’ => __( ‘Cancel reply’ ),
‘label_submit’ => __( ‘Post Comment’ ),
);
|
Caso queria alterar alguma coisa, basta que você informe dessa forma:
|
1
2
3
4
5
6
7
8
|
<?php
comment_form(
array(
‘title_reply’ => ‘Deixe um comentário’,
‘label_submit’ => ‘Enviar comentário’
)
);
?>
|
FORMA 2 – CRIANDO SEU PRÓPRIO FORM
Nesta forma você mesmo pode criar um formulário para inserção dos comentários, substituindo o padrão do wordpress.
Essa forma de ser fazer o formulário é mais trabalhosa, mas você tem a liberdade de criar do jeito que quiser, e isso que é show.
Caso queiram utilizar esse método de trabalho, copiem o código abaixo em seu arquivo comments.php antes do fechamento da div#comments.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
|
<?php if ( comments_open() ) : ?>
<div id=“respond”>
<form action=“<?php echo get_option(‘siteurl’); ?>/wp-comments-post.php” method=“post” id=“commentform”>
<fieldset>
<?php if ( $user_ID ) : ?>
<p>
Autentificado como
<a href=“<?php echo get_option(‘siteurl’); ?>/wp-admin/profile.php”><?php echo $user_identity; ?></a>.
<a href=“<?php echo wp_logout_url(); ?>“ title=“Sair desta conta”>Sair desta conta »</a>
</p>
<?php else : ?>
<p>
<label for=“author”>Nome:</label>
<input type=“text” name=“author” id=“author” value=“<?php echo $comment_author; ?>“ size=“80” />
</p>
<p>
<label for=“email”>Email:</label>
<input type=“text” name=“email” id=“email” value=“<?php echo $comment_author_email; ?>“ size=“80” />
</p>
<p>
<label for=“url”>Website:</label>
<input type=“text” name=“url” id=“url” value=“<?php echo $comment_author_url; ?>“ size=“80” />
</p>
<?php endif; ?>
<p>
<label for=“comment”>Mensagem:</label>
<textarea name=“comment” id=“comment” rows=“5” cols=“65”></textarea>
</p>
<p>
<input type=“submit” class=“btn btn-success commentsubmit” value=“Enviar Comentário” />
</p>
<?php comment_id_fields(); ?>
<?php do_action(‘comment_form’, $post->ID); ?>
</fieldset>
</form>
<p class=“cancel”><?php cancel_comment_reply_link(‘Cancelar Resposta’); ?></p>
</div>
<?php else : ?>
<h3>Os comentários estão fechados.</h3>
<?php endif; ?>
|
ANALISANDO O CÓDIGO
| Trecho | Descrição |
|---|---|
<?php if ( comments_open() ) : ?> |
Aqui nós estamos realizando uma condição para verificar se os comentários estão permitidos para o artigo. Existe a possibilidade de vetarmos o uso de comentários em determinados artigos, portanto precisamos verificar se eles estão permitidos. |
<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php"...> |
Aqui eu quero destacar o “action”. Nele nós estamos fazendo referência ao arquivo “wp-comments-post.php”. Esse arquivo é responsável por cadastrar, editar, excluir os posts. E também vamos dar destaque ao ID do formulário. É necessário que o seu ID seja “commentform”. |
<?php if ( $user_ID ) : ?> |
Aqui nós estamos verificando se o usuário que estar a comentar é um usuário ativo do site, ou seja, está logado. Caso ele esteja logado, será apresentado uma mensagem informando que ele está logado como “fulano de tal” e não será apresentado o formulário completo, somente o campo de texto. Caso não seja um usuário ativo, será apresentado o formulário completo, com todos os campos (Nome, Email, Website, Mensagem) |
<?php comment_id_fields(); ?> |
Essa função cria 2 hidden inputs (campos escondidos) que possuem a função de armazenar os valores (comment_post_ID, comment_parent). |
<?php do_action('comment_form', $post->ID); ?> |
Aqui nós estamos adicionando a ação de submeter o formulário que possua o id commentform (id padrão do wordpress) |
<?php cancel_comment_reply_link('Cancelar Resposta'); ?> |
Aqui nós estamos adicionando o link que será utilizado para cancelar o processo de resposta de algum comentário. |
QUANTIDADE DE COMENTÁRIOS
Agora que já temos nosso template de comentários funcionando, vamos adicionar a quantidade de comentários cadastrados no artigo.
Adicione o código abaixo logo dentro do header e acima do h3 no arquivo comments.php.
|
1
|
<p><?php comments_number(‘0’, ‘1’, ‘%’ );?> Comentários</p>
|
CÓDIGO FINAL
Agora veja o resultado final.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
|
<?php
// Não excula essas linhas
if (!empty($_SERVER[‘SCRIPT_FILENAME’]) && ‘comments.php’ == basename($_SERVER[‘SCRIPT_FILENAME’]))
die (‘Por favor, não tente acessar este arquivo diretamente. Obrigado!’);
if ( post_password_required() ) { ?>
<p class=“nocomments”>Este artigo está protegido por senha. Insira-a para ver os comentários.</p>
<?php return; }
?>
<div id=“comments”>
<header class=“dtable”>
<p><?php comments_number(‘0’, ‘1’, ‘%’ );?> Comentários</p>
<h3 class=“dtableCell”>Deixe o seu comentário!</h3>
</header>
<?php if ( have_comments() ) : ?>
<div class=“navigation”>
<?php paginate_comments_links(); ?>
</div>
<br>
<ol class=“commentlist”>
<?php wp_list_comments(‘avatar_size=64&type=comment&callback=mytheme_comment’); ?>
</ol>
<br>
<div class=“navigation”>
<?php paginate_comments_links(); ?>
</div>
<br>
<?php else : echo “Não existem comentários”; ?>
<?php endif; ?>
<?php if ( comments_open() ) : ?>
<div id=“respond”>
<form action=“<?php echo get_option(‘siteurl’); ?>/wp-comments-post.php” method=“post” id=“commentform”>
<fieldset>
<?php if ( $user_ID ) : ?>
<p>
Autentificado como
<a href=“<?php echo get_option(‘siteurl’); ?>/wp-admin/profile.php”><?php echo $user_identity; ?></a>.
<a href=“<?php echo wp_logout_url(); ?>“ title=“Sair desta conta”>Sair desta conta »</a>
</p>
<?php else : ?>
<p>
<label for=“author”>Nome:</label>
<input type=“text” name=“author” id=“author” value=“<?php echo $comment_author; ?>“ size=“80” />
</p>
<p>
<label for=“email”>Email:</label>
<input type=“text” name=“email” id=“email” value=“<?php echo $comment_author_email; ?>“ size=“80” />
</p>
<p>
<label for=“url”>Website:</label>
<input type=“text” name=“url” id=“url” value=“<?php echo $comment_author_url; ?>“ size=“80” />
</p>
<?php endif; ?>
<p>
<label for=“comment”>Mensagem:</label>
<textarea name=“comment” id=“comment” rows=“5” cols=“65”></textarea>
</p>
<p>
<input type=“submit” class=“btn btn-success commentsubmit” value=“Enviar Comentário” />
</p>
<?php comment_id_fields(); ?>
<?php do_action(‘comment_form’, $post->ID); ?>
</fieldset>
</form>
<p class=“cancel”><?php cancel_comment_reply_link(‘Cancelar Resposta’); ?></p>
</div>
<?php else : ?>
<h3>Os comentários estão fechados.</h3>
<?php endif; ?>
</div>
|
PASSO 5: CSS
Agora precisamos somente estilizar nossos comentários para que eles fiquem conforme a imahem acima.
Copiem o código abaixo e colem dentro do arquivo style.css.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
|
/* COMENTARIOS */
#comments li {
list-style: none;
}
#comments header {
background: #eee;
border: 1px solid #ddd;
padding: 10px 16px;
}
#comments header p {
position: relative;
top: 5px;
float: right;
margin: 0;
}
#comments header h3 {
font-size: 20px;
margin: 0;
}
.comment-body {
border: 1px solid #ddd;
box-sizing: border-box;
display: table;
margin-bottom: 12px;
padding: 13px;
width: 100%;
}
.avatar-autor {
float: left;
margin-right: 16px;
}
.comment-meta.commentmetadata {
background: none repeat scroll 0 0 #eee;
margin-bottom: 6px;
padding: 5px;
}
/* PAGINACAO COMENTARIOS */
#comments .navigation {
margin: 16px 0;
padding: 8px 0 8px;
text-align: right;
}
#comments .page-numbers.current {
background: none repeat scroll 0 0 #aaa;
border:1px solid #999999;
color: #fff;
}
#comments .page-numbers {
background: none repeat scroll 0 0 #eee;
border: 1px solid #ddd;
padding: 5px 10px;
|