WordPressで連続改行が反映されない、レイアウトが崩れるなどの問題点にぶつかりました(;;)

こんばんは、オカダマキコです。

事務所のデータ共有システムに一部不具合があったようで、昨日から今日まで、サービス部のBさんとサラサラ男子があーでもないこーでもないと試行錯誤しながらがんばってくれていました。

ややこしいのに大変やね…と、ちょっとだけ他人事みたいなこと言ってしまって反省していたのですが、おふたりはそういうシステム系のことは専門業者さんに直してもらって「ハイ直りましたよ!」で終わらせるのではなく、不具合の原因もちゃんと「理解しておきたい」って思うタイプらしいです。

なるほど。それはなんとなくわかる気がします。

自分自身がそのことに関心があって、そこはちゃんと!って思うトコは、不具合の原因もたしかにとことん調べてしまいますね。

まさに、昨夜からついさきほどまでのまきおさんがそうでした。


WordPressのこともゆっくりお勉強できていないまま、時々ブログを更新するだけでいっぱいいっぱいのWordPress初心者🔰まきおさん。

今もなんとなく元気がないのは、ある問題がクリアになっていないからなのです。

(一時的にはなんとかなっても)きちんとしくみを理解してから解決させないと気が済まないのは「そこはちゃんとやりたい」の「そこ」に対してのこだわりと思いがあるからなんですね。

WordPressには自動整形機能というものがあります。

WordPressでブログを更新するとき、まきおさんは基本的にはビジュアルエディタを使用しています。直感的で使いやすいからです。

(下の画面がビジュアルエディタです)

sample_v

で、細かいタグを修正したりコードを埋め込むときだけはテキストエディタを使用します。

(下の画面がテキストエディタです)

sample_t

そうやってエディタを切り替え切り替えしながら更新していると、時々起きるレイアウト崩れ(とくに連続改行)の不具合があります。

いつも「あー、もうなんでなんっ?」って思いながらも、都度なんとかしながら(なんとかなってたので)そこまで深くは考えなかったのですが…

昨夜のブログはまさに、編集するたびにどんどんぐちゃぐちゃになって、何度も何度もテキストエディタで<br>や”&nbsp”を調整をしてみたりするものの、レイアウト崩れは悪化する一方で…ほとほと疲れて、そこでようやくググってみることにしたのです。(先に調べればよかった!)

プラグイン”PS Disable Auto Formatting”を有効にしてみました。

なぜ勝手にHTMLタグが変わってしまうのかというと、その答えは、WordPressの持つ『自動整形』という機能によるためです。自動整形とは、ビジュアルモードとテキストモードを切り替えた時に、<p>や<br>のようなHTMLタグを勝手に除去する機能のことを言います。

自動整形によって、HTMLコードが軽量化されるというメリットがもたらされますが、勝手にHTMLが変わってしまうため、余計なお節介だと感じる人も多いでしょう。

Lifestyle Designer Nozzieさんのブログより

そういうわけだったのですね!!!

ほかの方のブログなども拝見しましたが、やはりWordPressの自動整形機能でお困りの方は、かなりいらっしゃったようです!(Googleで検索してみたらいっぱい出てきました!)

CSSをいじるとか、個別でピクセル指定して行間あけるとか、いろいろと対策は紹介されていましたが…

※コンソールのHTMLエディタに改行ボタンを追加する、っていうのは今度試してみたいです!

今回は多くのブログでオススメされていたプラグイン”PS Disable Auto Formatting”を設定してみました。

すると、改行問題はあっというまに解決!
自動整形されなくするので、ビジュアルエディタで、なんぼでも、思うがままに改行できてしまいます。

あーよかった!

と思っていたらまた問題が…しかもふたつも!!!

  • ビジュアルエディタとテキストエディタの切り替えができなくなってしまった。
  • ブログカードの表示ができなくなり、ただのリンク(URL表示)になってしまった。

※ブログカード機能はSimprisity(テンプレート)に実装されているので、ブログカードのためのプラグインなどは個別に設定していません。

下記のブログなどを参照させていただき、できることはやってみました。

  • WordPressのバージョンアップ
  • TinyMCE Advancedの設定を変更
  • PS Disable Auto Formattingを改造して自動成形機能を使用可能にする

いろいろな事例を知って、見よう見まねでトライしてみることで勉強になって、結果的に新しい知識を得ることになってとてもラッキーだったのですが、今回一番なんとかしたいことは解決することができませんでした。

非常にモヤモヤしていますが、完全に環境がマッチした事例のブログも見つからず、解決に至るまでには、基礎からのお勉強と、そのための長い時間が必要だと感じました。

仕事もあり、家事もあり、今はこれだけに長時間を費やすことはできませんので(モヤモヤはおさまりませんが)きちんと勉強して理解してクリアになるまでは、どちらかを選ぶしかない!と判断しました。

そして選んだのは…

プラグイン”PS Disable Auto Formatting”を無効にしてみました。

プラグイン”PS Disable Auto Formatting”を無効にすることで

  • ビジュアルエディタとテキストエディタの切り替えができるようになりました
  • ブログカードの表示ができるようになりました

これで、間違いなくこのプラグインがなにかと競合しているんだな、と確信できました。
でも「なにか」が全然わからないので…もしこういった事例の解決策をご存じの方、WordPressに関してお詳しい方がおられましたら、ぜひ解決策をご教示ください♡

プラグインを無効にしたことで、また自動整形機能に悩まされる可能性が出てきましたが、連続改行、エディタ切り替えなどをしなければ問題ないかなとも思うので、しばらくはそこは気をつけながら更新していきます♡

wplesson

専門知識もないのに(なんら解決したわけじゃないのに)興奮気味にブログに書いてしまいました。
なんのお役にも立てない記事ですが、自分の記録として残したいので書きました。が、もし検索してヒットしたことで、この記事に期待してアクセスされた方がおられたらごめんなさい。

また、もしWordPressをお勉強するにあたり、コレいいよ!っていう書籍やサイト、YouTubeチャンネルなどをご存じの方がいらっしゃいましたら、ぜひぜひ初心者まきおさんにご教示くださいませ♡

Twitterなら@fs_okadamakiko へDMまたは@ツイートくださいませ。
Facebookならメッセンジャーからお願いします。

よろしくお願いいたします♡


The following two tabs change content below.
オカダマキコ
40歳で初の自動車業界へ転職。主にマーケティングとロジスティックを担当しています。ほぼ年下の先輩方のご指導のもと、楽しく「くるま屋さん四年生」やってます♡プライベートではふたりの息子&ミニチュアピンシャーの女の子と一緒に大阪の東のほうで暮らしています。シングルマザー歴17年超。プロフィールはこちら