Wordpress開発に必須ではありませんが、小ネタです。
日々サイトの開発を行う方は、右クリックからのソースを表示、またはコンソールからDOMを確認するのは日常茶飯事だと思います。
コンソールからはともかく、ソースを表示する場合、WordPressサイトのソースは、結構崩れてることが多くあります。
WordPressで自動出力されているところはどうにもなりませんが、HTML内の動的に出力させるところはある程度なんとかできます。
今回は「表だけではない。見えないところも美しく！」をコンセプトを実現するべく、ソースの書き方を工夫しました。
PR
整形の記述方法
- header.phpから次のファイル（固定ページならpage.php、投稿ページならsingle.phpなど）に移動するときのタグの位置を合わせる。
- 同じようにfooter.phpに移動する部分もタグ記述位置を合わせる。
例えばこういうことです。
// 上略
// header.phpの終わりのあたり
// header.phpここまで
// 中身のページ部分 page.phpなど
- タグの位置に気を付けながら記述するとそのままソースに反映される
- 途中でphpの処理がある場合は左寄せでphpタグをスタートさせる
上記とタグの開始位置を揃えるときれいに出力される
// 中身ページここまで
// footer.phpの開始
// 終わりの位置を揃えて書き始める
// 以下略
これを行うだけで、随分ときれいなソースが出力されます。
近頃はコンソールから確認することも多くなりましたが、全体を見渡したいときはソースを表示することも多いと思います。
綺麗にしておくと問題が起こっている箇所の特定が速くできます。あまりきれいでないと見辛く、発見が遅れてしまうことがあります。
そのときにガタガタのコードになっていないように、注意しておきたいところですね。
まとめ
- ソースを綺麗にしておくと問題が起こったときに特定が速くなるかもしれないよ
- WordPressの自動出力部分は難しいけれど、テーマファイル内などで自分で書くところはきれいに見せることもできるよ
- 見えないところも美しく！
作成者側の自己満足の部分も大きいと思いますが、企業のサイトは一人だけが作って公開され、その後誰も触らないということはまずありません。
それまでの経緯を知らない人が触るときに、いかに見やすく書かれているかで作業工数を削減できてしまうこともあります。
出力結果はどうやって書こうと同じです。
それでも実作業者である私たちは、意識して「可読性の高い美しいコード」を残していきたいものですね。
