見えないところも美しく！？WordPressソースビューを美しくしてみた

こんにちわ、PHPエンジニアのエンジニア婦人（@naho_osada）です。
PHPエンジニアとして9年～の経験があります。

WordPress開発に必須ではありませんが、小ネタです。

日々サイトの開発を行う方は、右クリックからのソースを表示、またはコンソールからDOMを確認するのは日常茶飯事だと思います。

コンソールからはともかく、ソースを表示する場合、WordPressサイトのソースは、結構崩れてることが多くあります。

WordPressで自動出力されているところはどうにもなりませんが、HTML内の動的に出力させるところはある程度なんとかできます。

今回は「表だけではない。見えないところも美しく！」をコンセプトを実現するべく、ソースの書き方を工夫しました。

整形の記述方法

header.phpから次のファイル（固定ページならpage.php、投稿ページならsingle.phpなど）に移動するときのタグの位置を合わせる。
同じようにfooter.phpに移動する部分もタグ記述位置を合わせる。

例えばこういうことです。

// 上略
// header.phpの終わりのあたり
<div id="main">// header.phpここまで</div>

// 中身のページ部分 page.phpなど
    <div id="primary">
        <ul>
            <li>タグの位置に気を付けながら記述するとそのままソースに反映される</li>
            <li>途中でphpの処理がある場合は左寄せでphpタグをスタートさせる</li>
        </ul>
<!--?php 
    // 例えばここからif文だとする
    // トップページの時、指定のHTMLタグを出す
    if(is_front_page()) {
?--> 上記とタグの開始位置を揃えるときれいに出力される</div>
// 中身ページここまで

// footer.phpの開始
    // 終わりの位置を揃えて書き始める
// 以下略

これを行うだけで、随分ときれいなソースが出力されます。

近頃はコンソールから確認することも多くなりましたが、全体を見渡したいときはソースを表示することも多いと思います。

綺麗にしておくと問題が起こっている箇所の特定が速くできます。あまりきれいでないと見辛く、発見が遅れてしまうことがあります。

そのときにガタガタのコードになっていないように、注意しておきたいところですね。