100%レンタルサーバーを使いこなすサイト100%レンタルサーバーを使いこなすサイトホームページ初心者・レンタルサーバー初心者の方でもレンタルサーバーを100%使いこなす情報を徹底調査します。コメント欄をカスタマイズする(スパム対策&表示の設定)前回、サイトにコメント欄を追加する手順を解説しました。コメント欄を追加する手順を解説https://go-journey.club/archives/2554本サイトのテンプレートは一から作っています。最初に作ったファイルは「index.php」でした。ゼロから本を読んで勉強しつつWordPressでサイトを構築しています。今回は「投稿」や「固定ページ」に「コメント(コメント投稿フォーム)」を表示させる方法を解説し...今回は、第二弾ということで更にWordPressのコメント欄をカスタマイズしていきます。参考にさせていただいたサイトスパム対策からコメント欄を設置すると海外からのスパムコメントが大量に投稿されます。そのため初めにスパム対策だけしておきましょう。コメント欄を放置すると管理するのが嫌になるくらいのスパムコメントが投稿されます。Akismetを導入する手順まずはスパムコメント対策として一番使いやすいプラグイン「Akisumet」をインストールしましょう。以下、Akismetを導入する手順です。1.ダッシュボードより「プラグイン」-「新規追加」をクリックします。2.「プラグインを追加」画面が表示されたら、右上の検索欄に「Akismet」と入力します。下図のように「Akismet」が表示されるので「今すぐインストール」をクリックします。3.インストールが終わったら「有効化」ボタンをクリックします。4.下図のようなAkismet設定画面に変わるので「Akismetアカウントを設定」ボタンをクリックします。キーを取得」ボタンをクリックします。KEY」ボタンをクリックします。Basic」ボタンをクリックします。8.下図のように金額が表示されても慌てずに黒い「\4,500/YEAR」のバーをドラッグして左側に動かし、「\0」にします。Basicは0円で使用可能です)9.下図のように「\0/YEAR」に表示されたら「CONTINUE」ボタンをクリックします。site」のリンクをクリックします。11.APIキーが自動的に入力されていることを確認し、「変更を保存」ボタンをクリックします。以上で「Akismet」のインストール&設定は完了です。コメント欄のカスタマイズを行うスパムコメント対策が終わったらコメント欄のカスタマイズです。コメント欄の設計をするまずはコメント欄をどのようにしたいのか設計をします。本サイトの場合はコメントは以下のようにします。コメントするのは自由コメントを投稿した直後にサイトに反映したいコメントするのを躊躇するような制御は入れたくないつまり「簡単にコメントを投稿できる」「すぐにサイトに反映される」の2点になると思います。デフォルトだと下図のようになります。見ていただくと分かりますが、デフォルトのコメント欄は敷居が高いです。その理由は、「コメント」本体だけでなく「名前」「メールアドレス」「ウェブサイト」の記入が必要だからです。気軽にコメントを残せるように「コメント」だけにしたいと思います。WordPressの設定で「メールアドレス」「ウェブサイト」の入力は不要にしておくダッシュボードより「設定」-「ディスカッション」をクリックします。下図のコメントの設定があります。「コメントの投稿者の名前とメールアドレスの入力を必須にする」のチェックを外しましょう。ここにチェックが入っていると、「メールアドレス」の入力が必須なのに、メールアドレスを入力する欄がなくてコメントが投稿できなくなります。変更したら「変更を保存」ボタンをクリックします。以上で下準備は完了です。環境によりメールアドレス、ウェブサイトの項目を消す手順が様々あるWordPressと言っても環境が異なります。そのため、「手順・方法」も異なります。何が異なるのか確認します。テンプレートが異なるWordPressのバージョンが異なるコメントのカスタマイズが異なるインストール済みのプラグインが異なるレンタルサーバーが異なる1つとして同じ環境はないと言えます。次にどんな方法・手順があるのか整理してみましょう。異なる環境であれ、方法は上記の3つに収斂しそうです。CSS(スタイルシート)の編集で設定してみる今回は、まずCSSの編集でカスタマイズしてみます。その理由は、なるべくPHPのソースを変更したくないからです。迷うor最悪サイトそのものが真白くなって見えなくなるリスクを天秤に掛けてみたところCSSを編集する方がリスクが少ないので、まずはCSSで試し、更にカスタマイズをしたい場合は、functions.phpの編集で対応したいと思います。面倒でも作業目にCSSファイルのバックアップを取る毎回面倒なのですが、作業前に必ずCSSバックアップを取りましょう。Fox」でもいいですが、ブラウザよりCSSの構成が確認できます。「Firefox」を利用している場合CSSを確認したい箇所で右クリックをして「検証/要素を調査」をクリックすると下図のようにCSSの構成を確認することができます。※画像をクリックすると拡大します。上図で確認すると、下のような構成になっていることが分かります。comment-form-urlメールアドレス欄を消すと「メールアドレスが公開されることはありません」の文字が邪魔になるので、こちらも一緒に消します。class="comment-form-url")をブロックして表示させないようにすれば目的が達成できそうです。CSSファイル(スタイルシート:style.css)を編集する早速CSSファイルを編集しましょう。nome;の一列を入れる)します。nome;}※このサイトのCSSはそもそもコメントを作ってなかったので「comment-notes」と「comment-form-email」と「comment-form-url」はありませんでした。ない場合は自分で上記のように追加します。結果、CSSはこのようになっていると思います。通常のテンプレートを使っている方ならテンプレートに「comments.php」もしくは「comment.php」があるので、そちらを編集します。「comments.php」もしくは「comment.php」を開き、下記のように「comment_form」関数を探します。'"」を「value="名無しさん"」に変更します。確認したところ、下図のように何も入力しなくてもあらかじめ名前欄に「名無しさん」が入力されていることが確認できました。以上で設定は完了ですが、コメント欄を追加したことで本サイトがまた1つ成長したような気がします。参考にさせていただいたサイト下記サイトを参考にさせていただきました。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。