manablog copyでコメント機能を追加する方法

Internet Hobby TIPS WordPress

WordPressを始めて、まず最初にかっこいいデザインにしたいと思い、思い切って有料テーマを買いました。manablog copyを使わせて頂いています。

で、買ってから気づいたのですがこのテーマ、コメント機能がついてなかったんですよね。

以前使っていたJUGEMや、はてなブログからブログの記事データを移行した際に、どうやらコメントもそのまま移行出来ていたので、コメント機能がないのは自分の使い方としては勿体なかったし、せっかく有料テーマを買ったんだからまた他のテーマを買うのも嫌だった。

なので、無理やりコメント機能を追加してみました。

一応自分のようにコメント機能をつけたくて困る方もいるかもしれないので、まとめておきました。2通りあります。

  • プラグイン追加なし→無料ソフトのFFFTP,PCに初めからあるメモ帖を使います。初心者の方にはちょっと難易度高めですが、思い通りのコメントフォームが作れます。
  • プラグイン追加あり→Jetpackを使います。簡単ですが、デザインの枠からはみ出る場合があります。コメントする際は各種SNSの認証か、メールアドレスの入力が必要になります。

注意書き

そもそもmanablog copy作者のマナブさんは、このテーマをコメント機能の使用を前提に作られておりません。なので、デザインが崩れる等の弊害がある可能性があります。自己責任でお願いします。

また、私自身comments.phpの構造を完全に理解出来ていません。Jetpackのプラグインのインストールは、少々荒業を使っています。

manablogcopyの良さはデザインだけではなく、プラグインが少ない点にもあります。プラグイン増やしたくないよという方は他の方法を探してみてください。

スポンサードサーチ

プラグインの追加なしでコメント追加

プラグインなしでのコメント追加を目指します。

デフォルトでは名前、コメント、メールアドレス、HPアドレスの入力フォームで、メールアドレスが必ず必要など、使い勝手が少し悪いので、ここは工夫して名前とコメントの入力フォームのみにします。

難点は認証がなく誰でもコメント出来るので、スパムが来るようになるということでしょうか。

1.[comments.phpを追加する]

そもそもcomments.phpがmanablog copyのテーマに入ってないです。

このphpとやらを正直まだ理解していないのですが、このphpがないとコメント機能が機能しないようなので、追加します。

下記コードを新しいメモ帖にコピペしてください。

<div id="comment_area">
<?php if(have_comments()): ?>
<h3 id="comments">Comments</h3>
<ol class="commets-list">
<?php wp_list_comments('avatar_size=48'); ?>
</ol>
<?php endif; ?>
<?php $args = array(
'title_reply' => 'コメントを残す',
'label_submit' => '投稿',
'comment_notes_before' => '<p class="commentNotesBefore"></p>',
'comment_notes_after' => '<p class="commentNotesAfter"></p>',
'fields' => array(
'author' => '<p class="comment-form-author">' .
'<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' placeholder="*your name" /></p>',
'url' => '',
),
'comment_field' => '<p class="comment-form-comment">' . '<textarea id="comment" name="comment" cols="50" rows="6" aria-required="true"' . $aria_req . ' placeholder="COMMENT" /></textarea></p>',
);
comment_form( $args ); ?>
</div>

保存する際、ファイルの種類(T):をすべてのファイルに選択してから文字コード(F):をUTF-8に設定しファイル名を「comments.php」にして保存します。commentsというファイル名で、拡張子がphpになっているはずです。UTF-8に設定しないと、文字化けを起こします。

中身はこんな感じになってます。

これをFFFTPを使ってご自身のサーバー内のthemeの中に追加します。 下記の場所に保存しましょう(Windowsの場合)。
『ご自身のドメイン/wp-content/themes/mblog_ver3/mblog_ver3』

左が私のPC上の中身、右がサーバーの中身になっています。

2.[Function.phpにコード追加]

ご自身のWordPressのダッシュボードから 外観→テーマエディター→Function.php(テーマの為の関数)を表示し、下記コードを追加してください。

// コメント送信時の名前の入力チェック
function my_preprocess_comment( $comment_data ) {
if ( empty( trim( $comment_data['comment_author'] ) ) ) {
wp_die('<strong>エラー</strong>: 必須項目 (名前) を入力してください。');
}
return $comment_data;
}
add_filter( 'preprocess_comment', 'my_preprocess_comment', 1 );

//「次回のコメントで使用するため…」を削除する

function comment_cookie_check_disable( $fields ) {
unset( $fields['cookies'] );
return $fields;
}
add_filter( 'comment_form_default_fields', 'comment_cookie_check_disable' );

こんな感じになってます。

3.[ディスカッションの設定をする]

ダッシュボードから設定→ディスカッションを選択し、下記三項目のチェックを外し、変更を保存します。

  • コメントの投稿者の名前とメールアドレスの入力を必須にする
  •  ユーザー登録してログインしたユーザーのみコメントをつけられるようにする 
  •  コメント投稿者が Cookie を保存できるようにする、Cookie オプトイン用チェックボックスを表示します 

他の設定はご自由にどうぞ。

完成です

ログアウト状態(他のユーザーが見ている状態)だと、記事下がこんな感じにコメント機能が実装されているはずです。念のためテストしてみてください。

プラグインの追加でコメントを追加

Jetpackのプラグインから設定します。簡単ですが、ちょっと強引なやり方です。

1.[Jetpackをインストール]

ダッシュボードの、プラグイン→新規追加→キーワード検索から、「Jetpack」をインストール

Jetpackの使用にはメールアドレス等のユーザー登録が必要になります。登録して設定してください。

*各有料プランが提示されますが、一番下の無料プランで大丈夫です。

2.[ディスカッションの設定]

右上の設定→ディスカッション→ 訪問者が WordPress.com、Twitter、Facebook、または Google のアカウントを使ってコメントできるようにします を有効にしてください。

完成です。

ログアウト状態(他のユーザーが見ている状態)だと、記事下にこんな感じにコメント機能が実装されているはずです。念のためテストしてみてください。


«
»

コメントを残す