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フォントが適用されます。
以下の投稿は、すべてビジュアルモードだけで作成したサンプルです。
ユーチューブの右寄せ、サイズコントロールもビジュアルエディタで書くことが出来ました。
（テーブルは、フィルターによる記法を使いましたが、ビジュアルエディタで記述しています）
