ジーニアスブログ – WEB制作会社ジーニアスウェブのお役立ちブログ

htmlをwordpress化した際に改行されてしまう問題の対策


川島です。ワールドカップで日本が負けたことにまだ立ち直れていません。しかし若手世代には久保選手、堂安選手、中島選手など多くのスター候補がいるのでもう次のワールドカップが気になっているのも事実です。
今後の日本代表に期待が膨らみますね!

先日大阪本社での研修に参加させていただき、ワードプレスについて初めて学ばさせていただきました。以前課題でhtmlで作ったlpサイトをワードプレス化するといった内容でした。
しかし、そこで問題が発生してしまいその際の対策について教えて頂いたので、そのことについて今回は触れさせていただければと思います。

htmlをwordpress化していたら勝手に改行されてしまった!

それでは表題にもある問題について触れていきたいと思います。

以前取り組まさせていただいた課題で作ったlpのお問い合わせフォームになります。今回はこれをワードプレス化して別のページでお問い合わせフォームが開くようにする内容でした。
教えて頂いた手順に沿っていざ取り組んでみると・・・

なんてことでしょう・・・cssはおそらく効いているとは思うのですが、勝手に改行されてチェックボックスやラジオボタンが縦並びになり、各項目ごとにあった余白も消え、詰まっている状態になってしまいました。ソースを見てみると勝手に見たことのないbrタグが付いている・・・
自分で試行錯誤するも分からず、大阪の方に助けを求めることでようやく解決することができました!

原因は「wpautop()」という関数

解決していただいた先輩方に教えて頂いたり、調べているとどうやらワードプレス内にあるformatting.phpの中に記述してある「wpautop()」という関数によってこの現象が起きていることがわかりました。

どういう関数か調べたところ、ビジュアルエディタで入力した際に自動で調整してpタグやbrタグを入れてくれる役割を持つ関数でした。これがあるために勝手にbrタグが入ってしまうような現象になっってしまいました。
ではどうやって解決するか?その方法について解説していきます。

「remove_filter()」を使って「wpautop()」を打ち消してみる

解決方法といたしましては、functions.phpを作り、その中に「remove_filter()」を記述します。
そうすることにより、「wpautop()」を打ち消してくれます!

functions.phpに記述していきたいと思います。

<?php

remove_filter('the_content', 'wpautop');
remove_filter('the_excerpt', 'wpautop');


?>

各記述についてですが
remove_filter(‘the_content’, ‘wpautop’); ←記事の自動整形を無効にする
remove_filter(‘the_excerpt’, ‘wpautop’); ←抜粋の自動整形を無効にする

という意味です。

これを早速同じサーバーにあげ、ページを確認してみると・・・

元通りにすることができました!!良かったです。

最後に

今回の記事ではhtmlをワードプレス化する際の自動的に修正されてしまう問題について触れました。

普段ワードプレスを触っている方には当たり前の内容だったかもしれませんが、htmlのソースに何か不審な点がないか調べたりcssを見直したりと自分にとっては大変な作業になりました。
今回研修で学んだことを忘れないためにも今回ブログに書かせていただきました。

ありがとうございました。