サイトメンテナンスをしているので一時的に表示が崩れる場合があります。何卒ご理解頂けますようお願い申し上げます。

【WP-Speech-Balloon_2.1】をリリース!吹き出しの種類が増えたよ☆

【WP-Speech-Balloon_2.1】をリリース!吹き出しの種類が増えたよ☆

WordPressで簡単に吹き出し会話が出来るプラグイン、「WP-Speech-Balloon」バージョン2.1をリリース致しました。

今回はアップデートの内容や吹き出しの種類、アップデートの方法と使い方などを紹介します。

バージョン2.0と使い方自体は変わってませんので、本記事通りにアップデートするだけで2.0と同じ書き方で吹き出しの種類を増やして使えますので、もし使えそうなものがありましたらアップデートしてみてください。

※誰でもわかるようにものすごく細かく説明を書いているので記事がかなりのボリュームになってますが、内容は極めてシンプルなので必要な項目だけ見て頂ければOKです。

※これまで同様あくまで私の個人作成のプラグインなので、ご使用に関しては全て自己責任でお願い致します。当プラグインを使って起きたトラブルなどは一切責任を負いかねます。

アップデート内容

今回のアップデートの内容は大きく分けて「吹き出しの種類の追加」「コードの修正」です。

追加した吹き出しの種類に関しては、事項で「吹き出しの全パターン」を紹介しますのでそちらをご確認ください。

コードの修正に付いては基本的に「シェイプアップ」で、元々このプラグイン自体非常にシンプルな内容なのであまり効果はありませんが「自分の許容範囲内で」少しだけ記述内容を変更して不要コードを削除しました。

吹き出しの種類(全パターン)

WP-Speech-Balloon2.1で追加した吹き出しの種類は「パステル&ステッチ」「LINE風」「Twitter風」の3種類です。

普段とは違った感じの種類でちょっとかわいい感じのパステルカラーとステッチがついた「パステル&ステッチ」をひとつ、そして使う場面もあるかな…と思ったので「LINE風」と「Twitter風」も追加しました。

また、LINE風とTwitter風については本家に合わせてアバター画像の部分を丸型にしました。
※LINE風の吹き出しについては少し注意点がありますので後述する「注意点」をご確認ください。

以下が2.1で使える吹き出しの全種類(パターン)になります。

通常吹き出し

avatar

管理人らす

通常吹き出しだよ~☆
左パターンだよ~♪


通常吹き出しだよ~☆
右パターンだよ~♪

avatar

管理人らす

ぽわぽわ吹き出し

avatar

管理人らす

ぽわぽわ吹き出しだよ~☆
左パターンだよ~♪


ぽわぽわ吹き出しだよ~☆
右パターンだよ~♪

avatar

管理人らす

パステル&ステッチ吹き出し

avatar

管理人らす

パステル&ステッチ吹き出しだよ~☆
左パターンだよ~♪


パステル&ステッチ吹き出しだよ~☆
右パターンだよ~♪

avatar

管理人らす

LINE風吹き出し

avatar

管理人らす

LINE風吹き出しだよ~☆
左パターンだよ~♪


LINE風吹き出しだよ~☆
右パターンだよ~♪

avatar

管理人らす

Twitter風吹き出し

avatar

管理人らす

Twitter風吹き出しだよ~☆
左パターンだよ~♪


Twitter風吹き出しだよ~☆
右パターンだよ~♪

avatar

管理人らす

注意点

どれもそこまで気を付けるほどの事ではありませんが、「WP-Speech-Balloon2.1」を使うにあたっていくつか注意点を書いておきます。

ご使用になられる前に一度目を通して頂けますようお願い致します。

「WP-Speech-Balloon2.1」について

本プラグインは当サイト管理人(私)が個人的に作ったものを他の人にも使えるように一般公開しているプラグインです。

なので自由にお使い頂いて結構ですし改良して頂いても結構ですが、本プラグインを使って起きたトラブルなどに関しては一切責任は負えません。

バグやご要望に関しては可能な限り対応させて頂こうとは思っておりますが、基本的に本業が終わった後の寝る前などにブログ運営をしているので、対応に恐ろしく時間が掛かる場合があります。

また、ご希望に添えない場合も多々あるかと思いますのでその点は何卒ご理解頂けますようお願い致します。

当プラグインの使用に関してはクレジット必須ではありませんが、使ってみて良かったらご紹介頂けると喜びます♪

バグの報告やご質問などありましたら本記事下部にあるコメント欄か、Twitterのアカウント「RA’s(らす)@T4L」までお願い致します。

LINE吹き出しについて

LINE風吹き出しについてですが、ご使用の際は背景が白以外の場所では使わないでください。

画像を避けてCSSだけで吹き出し部分の装飾を行っているため、背景が白(#ffffffやwhite)以外だとヘンテコな感じになります(笑)

WordPressの自動整形

WordPressには「自動整形」と呼ばれる機能があり、その中には「自動pタグ」や「自動改行」などがあります。

例を挙げると、Wordpressで書いた文(1段落)を自動的にpタグで囲ってくれたり、改行を実際のソースでは<br />と出力してくれたります。

自分でわざわざpタグやbrタグを打ったりする必要がないので大多数の人にとっては非常に便利な機能なんですが、「人によっては究極に余計なお世話」な機能でもあります。

この自動整形の機能はショートコードを使った際にも働いてくれちゃうので、例に漏れず本プラグインも余計な余白(自動整形されたbrとpタグの分だけ)が出ます。

デザインなどあまり気にならない方は何とも思わないとは思いますが、当然気になる方もいると思うので、気になる方は以下のコードをお使いのfunctions.php(子テーマを激しく推奨)の一番下にコピペしてください。

function sc_p_br_fix($content) {
	$array = array (
		']<br />' => ']',
		'<p>[' => '[',
		']</p>' => ']'
	);
	$content = strtr($content, $array);
	return $content;
}
add_filter('the_content', 'sc_p_br_fix');

「wpautopフィルター」について

ちなみに、この自動改行やpタグの機能は上記方法ではなく「wpautopフィルター」を無効にして簡単に解除出来ますし、大半の記事などではwpautopフィルターを無効にする方法を紹介しています。

ただ、その方法だとすべての記事から自動整形されたpタグや改行タグは消え去るので、一気に大量の過去記事の表示が崩れたり、以降も全て自分でpタグやbrタグを打たなくてはならなくなってしまいます。

今まで直感的に改行出来ていた部分も、自動整形されていたbrタグが無くなるので全て1行で表示されてしまいます。

しかし、前項で紹介したコードはショートコードを使った際に自動整形される部分に(一応)絞っているので、上記パターンに当て嵌まらない部分は影響を受けません。

具体的には、ショートコードを使った際「](半角)」の直後に「<br />」が自動整形されるのと、「[(半角)」と「](半角)」をpタグで囲われる自動整形を元の記述通りになるようにしています。

ちなみに、ここまで書いておきながら私はwpautopフィルターを無効にしています。

正直な話、少しでもタグなどがわかる方は自動整形させないで全て手打ちで書いた方が良いと思います。

過去記事にも書いてますが、外部エディタを使うようにすれば全て手打ちでも全くもって面倒ではありませんし、使う人や使い方にもよりますが基本的に「超」効率が上がります。

無料のテキストエディタで言うと断然Sublime Text 3がオススメで、当ブログでも数記事書いていますのでお時間ある時にでもご覧ください。

「Sublime Text 3」関連の記事一覧
Sublime Text 3に関する記事一覧です。

全ての自動pタグやbrタグを無効にするには以下のコードをfunctions.php(子テーマを激しく推奨)の一番下にコピペしてください。
※「何言ってるかわから~ん」な方は前述のコードがおすすめです☆

remove_filter('the_content', 'wpautop');
remove_filter('the_excerpt', 'wpautop');
remove_filter('widget_text_content', 'wpautop');

連続改行について

私はWordpressを入れてまずやる事の中に前述した自動整形の無効化も入っているのと、文法上NGなので一度も使ったことがなく今までまったく気付きませんでしたが、吹き出し内で連続改行(<br /><br />など)すると表示が崩れます。

これも前述したWordpressの自動整形の仕業なんですが、連続したbrタグはpタグに置換されてしまいます。

具体的には「<br /><br />」は「</p><p>」に置換されます。

そもそも連続改行自体避けるべきなのでおすすめはしませんが、それでも連続改行を使いたい方は「<br />と<br />の間」に「&nbsp;」などを入れるか、「全角スペース」を入れると自動整形されないと思います。

具体的には「<br />&nbsp;<br />」とか「<br /> <br />」といった感じです。

ただ、やはりデザインの為の連続改行は使わない事をおすすめします。

WP-Speech-BalloonのAMP対応について

WP-Speech-Balloon2.1はバージョン2.0と同様にAMPに対応させています。

ですので当プラグインを有効にしても基本的にAMPエラーは出ないと思いますが、お使いのテーマによってはAMPの対応方法が違う可能性もあるので当然ですが絶対とは言い切れません。

ただ、個人的には当プラグインが原因でAMPエラーが出るという事はまず無いと思います。

検証済みのテーマ

で検証済みのテーマに付いては以下になります。

Simplicity2(v2.6.1.1)+ Simplicity2 child(v20161002)

Luxeritas(v2.4.4)+ Luxeritas child(2.0.0)

WP-Speech-Balloon自体がかなりシンプルなので上記以外でも基本的に問題ないとは思いますが、一応未検証なのでご質問など頂いても回答出来かねると思います。

プラグインのアップデート方法

WP-Speech-Balloon2.1へのアップデート方法は2種類あります。

1. FTPソフトを使う方法(一番安全・確実でおすすめ)

2. WordPressの管理画面からアップデートする方法

ここではそれぞれのアップデート方法を紹介します。

FTPソフトを使う方法

FTPソフトが使えるのであればこの方法が一番簡単で確実です。

以下から「wp-speech-balloon2.0.zip」をダウンロードして解凍すると「WP-Speech-Balloon」というフォルダが出てきますので「plugins」フォルダの中へアップロードして管理画面で有効化するだけでOKです。

管理画面からアップデートする方法

まず、以下から「wp-speech-balloon2.1.zip」をダウンロードして任意の場所に保存(デスクトップなどでOK)します。

現在使っているWP-Speech-Balloonを停止&削除するので、Wordpressの管理画面の「プラグイン」をクリックして「プラグイン一覧」を表示させます。

一覧の中から「WP-Speech-Balloon」の項目にある「停止」から停止した後、同じく「削除」からWP-Speech-Balloonを削除します。

次に、Wordpressの管理画面から「プラグイン」 > 「新規追加」 > 「プラグインのアップロード」 > 「ファイルを選択」と進みます。

ファイルの選択画面になりましたら、先程保存した「wp-speech-balloon2.1.zip」を選択して「開く」をクリック。

以下のように「wp-speech-balloon2.1.zip」が選択されていることを確認して、
今すぐインストールをクリック。

「wp-speech-balloon2.1.zip」が選択されている状態

インストールが問題なく完了したらプラグインを有効化をクリックして完了です。

初めてお使いになる方は

初めてWP-Speech-Balloonを使うという方はプラグインのインストール&有効化だけでOKです。

また、FTPソフト使う場合は前項の「FTPソフトを使う方法」と同じなので前項をご確認ください。

管理画面からインストールする方法

管理画面からWP-Speech-Balloon2.1をインストールする場合はプラグインの停止&削除の必要はありません。

前項と内容が重複しますが一応以下にインストールの方法を記載しておきます。

まず、以下から「wp-speech-balloon2.1.zip」をダウンロードして任意の場所に保存(デスクトップなどでOK)します。

次に、Wordpressの管理画面から「プラグイン」 > 「新規追加」 > 「プラグインのアップロード」 > 「ファイルを選択」と進みます。

ファイルの選択画面になりましたら、先程保存した「wp-speech-balloon2.1.zip」を選択して「開く」をクリック。

以下のように「wp-speech-balloon2.1.zip」が選択されていることを確認して、
今すぐインストールをクリック。

「wp-speech-balloon2.1.zip」が選択されている状態

インストールが問題なく完了したらプラグインを有効化をクリックして完了です。

WP-Speech-Balloon2.1の使い方

吹き出し会話の使い方はバージョン2.0とほぼ変わりません。

「右パターン」「左パターン」テンプレートとなるショートコードのセットを本文中にコピペなどで書いて、画像URLや名前、会話の内容などを書くだけです。

吹き出しの種類は、上記で本文中にコピペしたショートコードのセットの中の数字を変えるだけ☆

実際に見た方が早いと思うので、事項でテンプレートのショートコードやリアルな使い方のサンプルなどを紹介します。

ショートコードのテンプレート

WP-Speech-Balloonを使う時に必要なショートコードのテンプレートは以下になりますので、PCのメモ帳などにコピペして保存しておくと便利です。

ちなみに、ユーザー辞書に登録しておくとメモ帳を開いてコピペする手間すらかからないので驚愕の使いやすさになります。

※下記ショートコードのテンプレートは必ずセットで使います。

Tipsアイコン[ 左パターン ]

[L_wsbStart][L_wsbAvatar]画像URL[L_wsbName]表示したい名前[L_wsbText]吹き出しの内容[L_wsbEnd]

Tipsアイコン[ 右パターン ]

[R_wsbStart][R_wsbText]吹き出しの内容[R_wsbAvatar]画像URL[R_wsbName]表示したい名前[R_wsbEnd]


次項でサンプルを使って詳しく説明しますが、「吹き出しの種類」は上記テンプレートのの部分を以下の対応表の数字に変えるだけで簡単に変更出来ます。

Tipsアイコン[ 吹き出し対応表 ]

1:通常吹き出し」、「2:ぽわぽわ吹き出し」、「3:パステル&ステッチ」、「4:LINE風」、「5:Twitter風」

なので実際の流れとしては「テンプレートをコピペ」を使いたい吹き出しの数字に変更」「画像URL・名前・内容を書く」だけという事です。簡単ですね☆

具体的な使い方

まずは以下のような吹き出し会話に使いたい画像をWordpressへアップロードして「画像のURL」を用意しておきます。
※使用する画像は縦横70px以上の画像で、縦横比が同じ画像推奨。

RA’sプロフ画像

あとは以下を参考に記事内に書けば簡単に吹き出し会話を使うことが出来ます。


通常吹き出し(左パターン)

avatar

らす

サンプルイメージでーす♪

[L1_wsbStart][L_wsbAvatar]画像URL[L_wsbName]表示したい名前[L_wsbText]吹き出しの内容[L_wsbEnd]

通常吹き出し(右パターン)

サンプルイメージでーす♪

avatar

らす

[R1_wsbStart][R_wsbText]吹き出しの内容[R_wsbAvatar]画像URL[R_wsbName]表示したい名前[R_wsbEnd]

ぽわぽわ吹き出し(左パターン)

avatar

らす

サンプルイメージでーす♪

[L2_wsbStart][L_wsbAvatar]画像URL[L_wsbName]表示したい名前[L_wsbText]吹き出しの内容[L_wsbEnd]

ぽわぽわ吹き出し(右パターン)

サンプルイメージでーす♪

avatar

らす

[R2_wsbStart][R_wsbText]吹き出しの内容[R_wsbAvatar]画像URL[R_wsbName]表示したい名前[R_wsbEnd]

パステル&ステッチ吹き出し(左パターン)

avatar

らす

サンプルイメージでーす♪

[L3_wsbStart][L_wsbAvatar]画像URL[L_wsbName]表示したい名前[L_wsbText]吹き出しの内容[L_wsbEnd]

パステル&ステッチ吹き出し(右パターン)

サンプルイメージでーす♪

avatar

らす

[R3_wsbStart][R_wsbText]吹き出しの内容[R_wsbAvatar]画像URL[R_wsbName]表示したい名前[R_wsbEnd]

LINE風吹き出し(左パターン)

avatar

らす

サンプルイメージでーす♪

[L4_wsbStart][L_wsbAvatar]画像URL[L_wsbName]表示したい名前[L_wsbText]吹き出しの内容[L_wsbEnd]

LINE風吹き出し(右パターン)

サンプルイメージでーす♪

avatar

らす

[R4_wsbStart][R_wsbText]吹き出しの内容[R_wsbAvatar]画像URL[R_wsbName]表示したい名前[R_wsbEnd]

Twitter風吹き出し(左パターン)

avatar

らす

サンプルイメージでーす♪

[L5_wsbStart][L_wsbAvatar]画像URL[L_wsbName]表示したい名前[L_wsbText]吹き出しの内容[L_wsbEnd]

Twitter風吹き出し(右パターン)

サンプルイメージでーす♪

avatar

らす

[R5_wsbStart]][R_wsbText]吹き出しの内容[R_wsbAvatar]画像URL[R_wsbName]表示したい名前[R_wsbEnd]

まとめ

今回はWP-Speech-Balloon2.1について可能な限り詳しく書いたのでかなりのボリュームなりましたが、次回からはほぼアップデート内容のみにする予定です。

これだけ長くはなりましたが、まとめると「プラグインのアップデート」「画像URLの用意」「テンプレートのコピペ」「必要事項を入力」という内容です。

非常に簡単に吹き出し会話が使えるので、是非気軽に使ってみてください☆

シェアして頂けると喜びます☆

この記事が気に入ったら
いいね ! しよう

ディスカッションコーナー コメントやご質問、その他この記事に関する事はこちらからどうぞ☆

  1. decoya より:

    wordpress 4.9.4.jaのテンプレート「sela」を使ってサイトを開発途中なんですが、テンプレートと相性が悪いのか、プラグインを有効にすると以下のエラーが表示されます。
    一応、テンプレートを標準のものに変更してみますが、ご報告しておきます。

    Notice: wp_enqueue_style was called incorrectly. Scripts and styles should not be registered or enqueued until the wp_enqueue_scripts, admin_enqueue_scripts, or login_enqueue_scripts hooks. Please see Debugging in WordPress for more information. (This message was added in version 3.3.0.) in /home/~/popo/wp-includes/functions.php on line 4147

    Warning: Cannot modify header information – headers already sent by (output started at /home/users/1/main.jp-yokabuyta/web/popo/wp-includes/functions.php:4147) in /home/~/popo/wp-admin/includes/misc.php on line 1114

  2. decoya より:

    標準のテンプレートに変更しても、他のプラグインを全て停止しても同じ状態です。
    functionに書き込まなくて済むので便利なので、是非ともこの問題を解決した2.1.1バージョンあたりを出して頂けると助かります。

    • RA's(らす)@Tips4Life より:

      お世話になります。
      私の方でもWordpressテーマ「sela」にて確認致しましたが通常通り表示されております。
      また、エラーの内容ですがプラグインから「wp-includes/functions.php」や「wp-admin / includes / misc.php」に影響が出るような記述はしていないはずですので、もしかしたら他に原因があるのかもしれません。
      確認ですが、WP-Speech-Balloonを有効化した時にだけ上記エラーが表示されるのでしょうか?
      また、WP-Speech-Balloonは現在2.2が最新版のリリースですので、可能であれば2.2をお使いくださいm(_ _)m

      【WP-Speech-Balloon2.2】
      https://tips4life.me/wp-speech-balloon_2_2

Top