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

投稿日 : 2017年08月29日   更新日 : 2020年05月24日
カテゴリー : 技術情報 / Wordpress
見えないところも美しく!?WordPressソースビューを美しくしてみたの画像

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

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

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

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

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

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

整形の記述方法

  1. header.phpから次のファイル(固定ページならpage.php、投稿ページならsingle.phpなど)に移動するときのタグの位置を合わせる。
  2. 同じように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の開始
    // 終わりの位置を揃えて書き始める
// 以下略

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

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

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

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

まとめ

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

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

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

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

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

ソースレビュー企画-私にソースレビューをさせてください!-

皆様のプログラムのソースを、私に読ませてください!

ソースレビュー企画-私にソースレビューをさせてください!-

プログラムを勉強し始めたばかりの方から、業界云十年のベテランの方でも大歓迎です!どんなソースでもありがたく拝見します!

※無料です

ソースレビュー企画-私にソースレビューをさせてください!-の詳細、お申し込みはこちらからお願いします。

運営サイト紹介

みんなのきょうのごはん-みんごは-

みんなのきょうのごはん-みんごは-

「みんなのきょうのごはん-みんごは-」きょうのみんなのごはんは?Twitterに投稿された美味しそうな「食べ物」画像を、リアルタイムで表示します。

みんごははここからアクセスしてね !

その他広告