7月
6
8

顔文字を挿入できるプラグイン（自作）

Author ティコ    Category WordPress備忘録     Tags , , ,

コメント欄等にリストから選択した顔文字を追加できるプラグインを作成してみました。
まんまココログのパクリなんですが、便利だったのでWordPressでもそういうのが欲しくて作りました。

リストから選んだ顔文字を指定したフォームに挿入します。
もちろん自分で項目や顔文字を追加する事も出来ます。
具体的にどういったものかは、このページ下のコメント欄にも「顔文字」ボタンがあるので実際に試した方が早いと思います。

JavaScriptタグを貼るだけで呼び出せる顔文字挿入フォームも作成しました。
こちらはタグを貼るだけなので、HTMLファイルやテンプレートファイルを変更できるのであれば手軽に導入できると思います。宜しかったら試してみてください。

スクリーンショットについて

スクリーンショット

管理画面

管理画面

顔文字リスト画面

顔文字を追加するリスト画面
ダウンロードについて

ダウンロード

下をクリックしてダウンロードします

tico-kaomoji-regist.zip

インストールについて

インストール

  1. ダウンロードしたファイルを解凍します。
  2. WordPressのプラグインディレクトリにフォルダごとアップロードします。
  3. 管理画面で有効化します。
顔文字の管理画面について

管理画面について

  1. 管理画面の左メニュー「設定」→「Kaomoji Regist」をクリック
  2. 「挿入先のID」に顔文字を挿入するフォームのIDを入力します。
  3. 「項目追加」は新規に分類する項目を登録できます。
  4. リスト左は分類の項目です。削除する場合は選択して「項目削除」をクリックします。
  5. リスト右は各分類項目に登録されている顔文字です。一行に一つの顔文字を入れます。
  6. 編集後は「変更を保存」をクリックして更新します。
顔文字リストの呼び出しについて

顔文字リストの呼び出しについて

  1. 呼び出したい所で「 insert_kaomoji_form() 」と入力します。
  2. 基本の幅の長さは400pxですが「 insert_kaomoji_form(‘width=500′) 」で幅を変える事が出来ます。
  3. ※「挿入先のID」で入力したIDのフォームがある事を確認してください。

例えばcomments.phpでは下記のように入力します。

<table summary="コメント記入欄" border="0" cellpadding="3" cellspacing="0">
<tr><th>お名前</th><td><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" tabindex="1" /></td></tr>
<tr><th>メールアドレス</th><td><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" tabindex="2" />※管理人にのみ公開されます</td></tr>
<tr><th>あなたのサイトのURL</th><td><input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" tabindex="3" /></td></tr>
</table>

<!-- 顔文字リスト(id=comment フォームに顔文字を挿入) -->
<?php insert_kaomoji_form(); ?>

<p><textarea name="comment" id="comment" cols="45" rows="10" tabindex="4"></textarea></p>

<p class="submitbutton"><input name="submit" type="submit" id="submit" class="button" tabindex="5" value="投稿" /></p>
ブログランキング・にほんブログ村へ　 blogram投票ボタン

8 Comments to “顔文字を挿入できるプラグイン（自作）”

  • 必須プラグインの後に追加した補助プラグイン７個 | 一若者が観る三千世界 2009 年 11 月 27 日 23:13

    [...] 画像さえ用意したら色んな絵文字が出せるみたい。 Kaomoji on Comment [...]

  • 鈴木 2010 年 3 月 30 日 14:52

    こんにちは。
    このような「顔文字挿入スクリプト」を探しており、宝物を見つけた気分ですヽ(´▽｀)/

    ただ、これらは基本的には「WordPress」向けかと思いますが、私は普通のブログを使っております。

    こちらにあるスクリプトを多少カスタマイズして自ブログで使えるようにしてみても大丈夫でしょうか？
    （って言っても、javascriptはほとんど分からないんですけどね…）

  • ティコ 2010 年 3 月 30 日 18:04

    ＞鈴木さん
    ありがとうございます！
    どうぞご自由に変更されてお使いください。

    一応ヒントですが、まずjQueryが必ず読み込まれている必要があります。
    ダウンロード、解凍したフォルダの中で必要なファイルは以下の二つです。

    ・「js」フォルダ含まれる「tico-kaomoji-edit.js」
    ・「css」フォルダの「tico-kaomoji-regist.css」

    上記２つのファイルをヘッダで読み込むようにしてください。

    後は実際にここのHTMLソースを見てもらえれば分かりますが、

    <input type="button" value="顔文字" onclick="…

    から

    <div id="kao-child"></div>
    </div>

    までを丸々コピーすれば良いかと思います。
    idが「id-insertform」となっているのが顔文字の挿入先ですから適宜変更してください。

    それと出来れば<input type="hidden">タグの箇所は予めJavaScriptファイルに組み込んでおいた方がスマートな気がします。

    （・∀・）もし分からなければコメントください！

  • 鈴木 2010 年 3 月 31 日 03:03

    ＞ティコさん
    お返事ありがとうございます。
    私なりにいろいろと…、ホント勝手ながらで申し訳なかったのですがカスタムして設置してみてみました。
    ただ結局、「顔文字一覧のレイアウトや文字列の長さ指定」のあたりがよく分からなかったので、顔文字データを抜粋して減らしたり調整してみました。
    あと、IEとfirefoxとだと、カーソル（フォーカス？）の移動方法が若干違うみたいですね。IEだと、顔文字のジャンルを変えるとカーソルが先頭に戻るけど顔文字をクリックするとカーソルはその顔文字の後ろにくる。一方firefoxだとジャンルを変えてもカーソル位置は変わらないけど、顔文字をクリックしてペーストするとカーソルが先頭にくる？ そんなふうに感じました。

    …勝手やってて勝手なこと言っててすみません(^^;
    設置できただけでも嬉しかったです。
    スクリプト、ありがとうございます♪

  • ティコ 2010 年 3 月 31 日 17:55

    ＞鈴木さん

    ＞「顔文字一覧のレイアウトや文字列の長さ指定」のあたりがよく分からなかったので、顔文字データを抜粋して減らしたり調整してみました。

    そうですか、何ででしょうね。(^-^; 幅に合わせて勝手に調整するように作成してたのですが…。

    カーソル位置はですね～、非常に悩ましいんです。
    色んなサイトを探したのですが、比較的FireFoxなどは上手くカーソル位置を取得できるのですが、IEは難しいらしいです…。

    結局、WordPressで利用してあるスクリプトをそのまま流用したのですが。(；´Д`A “`えへへ。

    ただテンプレートファイルが変更できる人の為にそういったJavaScriptの挿入だけで出来るように改造するのも良いかも知れませんね。そうすればWordPressの人以外でも使えますから。うん、面白そうです。

    ちょっと週末辺りにイジってみようかな。

  • 鈴木 2010 年 4 月 1 日 00:55

    こんばんは。
    カーソル位置…、難しいものなのですね。まぁ、ブラウザもバージョンもいろいろありますもんね～(^_^;
    それにこの「顔文字パレット」は、使っても使わなくても自由だし、パレットの中に『説明』という項目設けて一言書いといたので、これはこれで良いかなぁって思ってます(笑)。
    いろいろいじくってしまって申し訳ありません。
    でも、こういったカスタマイズは楽しいですね♪　ありがとうございます(^-^)

  • ティコ 2010 年 4 月 1 日 23:12

    ＞鈴木さん
    (*^-^)色々試してみてください。
    また今度、これをベースに簡単に挿入できるようなものを作ってみますので覗きに来て下さい。

Post comment


アーカイブ

最近のコメント

カテゴリー

 
サンフレッチェ広島スポンサーサポート

お友達リンク