SWELLコメント欄カスタマイズ|サイト入力欄も非表示で超シンプルに!

コメント欄カスタマイズ
  • URLをコピーしました!

SWELL利用サイトのコメント欄をカスタマイズしたので、今回やったことをまとめました!

コメント欄カスタマイズは、基本的にはワードプレスのダッシュボード内で完結する部分も多いです。

が、サイト入力欄など一部非表示にできない項目もあったので、調べて対応してみました。

まつり

超シンプルなコメント欄で、読者のコメント入力ハードルを下げよう!

一部、テーマファイルを変更するカスタマイズがあります!間違うとサイトが表示されなくなるなどのトラブルが起こる可能性もあります。実施する場合は、ご自身の責任において十分注意して行なってください。

目次

SWELLコメント欄カスタマイズ・ビフォーアフター

まずは、今回のカスタマイズで何をしたのか、ビフォーアフターでご紹介します。

ビフォー

swellコメント欄カスタマイズビフォー
ビフォーです

アフター

swellコメント欄カスタマイズアフター
アフターですアフター

ビフォーはSWELLのコメント欄、初期設定のままです。

まつり

初期設定だと、ちょーっっと気軽にコメントしづらいかな?

swellコメント欄カスタマイズビフォー

メールアドレス必須とか、それだけでコメント入力を躊躇してしまいますよね。

サイトの運営方針にもよると思うんですが……

私は読者さんからできるだけ気軽にコメントいただきたいな~と思うので、超シンプルにカスタマイズしました!

変更した点はココ!
  1. 匿名(名前入力なし)でもコメント可能に
  2. メールアドレスの入力を任意に
  3. サイトURLの入力欄を非表示に

1と2は、ワードプレスのダッシュボードからクリックするだけでカスタマイズ可能。

3だけは、ちょこっとテーマファイルをいじる必要がありました。

まつり

ファイルいじるって言っても、ごく簡単な内容!コピペでOK!

SWELLのコメント欄カスタマイズのいろは

SWELLの機能として、コメント欄カスタマイズは今の所

  • コメント欄全体の表示・非表示の設定
  • タイトルの設定

のみ可能となっています。

名前とメールアドレスについてはワードプレス内の機能で設定、サイト欄についてはSWELLのテーマファイルを変更することでカスタマイズ実現しました。

名前とメールアドレスを任意入力に

まずは匿名、連絡先なしでもコメントができるように、名前とメールアドレスを任意入力に変更します。

こちらはダッシュボードでぽちっと完了。

STEP
設定→ディスカッションを開く
swellコメント欄カスタマイズ
この画面です
STEP
名前とメールアドレス入力必須のチェックボックスをオフに
swellコメント欄カスタマイズ

「他のコメント設定」の「コメントの投稿者の名前とメールアドレスの入力を必須にする」のチェックボックスを外します。

STEP
設定を保存

ディスカッション画面内、1番下にある保存ボタンを押すのを忘れずに。

以上で、名前とメールアドレス欄が任意項目になり、「*」が取れました!

まつり

メールアドレス欄は非表示にすることも考えたんだけど、コメント欄以外でやりとりしたいケースもあるかなと思って残しました。

サイト入力欄を非表示に

次に、サイト入力欄を非表示にしていきます。

こちらはクリック一つで…とはいかなかったので、テーマファイルを一部書き換えました!

修正対象になるファイルは「function.php」です!

今回のカスタマイズはこちらのサイトを参考にさせていただきました!

今回のカスタマイズはごく単純な内容ではありますが、あくまでもご自身の責任において、バックアップを取ったうえで行なってください

STEP
function.phpをバックアップ
テーマファイルバックアップ

まずは万が一のために、修正対象になるfunction.phpをバックアップしておきます。

バックアップ方法は

  • サーバーのファイルマネージャでコピー、またはPC側にダウンロード
  • FFFTPなどのファイル転送ソフトでコピー、またはダウンロード

などありますが、この辺のやり方は今回の修正内容とは直接関係ないので割愛。

まつり

必要があれば別記事で解説することとします!

STEP
外観→テーマエディターを開く

ワードプレスのダッシュボードにて、テーマエディタを開きます。

swellコメント欄カスタマイズ

このような注意が表示されますので、よく読んで理解したら「理解しました」をクリック。

まつり

全て自己責任で!

STEP
SWELL子テーマのfunction.phpを開く
swellコメント欄カスタマイズ

SWELLの方は基本的に子テーマを利用されていると思います。

ということで、「編集するテーマを選択」では「SWELL_CHILD」を選択。

テーマファイルの中に「テーマのための関数(function.php)がいるはずなので、クリックで選択。

STEP
function.phpにコードを書き足し

以下のソースコードをファイル内に書き足します。

追加コード
    //コメントからEmailとウェブサイトを削除
	function my_comment_form_remove($arg) {
	$arg['url'] = '';
	return $arg;
	 }
	 add_filter('comment_form_default_fields', 'my_comment_form_remove');

書き足す場所は、「親テーマのfunction.phpのあとに読み込みたいコードはこの中に。」というコメントのあと…

「add_filter~」で始まる{}内に入れます。

今回の例だと、10行目に書き足す感じです。

swellコメント欄カスタマイズ

変更したら、下にある「ファイルを更新」で保存することを忘れずに!

まつり

間違いがなければ「ファイルの編集に成功しました」のメッセージが出ます!うまくいかなければバックアップから戻そう!

以上でコメント欄から「サイト」の入力欄が消えているはずです!

カスタマイズ後のコメント欄

swellコメント欄カスタマイズアフター

超シンプルになりました!

ちなみに…コメント欄のタイトル(↑の例だと「コメントはお気軽に!」の部分)は、カスタマイズ画面内に設定箇所があります。

swellコメント欄カスタマイズ

外観→カスタマイズ、の中にある「投稿・固定ページ」→「記事下エリア」を選択。

swellコメント欄カスタマイズ

下のほうにある「コメントエリアの設定」でタイトル変更できます!

まつり

コメント欄自体を非表示にしたい場合は、コメントエリアを表示のチェックボックスをオフだよ!

以上、コメント欄を超シンプルにカスタマイズする方法でした!

ご参考になりましたらです。

コメント欄カスタマイズ

この記事が気に入ったら
いいね または フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

ブロガー&Webライターのまつりです。
毎日地域ブログ書いてる3児ママ。
ブログでの経験をWebライティングにフル投入して、1ヵ月目で5万円分納品達成。
こちらのブログではブログ運営&Webライターとしての日々の気づきなどをゆるりと記録しています。

コメント

コメント一覧 (4件)

コメントする

目次