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

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

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

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

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

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

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

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

スポンサーリンク

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

  1. コメント欄へ画像のアップロードができる機能を追加
  2. アップロードできる画像の数やサイズを制限
  3. 表示する画像サイズを指定できる
この記事の内容について
このプラグイン紹介記事は簡易的に動作テストをした上で紹介していますが以下の点にご注意願います
  1. すべての環境で動作するとは限りません
  2. 閲覧される時期によってはバージョンが変わり、仕様が大きく変更されている場合があります
  3. テストは原則無料版のみで実施しています
  4. テスト環境については文末に記載しています

【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の教本第3版 人気講師が教える本格Webサイトの作り方 (「いちばんやさしい教本」)

いちばんやさしいWordPressの教本第3版 人気講師が教える本格Webサイトの作り方 (「いちばんやさしい教本」)

  • 価   格:¥ 1,706
  • 販 売 者: Amazon.co.jp
  • 評   価:
  • 商品の概要:ASIN: 4295000795
    インプレス

本当によくわかるWordPressの教科書 はじめての人も、挫折した人も、本格サイトが必ず作れる

本当によくわかるWordPressの教科書 はじめての人も、挫折した人も、本格サイトが必ず作れる

  • 価   格:¥ 1,685
  • 販 売 者: Amazon.co.jp
  • 評   価:
  • 商品の概要:ASIN: 4797395168
    SBクリエイティブ

はじめてのブログをワードプレスで作るための本

はじめてのブログをワードプレスで作るための本

  • 価   格:¥ 1,944
  • 販 売 者: Amazon.co.jp
  • 評   価:
  • 商品の概要:ASIN: 4798052817
    秀和システム

CS Shop
WordPress 仕事の現場でサッと使える!デザイン教科書【電子書籍】[ 中島真洋(著)ロクナナワークショップ(監修) ]

WordPress 仕事の現場でサッと使える!デザイン教科書【電子書籍】[ 中島真洋(著)ロクナナワークショップ(監修) ]

  • 価   格:3,002 円 (税込) 送料込
  • 販 売 者: 楽天Kobo電子書籍ストア
  • 評   価:
  • 商品の概要:【ご注意:本書は固定レイアウト型の電子書籍です。ビューア機能が制限されたり、環境により表示が異なる場合があります】Webデザイナー養成講座シリーズは,プロのデザイナーとして仕事をする上で,必須のスキルを身につけるためのシリーズです。本書では,WordPressをこれ..
ビジネスサイトをこれからつくる WordPressデザイン入門サイト制作から納品までのはじめの一歩【電子書籍】[ 秋元 英輔 ]

ビジネスサイトをこれからつくる WordPressデザイン入門サイト制作から納品までのはじめの一歩【電子書籍】[ 秋元 英輔 ]

  • 価   格:2,592 円 (税込) 送料込
  • 販 売 者: 楽天Kobo電子書籍ストア
  • 評   価:
  • 商品の概要:<p>ハイ・クオリティなビジネスサイトを作る</p> <p>※この電子書籍は固定レイアウト型で配信されております。固定レイアウト型は文字だけを拡大することや、文字列のハイライト、検索、辞書の参照、引用などの機能が使用できません。</p> <p>プログラミングの知識..
WordPress 仕事の現場でサッと使える! デザイン教科書 (Webデザイナー養成講座) [ 中島真洋著 ]

WordPress 仕事の現場でサッと使える! デザイン教科書 (Webデザイナー養成講座) [ 中島真洋著 ]

  • 価   格:3,002 円 (税込) 送料込
  • 販 売 者: 楽天ブックス
  • 評   価: 評価 5
  • 商品の概要:Webデザイナー養成講座 中島真洋著 ロクナナワークショップ監修 技術評論社WordPress シゴトノゲンバデサッ トツカエルデザインキョウカショ ナカシマ マサヒロ チョ ロクナナワークショップ カンシュウ 発行年月:2015年06月 ページ数:368p サイズ:単行本 ISBN:97847741..
楽天ウェブサービスセンター CS Shop

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

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

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

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

メニューを表示できません

ページ先頭へ