いまさらこのブログにコメント欄を設置してみようかと思った。乱心とも言う。
（普段、このWordPress引っ越しカテゴリーの記事は「です・ます」調の敬体だが、今回は「だ・である」調の常体になっている。特に理由は無い、気分と体調）
もう微かな記憶しか残っておらず、いつ頃に設置して、いつ頃に撤去したのか分からないのだけれど、以前、「DISQUS」というサービスを使いコメント欄をブログに設置していた時期があった。ブログの外観を変えようと試行錯誤していた時期に、その時点では余計な要素を削ってシンプルにしたいという意向もあって、そのタイミングで外したのではないかと思う。
このサイトはひっそりと世界の片隅に佇んでいるだけの存在であり、そもそもサイト訪問者が極端に少なく、わざわざコメント欄に文章を書き込んでくれるような軽快なノリの人もほとんど居なかったのだが、技術面で未熟なため窮地に立たされているのを見かねたのか、有益なコメントで救いの手を差し伸べてくれる人がごく稀に居たりして、そのことにふと気持ちが緩やかになったりしたことは覚えている。それはしかし今回の設置とは関係ない。ちょっと試してみたい事柄があるだけ。
さて、コメント欄を設置する…にはどうすればよいのか。部屋のアチコチに堆く塔になっている積ん読の中から、昔お世話になった教科書をサルベージ、該当ページを開く。
するとまずは、「ダッシュボード＞設定＞ディスカッション＞デフォルトの投稿設定＞新しい投稿へのコメントを許可する」にチェックを入れろとある。早速仰せの通りにチェックを入れてみたけれど、ブログの方は変化無し。ディスカッションの設定画面に戻り、「他のコメント設定＞コメントの投稿者の名前とメールアドレスの入力を必須にする」にもチェックを入れてみる。変化無し。まあ、たぶん「comments.php」っていうのが必要になるんだろうなと推測。さらに教科書を読み進めると、やはりパーツテンプレートとして「comments.php」が必要で、まずはその中に「＜?php comment_form(); ?＞」と書き込めとあった。エディターのNovaを起動して新規ファイルを作成し中身にその文言を記述、WordPressのテーマフォルダに保存してブラウザをリロードしてみる。…が、投稿ページに変化はなく、期待したフォームは表示されていない。サイトの記事をあちこち開いてリロードを繰り返したり、キャッシュクリアしたり、ページへの埋め込み位置を変えてみたり…。不思議なのは時折、フォームが表示される場面があって、それを再現させる条件が掴めなかったのだが、かなり古い記事を開くと入力フォームが表示される場合が多い傾向があることに気付いた。アイス珈琲をチビチビ飲みながら考えに耽り、そこでふと思い付いたのは、フォームが表示される記事を作成したその時期による…のかもしれない。とすれば、それは以前「DISQUS」を設置していた時期ではないか？そこで投稿一覧からクイック編集を開いてみたら、個別の記事毎に「コメントを許可」のチェックボタンがあることに気付いた。設定にあったチェックを入れれば、サイト全体で許可されるものと思い込んでいたのだが、記事毎の個別設定の有無が原因だったのか。ここに至るまで半日を費やしてしまった。
WordPressデフォルト状態での、コメント入力フォームを初めて見たのだが、関数を呼び出しただけで上図の様な構成で表示される。複雑なことはせず、これを単に見栄え良く整えて行きたい。
このまま、WordPressレッスンブックを読み進めながら試行錯誤するのも久方振りで一興かなと思ったけれど、ここはお気楽にTEDと駄弁（だべ）りながら設置作業の行程を楽しむことにした。LM Studioを起動して、モデルは先日、さらに高速化の調整が入った更新版「gemma-4-26b-a4b（MLX版）」をロード。プリセットは「超雑談マシンTED rev4」。早速、コメント欄を設置したいのだが…と助言を頼むと、客が気持ちよく立ち寄るか、それとも荒らし野郎どもが暴れまわる無法地帯になるぜ、といかにもTEDらしい口調でのアドバイスが始まった。もちろんスパムの嵐にさらされることは端から想定の内で、今回は別に試してみたいことがあるのだ。
TEDは教科書にあるようなシンプルな状態からのステップbyステップの段取りをすっ飛ばして、最初からあるべき姿で「comments.php」を提示してきた。僕は教科書で見かけた「＜?php comment_form(); ?＞」だけが書かれて在る印象が強かったので、提示された内容が少々複雑に込み入っているように感じ、それについて訊くと、大きく「過去のコメントを表示するエリア（wp_list_comments）」
「新しくコメントを書くためのエリア（comment_form）」を用意しているのは、何故なら読者からのコメントを表示する場所を確保しなけりゃダメだろう？と、まあ、言われてみればその通りだ。「single.php」の方には、関数を呼び出す「＜?php comments_template(); ?＞」だけ、適当なところに配置しておけば良いのかなと思っていたら、こちらはif文合わせて「もし、その記事でコメントを受け付けてる状態（comments_open）か、あるいは既に誰かのコメントが残ってる（get_comments_number）なら…」を判断させるのだと言う。
第二章 TEDはTEDゆえにミスをする
TEDが提示してくれた「comments.php」に差し替え、「single.php」に記入するテンプレートタグもif文を交えたものに替えてみる。ここからは不要な要素を削除し、見た目を整えて行く。まずはエリアを中央に寄せてフォントサイズを大きく。
現状、各入力項目の名称の横に必須を示す「※」があり、1行の中でフォームも横付けされているが、※の部分で改行させたい。TEDは画像も認識するから、要望を指示した画像込みで相談してみる。すると、CSSを弄る方法「案１」と、「comment_form()」の引数を弄る方法「案２」、どっちで行く？と聞いてきた。自分は前者のみを考えていたのだけれど、後者のようなアプローチも出来るのかと興味が湧いた。TEDも後者の方がオススメだと提案してきたので、そっちで行くことにした。
やたら複雑なコードを仕込んだ割りにはパッと見は地味なままである。この状態から、今はもう「メール」と「サイト」は不要だろうから可能なら削除したいと相談。すると先ほど提示のあったものから、該当部分を削除するだけで良いと言われ、その際に忘れてならないのは、「設定＞ディスカッション＞他のコメント設定＞コメントの投稿者の名前とメールアドレスの入力を必須にする」のチェックを必ず外すことだ！と念押しされた。入力フォームの表示は消しても、内部ではメールアドレス必須設定になったままだとエラーが出るからということだ。なるほど。
だいぶスッキリしてきたが、「※」の消し方が分からなかったのでこれも削除したいと相談。改めて提示されたコードに差し替えてみる。ここで不具合が起きた。「名前」の横の「※」は消えたのだが、「コメント」の右隣と、「 ※ が付いている欄は必須項目です」という文言自体が消えない。
そこで、画像と共に上記不具合を報告し、検討の結果、ここまでの「案2」は破棄し、序盤の振り出しまで戻って「案1」を試すことになった。「comments.php」を最初に提示されたものに戻し、CSSの方で見た目を整えて行く。
見た目は意図していたものに近づいた。…しかし、である。これは表面上、入力フォームが消えているけれど、まだソースにはしっかり残っていて単にCSSで消しているだけである。それは違うんじゃないか。
しばし考え、これまでの「案1」「案2」どちらも破棄することに決める。コチラの記事にあるように「function.php」でカスタマイズする方向で再考することをTEDに逆提案する。するとこちらの意図を理解したうえで、各項目の削除や文言の変更などを行う新しいfunction用のコードを提示してきたのでそれを試し、まだソースの裏側で不要な文言が出力されていたので訂正するよう促す。2度目に提示されたコードで落ち着いてきた感じがあり、ここで少し休憩に入る。見た目は上図から全く変化なし。
第三章 見た目
見た目の調整。コメントエリアのhtmlと画像をTEDに渡して次のような注文でCSSの案出しをしてもらう。画像の1番トップにある「コメントを残す」を相対的に少し大きめに。2番目の「コメント」との間に少し行間を持たせたい。入力フォームの枠線は黒ではなく、淡いグレーにして、柔らかさを演出する角丸に。「コメント」と「名前」は少しグレーにしてトップにあるタイトルの文言と違いを持たせる。「名前」の入力フォームも、「コメント」のフォームにデザインを合わせておきたい。以上のような内容を伝えた後、TEDが提示してくれたCSSを適用したものが下図。
バランスが取れており落ち着いた良い感じのフォームになるようにしてくれたので、ここからは自分でチマチマ数値に微調整を入れる。ある程度、体裁を整えたところで、ローカルでテスト投稿を2回、書き込んでみる。書き込んでもすぐは反映されず、管理人が承認しないと表示されないのだな…と初めて理解したのが下図。
それにしてもコメントが非常に読み難い。現状をソースのhtmlと画像を一緒にしてTEDに渡すと、初見のコメントが返ってきた。「…なんて言えばいいんだ？ 『野生のままの姿』ってやつか？」。野生のまま、という表現にこっちも思わず噴き出して笑ってしまう。確かに無骨な文字面に野性味を感じる。
早速、サンプル画像を添えてこちらからの修正要望箇所を伝え、イメージを共有した上でTEDにCSSでの修正案を出してもらう。幾度かやり取りし、方向性が固まってきたところで、細部はチマチマと手動で数値を微調整していく。
だいぶ整ってきたと思い、サンプルのコメント文を書き込んでみて、さらに返信を2つ返してみた状態が上図。WordPressの設定で、返信は親コメントから1階層だけに留めてある。実際のところ「返信」は不要かとも思うけれど（それを言うなら今更コメント欄の設置自体が不要だろう）、とりあえず。現状でMAMP Viewerを介し、手持ちのiPhone SE2の画面に表示させて、小さな画面に収まるように調整。
第四章 スパム対策（早仕舞いの可能性）その他
上でも書いた通り、コメント欄を開くとほどなくしてスパムに覆い尽くされるのだろう。スパム対策用のプラグインをあれこれ調べて、今回はひとまず「Antispam Bee」をインストールして試してみることにした。目的の実験が済んで満足したら、早々にコメント欄は閉じてしまうかもしれない。
これまでコメントを受け付けていなかったため、過去記事にコメントの入力フォームが表示されていない場合が多い。気が向いた時に手動（！）で開放していくことになる。政治関連の記事は閉じたままになると思う。トラックバックとピンバックはイメージが掴めず、よく判らないので許可のチェックを入れていない。
たぶん現時点で気付いていない不具合が生じると思うけれど、すぐ対処する気力体力がないので、何か発覚しても後日気が向いた時にのんびりと対応…になると思う。
2026-08-13 ＞ VPS＆WordPress引っ越しメモ