WordPressのコメント欄といえば「名前」「メールアドレス」「ウェブサイト」とともにあるのが「コメントの本文」。標準の状態ではこの部分はテキストとhtmlタグが使えるようになっています。
まあ、書かれていることに対してのコメントなのですからこんなもん？？かもしれません。でも、何か技術的な情報に対してコメント欄を使って質問されたり、共感するコメントで「こんな風だよ～」と画像を付けられるようになっていたりすると単なるコメント以上のコミュニケーション機能として使えるようになりますね。
「Comment Images Reloaded」はコメント欄本文へ画像のアップロードができるようにするプラグイン。もちろん巨大なファイルがどんどんアップロードできないように画像の数や１枚当たりの大きさなども指定できるようになっています。
これを使えばペットのかわいさ自慢を行うサイトなど、通常であればユーザー登録してもらってバックエンドから投稿してもらう、プラグインなどを使ってフロントエンドから投稿してもらう機能を追加するといったサイトもコメント欄を使って簡単に作れるようになりますね。
そしてコメント欄にはもう一つ、返信機能が最初から備わっていますから、掲示板の代わりとしても活用できるようになるのもうれしいところです。
この「フロントエンドからの投稿」「ユーザー登録」「掲示板機能」という３つの機能はそれぞれプラグインを使えば実装することはできても、デザインを統一したり、ルールを設定したりするのが結構大変だったりして結局いい加減な形で追加されたり、途中で挫折したりすることの多い機能です。
コメント欄はユーザー登録なしでも投稿できますし、完全にフロントエンドからの投稿機能ですし、最初からテーマの中でいい感じに表示できるようになっていますし、返信機能もありますから、ここに画像のアップロード機能が加われば・・・コメント欄の新しい使い方が見えてきそうですね。
【Comment Images Reloaded】プラグインの基本的な機能・できること
- コメント欄へ画像のアップロードができる機能を追加
- アップロードできる画像の数やサイズを制限
- 表示する画像サイズを指定できる
本記事を参考にWordPressサイトへプラグインの導入を検討される方へ
WordPressは古くから無料で配布されているサイト作成ツール（CMS）で、随時改良が加えられており、さまざまなバージョンが存在します。
さらにWordPressを動かすためのプログラムであるPHP、サイトのデータを保存しておくためのデータベースについても様々なバージョンがあります。
そしてWordPress本体同様にプラグインについてもさまざまなバージョンが存在します。
本記事を参考にプラグインの導入をお考えの方は、以下に留意の上でインストールするようにしてください。
- テスト環境での動作に基づいた紹介記事ですので、すべての環境で正常に動作するかどうかは不明です
※本記事の内容についてはページ内に記載しているプラグインバージョンのものになります。現在のバージョンと異なる場合、機能や日本語対応の状況などが異なる場合があります。
※また、テスト環境、テストしたプラグインバージョン等の表示が本文内にない場合、ページタイトル下にある最終更新日当時の情報となりますので、現在のバージョンでは全く違う機能となっているかも知れません。 - プラグインに無料版と有料版（Pro版）がある場合、特に記載がなければ無料版の情報のみを紹介しています
- このページでプラグインを使用する際に必要なショートコードやコードなどは、コピーして使用することができますが、環境によっては記号などが文字化けすることがあります。コピーしたのに動作しない場合は特に「”」「’」などの記号を入力し直してみてください。
- プラグイン本体の動作不具合や質問などは公式サイトのフォーラムなどで行ってください（ここでは質問にお答えすることはできません）
【Comment Images Reloaded】プラグインの設定画面や表示の日本語化と翻訳
当サイトで私が翻訳した【Comment Images Reloaded】プラグインの日本語化ファイルを提供しています。
翻訳ファイルは
からダウンロードできます（ダウンロードの方法や日本語の適用方法なども解説しています）
翻訳することで設定が容易になり、重要な項目の設定漏れも少なくなりますから日本語化をお勧めします。
【Comment Images Reloaded】プラグインのインストールと設定
インストール方法
インストールはプラグインの新規追加でプラグイン名を入力して検索してインストールするか、WordPressのプラグイン公式配布ページからダウンロード後、管理画面からアップロードインストールしてください（プラグインの公式ページは本ページ内記載のリンクをクリック、もしくは、WordPress公式サイトで検索してください）。
WordPressを使い始めて間もない方（初心者の方）は、より詳細なプラグインのインストール手順や、インストール時に起こる問題などへの対処方法をまとめた【WordPress】プラグインのインストール＆追加方法とエラー対処の方法も併せてご覧ください。
【Comment Images Reloaded】プラグインの基本的な使い方
設定はダッシュボードから「設定」→「Comment Images Reloaded」で行います
項目は
- 画像の大きさ
- アップロードできる画像の数
- 最大画像サイズ
- アップロードボタン前に表示する文字列
- 画像の拡大／Magnific Popup jQuery pluginを使うことで画像の拡大が有効になります
などです。また、設定画面で「全て無効にする」にチェックを入れるとこの機能を停止してコメント欄に表示されないようにすることができます。
【Comment Images Reloaded】プラグインの便利な使い方・カスタマイズ方法など
より便利に使うカスタマイズ技やテストサイトで使用した結果や感想、WordPressのプラグイン公式配布ページには書かれていない事柄などを紹介します。
コメントフォームの任意の場所へアップロードボタンを追加する方法
このプラグインについてコメントにて質問いただいた内容です。コメント欄へ画像アップロードを追加するという目的のプラグインなので当然標準のコメント欄下へ画像アップロードのボタンが表示されてしまいますね。これを別の場所へ移動できないか？というものです。
この方法についてはプラグインの公式ページに説明が書かれていますがちょっと端折られていて分かりにくいので詳しく説明していきます。
手順１ コメントフォームを置き換える
コメントフォームはWordPressの基本フォームを呼び出しているだけのテーマが多いので、テーマの中で「<?php comment_form(); ?>」と書かれている場所を見つけます。大抵はcomment.phpなどというファイルに書かれています。
これではバクッとコメントフォーム自体が呼び出されてしまうので、元々コメントフォームを構成しているコードと置き換えます。ちょっと長いですが、
<div id=”testcomment” class=”comment-respond”>
<h3 id=”reply-title” class=”comment-reply-title”>コメントを残す <small><a rel=”nofollow” id=”cancel-comment-reply-link” href=”/?p=1#respond” style=”display:none;”>コメントをキャンセル</a></small></h3>
<form action=”http://example.com/wp-comments-post.php” method=”post” id=”commentform” class=”comment-form” novalidate>
<p class=”comment-notes”>メールアドレスが公開されることはありません。 <span class=”required”>*</span> が付いている欄は必須項目です</p>
<p class=”comment-form-author”>
<label for=”author”>名前 <span class=”required”>*</span></label>
<input id=”author” name=”author” type=”text” value=”” size=”30″ aria-required=’true’ />
</p>
<p class=”comment-form-email”>
<label for=”email”>メールアドレス <span class=”required”>*</span></label>
<input id=”email” name=”email” type=”email” value=”” size=”30″ aria-required=’true’ />
</p>
<p class=”comment-form-url”>
<label for=”url”>ウェブサイト</label>
<input id=”url” name=”url” type=”url” value=”” size=”30″ />
</p>
<p class=”comment-form-comment”>
<label for=”comment”>コメント</label>
<textarea id=”comment” name=”comment” cols=”45″ rows=”8″ aria-required=”true”></textarea>
</p>
<p class=”form-allowed-tags”>
次の<abbr title=”HyperText Markup Language”>HTML</abbr> タグと属性が使えます: <code><a href="" title=""> <abbr title=""> <acronym title=""> <b> <div cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> </code>
</p>
<p class=”form-submit”>
<input name=”submit” type=”submit” id=”submit” value=”コメントを送信” />
<input type=’hidden’ name=’comment_post_ID’ value=’1′ id=’comment_post_ID’ />
<input type=’hidden’ name=’comment_parent’ id=’comment_parent’ value=’0′ />
</p>
</form>
</div>これがコメントフォームのすべての要素になります。「<?php comment_form(); ?>」の場所へそのままコピペすると表示できます（環境によりますからテストしてから実装してくださいね）
プラグインの設定項目を変更する
ダッシュボードから「設定」→「設定」→「Comment Images Reloaded」を開きます。
英語のままだと「Upload file input」の右にある「Check it to disable automatic show file upload field」にチェックを入れます
これでコメントフォーム下（送信ボタン下）へ自動挿入されるのが解除されます
任意の場所にアップロード項目を追加する
自動挿入を解除したら、上のコードの中でアップロードボタンを挿入したい場所へ
<p><?php if (function_exists(“the_cir_upload_field”)) { the_cir_upload_field(); } ?></p>を挿入すればOKです。
例えば送信の真上に入れるなら上のコードの
<p><?php if (function_exists(“the_cir_upload_field”)) { the_cir_upload_field(); } ?></p>
<p class=”form-submit”>
<input name=”submit” type=”submit” id=”submit” value=”コメントを送信” />とすればいいわけです。
前述しましたが、使っているテーマごとにどこでコメント欄の表示をさせているのか、どんな要素で構成されているのかが異なりますので、実際のサイトでテストしていただくしかありません。
元に戻す自身がなければ断念してそのまま使用することをおすすめします
ポチップ
ポチップ
