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