Wordpressカスタマイズ備忘録04 - 拡張性の向上

現在の文書構造であれば、2カラムのレイアウトは簡単に作れます。しかし今後、3カラムにしたり、ページ全体の幅をリキッドレイアウトやエラスティックレイアウトにするときに簡単にできるように少し手を加えておきます。 まず、全体の構成図を次のように変更します。 ...

現在の文書構造であれば、2カラムのレイアウトは簡単に作れます。しかし今後、3カラムにしたり、ページ全体の幅をリキッドレイアウトやエラスティックレイアウトにするときに簡単にできるように少し手を加えておきます。

まず、全体の構成図を次のように変更します。

カスタマイズしやすいように変更した構成図PDF(46KB)

  1. header.phpの最後の方の<div id="content">の手前に次の1行を挿入する。
    <div id="container">
  2. header.phpの<div id="content">を次のように変更する。
    <div id="primaryContent">
  3. sidebar.phpの最初に次の3行を挿入し直後を1行開ける。
    <div id="secondaryContent">
    <h2>スポンサードリンク</h2>
    <p>ここにSecondary Contentの内容を表示します。</p>
    </div><!-- /secondaryContent -->
  4. footer.phpの2行目を次のように変更する。
    </div><!-- /primaryContent-->
  5. footer.phpの6行目・7行目として次の2行を挿入し、直後を改行する。
    </div><!-- /container -->
    <div id="footer">
  6. footer.phpの</body>の直前に次の1行を挿入する。
    </div><!-- /footer -->

変更したファイルをアップして終了です。

Published 2007-10-28
Updated 2019-06-25