ブログ作成のツボブログ作成のツボ当「ブログ作成のツボ」では、WordPressを使ってブログを作成する際のお役立ち情報を配信しています。ブログの立ち上げから筆者の経験談、便利だなと思ったプラグインの使い方等も掲載しています。2016.05.13wordpressのビジュアルエディタにはコード自動整形機能がついている。改行コードの自動付加や<p>タグの自動挿入です。時にこの自動整形機能が悪さをしてコードが崩れる現象が発生します。Initializing...どのような悪さをしてしまうのかまたこれを防ぐ手だてがないのか実験してみました。実験してみると、勝手に改行がどんどん増えてしまったり逆に必要な改行コードが取り除かれてしまったりします(ケース1)。これを防ぐ一般的な手当をして実験したのがケース2。ケース2でも改善はみられず、文字実態化により勝手に改行される現象は収まったもの&(アンパサンド)がダブって挿入される状態となってます。このコード改変の実体と最終的に当現象を改善するところまで実験を進めたいとおもっています。この現象は、ビジュアルエディタと通常のテキストエディタを何度も切り替えると発生する現象です。Advancedが関係します。Evolvedプラグインです。参考例のコードがコピペでは動かなくなってします。Button:0.7.8.4実験するために使ったコード実験のため、html/phpのコードの両方を使い、改行コードの勝手な挿入/削除がわかるように、1行1ステートメントの実験コードを以下の通りとしました。<div>line1:本表示は1行に1ステートメントです。Evolvedを使ったコード表示をスクリーンショットで撮ってみた。editor”はオフの状態です。症状ビジュアルエディタと通常テキストエディタを切り替えると、htmlコード内では改行コードが勝手に挿入しされ、phpコード内では必要な改行が削除されてしまっている。Highlighterのスクリーンショット画像。htmlやphpのコードは1行に1ステートメント表示され、キーワードで見やすくカラー表示されています。最初に通常テキストエディタからビジュアルエディタに切り替えた場合には、前述の改行問題が発生しています。下図の2,3行目および6行目に注目。ケース1:ビジュアルエディタ移行後テキストエディタに戻った次の画像では、特に直前のビジュアルディタと表示状態の変わりはなく問題はビジュアルエディタの切り替える場合に発生しているものと予想されます。ケース1:テキストエディタ戻り後さらに1往復してテキストエディタに戻った場合のスクリーンショットが下図。phpコード内はその後改変は行われていないようですが、htmlコードはさらに改行が増殖しています。改行の数は2行ずつ増えている部分と1行ずつふえている部分が見られます。タグを適用という3つの作用をするもので、まさしくこの事案に対処可能と思いましたので、次のとおりfunctions.phpに登録してみました。);実験のスクリーンショットはじめは1番目の実験と同様にコード改変前の状態!ケース2:改変前ビジュアルエディタに移行すると、さっきの状態とは少し異なり改行こそ挿入されていませんが、文字の実態化が行われておりhtmlタグは&lt;や&gt;と変換されています。ケース2:ビジュアルエディタ移行後テキストエデッタに戻ってもこのように全く同じ状態の表示になっています。前と同じようにさらに1往復してみると、文字の実態化のための&lt;の先頭の&が&amp;amp;とさらに変換され、以後ビジュアルエディタのいくたびに際限なく増え続ける状態となってしまいました。ケース2:2往復目テキストエディタ画面wordpressで文字の実態化を担当しているフィルターは、wptexturizeというです。);結果は無残にも&アンパサンドの増殖はとまらず。文字の実態化自体は、wp-include/js/tinymce/tinymce.min.jsという情報がありました。以下のブログを参考にしてみてください。参照:note.crohaco.netWordPressのエディタ「TinyMCE」の実体参照を無効化するもうひとつの回避方法として、<pre><code>等の特定のタグや登録したショートコード内では、コードの改変を行われないというルール。文書記号に作用することが判明。関係なかったようです。最終結論:問題は入力の仕方!これらの作業をやりああだこうだしながらようやく結論らしきものにたどりつきました。Evolvedをつかっていたため、[php][html]等のショートコードでこれを代用していたため、ビジュアルエディタでこのショートコードが展開されずコード改変対象外およびhtmlタグの認識において謝りがあったということです。lang=”php”>等で書き始めること。htmlタグはアンパサンドでエスケープするこれで、ビジュアルエディタ側は、コード改変が不可な範囲であることの認識とエスケープされたhtmlコードであることを認識。よって改変はおこなわれず、無用な改行コードの挿入も文字実態化もおこなわず、何度ビジュアルエディタと往復してもコードレイアウトがくずれることはなくなります。今回の例題のコードは、以下のようにテキスト画面から入力するようになります。true">&lt;div&gt;line1:本表示は1行に1ステートメントです。HighLighterでコードを公開するユーザは必須です。上記のコード改変を防ぐ方法に紹介したコードに対応するプラグインがありました。Button」というプラグインです。コピータロイモ(管理人)をフォローするタロイモ(管理人)ブログ作成のツボブロガー必見!画像形式と圧縮。PNG画像は注意が必要だ。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。コメントデータの処理方法の詳細はこちらをご覧ください。undefined”エラーが発生2019.12.28SmartLifeをショートカットに登録する2019.12.042019.12.06NFCタグシールを使えば、家のなかでSuica的タッチ&ゴー2019.12.042019.12.06Googleドライブの使用状況を確認する方法2019.11.272019.11.29ロリポップのドメインをWWWなしに設定するTips2019.11.192019.11.25タロイモ(管理人)毎日ちょっとずつ前進するようにブログ制作に励んでますが、現実は大変厳しいですね。ブログ作成のツボ.タイトルとURLをコピーしました。