ホーム > 投稿記事 > 見えないところも美しく!?WordPressソースビューを美しくしてみた

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

投稿日 : 2017年08月29日   更新日 : 2019年10月04日
カテゴリー : WordPress
見えないところも美しく!?WordPressソースビューを美しくしてみたの画像

こんにちわ、PHPエンジニアのエンジニア婦人(@naho_osada)です。
私はPHPエンジニアとして6年~の経験があります。WordPressは2年~の経験があります。
ここでは主に過去に納品した案件や自サイト運営(エンジニア婦人ノート)で遭遇したことについて書いています。

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

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

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

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

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

整形の記述方法

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

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

// 上略
// header.phpの終わりのあたり
// header.phpここまで
// 中身のページ部分 page.phpなど
  • タグの位置に気を付けながら記述するとそのままソースに反映される
  • 途中でphpの処理がある場合は左寄せでphpタグをスタートさせる
上記とタグの開始位置を揃えるときれいに出力される
// 中身ページここまで // footer.phpの開始 // 終わりの位置を揃えて書き始める // 以下略

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

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

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

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

まとめ

  • ソースを綺麗にしておくと問題が起こったときに特定が速くなるかもしれないよ
  • WordPressの自動出力部分は難しいけれど、テーマファイル内などで自分で書くところはきれいに見せることもできるよ
  • 見えないところも美しく!

作成者側の自己満足の部分も大きいと思いますが、企業のサイトは一人だけが作って公開され、その後誰も触らないということはまずありません。

それまでの経緯を知らない人が触るときに、いかに見やすく書かれているかで作業工数を削減できてしまうこともあります。

出力結果はどうやって書こうと同じです。

それでも実作業者である私たちは、意識して「可読性の高い美しいコード」を残していきたいものですね。

楽しい物造りを

NaoLight

自分のブログやサイトを、楽しく作ってもらえたら。

プログラムを使って望み通りに、拡張しやすく、自分の思うように。

できたときに、すごく楽しい!と思ったら。

控えめに言って、「最高です」。

NaoLight -NAOT-(なおらいと、なおと、と呼んでください)はそんな思いをカタチにする、WordPressのテーマです。

ご購入はこちらからお願いします(BOOTHへ移動します)。

Nao Light-NAOT-公式サイト



この記事にコメントする

入力エリアすべてが必須項目です。承認制のため、表示までに時間がかかる場合があります。

CAPTCHA


内容を確認の上、コメントをお願いします。