このサイトについて

ふきだし表示プラグイン「Speech Bubble」を「Swell」の「ふきだし機能」に自動変換する方法

WordPressのテーマをSwellに変えたんだけど、これまで使っていた「Speech Bubble」をSwellのふきだし機能に変換する方法は?

ぺん

古いプラグインを使っていた場合、移行するのが大変ですね。

WordPressのテーマ移行で、一番大変な作業は記事(コンテンツ)の修正です。

新しいテーマに変更する際は、前のテーマで使っていたショートコードや装飾などのデザインが崩れてしまうため、

  1. 前のテーマのショートコードの変更
  2. スタイル、デザイン修正

などの対応が必要です。

このサイトでは、WordPressテーマ「Swell」を使用していますが、以前使用していたテーマでは「Speech Bubbble」という吹き出しを表示するプラグインを使っていました。

「Speech Bubble」はすでに公開されておらず、新しいバージョンのワードプレスにも対応していないため、別のプラグインに置き換える必要があります。

幸いにもSwellには「ふきだし機能」が標準搭載されているのですが、Swellの標準機能を使うためには、「Speech Bubble」を使用していた記事をすべて書き換える必要がありました

試行錯誤の上、とてもかんたんに「Speech Bubble」を使用していた記事を自動的に変換する方法が見つかりましたので、ご紹介します。

ぺん

「Speech Bubble」に限らず、古いプラグインの移行時に使えるテクニックですので、ぜひご覧ください!

この記事の内容
  1. 「吹き出し」表示用プラグイン、Speech Bubbleとは?
  2. 古いプラグインを使用していた記事を、別のプラグインを使うように自動変換する方法
目次

Speech Bubbleは過去の大人気「ふきだし表示プラグイン」

speech bubble プラグイン

Speech Bubbleは、WordPressサイト上で「ふきだし」を表示するプラグインです。

残念ながら、すでに公開されておらずWordPressサイトからダウンロードすることはできません。

開発者が日本人ということもあり、とても数多くのブログで使用されていました。

ぺん

数年前は、ふきだしプラグインといえばSpeech Bubbleでしたね。

ポイント
  • Speech Bubbleは日本人開発者による、WordPressの「吹き出し」表示用プラグイン
  • すでにサポートは停止され、ダウンロードできない

Speech Bubbleの利用例

こちらが、Speech Bubbleの利用例です。

speech bubble プラグインの利用例
speech bubble プラグインの利用例

下記のショートコードに、表示したいアイコン、キャラの名前、セリフを入力するとふきだしが表示されます。

[speech_bubble type="ln" subtype="L1" icon="1.jpg" name="Aさん"]会話形式にすると、読みやすい![/speech_bubble]
[speech_bubble type="ln" subtype="R1" icon="2.jpg" name="Bさん"]たしかに![/speech_bubble]
ポイント

Speech Bubble ショートコードの指定内容

  1. セリフ枠のデザイン
  2. アイコンの表示位置(左、右)
  3. アイコン画像のファイル名
  4. キャラクターの名前
  5. せりふ

Speech Bubbleは古いプラグインのため、ブロックエディタには対応していません。

Swellのふきだし機能

Speech Bubbleのショートコードを、Swellのふきだし機能を使うように変更します。

Swellのふきだし機能は、ブロックエディターに完全対応

Swell は、ブロックエディタを完全サポートしているので、ふきだし表示用のブロックが提供されています。

Swellの「ふきだし」ブロック

Speech Bubbleのショートコードでは、セリフ以外にも表示位置やアイコンなどのパラメータを入力する必要がありますが、Swellの吹き出し機能は、「ふきだし」ブロックを選択して、セリフを入力するだけ!

実際の画面イメージを見ながら、記事の執筆に集中することができます。

Swellの「ふきだし」編集イメージ
ぺん

「Swellのふきだし機能」はかんたんに利用できます。

ポイント
  1. Swellの吹き出し機能の利用は、Speech Bubbleよりかんたん

Swellの吹き出し機能は、ショートコードでも利用可能

Swellのふきだし機能は、ショートコードでも利用可能です。

Swellの吹き出し機能 ショートコード例
[speech_balloon icon="" name="名前" align="left" col="gray" type="speaking" icon_shape="circle"]吹き出しの内容[/speech_balloon]
ポイント

Swell ふきだし ショートコードの指定内容

  1. セリフ枠の色、形
  2. アイコンの表示位置(左、右)
  3. アイコン画像のファイル名(Path)
  4. キャラクターの名前
  5. せりふ

ショートコードで指定する内容は、Speech Bubbleとほとんど同じなので、Speech Bubbleを使用していた古い記事のショートコードの書式を変換すれば、Swellのふきだし機能がつかえます。

記事の数が少なければ、ショートコードを手動で書き換えることもできますが、記事の数が多い場合は自動で変換する必要があります。

Speech Bubbleのショートコードを自動で書き換える方法

以下の手順で、Speech Bubbleのショートコード部分を、Swellのふきだし機能を使う様に設定します。

STEP
Speech Bubbleで使用していたアイコン画像をコピーする
STEP
Speech Bubble プラグインを削除する
STEP
function.php にショートコードを自動変換するコードを追記する

Speech Bubbleで使用していたアイコン画像をコピーする

Speech Bubbleで使用していた全てのアイコンファイルを、以下のフォルダにFTPクライアントを使ってコピーします。

ドメイン名の部分は、あなたのサイトのドメイン名と入れ替えます

/ドメイン名/public_html/wp-content/uploads/speech-bubble

Speech Bubble プラグインを削除する

Speech Bubbleプラグインがインストールされている場合は、自動変換コードがうまく動かなくなるので、Speech Bubbleプラグインをアンインストールしてください。

Speech Bubble プラグイン 削除方法

WordPress 管理画面から、以下の手順で Speech Bubbleプラグインを削除することが

  1. プラグイン →インストール済みプラグインを選択
  2. Speech Bubbleの「無効化」をクリック
  3. Speech Bubbleの「削除」をクリック

function.php にショートコードを自動変換するコードを追記する

Swellのfunction.php に、下記のコードを追加します。

このコードを追加すると、Speech BubbleのショートコードをSwellのふきだし機能のショートコードに自動的に変換してくれます。

/**
 * ふきだし speech-bubble
 */

function balloon_shortcode( $atts, $content = null ) {
	$content = do_shortcode( shortcode_unautop( $content ) );
	$dir_info = wp_upload_dir();
	// ベースディレクトリ情報
	$basedir = $dir_info['basedir'];
	// ベースURL情報
	$baseurl = $dir_info['baseurl'];
	extract(shortcode_atts([
		'icon'   => '',
		'name'   => '',
        'type'   => '',
		'subtype'  => '',
	], $atts));

	switch ( $subtype ) {
        case "L2":
            $align = 'left';
            $type = "thinking";
            break;
        case "R2":
            $align = "right";
            $type = "thinking";
            break;
        case "R1":
            $align = "right";
            $type = "speaking";
			break;
		case "L1":
            $align = "left";
            $type = "speaking";
			break;
	}

	$args = '';

	// アイコン画像
    $imageUrl = $baseurl . '/speech-bubble/' . $icon;
	if ( $imageUrl !== '' ) {
		$args .= ' icon="' . $imageUrl . '"';
	}

	// 名前
	if ( $name !== '' ) {
		$args .= ' name="' . $name . '"';
	}

	// 右か左か
	if ( $align === 'right' ) {

		$args .= ' align="right"';
        $args .= ' col="gray"';
    } else {
        $args .= ' col="green"';
    }

    // thinking
	if ( $type === 'thinking' ) {
		$args .= ' type="thinking"';
    } 

   return do_shortcode( '
' . $content . '
' ); } add_shortcode( 'speech_bubble', 'balloon_shortcode' );

自動変換コードの処理内容

表示位置、ふきだし種別の選定(19~36行)

表示位置(左右)と、ふきだしの形(発言、心の声)を指定します。

ふきだしの色(51~58行)

今回はふきだしのカラーは、ふきだしの方向(左右)を元に固定表示しています。

ふきだしの方右の場合は「gray」、左の場合は「green」で表示します。

ふきだしの方向ふきだしカラー
gray
green
ふきだしのカラー設定
実際のふきだし表示イメージ
ぺん

表示位置=左、ふきだしの形=発言

ぺん

表示位置=右、ふきだしの形=心の声

ぺん

一見複雑そうに見えますが、単純にパラメータの文字列を置き換えているだけです。

意味Speech BubbleSwell 「ふきだし機能」
ショートコードの名称speech_bubblespeech_balloon
セリフ=左向き、セリフsubtype=“L1”$align = “left”
$type = “speaking”
col=”gray”
セリフ=左向き、心の声subtype=“L2”$align = “left”
$type = “thinking”
col=”gray”
セリフ=右向き、セリフsubtype=“R1”$align = “right”
$type = “speaking”
col=”green”
セリフ=左右向き、心の声subtype=“R2”$align = “right”
$type = “thinking”
col=”green”
ショートコードによる自動変換ルール

まとめ

Speech Bubbleは多くのブログで使われていた、吹き出し表示用のプラグインですが、すでにサポートされていません。

Speech Bubbleを使用した過去記事を、Swellのふきだし機能を使うように変換するには、

  1. 手動で書き換え
  2. function.phpに自動変換ロジックを追加

という方法が考えられます。

移行する記事の数が多い場合は、今回ご紹介した function.php に自動変換ロジックを追加する方法がおすすめです。

このテクニックは、他のプラグインの移行にも応用可能ですので、ぜひお試しください!

Swellの詳しいレビューは、こちらの記事からご覧いただけます。

にほんブログ村 IT技術ブログ WordPressへ

この記事が気に入ったら
フォローしてね!

よかったらシェアをお願いします!

コメント

コメントする

CAPTCHA


目次
閉じる