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

[ 2018年03月06日 追記 ]

WP-Speech-Balloon_2.2をリリース致しました。

以下の記事から最新版のバージョン2.2をご利用頂けます。

※新バージョンリリースに伴い、本記事内のダウンロードリンクを削除致しました。

【WP-Speech-Balloon_2.2】リリース！連続改行時などの表示崩れに対応☆

Wordpressで簡単に吹き出し会話が出来るプラグイン、「WP-Speech-Balloon」のバージョン2.2をリリース致しました。 今回は吹き出しの種類とかの内容ではありませんが、吹き出しの本文中に「連続改行などがある...

tips4life.me

2018.03.06

アップデート内容

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

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

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

吹き出しの種類（全パターン）

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

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

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

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

通常吹き出し

ぽわぽわ吹き出し

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

LINE風吹き出し

Twitter風吹き出し

注意点

どれもそこまで気を付けるほどの事ではありませんが、「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に関する記事全般のカテゴリです。

tips4life.me

全ての自動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エラーが出るという事はまず無いと思います。

検証済みのテーマ

本記事公開時点で検証済みのテーマに付いては以下になります。

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

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

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

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

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-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の使い方

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

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

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

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

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

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

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

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

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

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

具体的な使い方

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

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

通常吹き出し（左パターン）

通常吹き出し（右パターン）

ぽわぽわ吹き出し（左パターン）

ぽわぽわ吹き出し（右パターン）

パステル&ステッチ吹き出し（左パターン）

パステル&ステッチ吹き出し（右パターン）

LINE風吹き出し（左パターン）

LINE風吹き出し（右パターン）

Twitter風吹き出し（左パターン）

Twitter風吹き出し（右パターン）

まとめ

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

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

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