ワードプレスサイトで、HTMLの不要な改行とスペースを削除する方法を紹介します。
記事本文だけでなく、出力するHTML全体を書き換えます。
できることは次の4つ。
- 行頭・行末のスペースを削除する
- 行頭・行末のタブを削除する
- 改行だけの行を削除する
- HTMLタグ直後の改行を削除する
- 連続するスペース・タブを一つにまとめる
functions.phpにコードをコピペすればOKです。
改行とスペースを削除するコード
functions.phpに貼り付けるコードはこちらです。
//管理画面なら何もしない
if(is_admin()){
return $buffer;
}
//行頭行末のスペース・タブ、及び改行だけの行を削除
$buffer = preg_replace('/(^[\s\t]+|[\s\t]+$|^\n)/mu', '', $buffer);
//HTMLタグ直後の改行を削除
$buffer = preg_replace('/>\n/mu', '>', $buffer);
//連続するスペース・タブを一つにまとめる
$buffer = preg_replace('/[\s\t]{2,}/u', ' ', $buffer);
return $buffer;
}
function my_rep_br_start() { ob_start("my_rep_br"); }
function my_rep_br_end() { ob_end_flush(); }
add_action('after_setup_theme', 'my_rep_br_start');
add_action('shutdown', 'my_rep_br_end');
コードのポイント
出力するHTMLを書き換えるために、after_setup_theme
とshutdown
にフックさせています。
このテクニックは、ワードプレスドクターさんの記事を参考にさせてもらいました。
このやり方はとても便利で、応用範囲が広いです。
例えば、AMPページ。
内部リンクのリンク先をすべてAMP用ページに書き換えるなんてこともできます。
コメントの削除について
コメント部分を削除する場合は少し複雑です。
例えば、IE対策に条件付きコメントを書いている場合。
<script src="https://sota-jp.com/wp-content/uploads/js/html5shiv/html5shiv.min.js"></script>
<![endif]–>
上手くやらないと、せっかく書いた条件付きコメントが全部消えてしまいます。
それと、コメント内にjavascriptやcssを書いている場合も同じです。
<!–
h1 { color: red; }
–>
</style>
以上のことを踏まえて、なかば強引にコメントを削除するとしたら、次の条件でプログラムを組む方法が考えられます。
- “[“を含むコメントは削除しない。
- “;”を含むコメントは削除しない。
コードは、こうなります。
$buffer = preg_replace_callback(
'/<!–.*?–>/su',
function ($matches){
//コメントに';'もしくは'['が含まれる場合は削除しない
if(strpos($matches[0], ';') !== false || strpos($matches[0], '[') !== false){
return $matches[0];
}else{
return '';
}
},
$buffer
);
最後に
今回紹介したプログラムは正規表現を多用しているので、サーバーへの負荷が気になりますよね。
そういう場合は、キャッシュを上手に活用することをおすすめします。
僕が使っているWPXクラウドでは、サーバー側で自動でキャッシュの設定をしてくれるので、難しいことを考えなくても適切に負荷を減らしてくれます。
料金も安く、月々500円から使えます。
オススメのレンタルサーバーですよ。