顔アイコンと吹き出しを表示して会話を表現するWordPressプラグイン「Pz-Talk」を公式プラグインディレクトリで申請中です。→申請通りました。公開中です。
はじめに
吹き出しを表示して会話風に表示をさせたくて作成しました。
有名なプラグインとして「Speech Bubble」がありますが、
- 画像ファイルをFTPでアップロードしないといけない。
- プラグインフォルダなので更新がかかると画像ファイルが消えてしまう。
- ショートコードの度に画像ファイルを指定しないといけない。
- 様々なスタイルがある反面、スタイルシートファイルが巨大。
- 3年くらい更新されていない。
といった点が気になったので、自分で作っちゃいました。
「多機能ではないけど初心者でも使える」を目指しました。
記述のしかた
記事中にショートコード［talk name=”名前”］～［/talk］ではさんでセリフを記述します。
「テキスト エディタ」モードで使っている場合、クイックタグ「トーク」が使用できます。
1回目で開くショートコード、2回目で閉じが表示されます。
表示のされ方
記事を表示させると、登録されていない人物は影のアイコンが表示されます。
設定画面
WordPress管理画面から、「設定画面」→「Pz トーク設定」と選んでいくと設定画面に入れます。
ショートコード設定
ショートコードは標準では［talk］～［/talk］になっていますが、変更することもできます。
登場人物設定
「登場人物」に、表示された名前が追加されていきます。
「選択」を押すと、画像一覧が表示されるので、使用する画像を選択していきます。
登場人物の最後の一行は常に空欄になっているので、あらかじめ名前と顔アイコンを設定しておくこともできます。
名前と画像が1対1になっているため、喜怒哀楽などで画像を分けることはできません。
初期化設定
ショートコードと登場人物を全て削除して、初期の状態に戻します。
通常は使いません。
画像設定後の表示のされ方
画像が設定されるとその画像が表示されるようになります。
「似顔絵ジェネレーター」さんで顔アイコンを作成させていただきました。
開発にあたって
色々と初めてやったことが多かったです。
DBを使わずに登場人物の名前とアイコンURLを記録させる方法とかはしばらく前から考えていたので上手く動いて良かったです。
メディアアップローダーについては、複数設置する方法が見つからなくて、あれこれ試行錯誤しました。
吹き出しのスタイルシートは主に、こちらのサルワカさんの「CSSで作る！吹き出しデザインのサンプル19選」を参考にさせていただきました。
そして今回の「キモ」となるメディアアップローダーはこちらのwork.logさんの「WordPressの管理画面内でメディアアップローダーを呼び出す」。
Firegobyさんの「WordPress 3.5の新メディアアップローダーを自作プラグインやテーマに組み込む。」なんかを参考にさせていただきました。
では、この辺で。(^-^)o
コメント
[…] […]
本日プラグイン導入をしました。
非常に使いやすそうなのですが、画像の下部と、名前がかぶってしまいます。
微妙に重なってしまい、名前が見えにくいのですが、対処法はありませんでしょうか。。。
たつやさん、ご利用＆コメントありがとうございます。
テーマのスタイルシートとの相性だと思います。使用しているサイトのURLを教えていただければ調査して対応しようと思います。
ご返信ありがとうございます。テーマとの相性なんですね。。。来月公開予定のサイトなので、まだサイトがないんです。ちなみに、使っているテーマはLIQUID LIGHTです。テーマ設定の権限が私にないため、こればっかりはどうにもならなそうですね。。。
開発環境でテーマをインストールして確認してみました。名前の位置を調整したVer1.0.5を公開しました。これで試してみてください。