WordPressビジュアルエディタでブロック要素を生成する場合
2018年6月16日
wordpressはビジュアルエディタの状態で改行キーを押すとpタグを自動挿入する、っていうのはよく言われるが、厳密にいうと一様にそういう動作になるわけでない。
正しくは直前にあるボックス要素のタグと同じタグを自動生成する、というのが実際の挙動のように思う。
<p>あああい</p>
この場合、「い」の後で改行キーを押すと自動でpタグが挿入され、p要素が二つ並ぶことになる。
ほとんど、wordpressのビジュアルエディタはデフォルトでp要素から始まるので、改行すると自動でpタグが生成されるように思える。
①
<section>あああい</section>
②
<div>あああい</div>
しかし、上記２パターンの場合、「い」の後に改行キーを押すと新たなブロック要素が生成されるが、
①の場合はsectionタグ、②の場合はdivタグが生成される。
また、自動生成されるのは、直前のブロック要素だけである。つまり下記の「い」の位置で改行をすると自動でp要素が生成されるが、p要素の親要素であるdiv要素の隣接位置に新たにdivを作成する、ということが一回改行ボタンを押しただけでは出来ない。
<div><p>あああい</p></div>
二回改行ボタンを押すことによって、p要素に隣接した位置でなく、div要素の下、隣接した位置に新たにボックス要素を配置できる。
改行ボタンを押す回数によって、親階層の深度を調整した上で、下にボックス要素を配置できるようだ。
これは少し分かりにくいかもしれない。
WordPressのビジュアルエディタはバージョンがアップするにつれて、かなり良くなってきてると思うが、操作方法に関してはそのバージョンによって結構変わる。
ビジュアルエディタを使用してページデザインすることを想定する場合、できるだけボックス要素を二重にしないようにするか、
カスタムフィールドを適宜使用する、もしくはショートコードを活用する、という手が考えられる。
また、ビジュアルエディタに「スタイル」というセレクトボックスがあり、そこの配列に自前で定義したボックス要素のスタイル（インライン要素も可）を登録できる。
それを使用すれば、選択したテキストを好きな要素に変更でき、classなども自由に設定できるので、この方法が一番いいかもしれない。
WordPressのビジュアルエディタの自動整形機能を正しく把握したいところ
また、ちょっとそれるが、明らかにおかしなコーディングの場合、自動で不自然なコードを削除する機能もある。
例：
<span><p>あああ</p></span>
この場合、ボックス要素pタグをインライン要素spanタグでマークアップするのは基本的には正しくないので、親要素の<span>は自動で削除される。
wordpressのビジュアルエディタはある程度の規則性のもと、動作しているようだが、なかなかその規則性全てを詳細に記載しているページがないので、一度確認したいところ。
median.weblike.jp
