新着記事プロフィールmenu【wordpress】コメントの入力欄を追加する/wp_list_comments表示カスタマイズ2015.3.16Wordpresswordpressで口コミサイト、アフィリエイトサイト、掲示板機能を実装するにあたって必須なのがこの「コメント機能」。検索するといくつかの方法が出てくるのですが、コメント欄が追加されなかったり、コメント欄だけ追加されて、データベースには格納されないものだったり...なんだか上手く実装できないのが多かったのですが、僕の場合で上手く言った事例を各フェーズの備忘録としてメモしていきます。wordpressコメント項目の追加にあたって、今回のケースなんだか面倒になりそうなので、先にサクっとシチュエーションを決めましょう。複数選ばれる必要が無いしあってはいけないので、ラジオボタンで選択するようにします。value="選択値3"&gt;「タイトル」は、テキストボックスですね。/&gt;どちらも、nameをキーとしたvalue値(選択/入力)が渡されます。投稿などのページでwp_list_comments関数が呼び出される時に表示されることになります。4.1.1で実装しました。だいたいその前のバージョンでも出来ると思いますがあまりにも古いと動作の保証はありません。いかなるトラブルも一切の責任を負いかねます。1.コメント項目の追加function.phpに以下のコードを追記。$default;}直接HTMLコードを代入しています。なにをやっているか自作の関数change_comment_form_inputを、wordpressの機能「フィルターフック」を利用して発動させています。「フィルターフック」というのは要するに、「wordpressの関数が実行される途中のある決められたポイント(自分で設定もできる)で自作の関数も一緒に実行できる」もので「フィルターフック」「アクションフック」の二種に分かれます。動作や理解についてはこちらがとても参考になりました。-sei2の日記-関数add_filterについてもこちらを見てみてくださいね!今回コメントの項目を増やすにあたっては、コメントフォームが表示されるタイミングのフックを利用して関数を発動することで、自作の項目が紛れ込んで画面に表示されるようになるということになります。‘comment_form_defaults’,’change_comment_form_input’);add_filterは、既存のフィルターフック(apply_filters関数で設定したもの)にて自作の関数を実行させる命令をする役割を持ちます。「渡す変数がいくつあるか」を入力します。後者2つは省略するとそれぞれ、「10」「1」になります。add_filter:WordPress私的マニュアルなので今回の例だと、フィルターフック「comment_form_defaults」で自作の関数「change_comment_form_input」を実行させる、ということですね。フィルターフック「comment_form_defaults」は、コメントフォームを出力するもので、wp-includes\comment-template.phpの2099行目ぐらいに書いてあります。上に読んでいくとwordpress関数であるget_comment関数が実行されるときに発動するということが解ると思います。'xhtml',);配列$defaultsに代入されていますね。フィルターフック用関数であるchange_comment_form_inputでは、実行時に引数で$defaultsを受け取ります。$default[‘fields’][‘email’]つまりメールの入力欄と一緒に配列にぶち込んでreturnしてしまうということです。場所としてはメールの入力欄のあとにつづけて出る感じになります。ここまででおそらく以下のようになるかと思います。データベースに入れるfunction.phpに以下のコードを追記。true);}なにをやっているか今度はadd_action関数です。add_filterとできることは同じなのですが、使い分けとしては、codexに以下のように書いてあります。発生する特定のイベント、例えば投稿の公開、テーマの変更、管理画面の表示などによって始動させらせます。関数を実行することによってこのイベントに反応することができます。このイベントへの反応には次のようなものがあります:データベースのデータの変更メールメッセージの送信ブラウザ画面(管理画面もしくは読者が閲覧する画面)に表示する項目の変更フィルターは、実行中の特定のポイント、データに何かのアクション(データベースへの追加やブラウザスクリーンに送り出すなど)を行なう前にデータが通過する関数です。新しい投稿やコメントをデータベースに追加するとき)。ほとんど入力と出力は最低ひとつはフィルターを通過します。デフォルトでいくつかのフィルタリングを行なっていて、プラグインで追加することができます。要するにadd_filterが裏方的な処理にフックするのに対し、add_actionはその反対で具現化するほうの処理にフックする感じですね。postメソッドで送っているので、それぞれを$_POSTで受け取ります。べつに$_REQUESTでもいいです。info今回はひとつしか選択できない項目ばかりなのでいいのですが、チェックボックス機能を付けたりすると、受け取った値をforeachループさせて配列変数に代入してあれこれ~...と面倒なので今回は割愛します。);ここでフックする「comment_post」は、コメントがデータベースに保存される直前に実行されるものです。add_filters関数はapply_filters関数で作られたフックを使うのに対し、add_action関数はdo_action関数でフックを作っています。このcomment_postがどこで作成されているかというと、wp-includes\comment.phpの1709行目あたりに記載があります。);wp_new_comment関数の中ですね。ここでフックが作られています。true);それぞれをデータベースに記録します。厳密にはそうでなく、「コメントmeta情報の更新」だそうですが、なんだかわかりづらいので便宜上「データベースに記録」といいます。引数には「記録したいコメントのID」第二引数は「キー名(name値)」第三引数に「記録したい値」続いて第四引数は省略していいと思います。影響はないように思えました。入力してくれた値を表示するfunctions.phpに以下のコードを追記します。//コメント者の後に続けて出力。//コメント者の後に続けて出力。//コメント者の後に続けて出力。//コメント者の後に続けて出力。}今回はadd_filterです。なにをやっているか使っているwordpressテーマにもよりますが、大体はデフォルトの状態で、記事の下にその記事に対するコメントが連なると思います。以下で説明しますが、get_comment_author_linkというフックを利用し、値を付け加えることで、ある程度任意の場所に表示することができます。);このget_comment_author_linkというフックは、コメントしてくれた人の名前を表示する処理の中のフックで、要するにコメントしたユーザー名の後に「年齢」「性別」を出してしまおう、と言う魂胆です。これが作成されている場所については/wp-includes/comment-template.phpの201行目ぐらいに記述があります。);}get_comment_author関数でコメントしたユーザーの名前を取得し$authorに代入しています。フック用の自作関数ではこの変数を引数に取り、「.=」のかたちで値を追加してreturnします。get_comments_meta()コメントの値を返します。引数に「コメントのID」、第二引数に「キー(フォームのname値)」、第三引数には「true(最初で見つかった値のみ取得)もしくはfalse(見つかった値全てを配列で取得)」を指定します。ここでは一応配列で取得して、ループさせる手段をとりました。それぞれ、代入した値を$authorに追加してreturnします。これでget_comment_author_linkフックが含まれた関数では、$authorに、項目が追加された状態で処理が進められることになります!で、しっかりと入力した値が表示された場合がこちらです。表示されました!真ん中のものはちょっといろいろ試しているときに性別が上手く取得できていなかったため年齢だけの表記ですが、名前のあとに、選んだものが表示されています。wordpressコメントに追加した入力項目「タイトル」を表示するコメントのタイトルも、前項と同じ要領で表示できます。ように、名前に続いてコメントのタイトルが表示されても如何なものかとなりますよね。任意の場所に表示することにします。今までどおりフィルターフックを利用しますが、今回は自由な場所に表示できるように、自分でフィルターフックを作ることにします。functions.phpに以下のコードを追記します。//コメント入力欄のタイトルを出力。フック「ordinalFook」作成。class="iconIndex-kuchikomi"&gt;&lt;?php//コメント入力欄のタイトルを出力。フック「ordinalFook」作成。?&gt;&lt;/p&gt;&lt;/div&gt;&lt;/footer&gt;&lt;/article&gt;&lt;?php}////////コメント出力カスタムwp_list_comments関数を以下のように変更します。'originalCommentForm');wp_list_comments($commentArg);なにをやっているかwp_list_commentsのcallbackwp_list_comments関数はコメントを出力させるものですが、コメントの表示をカスタマイズするために、引数に指定する配列にcallbackというキーが用意されています。(詳しい説明は割愛)wp_list_comments:WordPress私的マニュアルここで指定した関数(例の場合ではoriginalCommentForm関数)は必ずfunctions.phpに書いておきましょう。フィルターフックを自作する要点だけに絞って説明します。「タイトル」の入力値を出すためのフィルターフックを作っている箇所が以下となります。//コメント入力欄のタイトルを出力。フック「ordinalFook」作成。class="iconIndex-kuchikomi"&gt;&lt;?php//コメント入力欄のタイトルを出力。フック「ordinalFook」作成。'」に関する口コミ';}?&gt;&lt;/span&gt;&lt;/h4&gt;この$kuchikomiTitle変数に代入されているのが、「タイトル」入力値です。apply_filters関数で「originalFook」という名前のフックを作ります。フックで関数が実行されていて値が返されていれば(=入力値があれば)echoで表示。無ければコメントがついたページのタイトルが出力される条件分岐です。‘~~~’);自作の「originalFook」フックでattach_commentTitle関数を実行します。attach_commentTitle関数は今までの項目と同じでget_comment_metaでキーの値から入力値を参照して、それを変数に代入してreturnする処理です。wordpressフォームの項目を削除する画面キャプチャを見てみると、「webサイト」「メール」の入力欄が無いですね。これらもfuncitons.phpに以下のコードを記載することで実装できます。時間を非表示さいごに繰り返しになりますが、wp_list_comments関数の実行で入力値が表示されます。動作のトラブルなどに関しては一切責任を負いかねます。バックアップをとって作業してください。別の項目を入力させたい場合は適宜に応じてname値やwp_list_comments関数のcallbackなどを変えてみてください。音楽Profile東京でWebデザイナー・コーダーとして、フロントエンド的なことからデザイン思考的なことを考えたりして、ごにょごにょと活動中。休日はよくカフェや漫画喫茶に出向いたりパン屋に行ったりコーヒ豆買いに行ったり、主に散歩しています。デザインのトレンドやデザイン思考、HTML、CSSからSASS、Javascript、Wordpress構築などコーディングのTIPSなどをブログにアップしていきます。