WordPressで会話を表現する Pz-Talk

この記事は約6分で読めます。

顔アイコンと吹き出しを表示して会話を表現するWordPressプラグイン「Pz-Talk」を公式プラグインディレクトリで公開中です。

当ページは「Pz-Talk」の説明書のようなもので、プラグインのバージョンアップとともに更新していく予定です。

はじめに

吹き出しを表示して会話風に表示をさせたくて作成しました。

多機能は目指さずに、「シンプル」で「分かり易い」をコンセプトにしていきます。

プラグインのインストール

WordPress公式プラグインディレクトリに登録されているので、WordPress管理画面からインストールすることができます。

インストールが正常にできて、有効化したあとは、設定画面で登場人物の画像を設定して、記事中にショートコードを記述していくだけです。

新規インストールの場合

  1. WordPress管理画面から、「プラグイン」→「新規追加」と選んでいきます。
    plugin-add
  2. 「プラグインの検索」と書かれているところに、「pz」や「pz-talk」といったキーワードを入力して検索します。
  3. プラグイン名と作者を確認して「今すぐインストール」を押します。
    プラグイン名:Pz-Talk
    作者:poporon
  4. インストールが開始されるのでしばらく待ちます。
  5. 「インストール中」の表示が消えたら「有効化」を押してプラグインを有効化します。
  6. 「インストール済みプラグイン」の一覧で有効化されていることを確認します。

プラグイン一覧から更新する場合

  1. WordPress管理画面から、「プラグイン」→「インストール済みプラグイン」と選んでいきます。
  2. 今すぐ更新してください。」を押して更新します。
  3. 「更新しました。」と表示されて更新終了です。

ダッシュボードから更新する場合

  1. WordPress管理画面の「更新」を選びます。
    dashboart-update
  2. 「プラグイン」のところで、更新するプラグインにチェックを付けて「プラグインを更新」を押します。
  3. プラグインを更新の画面になって、しばらくすると「更新に成功しました」と表示されて完了です。

会話を表現する

記述のしかた

会話しているように表示させるときは、記事中にショートコード[talk name="名前"]~[/talk]ではさんでセリフを記述します。

テキストエディタでボタンを使う

「テキスト エディタ」モードで使っている場合、クイックタグ「トーク」が使用できます。

1回目で開くショートコード、2回目で閉じが表示されます。

表示のされかた

記事を表示させると、「登場人物」に登録されていない名前は影のアイコンが表示されます。

「登場人物」に画像を登録している場合はその画像で表示されます。

メッセンジャーでのやりとりを表現する

記述のしかた

メッセンジャー(LINE)風に表示させるときは、記事中にショートコード[message name=”名前”]~[/message]ではさんでセリフを記述します。

表示のされかた

「私」に設定されている人物のセリフだけ右側に表示されます。

設定画面

WordPress管理画面から、「設定画面」→「Pz トーク設定」と選んでいくと設定画面に入れます。

登場人物設定

ショートコードの「name」で指定した名前が、「登場人物」に自動で追加されていきます。

「選択」を押すと、画像一覧が表示されるので、使用したい画像を選択します。

「登場人物」の最初の一行は画像を選んでいない人物に使う画像を設定しておきます。

「登場人物」の最後の一行は常に空欄になっているので、あらかじめ名前と画像を設定してくことができます。

「変更を保存」を押すたびに、最後に空行が表示されます。

メッセンジャー形式のときに右寄せで表示させたい人物の行の「私」にチェックを入れておきます。

順番を入れ替えたいときには、右側の[↑]もしくは[↓]をクリックします。

設定を変更したら[変更を保存]をクリックします。

ショートコード設定

ショートコードは2つ設定されています。

1つ目に設定したショートコードでは会話のように表示されます。標準では[talk]~[/talk]になっています。

2つ目に設定したショートコードではLINEのように表示されます。標準では[message]~[/message]になっています。

初期化設定

ショートコードと登場人物を全て削除して、初期の状態に戻します。

通常は使いません。

 使用上の注意など

  • ショートコードは標準では[talk]~[/talk]と[message]~[/message]になっていますが、変更することもできます。
  • 画像はなるべく正方形のものを使用してください。
  • 名前と画像が1対1になっているため、喜怒哀楽などで画像を分けることはできません。
  • ショートコードでくくるため、記事の冒頭に会話を持ってきても、抜粋文に表示されません。
  • 記事に画像情報は無いので、人物の画像がアイキャッチになってしまうことがありません。

当サイトで使用している顔アイコンについて

当サイトでは「似顔絵ジェネレーター」さんで顔アイコンを作成させていただきました。

修正履歴

  • 2019/08/17 ver1.0.9
    • 「挿入ボタン」を追加しました。
    • 「icon」パラメータを追加しました。名前と別のアイコンを表示できます。
  • 2019/07/15 ver1.0.8
    • WordPress 5.2.2 で動作確認しました。
    • 「(不明)」の画像を変更しました。
    • 設定画面に背景色を追加しました。
    • 設定画面に順番を入れ替えるボタンを追加しました。
    • 設定画面に画像を追加しました。
    • 設定画面の「私」の位置を変更しました。
  • 2019/05/23 ver1.0.7
    • 警告エラーを修正しました。
    • 新規の登場人物の「私」にチェックが入ってしまうのを修正しました。
  • 非公開 ver1.0.6
    • 吹き出しの中でショートコードが使えるようにしました。
  • 2018/10/27 ver1.0.5
    • 表示のズレを修正しました。
  • 2018/08/03 ver1.0.4
    • WordPress 4.9.8 で動作確認しました。
    • 表示のズレを修正しました。
  • 2018/04/05 ver1.0.3
    • WordPress 4.9.5 で動作確認しました。
    • 設定画面の項目の順番を変更しました。
    • トーク表示のときに「私」を右側に表示させる設定を追加しました。
    • トーク表示のときに「私」以外も右側に表示させる機能を追加しました。
  • 2018/03/12 ver1.0.2
    • 不明の画像を変更できるように修正しました。
    • メッセンジャータイプの表示を追加しました。
  • 2018/02/07 ver1.0.1.1
    • WordPress 4.9.4 で動作確認しました。
  • 2018/01/31 ver1.0.1
    • 画像を選択する画面を日本語化しました。
  • 2018/01/30 ver1.0.0
    • 初公開バージョン。
タイトルとURLをコピーしました