parudou
parudou
parudou
更新日:2018/10/31

<コピペ用>ワードプレスのコメント欄を超シンプルにカスタマイズする方法

ワードプレスといえば、やはりコメント機能。
これが無ければ、ホームページビルダーでも良かったりする。

しかし、なかなか機能や項目が多く、初期状態では使いにくい。
そこで、超シンプルにする。

※サンプルは当ブログのコメント欄を見てください。

やりたいこと

ワードプレスのコメント欄の初期状態説明

初期状態では必須項目が多く、
とてもじゃないが気楽にコメントできる状態ではありません。
名前だけ任意で入力できる状態にするのが一番。

ということで、カスタマイズします。

カスタマイズ方法

まず、「comments.php」という空のファイルを作成し、
テーマのディレクトリに保存します。
(FTPやSSHを使って保存ください。)
(PHPでも可→ワードプレスのテーマのディレクトリにファイルをPHPで作成する方法(UTF-8対応)

その「comments.php」に次のコードを書きます。

<?php if(have_comments()): ?>
<div class="komentodaimei">コメント</div>
<ul class="komentobu">
<?php
wp_list_comments( array(
'callback'      => 'mytheme_comment',
'comment_count' => &$comment_count,
));
?>
</ul>
<?php endif; ?>

<?php
$args=array(
'label_submit' => 'コメントする',
'comment_field' => '<textarea id="comment" name="comment" cols="65" rows="9" maxlength="65525" required="required"></textarea>',
'comment_notes_before' => '',
'comment_notes_after' => '',
'title_reply' => '',
'logged_in_as' => '',
'title_reply_before' => '',
'title_reply_after' => '',
'cancel_reply_before' => '',
'cancel_reply_after' => '',
'fields' => array(
'email' => '',
'url' => '',
'author' => '<p class="comment-form-author"><label for="author">名前(任意) </label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" /></p>' ,
),

);
echo "<p class=\"gositekitxt\">是非ご感想・ご指摘等をください。</p>";
comment_form($args);
?>
</div>

次にCSS(style.css)に下記を追加します。
※自分の好きなデザインに修正ください。

.komentodaimei{
font-size:1.1em;
font-weight:bold;
margin-bottom:20px;
}

.kome-namae{
color : #006400;
}

.kome-jikan{
color : #006400;
font-size:0.8em;
}

.komentobu p{
margin-top:3px;
margin-bottom:20px;
word-break: break-all;
}

p.gositekitxt{
margin:0;
padding:0;
font-size:0.9em;
}

@media screen and (max-width: 640px) {
textarea{
width: 100%;
}
}

最後に「functions.php」に下記を追加します。

<?php
add_filter( 'cancel_comment_reply_link', '__return_false' );

function mytheme_comment($comment, $args, $depth) {
$GLOBALS['comment'] = $comment;
++$args['comment_count']
?>

<li class="komewaku" id="comment-<?php comment_ID();?>">
<span class="kome-namae" id="komeban<?php echo $args['comment_count']; ?>">
<?php echo $args['comment_count'].":"; ?>
<?php printf(__('名前:%s :'), get_comment_author_link()); ?>
</span>
<span class="kome-jikan">
<?php printf(__('%1$s'), get_comment_date('Y/m/d(D)')); ?>
</span>

<?php comment_text(); ?>

<?php
}
?>

以上で完了ですが、
まだコメント欄を設けていない方は、
コメント欄を表示したい箇所に

<?php comments_template(); ?>

を追加してください。
おおよそ、記事下になります。

これにて当サイトのようなコメント欄になります。
いろいろ不必要なものを削っていますので、
ソースも確認してみてください。

コメント

是非ご感想・ご指摘等をください。

プロフィール

管理人:parudou
単なるWEBサイト作成マニアです。
底辺法人アフィリエイター。
Twitterはこちら

日記はパルどうSEOブログ

Copyright (c) parudou All Rights Reserved.