ビジュアルエディタで、htmlタグを書く

Raindropsというテーマで、投稿本文のレイアウトに関する問題を解決しようという事で、いろいろと変更を行ったんですが、既存のユーザーから、「レイアウトが崩れた」という指摘をいただいた。

それぞれに対応してみると、ほとんどは、h2等の見出し要素の使用方法が特異な事に起因していた。

div要素で囲むように、h2要素で、文章、画像といったものを囲んで使っていました。なぜ、そんな使い方をするのだろうと、しばらく考え込んでしまったのですが、

たぶん彼らは、ビジュアルモードを常用していて見出し要素をブロック要素代わりに使う、「技」を見つけたのだろう と 自分なりに合点がいった。

実際にビジュアルモードを使ってみると、細かな作業が出来ない事に気づくのです。ショートコード等を書いても、ビジュアルエディタで結果が表示されるわけでもなく、ギャラリーや、captionショートコード等、コアの特別なものだけが反映するだけです。

慣れというのは、恐ろしいもので「そんなもんだ」と気にならない。

Raindropsテーマは、要素にクラス指定をすることで 細かく表現を変更できるというのが 取柄 なのですが、そういった作業が全くできないのです。

このような事から、ショートコードを使って 投稿を保存したら ショードコードが展開して htmlタグに置換されるコードを書いてみる事にしました。

つまり、ビジュアルエディタにショートコードが反映するわけです。


完成したものではなく、試行錯誤の過程のコードです。

functions.php

add_shortcode( 'html', 'raindrops_html_shortcode' );
add_filter( 'format_for_editor', 'raindrops_static_shortcode_for_html' );

function raindrops_html_shortcode( $atts, $content= null ) {

	$defaults= array(
		'element'	=> 'div', 'title'	=> '', 'id'		=> '', 'class'		=> '', 'lang'		=> '',
		'dir'		=> '', 'style'		=> '', 'before'	=> '', 'after'		=> '', 'type'		=> '', 'name'		=> '',
		'span'		=> '', 'action'	=> '', 'method'	=> '', 'alt'		=> '', 'src'		=> '', 'value'		=> '',
		'tabindex'	=> '', 'datetime'	=> '', 'for'		=> '', 'colspan'	=> '', 'rowspan'	=> '',
	);

	extract( shortcode_atts( $defaults, $atts ) );

	$attribute= '';
	foreach ( $defaults as $key=> $val ) {
		if ( !empty( $$key ) && $key !== 'before' && $key !== 'after' && $key !== 'element' ) {
			$attribute .= ' ' . $key . '="' . $$key . '"';
		}
	}

	if ( $element !== "area" | | $element !== "base" | | $element !== "br" | | $element !== "col" | | $element !== "command" | |
	$element !== "embed" | | $element !== "hr" | | $element !== "img" | | $element !== "input" | | $element !== "link" | |
	$element !== "meta" | | $element !== "param" | | $element !== "source" ) {

		$close_tag= '</' . $element . '>';
	} else {

		$close_tag= '';
	}
	return $before . '<' . $element . $attribute . '>' . $content . $close_tag . $after . '<!--...-->';
}

function raindrops_static_shortcode_for_html( $return_value ) {
	global $post;
	$pattern= get_shortcode_regex();
	$text	= $post->post_content;

	if ( preg_match( '/' . $pattern . '/s', $text, $matches ) && 'html'== $matches[ 2 ] ) {

		$reflect_items= array( $matches[ 0 ] );

		foreach ( $reflect_items as $item ) {

			$shortcode[]= do_shortcode( $item );
		}

		return str_replace( $reflect_items, $shortcode, $return_value );
	}
	return $return_value;
}

投稿本文に

[html element="h2" class="google-font-lobster f26"]GOOGLE FONT LOBSTER[/html]

のように記述すると、Raindropsテーマで使った場合、Google FontsのLobsterフォントが適用されます。

以下の投稿は、すべてビジュアルモードだけで作成したサンプルです。

ユーチューブの右寄せ、サイズコントロールもビジュアルエディタで書くことが出来ました。

(テーブルは、フィルターによる記法を使いましたが、ビジュアルエディタで記述しています)

visual-sample

[emulsion_relate_posts]