WordPressのエディタで<style>~や<link rel="stylesheet"~を使えるようにする方法

WordPressはビジュアルエディタメインで使う派です。

HTML打ち込む際はテキストエディタに切り替えるんですが、そこからビジュアルエディタに戻ると消えるHTMLタグ、ありますよね。

それを自分で調整する方法を。

TinyMCE のおかげ

WordPress 管理画面、投稿エディタは TinyMCE というオープンソースのエディタが使われています。

その設定で、デフォルトでは <style>~や<link rel="stylesheet"~ が使えないようになっているわけです。

 

WordPress 4.0 デフォルトの TinyMCE 設定

/wp-includes/class-wp-editor.php 465行目で定義されています。

self::$first_init = array(
	'theme' => 'modern',
	'skin' => 'lightgray',
	'language' => self::$mce_locale,
	'formats' => "{
		alignleft: [
			{selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li', styles: {textAlign:'left'}},
			{selector: 'img,table,dl.wp-caption', classes: 'alignleft'}
		],
		aligncenter: [
			{selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li', styles: {textAlign:'center'}},
			{selector: 'img,table,dl.wp-caption', classes: 'aligncenter'}
		],
		alignright: [
			{selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li', styles: {textAlign:'right'}},
			{selector: 'img,table,dl.wp-caption', classes: 'alignright'}
		],
		strikethrough: {inline: 'del'}
	}",
	'relative_urls' => false,
	'remove_script_host' => false,
	'convert_urls' => false,
	'browser_spellcheck' => true,
	'fix_list_elements' => true,
	'entities' => '38,amp,60,lt,62,gt',
	'entity_encoding' => 'raw',
	'keep_styles' => false,
	'cache_suffix' => 'wp-mce-' . $GLOBALS['tinymce_version'],
	// Limit the preview styles in the menu/toolbar
	'preview_styles' => 'font-family font-size font-weight font-style text-decoration text-transform',
	'wpeditimage_disable_captions' => $no_captions,
	'wpeditimage_html5_captions' => current_theme_supports( 'html5', 'caption' ),
	'plugins' => implode( ',', $plugins ),
);

 

どうやって WordPress の TinyMCEエディタで <style>~や<link rel=”stylesheet”~ を使えるようにするのか

本家 TinyMCE のドキュメントを見ました。

Configuration の項を見ていくと、発見。

親要素内の子要素を制御できるやつ。

この設定で WordPress さんの制御を操ることができそう。

+で追加、-で削除。親要素[子要素|子要素] みたいな感じで | で区切る。

* アスタリスクは使えなくなった模様。

 

TinyMCE init 前のフックに <style>~や<link rel=”stylesheet”~ を使えるように設定を追加する

TinyMCE init のフックを使って functions.php にでも書いてやります。

/**
 * WordPress の TinyMCE エディタで meta, style, link など使えるようにする
 *
 * @author    hayashikejinan
 * @copyright Copyright (c) 2014, hayashikejinan
 * @link      /?p=1184
 * @license   http://www.gnu.org/licenses/old-licenses/gpl-2.0.html
 *
 * @param $settings
 *
 * @return mixed
 */
function additional_tags_for_tiny_mce( $settings ) {
	if ( ! empty( $settings['valid_children'] ) ) {
		$settings['valid_children'] .= ';';
	} else {
		$settings['valid_children'] = '';
	}

	$settings['valid_children'] .= '+body[link|meta|style],+div[span|meta],+span[span|meta]';

	return $settings;
}

add_filter( 'tiny_mce_before_init', 'additional_tags_for_tiny_mce' );

これでOK。

TinyMCE エディタ内は body から始まるので大元は body 。

アンカータグ a 内にブロック要素の div や span は指定しても効かないようにそもそも作られています。

 

functions.php イヤだ！な人はプラグインで

TinyMCE の Configuration を操るプラグインがあります。

インストール→有効化し、設定→TinyMCE Config より。

こんな感じで指定してやればいいです。

 

ﾎﾎまとめ

なんでこれが必要だったかというと、Scheme.org の Microdata が消え去ってしまうのをどうにかしたかったからなんですよね。

それは次回に。