WordPressのコメント欄を文章量に合わせて自動伸縮させるカスタマイズ方法

今日、phpspot開発日誌の記事を読んで、Expanding TextareasというjQueryプラグインがあることを知りました。

Expanding Textareasというのは、テキストエリアの大きさを、文章量に応じて自動的に伸縮してくれるjQueryプラグインです。

で今回、試しにWordpressコメント欄に設置してみたら、うまくいったので、その方法を紹介します。

Expanding Textareasを使うと

例えば、通常だとテキストエリアに長めの文章入れると、次のようにすべては表示されず、表示しきれない部分はスクロールすることで表示されます。

けれど、Expanding Textareasを利用すると、以下のようにテキストエリアが伸縮し、文章全体を見渡すことができるようになります。

ちょうど、Wordpressのエディターの入力テキストエリアも最近こんな感じになりましたよね。

僕も、Wordpressのエディターは、自動伸縮してくれた方が入力しやすかったので、「ブログにコメントしてくれるサイトユーザーもテキストエリアが伸縮した方が入力しやすいのでは？」と思い、このExpanding Textareasプラグインを試してみました。

主な手順

Expanding TextareasをWordpressで利用するための主な手順は以下の3手順です。

Expanding Textareasをダウンロード＆設置
header.phpなどでexpanding.jsスクリプトを呼び出す
テキストエリアにクラスを追加する（functions.phpの編集）

ダウンロード＆設置

まずは、Expanding TextareasをWordpressテーマ内に設置します。

ページに移動したら、「expanding.js」を右クリックなどからダウンロードします。

あとはそのファイルを、テーマフォルダ直下、もしくは子テーマフォルダ直下にコピーします。

設置場所はどこでも良いですが、説明を単純化するためフォルダ直下に置いたこととして説明します。

expanding.jsスクリプトの呼び出し

次に設置した「expanding.js」を呼び出します。

スクリプトを呼び出すには、header.phpなどにある<head></head>内に記述します。

スクリプト呼び出しタグは以下のようになります。

親テーマ自体をカスタマイズする場合。

<?php //wp_enqueue_script('jquery');//jQueryが読み込まれないテーマの場合は利用?>
<script src="<?php echo get_template_directory_url(); ?>/expanding.js" type="text/javascript"></script>

子テーマをカスタマイズする場合。

<?php //wp_enqueue_script('jquery');//jQueryが読み込まれないテーマの場合は利用?>
<script src="<?php echo get_stylesheet_directory_uri(); ?>/expanding.js" type="text/javascript"></script>

「expanding.js」を利用するには、jQueryが必要なので、</head>手前あたりに書くといいかもしれません。

もし仮に、jQueryライブラリが読み込まれないテーマを利用の際には、コメント部分を外してください。

コメントテキストエリアにクラスを追加

あとは、コメント欄のテキストエリアに以下のように「expanding」というクラスを追加するだけです。

<textarea class='expanding'></textarea>

ただ、Wordpressのコメント欄を編集するには、Wordpress関数を用いて編集しないといけません。

具体的に、どのようにするかというと、テーマ（子テーマ）のfunctions.phpに以下のようにコメントフィールドを書き換える関数を書きます。

// functions.php(子テーマのでも可)に追加
// オリジナル comment_form in wp-includes/comment-template.php
add_filter( "comment_form_defaults", "my_comment_form_defaults");
function my_comment_form_defaults($defaults){
//  'comment_field'        => '<p class="comment-form-comment"><label for="comment">' . _x( 'Comment', 'noun' ) . '</label><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea></p>',
    $defaults['comment_field'] = '<p class="comment-form-comment"><textarea id="comment" class="expanding" name="comment" cols="45" rows="8" aria-required="true" placeholder=""></textarea></p>';
    return $defaults;
}

カスタマイズは、これだけです。

参考 WordPress | コメントフォーム・リストのカスタマイズ