TOP

今回PHPの練習をするにあたっての準備もろもろを記載します。

  • 今回のPHPの練習はワードプレスでのテーマ作成や既存テンプレートのプログラム側からのカスタマイズを行うにあたってのPHPプログラミングの基本的な部分を行っていきます。
  • 通常のPHP講座とは重点レベルが違ってきますが、足りないとかんじた部分はご自身で学習を重ねてください。
  • 教材は、このブログと講義時間の話しかないので、各自ノートなりブログへの投稿なりを行いつつ忘れないようにしてください。

準備

まずは、PHP用の練習ファイルを作りましょう! → DEMO(IE未対応)

絶対条件

  • index.phpは必ずつくりましょう!
  • サイトとして機能するようにしましょう!

必要条件

元となるPHPファイルをつくりましょう!

  • 下記first.phpの見本を参考にしてください。
  • first.phpのソースとなります。これを元にindex.phpを作成してく作業となりますが、それは後ほど。
  • sectionを作成して、練習結果を表示するスペースは必ず作成しましょう!!
  • HTML5をクロスブラウザー対応にできるようにしておきましょう!
  • ここまでのフォルダ構成
    • php_p(今回のルートフォルダ)
      • first.php

style.cssを作りましょう!!

  • ワードプレスを意識しますので、下記のようにしましょう。
  • style.cssは今回は@importのみのファイルにしていきます。呼び出すファイル名は任意でかまいません。実際のCSSルールを記述するCSSファイルは、ルートフォルダ配下に作成しましょう!
  • ここまでのフォルダ構成
    • php_p(ルートフォルダ)
      • first.php(必須)
      • style.css(必須)
      • common_cssフォルダ(名前は任意)

 

jQueryを使用できるようにしておきましょう。

  •     googleapiを利用してjqueryを使用できるようにしておきましょう。(下記は見本に記述済み)

jsフォルダも作っておきましょう。

  • HTML5をクロスブラウザ対応にしておきましょう。(コード部分は見本に記述済み)
    • html5shiv.jsをダウンロードしおきましょう。 → ダウンロードサイト(公式)
    • jsフォルダを作成しhtml5shiv.jsを格納しておきましょう。
  • ここまでのフォルダ構成
    • php_pフォルダ
      • first.php
      • style.css
      • common_cssフォルダ
        • nomalize.css
        • common.css
      • jsフォルダ
        • html5shiv.js

レイアウトやデザインをしましょう(自由課題)

私の見本を下記に示します。レイアウトに関しては、絶対条件・必要条件をみたしていれば、ご自由に。

  • common.css
    • 記述中のbehavior: url(PIE.htc);  とは、CSS3をIE対応させるためのCSS3 PIE: CSS3 decorations for IEを使用するためのものです。box-shadowは対応しますが、insetには対応していないようです。必要のな方はリンクよりダウンロードしてお使いください。
  • autoHeight.js
    • コンテンツの中身がすくなくてもフッターを常にウインドウの下部に来るように制御するjQueryプラグインです。必要ならお使いください。→autoHeight.js DL
    • 使用方法は下記のとおり(私は、drive.jsというファイルの中で記述しています。)
    • ヘッダー(見本の場合はナビ部分をヘッダから外に出していますので、ナビ部分を足しています)の高さとフッタの高さをオプションで渡すと、コンテンツ表示領域を自動的に調整してフッタ部分がウインドウの下部にくるようにします。
    • autoHeight.jsとdrive.jsをフッターに記述している理由は、jQuery系のファイルをロードする場合はHTMLファイルの最後の方で行うとレスポンスが早くなるからです。

準備は以上です!!