PCリンクスでは、パソコンの設定・修理から組込み機器の受託開発まで承ります。

 

WordPressの改行問題に対処

WordPressは、世界中でいちばん使われている無償で使用できるブログサイト構築用のソフトウェア(CMS)です。

wp 01 300x214 WordPressの改行問題

使い勝手は最高なのですが、文章の作成に関す仕様で、1点だけ不満な箇所があります。
WordPressで記事を書く場合、下記のような入力方法を選択することができます。

  • ビジュアルエディタのみで記事を作成する。
  • HTMLエディタのみで記事を作成する。
  • ビジュアルエディタとHTMLエディタを両方使用して記事を作成する。

当方は、3番目の方法(ビジュアルエディタとHTMLエディタを併用)で記事を作成しています。
“WordPressの初めての投稿”でも書いたのですが、いまだに、完全に思うように記事を書くことが出きません。
プラグインの組合わせにより、ビジュアルエディタとHTMLエディタを切替えた時、改行が追加されたり、逆に、削除されてしまったりと、なかなか言うことを聞いてくれません! ビジュアルエディタ上で、複数回Enterキーを押してちょうど良い改行間隔にしても、段落(pタグ)に自動整形され、希望通りの改行にはなりません。

いろいろ試行錯誤するうちに、何とか妥協できる設定に落ち着きましたので、その顛末を記述します。
インストールしているプラグインは

  • TinyMCE clear(画像貼り付け時の廻り込みクリア用)
  • WP SyntaxHighlighter(ソースコード貼り付け用)
  • Tiny MCE Advanced(「更新時、pタグとbrタグを削除する/しない」の設定を選択することができます。当方は、ここにチェックを入れて、pタグとbrタグを削除しないようにしています
  • AddQuicktag(よく使うタグを登録しておいて、1クリックで読出しできる)

インストールをあきらめたプラグインは、

  • PS Disable Auto Formatting(WordPressの自動整形を停止)

当方の環境では、TinyMCE clearプラグインをインストールしている関係で、エディタの切り替えで改行が2つ追加されるという不具合が発生しましたので、現在は、このプラグインは使用していません。

ただし、このプラグインを停止すると、WP SyntaxHighlighterが正しく動作しなくなります。
更新ボタンを押すと、ソースコードの改行が削除されて、1行になってしまいます。「あちらを立てると、こちらがたたず」という状態です。仕方が無いので、HTMLエディタ上で、タグ打ちするようにします。(AddQuicktagにタグを登録しておくと、1クリックで読出せますので便利です)

行番号ありの場合は
※brush; bash の部分は、プログラムコードにより変わります。cssのコードならcssに置き換えます。
pre tag 02 WordPressの改行問題

行番号なしの場合は
pre tag 01 WordPressの改行問題

また、以下のルールで改行幅の使い分けを行っています。

  • 通常の文章の改行は、Shift + Enter キーを押す。(brタグが挿入されて、ワードなどと同じ改行幅になる)
  • 文章の見た目を良くするために、広めの改行幅を確保したい場合は、Enter キーを押す。(pタグが挿入される)
  • スタイルシートを変更して、通常の2倍の改行指定を使用できるようにする。(HTMLでクラスを指定して記述する)

このような設定を実施することで、やっと満足できる入力環境となりました。やれやれです。
下表は、ビジュアルエディタで入力時のHTMLコードと実際の表示例になります。
ほぼ、ビジュアルエディタの入力通リに表示させることが出来るようになりました。エディタの切替え動作も問題ありません。ポイントは、「TinyMCE Advanced のオプションにチェックを入れる」ことでした。

br011 WordPressの改行問題

もう少しスマートな対応方法がないものでしょうかね….

以上で、「WoedPressの改行」を終了します。

コメント

コメントを受け付けておりません。