シンプルな返信機能付きコメントフォームと、一覧ページにコメント一覧を設置する

設置する機会があったので備忘録。
手っ取り早く、シンプルな返信機能付きのコメントが必要なときに使えます。

完成形はこちら。
投稿ページがこれで、

トップページなどに設置する一覧表示がこちら。

下記条件にてカスタマイズした。

  • アバターなし
  • 入力欄は名前、メアド、本文の3つのみ
  • モデレーション(承認待ち)処理なし
  • 返信されたコメントは全て共通で、左側に余白(margin-left: 1em;)

 

骨組みテーマ・Bonesからファイルとコード流用

「Bones」公式サイトから一式をダウンロードして、

  • comments.php
  • functions.php

だけ残し、他は全て削除。
ちなみに、WordPressテーマをBonesで構築していなくても問題なし。

 

single.php 呼び出しコードを記載

divとidは、後ほどCSSで整形する用。

 

comments.php カスタマイズ

元コードを下記に修正した。

 

functions.php コメント用コードをカスタマイズ

元コードを下記に修正した。

 

functions.php コード追加

入力欄の順番を名前、メアド、本文に

 

URL入力欄を削除

 

メールアドレス欄を空白に、名前欄にプレースホルダ

 

デフォルト文言の変更

 

投稿者名が無記名の場合のデフォルト名

 

リンクを別窓に

 

HTML入力を無効化

 

投稿ページのコメントフォームをCSSで整形

 

トップページなどに投稿コメントの一覧表示

全てのコメントを表示させたいときは、number を0に。
HTMLタグは適当。

 

一覧表示をCSS整形

 

header.php JS呼び出しコード追加

いつからかWP標準仕様となった。
「返信」をクリックすると、ページを再読込せずコメントフォームがその場に移動してくる。

 

参考サイト

コメントを投稿する

※メールアドレスは私にだけ届き、サイトには表示されません。
※「送信する」ボタンは、一度だけクリックしてお待ちください。

    • このエントリーをはてなブックマークに追加