WordPressのコメント本文へ画像をアップロードできるようにするプラグイン「Comment Images Reloaded」

Wordpressのコメント欄といえば「名前」「メールアドレス」「ウェブサイト」とともにあるのが「コメントの本文」。標準の状態ではこの部分はテキストとhtmlタグが使えるようになっています。

まあ、書かれていることに対してのコメントなのですからこんなもん??かもしれません。でも、何か技術的な情報に対してコメント欄を使って質問されたり、共感するコメントで「こんな風だよ~」と画像を付けられるようになっていたりすると単なるコメント以上のコミュニケーション機能として使えるようになりますね。

「Comment Images Reloaded」はコメント欄本文へ画像のアップロードができるようにするプラグイン。もちろん巨大なファイルがどんどんアップロードできないように画像の数や1枚当たりの大きさなども指定できるようになっています。

これを使えばペットのかわいさ自慢を行うサイトなど、通常であればユーザー登録してもらってバックエンドから投稿してもらう、プラグインなどを使ってフロントエンドから投稿してもらう機能を追加するといったサイトもコメント欄を使って簡単に作れるようになりますね。

そしてコメント欄にはもう一つ、返信機能が最初から備わっていますから、掲示板の代わりとしても活用できるようになるのもうれしいところです。

この「フロントエンドからの投稿」「ユーザー登録」「掲示板機能」という3つの機能はそれぞれプラグインを使えば実装することはできても、デザインを統一したり、ルールを設定したりするのが結構大変だったりして結局いい加減な形で追加されたり、途中で挫折したりすることの多い機能です。

コメント欄はユーザー登録なしでも投稿できますし、完全にフロントエンドからの投稿機能ですし、最初からテーマの中でいい感じに表示できるようになっていますし、返信機能もありますから、ここに画像のアップロード機能が加われば・・・コメント欄の新しい使い方が見えてきそうですね。

スポンサーリンク

【Comment Images Reloaded】プラグインの基本的な機能・できること

  1. コメント欄へ画像のアップロードができる機能を追加
  2. アップロードできる画像の数やサイズを制限
  3. 表示する画像サイズを指定できる
この記事の内容について
このプラグイン紹介記事は簡易的に動作テストをした上で紹介していますが以下の点にご注意願います
  1. すべての環境で動作するとは限りません
  2. できる限り最新のバージョンの情報を紹介するようにしておりますが、閲覧される時期によってはバージョンが変わり、仕様が大きく変更されている場合があります
  3. 有料版と無料版がある場合、テストは原則無料版のみで実施しています
  4. テスト環境については文末に記載しています
  5. 使用方法で紹介しているショートコードをコピーして使用すると、環境によっては記号などが文字化けすることがあります。コピーしたのに動作しない場合は特に「”」「’」などの記号を入力し直してみてください。

【Comment Images Reloaded】プラグインの設定画面や表示の日本語化と翻訳

当サイトで私が翻訳した【Comment Images Reloaded】プラグインの日本語化ファイルを配布しています。

翻訳ファイルは

Wordpressプラグイン【Comment Images Reloaded】の日本語翻訳ファイルのダウンロードページです。

からダウンロードできます(ダウンロードの方法や日本語の適用方法なども解説しています)

翻訳することで設定が容易になり、重要な項目の設定漏れも少なくなりますから日本語化をお勧めします。

【Comment Images Reloaded】プラグインのインストールと設定

インストールと設定方法

インストールはプラグインの新規追加でプラグイン名で検索してインストールするか、ページ先頭の画像をクリックして表示されるWordpressのプラグイン公式配布ページがダウンロードしてからアップロードインストールします。

インストール方法の詳しい解説は

Wordpressと言えばさまざまな追加機能を使って思い通りの表現や動作ができるのがブログやHTMLで作ったサイトと違って楽しいところですね。ここでは基本的なプラグインの導入の仕方とトラブルが発生した場合の対処方法について解説します。
を参照ください

【Comment Images Reloaded】プラグインの基本的な使い方

設定はダッシュボードから「設定」→「Comment Images Reloaded」で行います

項目は

  1. 画像の大きさ
  2. アップロードできる画像の数
  3. 最大画像サイズ
  4. アップロードボタン前に表示する文字列
  5. 画像の拡大/Magnific Popup jQuery pluginを使うことで画像の拡大が有効になります

などです。また、設定画面で「全て無効にする」にチェックを入れるとこの機能を停止してコメント欄に表示されないようにすることができます。

【Comment Images Reloaded】プラグインの便利な使い方・カスタマイズ方法など

より便利に使うカスタマイズ技やテストサイトで使用した結果や感想、Wordpressのプラグイン公式配布ページには書かれていない事柄などを紹介します。

コメントフォームの任意の場所へアップロードボタンを追加する方法

このプラグインについてコメントにて質問いただいた内容です。コメント欄へ画像アップロードを追加するという目的のプラグインなので当然標準のコメント欄下へ画像アップロードのボタンが表示されてしまいますね。これを別の場所へ移動できないか?というものです。

この方法についてはプラグインの公式ページに説明が書かれていますがちょっと端折られていて分かりにくいので詳しく説明していきます。

手順1 コメントフォームを置き換える

コメントフォームは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=”コメントを送信” />

とすればいいわけです。

前述しましたが、使っているテーマごとにどこでコメント欄の表示をさせているのか、どんな要素で構成されているのかが異なりますので、実際のサイトでテストしていただくしかありません。

元に戻す自身がなければ断念してそのまま使用することをおすすめします

Amazonの人気商品楽天市場の人気商品
【送料無料】 WordPress 仕事の現場でサッと使える!デザイン教科書 Webデザイナー養成講座 / 中島真洋 【本】

【送料無料】 WordPress 仕事の現場でサッと使える!デザイン教科書 Webデザイナー養成講座 / 中島真洋 【本】

3,002 円 (税込) 送料込
基本情報ジャンル建築・理工フォーマット本出版社技術評論社発売日2015年06月ISBN9784774173801発売国日本サイズ・ページ366p 26cm(B5)関連キーワード 9784774173801 【FS_708-2】出荷目安の詳細はこちら>>楽天市場内検索 『在庫あり』表記について 
【中古】 本格ビジネスサイトを作りながら学ぶ WordPressの教科書 Ver.4.x対応版 /プライム・ストラテジー株式会社(著者) 【中古..

【中古】 本格ビジネスサイトを作りながら学ぶ WordPressの教科書 Ver.4.x対応版 /プライム・ストラテジー株式会社(著者) 【中古..

1,649 円 (税込)
プライム・ストラテジー株式会社(著者)販売会社/発売会社:SBクリエイティブ/ 発売年月日:2015/02/01JAN:9784797381078
WordPress Perfect GuideBook 4.x対応版 [ 佐々木恵 ]

WordPress Perfect GuideBook 4.x対応版 [ 佐々木恵 ]

1,814 円 (税込) 送料込
評価 4.5
佐々木恵 ソーテック社wordpress 4.1 4.0 4.x TwentyFifteen ワードプレス 使い方 プラグイン インストール テンプレート ワードプレス パーフェクト ガイドブック ササキ,メグミ 発行年月:2015年02月 ページ数:285p サイズ:単行本 ISBN:9784800710666 佐々木恵(ササキ..
楽天ウェブサービスセンター CS Shop

プラグインに関するお問い合わせ

最後までお読みいただきありがとうございました。 内容の相違、導入後のトラブル、設定方法のお問い合わせなどはこちらのリンクからお願いします。
さまざまな情報をいただくことで、プラグインの紹介記事をより正確でよりわかりやすく、よりいろいろな方のお役に立てる情報にしていきたいと考えておりますので、ぜひともご協力をお願いいたします。

似たようなプラグインをお探しですか?

このプラグインはに分類されています。リンクをクリックすると同じような機能を持つプラグインの紹介記事一覧が表示されますので、プラグイン探しに是非ご活用ください。
トップへ戻る