【PR】を含みます。

WordPress

【WordPress】HTMLタグの末尾のスラッシュを削除する方法

WordPress　HTMLタグの末尾のスラッシュを削除する方法

WordPressでテーマやプラグインをカスタマイズしていると、HTMLタグの末尾にスラッシュ（/）が付いているのが気になることはありませんか？

たとえば<br />や<img src="..." />のようなタグです。

これはXHTMLの書き方に準拠していた時代の名残で、「HTML5」や「HTML Living Standard」ではスラッシュが不要になりました。

この記事では、WordPressで出力される自己終了タグ（self-closing tag）のスラッシュを削除する方法について解説します。

WordPressでよく見かける自己終了タグ

WordPressでは、以下のようにタグの末尾にスラッシュが付いて出力されることがあります。

  • <img />
  • <br />
  • <input />
  • <meta />
  • <link />

このような書き方はXHTML時代の名残で、XHTMLでは空要素の最後にスラッシュを付けるというルールがありました。

しかし、現在のHTML規格である「HTML Living Standard」では自己終了タグの末尾にスラッシュを書く必要はありません。

仮に末尾にスラッシュを書いた場合、「HTML5」や「HTML Living Standard」ではスラッシュ部分を存在しないものとして無視する仕様になっています。

余談ですが、W3CバリデーションでHTMLをチェックすると、以前はWarningエラーとなっていました。

現在はWarningエラーではなく、以下のようなInfoになっています。

Info: Trailing slash on void elements has no effect and interacts badly with unquoted attribute values.
Info: Trailing slash on void elements has no effect and interacts badly with unquoted attribute values

【実装コード】WordPressの末尾のスラッシュを削除する

以下のような理由から、出力バッファリングでHTML全体のスラッシュを出力前に削除する方法を採用しています。

  • テーマ自体に直接記載されている末尾のスラッシュを削除したい
  • プラグインが出力するHTMLの末尾のスラッシュを削除したい
  • 一括で削除したい

テーマのfunctions.phpに以下コードを記述することで、ページ全体のテキストを対象にスラッシュを削除できます。

正規表現部分（/\s*\/>/）は、スラッシュの前のスペースあり・なしに両対応するようにしています。

Copyをクリックするとコピーできます。

PHP
Copy
/*********************************
 自己終了タグのスラッシュを削除
**********************************/
function clean_html_self_closing_tags() {
  if ( is_single() || is_page() || is_archive() ) {
    ob_start( function( $buffer ) {
      return preg_replace( '/\s*\/>/', '>', $buffer );
    } );
  }
}
add_action( 'template_redirect', 'clean_html_self_closing_tags' );

clean_html_self_closing_tags関数のコード解説

実際に使っているコードの中身を詳しく解説します。

① template_redirect フックに登録

add_action( 'template_redirect', 'clean_html_self_closing_tags' );

WordPressがテンプレートを読み込む直前のタイミングでこの関数を実行しています。

この段階で出力バッファリングを開始して、画面に出力する前のHTML全体を加工できる状態にしています。

② 対象ページの条件を指定

if ( is_single() || is_page() || is_archive() ) {

この処理は以下のページだけを対象に実行されます。

  • 投稿ページ（is_single()）
  • 固定ページ（is_page()）
  • アーカイブページ（is_archive()）

管理画面やRSSフィードには影響しないようにしています。

必要に応じてさらに条件を追加することも可能です。

③ 出力バッファリングの開始

ob_start( function( $buffer ) { ... }

出力バッファリングを開始することで、画面に表示される前のHTML全体が$bufferに溜まります。

このバッファを対象に正規表現で文字列置換を行い、スラッシュを削除します。

④ 正規表現でスラッシュ削除

preg_replace( '/\s*\/>/', '>', $buffer );

今回の正規表現は非常にシンプルです。

/>をスラッシュ無しの>に置き換えます。

  • \s*\/>

    スラッシュ直前の空白（あってもなくてもOK）とスラッシュ+閉じタグ

たとえば以下のようなタグ：

<img src="example.jpg" alt="sample" />

が、以下のように変換されます：

<img src="example.jpg" alt="sample">

clean_html_self_closing_tags関数の注意事項

  • RSSやAtomフィードなど、XHTML互換が求められるコンテンツではスラッシュが必要

    今回紹介したコードでは、投稿ページ、固定ページ、アーカイブページを対象に末尾のスラッシュを削除しています。

  • 意図しない出力も置換対象になる可能性がある

    今回紹介したコードの場合、全ての/>にマッチするので、場合によっては意図しないHTMLに直接記載されているコード（JS, SVG, XML内など）を置換してしまう可能性 があります。

    正規表現部分を以下のように変更することで、置換対象のタグを指定することも可能です。

    preg_replace( '/<(br|img|input|meta|link)([^>]*?)\s*\/>/', '<$1$2>', $buffer );

まとめ

WordPressのHTML出力には、XHTML時代の名残で末尾のスラッシュが含まれることがありますが、「HTML5」や「HTML Living Standard」では不要です。

今回はバッファ処理で一括削除する方法を解説しましたが、フィルター機能を利用したり、正規表現を工夫することで特定のタグのみを対象にすることも可能です。

カスタマイズの目的やサイトへの影響範囲を考慮しながら、自分に合った方法を選びましょう。

-WordPress
-, ,