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

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

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

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

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

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

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

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

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

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


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

functions.php

投稿本文に

[/crayon]

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

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

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

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

visual-sample


コメントは受け付けていません