WordPressでサイトを作っている人なら使ってみたいコミュニケーションコンテンツの掲示板。bbpressなど有名なプラグインが数多く配布されていますね。これを使って掲示板を設置すると当たる壁、それは「記事ごとに別の版を設置するのが大変」ということ。
bbpressではショートコードを使って特定のトピックなどを挿入することはできますが、記事を書くたびにスレッド作ってショートコード挿入するのも面倒ですよね？
何とかいい方法ないの？？でたどり着いたのが「そうだ！コメント欄を掲示板として使ったらいいのでは？」ということ。そうなんです。コメント欄は基本的に投稿のIDに紐づいて、その投稿に対してのコメントのみが表示されるようになってるんです。そして自由に書き込む（掲示板でいうスレッドを立てる）ことも返信することもできるので、これを使わない手はない！！ですね。
当サイトの場合、記事が書きやすく、後から探しやすいように
- 管理人の日記
- WordPressプラグインの紹介記事
- WordPressプラグインの翻訳ファイル
- ペット関連の記事
- ネット通販商品の紹介記事
などカスタム投稿タイプで根本から分けて書いています（もちろんこの記事も「WordPressに関する記事」というカスタム投稿タイプで管理しています）。
せっかく分けているのだから、コメント欄に表示する文字列などもそれぞれに適した形にしたい！というのが今回のカスタマイズに対する動機です。
【Simplicity2】はもともとカスタマイザーでコメント一覧の「コメント」やコメントフォームの「コメントをどうぞ」という文字列が変更できるようになっています。これはこれで非常に便利なのですが、せっかくなら
- WordPressのプラグインに関する記事なら「このプラグインに関する情報を共有しませんか？」
- ネット通販商品の紹介記事なら「買ってみた（使ってみた）印象は？」
- WordPressのプラグイン翻訳ファイル配布記事なら「適用してみた感想をお知らせください」
などという文字列にして、何も条件を設定していなければ「コメントをどうぞ」にするというカスタマイズをしていきます。
さらにそれぞれの投稿タイプのコメント欄上部に何を書いたらいいのかというヒントも付け加えてみます。
最終形はこのページの一番下に表示されているコメント欄になります。
では早速始めていきましょう！！
コメント欄の表示順を入れ替える
いきなり関係ないところから入ってごめんなさい。コメント欄は大きく分けて「コメントされたもの」と「コメント投稿フォーム」に分かれています。テーマによっては「過去のコメント」→「コメントフォーム」となっていたり「コメントフォーム」→「過去のコメント」となっていて、Simplicity2は前者になっています。
通常のコメントならこれでもいいかもしれませんが、できればより新しいコメントを書き込んでもらえるよう「コメントフォーム」→「過去のコメント」の順に表示したいと思います。最終的には文末の「おまけ」にあるようにプラグインを使ってフォームをアコーディオン表示にしていきますが、まずは順番を入れ替えます。
最終的にこのコードで・・と紹介してますが、構造が理解できているかどうかでその後のカスタマイズやここに掲載する以外のカスタマイズもできるようになると思いますのであえて手順を追って覚えておくことをおすすめします。
１．コメント欄を表示するためのファイルを子テーマにコピーする
FTPクライアントを使って親テーマフォルダの中にある「comment-default.php」をダウンロードし、子テーマフォルダの中へアップロードします。
というプラグインを使えばFTPクライアントなしでサーバー上のファイルのダウンロード・アップロードができます。
カスタマイズは子テーマにアップロードした「comment-default.php」で行います。WordPressのバージョンが4.9以降であればコードの表示が見やすくなっているのでテーマの編集で直接編集、そうでなければパソコンに「Tera Pad」など無料のテキストエディタを使って編集するといいでしょう（メモ帳は見にくいのであまりおすすめしません）。
※パソコン上で編集した場合には都度ファイルを子テーマへアップロードする必要があります
２．コメント欄の内容（過去の一覧とフォーム）を完全に分割する
Simplicity2は随所にコメントが挿入されており、どこで何をしているのかというのが細かくプログラム上に書かれています（非常にありがたいです）。子テーマにアップロードした「comment-default.php」も同様でプログラムソースは
<!-- comment area -->
<div id="comment-area">
<?php
if(have_comments()): // コメントがあったら
?>
<section>
<h2 id="comments"><?php echo get_theme_text_comments(); //コメントタイトル ?></h2>
<ol class="commets-list">
<?php wp_list_comments('avatar_size=55'); //コメント一覧を表示 ?>
</ol>
<div class="comment-page-link">
<?php paginate_comments_links(); //コメントが多い場合、ページャーを表示 ?>
</div>
</section>
<?php
endif;
if ( is_comment_form_freeze() ) {//コメント凍結
echo get_theme_text_comment_freeze_label();
} else
{//コメント表示
// ここからコメントフォーム
$args = array(
'title_reply' => get_theme_text_comment_reply_title(),//コメントをどうぞ
'label_submit' => get_theme_text_comment_submit_label(),//コメントを送信
);
echo '<aside>';
comment_form($args);
echo '</aside>';
}
?>
</div>
<!-- /comment area --> こんな感じになっています。要約すると、
まずはコメントがあったら「コメント」などの文字列を表示してその下に一覧を表示、なければその投稿がコメント凍結になっていないかをチェック、コメントが許可されていればコメントフォームを表示・・・という流れになっているのが分かります。
それが一番上の<div>と一番下の</div>つまりこれで１つのコメント一覧とコメントフォームの固まりとして書かれているんですね。
３．「過去の一覧」と「コメントフォーム」を入れ替える
流れがわかったからそのまま入れ替えれば・・・いやいやそうではありません。前述したとおり一連の動作として書かれているのでそのまま一覧とフォームの記述を入れ替えただけではエラーが出ます。PHPコードは「<?php」で始まり「?>」で終わらなければなりませんから、そのまま移動すると対応しなくなってしまうんですね。
これを直しつつ一覧を完全なコードにすると
<?php
if(have_comments()): // コメントがあったら
?>
<section>
<h2 id="comments"><?php echo get_theme_text_comments(); //コメントタイトル ?></h2>
<ol class="commets-list">
<?php wp_list_comments('avatar_size=55'); //コメント一覧を表示 ?>
</ol>
<div class="comment-page-link">
<?php paginate_comments_links(); //コメントが多い場合、ページャーを表示 ?>
</div>
</section>
<?php endif; ?>そしてフォームを完全なコードにすると
<?php if ( is_comment_form_freeze() ) {//コメント凍結
echo get_theme_text_comment_freeze_label();
} else
{//コメント表示
// ここからコメントフォーム
$args = array(
'title_reply' => get_theme_text_comment_reply_title(),//コメントをどうぞ
'label_submit' => get_theme_text_comment_submit_label(),//コメントを送信
);
echo '<aside>';
comment_form($args);
echo '</aside>';
}
?>になります。違いが分かりますか？「<?php」に対する「?>」をきちんと設定してあげるんですね。それをコメント欄として１つのブロックにした最終的なコードがこちら
<!-- comment area -->
<div id="comment-area">
<?php if ( is_comment_form_freeze() ) {//コメント凍結
echo get_theme_text_comment_freeze_label();
} else
{//コメント表示
// ここからコメントフォーム
$args = array(
'title_reply' => get_theme_text_comment_reply_title(),//コメントをどうぞ
'label_submit' => get_theme_text_comment_submit_label(),//コメントを送信
);
echo '<aside>';
comment_form($args);
echo '</aside>';
}
?>
<?php
if(have_comments()): // コメントがあったら
?>
<section>
<h2 id="comments"><?php echo get_theme_text_comments(); //コメントタイトル ?></h2>
<ol class="commets-list">
<?php wp_list_comments('avatar_size=55'); //コメント一覧を表示 ?>
</ol>
<div class="comment-page-link">
<?php paginate_comments_links(); //コメントが多い場合、ページャーを表示 ?>
</div>
</section>
<?php endif; ?>
</div>
<!-- /comment area --> 面倒な方はこれをガバっとコピペすればいいですが、勉強も兼ねて自分の手でテーマのカスタマイズをするのもいいと思いますよ。
これで「コメントフォーム」と「過去のコメント」の部分が入れ替わりました。もしも入れ替えない場合でもこうしてブロック化しておくと次の項目もスムーズにできると思います。
テーマを保存（パソコン上でカスタマイズした場合にはアップロード）して実際にコメントのある記事を表示してみてください。きちんと表示されましたか？もしもエラーなどが出たら構文が間違っているのでチェックしてここまでが完璧に動作したら次に進みましょう。
オリジナルの文字列を作り、カスタム投稿タイプごとに表示を切り替える
オリジナルの文字列を挿入する
ここまで来たらあとはすんなり進むと思います。上のコードで一覧の部分の上に何かを記述すればコメント一覧の上に記述した文字列が、下に記述すれば・・・ということになります。
とはいえテーマのファイルではきちんとhtmlタグを設定しなければなりません。
普段投稿でテキストエディタを使っているとエンターキーで改行したものはその通りに自動で表示されますよね？これを自動整形機能といいます。つまりhtmlタグを省略してもWordPressが勝手に判断してくれるんです。
例えば空白行を空けずに改行して書いたものはspanタグが自動で入り、空白行があるまでのものをpタグ（段落タグ）で囲んでくれたりしているのです。ちなみにWordPressでは２行空白行を入れても１行の空白行と判断されるようになっています。もっと隙間空けたいのに・・・と思うかもしれませんけど、これがあるから編集画面上で書き手が見やすいようにガンガン改行して記事を書いても体裁よく表示されるようになってるんですね。この機能を停止する方法もありますがここでは割愛します。
・・・ということで、とりあえずpタグで囲んで文字列を一覧の上に表示してみましょう
試しに一覧のコードの上に「<p>コメント一覧に文字を入力してみた</p>」（「」の中をコピー）を入力して更新し、実際にコメントのある投稿を見てみてください。コメント一覧の上に「コメント一覧に文字を入力してみた」って表示されますよね？
この要領でコメント一覧の上下、コメントフォームの上下にオリジナルの文字列を表示していけば、もう素っ気ないコメント欄からは卒業！！です。
通常のコメントの文字列を非表示にする
オリジナルのコメント文字列を表示するようにしたので、通常のコメント文字列は不要となります。コードから削除してしまうのが妥当ですが、後から復活させたい時のために非表示にしておきます。
方法は簡単、CSSに
/************** コメント欄の制御 ***************/
/* コメント欄上の文字列を非表示 */
#reply-title {
display: none;
}
/* コメント一覧上の文字列を非表示 */
#comments {
display: none;
}を追加するだけです。
カスタム投稿タイプごとの切り替え
ここまで来たらできたも同然です。カスタム投稿タイプで切り分けを行いつつ、オリジナルの文言を挿入して構成していきます。
条件分岐の簡単なコードは
<?php if ( is_comment_open() ) : ?>
<?php if (is_singular('カスタム投稿タイプのスラグ①')) : ?>
カスタム投稿タイプが①のときに表示する文言
<?php elseif (is_singular('カスタム投稿タイプのスラグ②')) : ?>
カスタム投稿タイプが②のときに表示する文言
<?php elseif (is_singular('カスタム投稿タイプのスラグ③')) : ?>
カスタム投稿タイプが③のときに表示する文言
<?php else: ?>
どれにも当てはまらなかったときに表示する文言
<?php endif; ?>
<?php endif; ?>です。先頭と末尾にある
<?php if ( is_comment_open() ) : ?>
<?php endif; ?>は「その記事でコメントが許可されていれば・・・」という記述です。これが欠けていると同じ投稿タイプでコメントが許可されていない記事にも文字列が表示されてしまいます。
条件が多い場合には
<?php elseif (is_singular('カスタム投稿タイプのスラグ')) : ?>を追加していけばどんどん条件追加ができます。
また、複数の投稿タイプを一緒にしたいときは
is_singular('カスタム投稿タイプのスラグ'))を
is_singular(array('カスタム投稿タイプのスラグA','カスタム投稿タイプのスラグB')))のようにしてarrayでまとめれば動作します。
「if→elseif→else→endif」で１つの流れ、条件を追加するには「elseif」を間に挟んで追加すればいいということです。
このコードは入力欄上の文字列にも使えますし、過去のコメント一覧の上にも使えます。
出来上がったら実際に条件を設けた投稿タイプやその他の投稿タイプで実際に表示して確かめてみてくださいね。
ここまでがカスタム投稿タイプ別に別々のコメント文字列を表示する方法でした。ここからはもう少しカスタマイズを進めるおまけです（私にとってはここからが本題になります）。
おまけ コメントをログインユーザーだけに限定する
サイトにコメント欄を表示していると切っても切れないのが「スパム行為」。WordPressのコメント欄はメールアドレスを入力するようになっているもののメールアドレスが本物かどうかまでは判断していません。半角英数字と特殊記号で書かれていて、間に@が入って、ドメインぽいものがうしろについていれば「正しいメールアドレス」なんて判断されてしまいます。コメントもらって返信したら届かない・・という経験ありませんか？つまりはこれが原因なのです。
それならログインユーザーだけコメントできるようにしよう！！となったときに困るのがユーザーの登録やログインの機能をどう実装しようということ。いろいろとプラグインがリリースされてますけど正直いって１つで納得いくものはありません。
例えば
- ログインすると管理ページ（バックエンド）が表示されてしまう
- ログアウトすると管理ページ（バックエンド）が表示されてしまう
- 誤入力するとバックエンドのログインページが表示されてしまう
・・・などなど。実際に使っていろいろテストすると本当に中途半端なんですよね～。このサイトでは
で紹介しているようにいくつかのプラグインを使ってうまく動作するようにさせてます。特にWordPressのバージョン4.6以降ではスパム登録防止のためにダブルオプトイン（登録→メール本文にあるリンククリック→パスワードの確認）になりましたからさらに制御が大変です。
また最近では時間限定のいわゆる捨てメールアドレスというのを使用されることが増え、正しいメールアドレスと思っていたら・・・やっぱり返信すると届かないなんてこともあります。上のリンクではこうした捨てアドレス対策も含めた方法を紹介しているため非常に複雑になっていますが、多分これが一番！！という内容になっています。
ここではその方法でログイン／ログアウト／新規登録の機能を実装している前提で話をさせていただきます。
まずはコメント欄に通常表示される
- コメントするにはログインが必要です
- 〇〇としてログインしています
の文言を非表示にしましょう。ソース上で削除することもできますが、元に戻せるように「表示させない」方法をとります。
といっても子テーマのCSSに以下のコードを追加するだけです。
/************** コメント欄の制御 ログインしてるしてないの判断文字列***************/
p.logged-in-as {
display: none;
}
p.must-log-in {
display: none;
}次にログイン中／ログイン用のフォームを表示します。「Login With Ajax」を使用している前提ですからコメントフォームの上にショートコードをphp化して動作させます。
これでログインしていればコメント入力欄が表示されている状態となり、ログインしていない人はログイン後にページをリロードすることで入力欄が表示されるようになります。できればログインと同時にニューっと入力欄が出ればいいのですが・・・それはまたの機会に研究したいと思います。
完成！！と思いましたがやっぱりテストすると出てきますねぇ、不具合が。次の項では返信リンクの動作の不都合についての解決方法を紹介します
返信のリンクの動作を制御する
実際にテストコメントを作ってコメント一覧を見ると、「返信する」というリンクが出ています。ここをクリックすると返信用の窓が出てきて書き込むことができます。
・・・というのはログインしているユーザーの話。この部分をログアウトした状態で見ると・・・「ログインして返信する」となり、リンクをクリックすると・・・バックエンドのログイン画面が登場！！
通常のコメント動作だと未ログインユーザーがこのリンクをクリックした後の流れは
- リンクをクリック
- バックエンドのログイン画面からログイン
- 成功すると元の画面に戻り、「返信」リンクが出る
- 「返信」リンクをクリックして返信
となります。これはWordPressの基本動作。
しかし私のサイトの場合はバックエンドに一切行かせない仕様。ユーザー登録するメールアドレスを確認するためにダブルオプトインを使っている兼ね合いから登録時にバックエンドへ一度行く（パスワードの変更）ようにして、最初のログインが終わった以降は絶対にバックエンドへ行かせない・・・これをやるのに
というプラグインを使っているんです。
すると・・・これが邪魔して上の流れの２→３がうまくいかないんですね（トップページへリダイレクトされる＝プラグインとしては正しい動作）。これでは一気に返信してくれる確率が下がるから何とか・・・で悩みました。
コメントして返信するという機能があって初めてスレッド型の掲示板ぽくなるわけですからなくすわけにもいかないですから、非表示にすればいい！という問題ではありません。
私の能力では最終的に翻訳ファイルで何とか（未ログインのユーザーに対しては「空白スペース」で表示されているけど何も見えない状態にしておく）する方法。でもこれだと隠しリンク的になるのでたまたまマウスオーバーした人がクリックしたら誤動作ということになってしまいます。
もう限界なので、テーマのことではないですが、「Simplicity2」のフォーラムに問い合わせをしてみました。
するとすぐに返事が返ってきました。とってもありがたい・・・。返信いただいた方は「Simplicity2」のテーマ更新でウィジェットの設定がダメになってしまうのを回避する方法を提供されている方。ちなみにサイトはFirst Layoutです。
フォーラムで回答された方法を試したところどちらでもきっちり動作。感謝感謝です。忘れないようにここでも表示しておきます
まずはCSSでログインユーザーにのみ返信リンクを表示する方法
.reply {
visibility: hidden;
}
.logged-in .reply {
visibility: visible;
}次がfunctions.phpへ追記して表示コントロールをする方法
add_filter( 'comment_reply_link', function( $args_before_link_args_after, $args, $comment, $post ) {
if( is_user_logged_in() ) {
return $args_before_link_args_after;
} else {
return null;
}
}, 10, 4 );どちらでも大丈夫でしたが、CSSで実装できました。簡単なコードなのに・・・私のレベルはその位・・・なんです。でもがんばってカスタマイズしています。日々勉強です。
いつも通り？長い文章になってしまいました。今回のカスタマイズネタはどうでしたか？WordPressは広く使われているサイト作成ツールですし、【Simplicity2】テーマも有名で「このサイトひょっとして・・・」とソースを見ると大抵そうだったりしますから、できればいろいろな部分をカスタマイズしてオリジナルなサイトにしたいですよね？
ちなみに今ご覧になっているサイトももちろん【Simplicity2】で作ってます。表示部分も内部もかなり変更しているのでわからないかもしれませんね・・・。
これをきっかけにテーマのカスタマイズに挑戦してみては？？
ポチップ
ポチップ
