おはようございます！マネジメントオフィスいまむらの今村敦剛です。
WordPressで、iframeタグを使った動画の埋め込みコードをエディタに貼り付けたのですが、なぜか空白行が挿入されるのです。その原因と解決方法について解説します。
iframeタグを使った動画の埋め込みコードをエディタに貼り付けたが、なぜか空白行が挿入される
ぼくのケースでは、vimeoの動画の埋め込みコードを、"ONEPRESS"というテーマでエディタにコピペで貼り付けたのですが、こんな状態になってしまいます。
デベロッパーツールで確認したところ、該当の空白行の部分にbrが連続して3つ入っていました。もちろん、エディタで自分で改行をしたりbrタグを入れた覚えはありません。
結論を言うと、wpautop 関数が原因で不要なbrタグが挿入されたようでした。
wpautop関数が原因で不要なbrタグが挿入されることの解決方法
functions.phpファイルに以下のコードを追加して、自動整形機能を無効化してみます。
注意ポイント
functions.phpの修正は、必ずバックアップを取ってから実行するか、テスト環境で試してから本番環境で実行してください。本記事を参考にfunctions.phpファイルを修正した結果、仮に不具合が生じたとしても、当社は責任を負いかねます。
php /**
* 自動整形機能の無効化
*/
remove_filter('the_content', 'wpautop');
remove_filter('the_excerpt', 'wpautop');
これで無事に解決しました😊
wpautop関数とは何か？なぜこれが悪さをするのか？
wpautop関数は、WordPressのデフォルト機能の一部であり、特定のテーマとかプラグインに関係するものではないようです。に特有のものではありません。この関数は、投稿やページのコンテンツに自動的に<p>タグ段落タグ）や<br>タグ（改行タグ）を追加する役割を持っています。
wpautop関数は記事の作成をする際には便利な機能なんですが、HTMLを細かくコントロールしたい場合や特定のフォーマットを保持したい場合には、不都合を引き起こすことがあるようです。今回も、テキストだと何の問題もなかったのですが、<iframe>タグを使った動画の埋め込みで、勝手に<br>が追加されてしまいました。
wpautop 関数が <iframe> タグ（動画の埋め込みなど）の周りに <br> タグを追加する理由は、主にWordPressのコンテンツ整形処理の仕組みに関係しているようです。wpautop 関数はテキストコンテンツを処理する際、段落(<p>)や改行(<br>)を適切な場所に自動的に挿入しようとします。この処理は、主にプレーンテキストに基づいて行われるため、HTMLタグ（特にブロックレベルの要素）を含むコンテンツでは、予期しない挙動を引き起こすことがあるんだとか。iframeはブロックレベルの要素であり、WordPressの自動整形処理では、これを正しく解釈できないことがあるようですね。結果として、iframeタグの前後に不要な br タグが挿入されることがあるようです。
自動整形機能を無効化するデメリットもあるので要注意
自動整形の無効化すると、通常の記事作成時に、段落タグ<p>や改行タグ<br>が自動的に追加されなくなります。そのため、必要に応じて手動でこれらのタグを追加する必要があります。HTMLの知識が必要となるため、HTMLに関する基本的な理解をもった方でなければ、別の手立てを講じるしかありません（例えばカスタムショートコードを使うなど）