HTMLとCSSをきちんと作れば、固定ページをビジュアルモードで編集しても、レイアウトが崩れないようにできますよ。
ビジュアルモードで使えるHTMLタグは決まっているのだから、それらのタグが本文に入っても問題ないようにしておくだけです。
HTMLを知っているお客さんの場合は、「ビジュアルモードがまどろっこしい」ということで、HTMLモードを使ってもらうことはありますね。
確かにレイアウトが崩れないように作る、というのは1つの方法ですね。
モード切替で私が今まで遭遇した問題として、HTML5のマークアップ方法としては認めらている「aタグでブロックを囲む」という記述をするとWordPressではaタグが削除されてしまう、というのがありました。
<a><div>テキスト</div></a>
↓aタグが消える
<div>テキスト</div>
崩れないように作る、というルールからすれば、こういう記述をしないように気をつける必要があるのでしょうね。。
この他にもWordPressが勝手にタグを書き換えて崩れるリスクが怖いのですが、MIZUNOさんは今までトラブルとかなかったですか?
こんにちは、
まず知っておいたほうがいいと思うのは、ビジュアルとテキストの違い
例 ブログに表示されるソース(サイズは大人の事情あり、)
<figure class="gallery-item" tabindex="0">
<div class="gallery-icon portrait">
<a href="">
<img width="282" height="300" src="" class="attachment-medium size-medium" alt="Belen_maya" srcset="image-url 282w, image-url 60w, image-url 376w" sizes="(max-width: 282px) 100vw, 282px">
</a>
</div>
</figure>
ビジュアルエディタでのギャラリーのソース
<dl class="gallery-item">
<dt class="gallery-icon"><img src="" width="150" height="150" alt=""></dt>
</dl>
全く違うものですよね
テーマの設定は html5サポートの場合です。
add_theme_support( 'html5', array( 'gallery', 'caption' ) );
ビジュアルの内部では、html4で表示しているわけです。
<a><div>テキスト</div></a>
これもhtml5で許可された記述方法ですよね。
ビジュアルエディタとテキストを、行ったり来たりするのは、お勧めできない。
html4ならOKというわけでもありません。
ビジュアルエディタは、簡潔に記述されたものを気を利かして整形する事は出来ますが、
厳密に書かれたhtmlを正確に読み取って、編集するようなツールではありません。
<a><div>テキスト</div></a>
をどうしてもうまくいかせたい場合は、フィルターなどでカスタマイズしましょう。
うまくいったら、困っている人たちに分かち合いましょう。
リンク先の記事は、ユーザープロフィールにある
Visual Editor の設定を固定ページでだけ動作するようにしたフィルタでしかありませんから、個別のアイディアに過ぎないと思いますが、どうですか?
「ビジュアルエディタは、簡潔に記述されたものを気を利かして整形する事は出来ますが、厳密に書かれたhtmlを正確に読み取って、編集するようなツールではありません。」
なるほど、これはちょっと目から鱗でした。
ビジュアルエディタに厳密さを求めるのは違うわけですね。
今まで「どうやって崩さないようにできるか」を考えていましたが、そもそもそう考えるのがナンセンスのような気がしてきました。厳密なHTMLを記述する場合はビジュアルエディタを使わないようにするのがよさそうですね。
「BやIの表記が分かりにくい」とか「テキストに色をたくさん使いすぎる」とかいった問題はありますね。
モード切替は確かに問題が多いようですが、ビジュアルモードかHTMLモードか、どちらかに決めてしまえば良いように思います。
で、例に挙げてある<a><div>テキスト</div></a>
ですが、
ビジュアルエディタで<a><div>テキスト</div></a>
を入れさせる、というのは無理があるように思います。(手軽に書きたい、という人に入れ子の操作をさせることになる)
ビジュアルエディタを使うのであれば、リンク(a)を入れてもらう、あとはCSSで適切に表示する、のほうが良いように思います。
<a><div>テキスト</div></a>
というのはビジュアルエディタで入力させるのではなく、制作サイドでコーディングするイメージです。それをテキストエディタにペーストするのですが、ビジュアルエディタにするとソースが壊れて崩れてしまう、ということです。
固定ページはWordPressでいきなり作るのではなく、DreamweaverなどでいったんコーディングしてからWPに移植しているので。
確かにどちらかのモードで決めてしまう方が問題が起きにくい気がしますね。
ああ、なるほど、そういう作り方をしていましたか。
うちは、
WordPressでまずコンテンツを作る=>スタイルをあてていく
という形でやっていっています。
そのほうが、お客さんがWordPressに慣れる時間も多く取れますし、
ビジュアルエディタで使うものも知ることができるので。
Dreamweaverなどでいったんコーディングしてもらうのであれば、
コーディング担当者に、「WordPressのビジュアルエディタ対応」でお願いすれば良いように思います。
もろもろご意見ありがとうございました!
参考になることが多く勉強になりました。
解決済みとさせていただきます。