WordPressビジュアルエディタでBase64画像を使えるようにする方法

近頃 TinyMCE にはまってますどうも。

Base64 な画像を WordPress で使おうとし、テキストエディタに入力→ビジュアルエディタに切り替えをすると消え去ったので、調べて使えるようにしました。

※WordPress 3.9以上

Base64 な画像が消え去る

どういうことか、やってみましょう。

ビジュアルエディタからメディアを追加→URLにBase64な画像のsrcを入力→投稿に挿入

WordPress ビジュアルエディタ→メディアを追加

WordPress ビジュアルエディタ→メディアを追加→URLから挿入

WordPress ビジュアルエディタ Base64画像が反映されない

テキストエディタのみでやればいけるんですけども、ビジュアルエディタに切り替えた時点で TinyMCE の自動整形がかかって消えちゃうんですね～

WordPress の TinyMCE で Base64 を使えるようにする

TinyMCE のドキュメントを見る、発見。

これを WordPress のフックで有効にしてやります。

/**
 * WordPressビジュアルエディタでBase64画像を使えるようにする
 *
 * @author    hayashikejinan
 * @copyright Copyright (c) 2014, hayashikejinan
 * @link      /?p=1193
 * @license   http://www.gnu.org/licenses/old-licenses/gpl-2.0.html
 *
 * @param $settings
 *
 * @return mixed
 */
function enable_base64_image_for_tiny_mce( $settings ) {
	$settings['paste_data_images'] = true;

	return $settings;
}

add_filter( 'tiny_mce_before_init', 'enable_base64_image_for_tiny_mce' );

既に tiny_mce_before_init へのフックがあれば 14行目のやつを足せばいいです。

Base64 画像を挿入してみる

本当にできるかどうか確認。

WordPress ビジュアルエディタ→メディアを追加

WordPress ビジュアルエディタ→メディアを追加→URLから挿入

WordPress ビジュアルエディタ→メディアを追加→URLから挿入→Base64な画像が有効に！

WordPress テキストエディタ Base64な画像のhtml

はい、できました。

実際に挿入してみたのがこちら↓

ﾎﾎまとめ

Base64な画像を投稿で使う場面があったので調べて実装できました。

ドキュメントを読めばだいたいのことはできるようになってきてうれしい。