実は今回の記事のタイトル、どこかで見た事があるかもしれません。そう、以前「WordPressプラグイン「WPML」でブログを多言語化する」という記事を書いた事があるのです。この記事で説明しているとおり、私のポートフォリオサイトは「WPML」という、サイトを多言語化するWordPressプラグインを使用して翻訳されています。しかしWPMLは2011年2月に有料化されたため、課金をするか別のプラグインを使うか悩んでいました。

今回採用したのはqTranslateという、無料でサイトを多言語化することができるWordPressプラグインです。以前から知ってはいたものの、ちゃんと試した事がなかったので、今回改めてテストしてみました。すると思っていた以上に使いやすかったので採用することに。簡単に使い方を紹介します。

qTranslateの基本設定

まずはプラグインをダウンロードして、管理ページで有効化します。その後、設定 > Language　から設定していきます。まずは言語の設定。

ページ下部に国旗とともに言語が表示されています。使用する言語を「Enable（有効化）」し、不要な言語は「Disable（無効化）」します。

「Save Changes」ボタンをクリックして保存すると、選択した言語が表示されています。デフォルトにしたい言語のラジオボタンにチェックを入れて保存。

投稿画面に行くと、複数言語でタイトル・記事が書けるようになっていますね。

もちろんカテゴリーやタグの名前も複数言語で指定できます。

設定 > Language > Advanced Settings からURLの設定ができます。下記３つのどれかになります。

1. クエリーモード（http://webcreatorbox.com/?lang=en）
2. サブディレクトリモード（http://webcreatorbox.com/en）※デフォルト
3. サブドメインモード（http://en.webcreatorbox.com/）

私はデフォルトのサブディレクトリモードを使っています。サブドメインモードでは他にドメインの取得・設定が必要になるようです。

テーマのカスタマイズ

日付のフォーマット

プラグインを有効化すると、日付の表示が何やらおかしくなっていました。テーマファイル内で <?php the_time(); ?> ではなく <?php the_date(); ?> を使うと直りました。
それでもおかしい時は 設定 > Language > Languages の言語一覧から「Edit」をクリックし、「Date Format」を変更してください。

言語スイッチャー

好きなところに言語スイッチャーを表示する事ができます。表示方法は text, image, both, dropdown から選べます。

<?php echo qtrans_generateLanguageSelectCode('text'); ?>

つねに全ての言語を表示するのではなく、現在表示している言語以外のもののみを表示する場合は、少しカスタマイズが必要です。このサイトでは以下のコードをfunctions.phpに書いています。

function curPageURL() {
    $pageURL = 'http';
     if ($_SERVER["HTTPS"] == "on") {
        $pageURL .= "s";
    }
     $pageURL .= "://";
     if ($_SERVER["SERVER_PORT"] != "80") {
          $pageURL .= $_SERVER["SERVER_NAME"].":".$_SERVER["SERVER_PORT"].$_SERVER["REQUEST_URI"];
     }
    else {
          $pageURL .= $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];
     }
return $pageURL;
}

function langlist () {
   if (qtrans_getLanguage() == 'en') {
      echo '<a href="' . qtrans_convertURL(curPageURL(), 'ja') . '">日本語</a>';
   } elseif (qtrans_getLanguage() == 'ja') {
      echo '<a href="' . qtrans_convertURL(curPageURL(), 'en') . '">English</a>';
   }
}

テーマファイル内の翻訳

テーマファイルの文字列を翻訳する時は、下記の便利なコードが使えます。文字数が少ないナビゲーションメニューや見出しなどはこれで済みそうですね。

<?php _e("<!--:en-->english<!--:--><!--:ja-->にほんご<!--:-->"); ?>

翻訳する部分がたくさんあったり、言語によって読み込むファイルを変更する時は qtrans_getLanguage() を使います。この例では、言語が英語だった時は「en.css」というCSSファイルを読み込むようにしています。

<?php if (qtrans_getLanguage() == 'en') { // English ver ?>
   <link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/en.css">
<?php } ?>

All in One SEO Plugin

All in One SEO Packを使う時は、画像のコードで適応できました。

Tweetするとタイトルが変

私は記事が更新されるとWordTwitというプラグインで自動Tweetするようにしています。qTranslateのテストを兼ねて記事を更新したある日、こんな風にTweetされていました。

Webクリエイターボックス：<!–:ja–>Twitter 人気のつぶやき 1/14～1/20 2012<!–:–> tinyurl.com/7x6rbje

なんかタグが見えてる…

__() というのが翻訳文字列の取得コードとの事なので、プラグインファイル wordtwit.php の887行目の

$message = str_replace( '[title]', $my_post->post_title, $message );

を

$message = str_replace( '[title]', __($my_post->post_title), $message );

に変更すると直りました。

WordTwitだけでなく、多くのTwitter自動配信系プラグインは同様のコードを使っていると思うので、試してみてください。

qTranslateはカスタマイズが非常に楽チンで気に入っています。ただ、やはり自分で使って試してみるのが一番。WPMLは有料ですが、30日以内であれば払い戻しもしてもらえるようなので、比較してみるのもいいでしょう。

翻訳…大変だろうけどがんばるぞー！

参考サイト: What is the qTranslate lang switch code?

「Media Queriesってなんぞや？」という方は「CSS3 Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き」を読んでおさらいおさらい！

WordPressのテーマを変更してスマートフォンに対応させる

1. スマートフォン用テーマフォルダを作成

まずは /wp-content/themes/ 内にスマートフォン用テーマを作成します。テーマの作成方法は主に３つのやり方があります。

スタティックHTMLから作成

オリジナルテーマを作る要領で、HTML／CSSで静的ページを作成しておき、その後WordPressの機能をつけていくやり方です。確実に思い通りのサイト設計にするにはこの方法がいいかもしれませんが、一番時間がかかるやり方でもあります。元テーマと大きくデザイン・構成が変わる場合や、テーマ作成に慣れていない場合はこの方法でやるといいかも。

子テーマを作る

元の親テーマファイルを読み込み、必要であればテーマファイルを用意し、上書きする方法です。必須ファイルは style.css のみ。

/*
Theme Name: wcb2-mobile
Template: wcb2
*/

@import url('../wcb2/style.css');

style.css 上部にテーマの名前と親テーマのディレクトリ名（両方必須）を記述し、 @import で親テーマのCSSを読み込みます。子テーマについて詳しい説明はWordPress Codexをご覧ください。

簡単にできるのですが、結局親テーマを読みこんで上書きするので、読み込むファイル自体は増えますね。

元のテーマフォルダをコピー

今回やった方法はこちら。元のテーマフォルダをコピーし、テーマ名を変更してカスタマイズする方法です。Webクリエイターボックスの場合、元のテーマフォルダ名が「wcb2」、スマートフォン用テーマは「wcb2-mobile」と名づけ、その中で不要なファイル・コードをガツガツ捨てていきました。Web版とスマートフォン版で同じ画像を使うなら、テーマファイルやCSSファイルに記述する画像ファイルのパスを変えるだけなので簡単です。

2. プラグインでテーマを切り替える

スマートフォン用のテーマが完成したら、プラグインでユーザーエージェントを判定し、スマートフォンだった場合はテーマを切り替えます。様々なプラグインがありますが、今回使用したのはWPtap Mobile Detectorというプラグイン。スマートフォンといってもiPhoneやiPad、Androidなど、機種によってテーマを選択することができます。

ドロップダウンメニューからスマートフォン用テーマを選択するだけ。確認するとちゃんと切り替わっています。簡単ですね！

CSS Media Queriesとの比較

スマートフォン用テーマを適応させる前と後ではどのように変化があったのかを簡単に検証してみました。

表示速度

表示速度のテストはWebWaitというサービスを使用しました。5回計測したうちの平均値を出してくれます（計測回数は変更可能）。このまま使うとWeb版の速度しか測れないので、Safariを立ち上げ、「開発」メニューの「ユーザーエージェント」を「iPhone」に設定して計測。同じWi-fi環境の元、キャッシュはクリアしてテストしています。

まずは CSS Media Queriesで対応したバージョン。5.06秒。

続いてスマートフォン用テーマを適用させたバージョン。2.57秒。

約2秒早くなりました。3G回線だとさらに遅くなりそうです。

ファイルサイズ

表示ファイルサイズはSafariのデベロッパーツールにある「Network」から確認。

CSS Media Queriesで対応したバージョン。1.11MB。

スマートフォン用テーマを適用させたバージョン。95.48KB。

ちなみにテーマフォルダ自体のサイズは元テーマが1.2MB、スマートフォン用テーマが323KBです。

製作時間

日頃から常に制作にかかった時間を計っているので、こちらも公開。
CSS Media Queriesを使った場合の制作時間は約1時間40分。対してスマートフォン用テーマの制作時間は約4時間。
ただし今回はプラグインの選定・テストの時間も含めているので、次回からはもう少し早くできそうです。

どちらも制作時間だけでなく設計を考える時間も必要ですし、サイトによって大きく変わると思います。が、やはりCSS Media Queriesの方はいじるファイルがCSSのみですむので、CSS Media Queriesで対応させたほうが制作時間は短くてすみそう。

結論

以前から「[翻訳] モバイル向けの CSS Media Queries は見掛け倒しである」という記事にあるとおり、Media Queriesの使用はまだまだ議論の余地がある部分だと思います。なので一概には言えない気もしますが、とりあえず今回思ったことまとめ…。

テーマを変えた方がよさそうなサイト

• 非表示させるコンテンツがたくさんある
• HTMLの構成自体が大きく変わる

CSS Media Queriesで対応できそうなサイト

• 表示させるコンテンツはあまり変わらない
• 元サイトのコンテンツ量が少ない
• 制作時間があまりない

CSSの display: none; などを使って大幅にコンテンツの表示・非表示を変える場合、HTMLの構成自体が大きく変わる場合は、今回のように別テーマを作って切り替えた方がいいように思います。逆に表示させるコンテンツ自体はほとんど変わらないという時はCSS Media Queriesで十分対応できるでしょう。そのサイト、コンテンツによりますね。最初から対応させるデバイス、対応方法も頭に入れて設計していくように心がけましょう。

検索フォームの設置方法

まずは基本編、フォームの設置方法です。自分でオリジナルテーマを作成したり、カスタマイズする時に地味にひっかかる検索フォームの設置方法（たぶん）。設置するだけなら以下の一行をテーマファイル内に記述するだけでWordPressが最初から用意しているフォームを実装することができます。

<?php get_search_form(); ?>

で、何がひっかかるかというとその検索フォームのカスタマイズ方法。なにせビルトインの検索フォームを出力しているので、カスタマイズするためのファイルが見つからないわけです。見つからないなら作ってしまえ！ということで、 searchform.php を作成しましょう！テーマフォルダ内に searchform.php がある場合、上記 get_search_form(); は、このファイルを読み込みます。ビルトインの検索フォームは以下のようになっています。とりあえずコピペして自分好みにカスタマイズしましょう！

<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
    <div><label class="screen-reader-text" for="s">Search for:</label>
        <input type="text" value="" name="s" id="s" />
        <input type="submit" id="searchsubmit" value="Search" />
    </div>
</form>

searchform.php を作成する方法の他、 functions.php 内に下記のようにコードを書けば同じように検索フォームを出力することができます。

function my_search_form( $form ) {

    $form = '<form role="search" method="get" id="searchform" action="'.home_url( '/' ).'" >
    <div><label class="screen-reader-text" for="s">' . __('Search for:') . '</label>
    <input type="text" value="' . get_search_query() . '" name="s" id="s" />
    <input type="submit" id="searchsubmit" value="'. esc_attr__('Search') .'" />
    </div>
    </form>';

    return $form;
}

add_filter( 'get_search_form', 'my_search_form' );

詳しくはWordPress Codexにも書いてあるので参考にしてみてください。

カテゴリー別絞り込み検索

先週Webクリエイターボックスのリデザインをした際付け加えたかった機能のうちのひとつがこの絞り込み検索。カテゴリー別の絞り込み検索はWordPressのタグが用意されているので、簡単に実装することができます。

<?php wp_dropdown_categories(); ?>

だけでとりあえず実装完了！簡単ですね。

お好みでカッコ内にオプションを付け加えます。オプションの種類や初期値はWordPress Codexをご覧ください。

例えば最初に選択しておきたいカテゴリーIDを5、カテゴリー名順に表示、カテゴリーIDが10のものを除外して表示したい場合は以下のコードになります。

<?php wp_dropdown_categories('selected=5&orderby=name&exclude=10'); ?>

タグ別絞り込み検索

タグの場合はカテゴリー別絞り込み検索のようなWordPressタグがないので、地味にコードを書いていきます。「WordPressでカテゴリー＆タグを絞り込み検索をする」という記事が大変参考になりました！ありがとうございます！

コードはその記事にもあるように foreach を使って <option> にタグを表示します。

<?php $tags = get_tags(); if ( $tags ) : ?>
      <select name='tag' id='tag'>
          <option value="" selected="selected">タグ選択</option>
          <?php foreach ( $tags as $tag ): ?>
          <option value="<?php echo esc_html( $tag->slug);  ?>"><?php echo esc_html( $tag->name ); ?></option>
          <?php endforeach; ?>
      </select>
<?php endif; ?>

カスタムフィールド別絞り込み検索

WP Custom Fields Searchというプラグインを使えば、上記カテゴリー別・タグ別絞り込み検索に加え、カスタムフィールド別にも検索する事が可能です。「値段」「色」「サイズ」など、カスタムフィールドを使って投稿記事により細かな設定をしているサイトにはいいかもしれません。

日本語化するには「WP Custom Fields Searchの日本語版配布」から日本語 .mo ファイルをダウンロードし、フォルダ内に保存します。

有効化したら管理画面からこんな感じでポンポン追加できます。値が数値の場合、「〜以上」「〜未満」の値を指定することもできます。うーん便利。

テーマファイルに挿入する場合は

<?php if(function_exists('wp_custom_fields_search'))
     wp_custom_fields_search(); ?>

を、投稿記事やページ内に挿入する時は下記ショートコードを記述します。

[wp-custom-fields-search]

検索内容と検索結果件数を表示する

検索結果ページを index.php などの記事一覧ページとは違う仕様やデザインにしたいときは、別に search.php というファイルを作成しましょう。これが検索結果ページとなります。

検索結果に検索したワードや検索結果件数を表示するには、検索結果ページに以下のように記述します。表示方法を変更する場合は echo の部分を書き換えてください。

<?php if (have_posts()) :  ?>
<?php
      $allsearch =& new WP_Query("s=$s&showposts=-1");
      $key = wp_specialchars($s, 1);
      $count = $allsearch->post_count;
      echo '<h1>&#8216;'.$key.'&#8217; で検索した結果：'.$count.' 件</h1>';
?>
<?php while (have_posts()) : the_post(); ?>
コンテンツ
<?php endwhile; endif; ?>

投稿記事のみ表示する

デフォルトでは検索結果にページも含みます。ページを除外し、投稿記事のみを検索対象とする場合は、 functions.php に以下を記述。

function SearchFilter($query) {
if ($query->is_search) {
$query->set('post_type', 'post');
}
return $query;
}
add_filter('pre_get_posts','SearchFilter');

Webクリエイターボックスの仕様では…

現在Webクリエイターボックスで実際に使用中のコードです。

index.php

Webクリエイターボックスでは検索結果を search.php を使わず、is_search（もし検索結果ページなら、という条件分岐タグ） を使って index.php 内に検索結果を表示しています。検索ワードと検索結果件数を表示。

<?php if (have_posts()) :  ?>
<?php if( is_search()){ // もし検索結果ページなら
          $allsearch =& new WP_Query("s=$s&showposts=-1");
          $key = wp_specialchars($s, 1);
          $count = $allsearch->post_count;
          echo '<h1>&#8216;'.$key.'&#8217; で検索した結果：'.$count.' 件</h1>';
     } ?>
<?php while (have_posts()) : the_post(); ?>
コンテンツ
<?php endwhile; endif; ?>

sidebar.php

絞り込み検索のコードをここに書いています。

<form method="get" action="<?php bloginfo( 'url' ); ?>" class="site-search">
     <div>
          <label>キーワード</label>
          <input name="s" id="s" type="text">
     </div>

     <div>
          <label>カテゴリー</label>
          <?php wp_dropdown_categories('orderby=name&show_option_none=すべてのカテゴリー'); ?>
     </div>

     <div>
          <label>タグ</label>
          <?php $tags = get_tags(); if ( $tags ) : ?>
               <select name='tag' id='tag'>
               <option value="" selected="selected">すべてのタグ</option>
               <?php foreach ( $tags as $tag ): ?>
                    <option value="<?php echo esc_html( $tag->slug);  ?>"><?php echo esc_html( $tag->name ); ?></option>
               <?php endforeach; ?>
               </select>
          <?php endif; ?>
     </div>
     <input id="submit" type="submit" value="検索する">
</form>

ちなみにセレクトボックスの装飾はjQueryのjQuery SelectBox pluginというプラグインを使っています。ダウンロードはこちらから。以下のコードをJavaScriptファイルに入力し、CSSをカスタマイズで完成！

$(function () {
    $("select").selectbox();
});

functions.php

投稿記事のみ検索対象にしています。

function SearchFilter($query) {
if ($query->is_search) {
$query->set('post_type', 'post');
}
return $query;
}
add_filter('pre_get_posts','SearchFilter');

全角スペースで検索ワードを区切る

これはちょっと質問なのですが…。現在Webクリエイターボックスでは全角スペースで検索語句を区切る事ができません… :’( いろいろやってみたのですが、解決策が分かる方…助けてくださいです…。

• WordPress 3.2.1 英語版使用
• WP Multibyte Patch 1.5 使用
• 同テーマ・同プラグインでWordPress日本語版を使うと問題なし

追記：以下を functions.php に追加で直りましたー！ありがとうございます！！！

if(isset($_GET['s'])) $_GET['s']=mb_convert_kana($_GET['s'],'s','UTF-8');

他にもおすすめの機能やプラグインがあれば教えてください！

1. SNS

BuddyPress

WordPressをSNSとして運営することができるプラグイン、BuddyPress。過去記事「WordPressプラグイン「BuddyPress」でSNSサイトを作成」で詳しく紹介しています。サンプルサイトもあるので実際に使ってみてください！

友達の申請やメッセージを送ったり…

「今なにしてる？」系のコメントができたり…

グループ（Mixiでいうコミュニティ）を作成できたり…

BuddyPressで使える便利なプラグイン（プラグインのためのプラグイン…）もたくさんありますよ。ぜひ使ってみてください。

2. ECサイト

WP e-Commerce

WP e-Commerceは有名なECサイト構築用プラグイン。商品の追加や料金の設定など、簡単にできます。特に配送の必要のないダウンロード商品を販売したい時は便利です。

管理画面から細かい設定可能。

「商品カテゴリー」「買い物かご」「スペシャルオファー」など、独自のウィジェット付き。ドラッグ＆ドロップでサイドバーに実装できます。

通常のテーマからWP e-commerceの機能に合わせてテーマをカスタマイズするには少し慣れが必要かも。このプラグインを使用することを前提として作成されたテーマはこのあたりで配布されています。ただし多機能なテーマなのでほとんどが有料。Tokokooではいくつかのテーマが無料で配布されているようです。

3. 不動産

不動産プラグイン

不動産サイトをサクッと作れる不動産プラグイン。不動産サイトに必要なものは全てそろっていると言っても言い過ぎじゃないです。日本のものなのでもちろん日本語で使えます。デモサイトあるので、どんなことができるのか試してみてください。

管理画面のツールから設定できます。物件の登録は用意されているフォームに入力するだけ。

QRコードまで生成できて文句なしですね。

他にも実際にプラグインを導入しているサイトの実例を見ることができます。また、「不動産サイト構築がとても楽になる国産で無料のWordPressプラグイン見つけた」という記事で詳しい使い方が紹介されています。

4. 求人情報

Job Manager

Job Managerはサイトに求人情報を簡単に掲載することができるプラグイン。基本的には自社求人の掲載を目的に作られたプラグインですが、WordPressをマルチサイト化すれば求人サイトの作成も簡単にできそうです。

管理画面の左サイドに設定項目が追加されています。「Add Job」で新しい求人情報を追加できます。「Apply Now」からエントリーフォームへ進みます。

5. 請求書作成

WP-Invoice

WP-InvoiceはWordPress内で請求書の作成、管理ができるプラグイン。こちらもWordPressをマルチサイト化して請求書サービスを運営できそうですね！

プラグインを有効化すると「Invoice」という項目ができています。「Add New」から新しい請求書を作成します。請求書の内容・金額などを入力して保存。

メール通知用のテンプレートが表示されます。テンプレート内容は「Settings」の「Email Templates」で変更できます。メール通知をすると請求書内容のページがクライアントに送られるので、下のフォームに入力してもらい、入金の手続きができます。

6. レシピ

RecipePress

RecipePressは簡単にレシピを追加していくことができるプラグイン。レストランサイトで簡単な一品メニューのレシピを公開したり、マルチサイト化してレシピの共有サイトを作ったりと、料理好きにはたまらない（かもしれない）プラグインです。プラグインのサイトでデモが見れます。デモサイトではユーザーがレシピを投稿できるレシピ共有フォームも設置しています。

管理画面のサイドバーに「Recipes」項目が追加されています。「Add New」から新しいレシピを追加。材料などはフォームに入力していくだけ。「Setting」から表示する項目（準備時間、調理時間、何人分かなど）や画像のサイズなどが設定できます。

7. 画像販売

Image Store

Image Storeであなたが撮影した写真を販売することができます。こちらも画像販売サイトとしてWebサービス化できそう。スライドショーやライトボックスでの表示も最初から設定されています。「Settings」で画像の料金、サイズ、スライドショー、ウォーターマークなどの設定ができます。カスタマイズするときにはこちらのショートコードなんぞ役に立つかもです。

「Gallery」の項目が追加されています。「Add New」から画像を追加。会員のみが画像を見れるように設定することもできます。

ショッピングカートに入れるとこんな感じ。クーポンコードの設定もできるようです。

8. 寄付

Donation Can

Donation CanはWebサイト上で寄付金を募れるプラグイン。目標金額の設定もでき、目標額までの達成度バーも表示・非表示選べます。

「Add New Cause」で新しい寄付の目的と目標金額を設定します。

Donation Can用ウィジェットも追加されているので、ドラッグ＆ドロップでサイドバーに表示。

その他、「General Settings」で通貨やありがとうメッセージの文章をカスタマイズ、「Add New Donation」で手動で寄付金を登録できます。

追記：日本ではPayPalを利用しての個人間の送金は法律で禁じられているそうです。知りませんでした…。ご指摘頂きありがとうございます。

9. 予約システム

easyReservations

easyReservationsでユーザーに予約してもらう事ができるカレンダーを導入できます。ホテル、レストラン、美容院など、様々なサイトに取り入れられそうです。

管理画面に「Reservations」の項目ができてます。「Setting」でフォームに表示する内容やメール通知の文章などを設定できます。また「Add Reservation」から手動で予約を入れられます。

基本的にこのプラグインはホテルの部屋を予約するために作られているので、予約が部屋単位となっています。予約用の投稿カテゴリーを作成し、お部屋の名前を記事で登録。Setting > General > Reservation Settings > Room Categoryで予約用のカテゴリーを選択。時間単位で予約してもらいたいときは、単純にお部屋の名前のところを「18:00～19:00」のように時間で表示させればできるかなあと思います。

また、時間指定は有料ですが、「Booking Calendar」もよさそうでした。

わくわくしてきましたか？他にも「こんなわくわくあるよ！」というプラグインがあればぜひ教えてください！

私がまとめ記事を書くといつも数字のキリが悪いよ＼(^o^)／

1. Akismet

特徴

WordPressに標準インストールされているスパム対策プラグイン。導入するとスパムコメントが劇的に減ります！設定も簡単なので必ず使用してほしいプラグインのひとつ。

導入方法

1. AkismetのWebサイトの「Get Started」から登録。無料プランでOK。
2. 外観＞Akismet設定 からメールで送られてきたAPIキーを入力

2. Disqus Comment System

プラグインページ

特徴

SNSアカウントでコメントできるようにしたり、Likeボタンを追加するなど、WordPressのコメントに様々な機能が追加できるプラグイン。どんどん人気がでてきているプラグインです。これひとつでとりあえず事足りそう。

• Twitter、Facebook、Google等のアカウントでログインしてコメント可能
• コメントのページネーション表示
• コメントを人気順や新着順などで並び替え
• Disqusの「Like」ボタン有り
• デフォルトアバター画像のカスタマイズ可能
• CSSカスタマイズ可能
• Akismetによるスパム対策
• ユーザー名、メールアドレス、IPアドレスからブラックリスト作成

導入方法

1. まずはDISQUSのWebサイトに登録。サイトURLやサイト名、ユーザー名、パスワードを入力します。
2. 登録確認のメールに書かれているURLにアクセスして登録完了
3. Disqus Comment Systemプラグインをインストール・有効化
4. 管理ページの コメント＞Disqus から登録したユーザー名とパスワードを入力し「Next」
5. Webサイトを選択し「Next」で完了

設定方法

設定はDISQUSのWebサイトの「Setting」タブから可能です。

• 「Twitter @Replies」コメントTweetにリプライするユーザ名を入力
• 「Disable Like Buttons」Likeボタンを非表示
• 「Media Attachments」コメントに画像や動画を投稿可能にする
• 「Mentions」コメント内で他のユーザーに言及可能にする
• 「Trackbacks」トラックバックを有効化
• 「Akismet」スパム対策プラグイン、Akismetを使用
• 「Reactions」記事に関連するTweetをされる等リアクションがあった場合は表示・検索
• 「Display login buttons with comment box」コメント欄の上に各種SNSのログインボタンを表示

3. Facebook Comments

プラグインページ

特徴

Facebookアカウントでコメントできるプラグインです。日本でもFacebookユーザーが増えてきているので、導入してみてもいいかもしれませんね。このプラグインは有効化するだけでサクッと設置できるのでおすすめ。

• コメント内容をFacebookにも投稿できる
• とにかく簡単に設置できる
• ショートコード有り。記事内に挿入可能。

導入方法

Facebook Commentsをインストール・有効化する。

設定方法

管理ページ＞設定＞Facebook Comments から設定します。

• Settingの「Language」を「ja_JP」に変更して日本語化
• 「Number of Comments」表示するコメントの数
• 「Width (px)」横幅
• 「Title」コメント欄の見出し
• 「Customisation and Styling」でCSSをカスタマイズ可

4. Twitter Mentions as Comments

プラグインページ

特徴

Twitterで記事について言及しているRetweetをコメントとして表示するプラグインです。コメントを承認制にもできるので、一度チェックしたい方も使えます。人気サイトだと凄まじい数のコメント数になりそうなので注意。

導入方法

Twitter Mentions as Commentsをインストール・有効化する。

設定方法

設定＞Twitter -> Comments で設定変更できます。

• 「Exclude ReTweets?」Retweetを含むか。Includeは含む
• 「Number of Posts to Check」最新何件の記事をチェックするか。-1で全ての記事
• 「Comment Type」コメントタイプ。コメント・トラックバック・ピンバックから選択
• 「Checking Frequency」チェック頻度。一時間ごとか手動から選択
• 「Force Check」のリンクをクリックでチェックできます

5. Comment Validation

プラグインページ

特徴

入力に不備があった場合、デフォルトだとエラーページに飛びますが、このプラグインを使うとその場でエラーメッセージが確認できます。

導入方法

Comment Validationをインストール・有効化する。

設定方法

有効化しただけでは英語表示なのでcomment-validation.jsをいじって日本語にします。３箇所のみなので簡単！なはず。

• 2行目「Please fill out the required fields」を「必須項目に記入してください。」
• 19行目を「$.validator.messages.email = "» 正しいメールアドレスを入力してください。";」
• 20行目を「$.validator.messages.url = "» 正しいURLを入力してください。";」

6. Comment Image

プラグインページ

特徴

コメントに画像を挿入できるようにするプラグインです。JPEGのみ。

導入方法

Comment Imageをインストール・有効化する。

設定方法

サムネイル画像のサイズなどは 設定＞Comment Image から変更できます。

7. Comment Form Quicktags

プラグインページ

特徴

コメント欄に簡単にHTMLタグを記入できるようにするプラグイン。技術系サイトにピッタリですね！有効化するだけで使えます。

導入方法

Comment Form Quicktagsをインストール・有効化する。

設定方法

設定＞Comment Form Quicktags からタグの追加・並び替えなど、各種設定ができます。日本語で書かれているのでわかりやすいです。

8. Live Comment Preview

プラグインページ

特徴

コメントを記入しながらその場で表示確認ができるプラグイン。HTMLタグなどもその場で見れるので便利です。有効化するだけで使えます。

導入方法

Live Comment Previewをインストール・有効化する。

設定方法

特になし。

9. WP AJAX Edit Comments

プラグインページ

特徴

コメントを投稿後、設定時間内であれば編集できるプラグインです。

• 編集できる時間を設定可能
• カウントダウンタイマー表示機能
• 管理者はその場でスパム判定・ブラックリスト登録・ゴミ箱行きにできる
• アイコンが何気にかわいい

導入方法

WP Ajax Edit Commentsをインストール・有効化する。

設定方法

設定＞Ajax Edit Comments から設定変更できます。

• 「Set comment time (minutes):」編集可能時間（分）
• 「Spam notification text:」コメントがスパム判定された時のメッセージ
• 「Countdown Timer」カウントダウンタイマーを表示するか
• 「Edit E-mails」メールアドレスも変更可能にするか

10. Comment Timeout

プラグインページ

特徴

コメントできる期限を設定できるプラグインです。古い記事にはコメントしないでくれ！という方、ぜひどうぞ。各記事毎に設定可能。

導入方法

Comment Timeoutをインストール・有効化する。

設定方法

新規投稿記事の下部に「Comment Timeout」のフィールドが追加されているので、そこから記事ごとに設定します。

• 「Use default settings」デフォルト設定
• 「Don’t close comments」常にコメント可能
• 「Close comments:」記事を書いた◯日後まで／最後のコメントから◯日後までコメント可能

豊富なプラグインをうまく使って、読者のみなさんがついコメントしたくなるようなコメント欄づくりを目指しましょう！