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

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

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

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

スポンサーリンク
レクタングル(大)広告

Expanding Textareasを使うと

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

Expanding Textareas適用前

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

Expanding Textareasを適用後

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

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

主な手順

Expanding Textareas

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

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

ダウンロード&設置

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

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

expanding.jsのダウンロード

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

動作確認

あとは、Wordpressの投稿ページなどにあるコメント欄に、文章を入力すると、以下のように自動で伸縮します。

コメントエリアの自動伸縮

まとめ

こんな感じで、ファイルに2回コピペするだけで、コメント欄の伸縮が手軽にできるようになりました。

通常長文などは、テキストエディタなどに書いて、コピペで貼り付ける人がほとんどだと思います。ただ、中には「コメント欄で文章をすべて書く」なんて人も結構いるので、そういった方向けに利便性は多少上がるかと思います。

長文コメントが多いブログなどには、手軽に設置できるので、重宝するのではないかと思います。