WordPressのFront-end Editorでプログラムコードが潰れる?

repaire

◆◆ Front-end Editor ってなに?

WordPressで記事を書いたあとの推敲って、ブラウザで確認しますよね?
で、誤字脱字があれば、

誤字脱字発見!!!
 ↓
WordPressの編集画面へ移動
 ↓
修正する箇所を探す(あれ?どこやろ?すぐに発見できないのが地味にストレス)
 ↓
修正する
 ↓
更新ボタンクリック(2秒ぐらいの更新時間が地味にストレス)
 ↓
確認の画面に戻る
 ↓
画面を更新(2秒ぐらいの更新時間が地味にストレス)
 ↓
修正した箇所までスクロール(あれ?どこだっけ?と探すのが地味にストレス)

 

という手順を踏む人って多いんじゃないでしょうか?

その手順って結構面倒じゃないですか?
私は面倒です!!!

ちょっと誤字脱字を直すぐらい、WordPressに戻らずに今見ている画面で修正させてくれよぉ~
と思います。

それを叶えてくれるのが Front-end Editor です。

ただ・・・・WordPressの環境によっては Front-end Editor で問題が出ることがあります。
※問題は下の方で書いてます。
まぁ、WordPressはプラグイン同士の相性で問題が出るのは珍しくないですけど。

◆◆ Front-end Editor のインストールと有効化

WordPressのプラグインのインストールと有効化は簡単です。
省いてしまってもいいぐらいですが、一応以下に書いておきます。

プラグインを新規追加します。
これはWordPressのプラグインのいつもの方法です。
インストール&有効化しましょう。

front_enf_editor_00001
front_enf_editor_00002_02

これですぐ使えます。
設定等はありません。

◆◆ Front-end Editor の使い方

WordPressにログインした状態で修正したい記事にアクセスしましょう。
記事の上にWordPressの黒いメニューバーが出ています。

「投稿の編集」というのがありますのでクリックします。

front_enf_editor_00003_02

そうすると記事の中で修正したい箇所をクリックすると文字を追加・修正・削除できます。
front_enf_editor_00005

front_enf_editor_00006 front_enf_editor_00007_02

修正が完了しましたら「Update」をクリックします。
front_enf_editor_00004_02

これで更新完了です。

WordPressの編集画面を見ても更新されています。
front_enf_editor_00009_02

◆◆ Front-end Editor のメリット

Front-end Editor を使う事のメリットは、推敲のラクチンさですね。
いちいちWordPressの編集画面に戻らず、間違いを見つけたその場ですぐに修正できるのは、地味に便利だと思います。

あと、私はよく知らないんですけど、 a-blog cms ならもっとラクらしいです。
WordPressではなく a-blog cms を導入するのも手だと思います。

◆◆ Front-end Editor の問題

Front-end Editor はものすごく便利なのですが、使っていく上である問題が分かりました。
この問題が分かって、私は Front-end Editor を止めてしまいました。残念。。。。
WordPressにはプラグイン同士の相性問題で正常に動作しないとか、機能がバッティングしてしまって期待通りの動作がしなくなってしまうことがありますので、まぁしょーがないですね。
今回の場合 Front-end EditorCrayon Syntax Highlighter がバッティングしました。

どういう問題かと言いますと、

Crayon Syntax Highlighter で書いたプログラムコードが潰されてしまう!!!

私のブログはプログラミング関係ですので、プログラムのコードを書くことがあります。
コードを表示するのに Crayon Syntax Highlighter を使って表示しています。

記事を書き上げて推敲時に Front-end Editor を使うと Crayon Syntax Highlighter のプログラムコードが消されてしまうのです。
↓こんな感じです・・・・

まずはこんな感じでプログラムコードが普通に表示されています。
front_enf_editor_00011_02

誤字を直そうと「投稿の編集」をクリックします。
front_enf_editor_00003_02

すると・・・・プログラムコードが変な文字列になってしまいました。
front_enf_editor_00013_02

キャンセルすれば元に戻りますが、Updateをクリックしてしまうと、そのままの文字列になってしまいます。
もちろんWordPressの編集画面でも変わっています。
front_enf_editor_00015_02
 ↓
front_enf_editor_00014_02

◆◆まとめ

なにもまとまっていませんが・・・・・
プラグイン問題は『気を付けましょう!』としか言いようが無いですね(笑)
Crayon Syntax Highlighter 以外のHighlighterプラグインを使えばいいのかも知れませんね。