WordPress の header をキレイに整える荒技

2015年1月27日

WordPress で テーマを Simplicity1.4.4 にバージョンアップしたら、
一部の Javascript が動作しないという現象が発生した。

header 内の Javascript の読み込み順序が変わって、
JQuery の読み込みが後回しになってるのが原因だった。

だが、これを機に、
以前からやろうと思っていた、

WordPress の header をキレイに整える荒技

を使うことにした。

とどのつまり、
Wordpress では、テーマやプラグインが、それぞれに
meta、link、javascript のタグをバラバラに読み込むので、
これを、キレイに整えようというわけだ。

この技を使う場合の注意点

  • この技は、Wordpress テーマの大半で使えるが、使えないテーマもあるかもしれません。
  • ハッキリ言って「荒技」に相当するものなので、
    もし、やる場合は自己責任でお願いします。
  • この技を使っても、HTMLソースの見た目が見やすくなるというだけで、
    それ以外の利点は全くありません。
  • おいらが WordPress をいじってる間に、
    ふと思いついただけのテクニックなので突っ込み不要。

実際にやってみる

functions.php に以下を追加するだけです。

add_action( 'template_redirect', 'get_header_thk', 99 );

function get_header_thk() {
    if( is_feed() ) { return; }

    ob_start();
    get_header();
    $head = ob_get_contents();
    ob_end_clean();

    // link の記述を一カ所にまとめる
    preg_match_all( "/<link [^>]+?>/s", $head, $rel_array );
    $head = preg_replace( "/<link [^>]+?>/s", "", $head );
    foreach( array_unique( $rel_array[0] ) as $rel ) {
        $head = str_replace( "</head>", $rel . "\n</head>", $head );
    }

    // style の記述を一カ所にまとめる
    preg_match_all( "/<style.+?<\/style>/s", $head, $style_array );
    $head = preg_replace( "/<style .+?<\/style>/s", "", $head );
    foreach( array_unique( $style_array[0] ) as $style ) {
        $head = str_replace( "</head>", $style . "\n</head>", $head );
    }

    // script を一カ所にまとめる
    preg_match_all( "/<script.+?<\/script>/s", $head, $script_array );
    $head = preg_replace( "/<script .+?<\/script>/s", "", $head );
    foreach( array_unique( $script_array[0] ) as $key => $script ) {
        // jquery を優先して先に表示させる
        if( stristr( $script, "jquery" ) ) {
            $head = str_replace( "</head>", $script . "\n</head>", $head );
            unset( $script_array[0][$key] );
        }
    }
    foreach( array_unique( $script_array[0] ) as $script ) {
        $head = str_replace( "</head>", $script . "\n</head>", $head );
    }

    // 連続改行やタブ等を削除
    $head = str_replace( "'", '"', $head );
    $head = str_replace( array("\r\n","\r"), "\n", $head );
    $head = str_replace( "\t", "", $head );
    $head = preg_replace( "/<!-- .+? -->/", "", $head );
    $head = preg_replace( "/\n\s+</", "\n<", $head );
    $head = preg_replace( "/>\s+\n/", ">\n", $head );
    $head = preg_replace( "/\n+/", "\n", $head );

    echo $head;
}

2015/01/26 追記： ちょこっと修正。style も一カ所にまとめるようにしました
2015/01/27 追記： 重大なバグ修正。
Feed でもヘッダー出力するバグがあったので、4行目に Feed の場合は何もしない処理を追加

特に肝になる部分は、1行目と、6行目から9行目。

本来なら、get_header は、header.php を呼ぶだけなので、
add_filter 等を使っても、いじれないのだが、
それを、ob_get_contents で、無理矢理かすめ取ってしまうこと。

結果

上記のコードを function.php に追加すると
どーなるかと言うと

例えば ↓ このような HEADER であれば

<html lang="ja">
<head>
    <title>タイトル</title>
    <meta name="description" content="サイトの説明" />
    <link rel="stylesheet" href="aaa.css">
    <meta name="viewport" content="maximum-scale=1, user-scalable=yes" />
<link rel="stylesheet" href="bbb.css" />
<script type="text/javascript" src="./111.js"></script>
<link rel="alternate" type="application/rss+xml" title="Feed" href="https://thk.kanzae.net/feed/" />
<link rel='stylesheet' href='./ccc.css' type='text/css' media='all' />
<link rel='stylesheet' href='./ddd.css' type='text/css' media='all' />
<script type='text/javascript' src='./jquery.js'></script>
<script type='text/javascript' src='./jquery-migrate.min.js'></script>
<script type='text/javascript' src='./222.js'></script>
</head>

↓ こんな感じに、HTML ソースが見やすくなります。

上との違いは

  • link、javascript などのタグが一塊になった
  • 余計な連続改行やタブ・行頭空白・行末空白も削除
  • クォートをダブルクォートに統一

そんだけです (･ω･｀)

<html lang="ja">
<head>
<title>タイトル</title>
<meta name="description" content="サイトの説明" />
<meta name="viewport" content="maximum-scale=1, user-scalable=yes" />
<link rel="stylesheet" href="aaa.css" />
<link rel="stylesheet" href="bbb.css" />
<link rel="alternate" type="application/rss+xml" title="Feed" href="https://thk.kanzae.net/feed/" />
<link rel="stylesheet" href="./ccc.css" type="text/css" media="all" />
<link rel="stylesheet" href="./ddd.css" type="text/css" media="all" />
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript" src="./jquery-migrate.min.js"></script>
<script type="text/javascript" src="./111.js"></script>
<script type="text/javascript" src="./222.js"></script>
</head>

実はいろんな用途に使える

PHP が分かるなら
str_replace や preg_replace でヘッダー内の文字列を置換したり
この技を使うと、実はいろんなことができたりします。

まぁ、Wordpress の場合、
add_filter や add_action で、大抵のことは出来ますが、
こんな荒技も使ってみました。

WordPress

Posted by るな