【HTMLサイトをWordPress化しよう】④ファイル分割編
HTMLのコーディングスキルだけでも案件はとれます。
大事なのはスキルの幅ではなく経験と実績です。未経験から実務で “通用する人としない人の違い” をまとめた無料メール講座を用意しました。
さらに、特典PDFとして、『コーディング中級者が案件獲得前にやるべきこと8選』をプレゼント中です。
HTMLサイトをWordPress化する際に、最初に行うのが「index.html」からヘッダーとフッターを分割する作業です。
HTMLサイトでは、ヘッダーやフッターを1つのファイルで記述しますが、WordPressでは、ヘッダーは「haader.php」、フッターは「footer.php」とそれぞれ別のパーツで管理します。
そのため、まず始めに「index.html」の中身をヘッダーとフッターに分割します。
index.htmlの分割
「index.html」の中身を下記の通り、ヘッダーとフッターに分割します。
ヘッダー(header.php)
<!DOCTYPE html><html lang=”ja”>
<head>
~
</head>
<body>
<header>
~
</header>
中身のコンテンツ
- ヘッダー(header.php)
- headとheaderタグがヘッダーになります。
- フッター(footer.php)
- footerタグ以降がフッターになります。
基本的な分割の考え方は上記の通りです。
それでは、ヘッダーから順に作成していきます。
次の記事 >
< 前の記事
コーディングを仕事にしていきたい方へ
Codejump Proでは、実際の案件をモデルにした仮想案件で実務レベルのスキルと経験を身につけていきます。
- ポートフォリオに載せる実績がない・・・
- 実務経験がゼロ・・・
- 案件獲得に不安がある・・・
1つでも当てはまる場合は、今すぐ実務レベルの案件をスタートしてみてください。
模写の次に何を学ぶべきか迷っていませんか?
以下のようなお悩みに1つでも当てはまる場合、無料のメール講座をお受け取りください。
- 模写はできるようになってきたけど、実務に通用するか不安
- ポートフォリオに悩んでいる・載せる実績がない
- 案件に挑戦したいけど、自信がなくて一歩踏み出せない
今登録すると、特典PDFとして、『コーディング中級者が案件獲得前にやるべきこと8選』をプレゼント中です。
現場レベルのスキルを身につけたい方へ
現場レベルのコーディングスキルを身につけたい方は、書籍『HTML&CSS Webデザイン 現場レベルのコーディング・スキルが身につく実践入門』(出版社:技術評論社)がおすすめです。
本書は、入門編から実践編の6つのWebサイト制作を通して、現場で必要なコーディングスキルをステップアップしながら1冊で身につけていきます。
- 第1章【入門編】プロフィールサイト〜フレックスボックス
- 第2章【初級編】ブランドサイト〜ポジション
- 第3章【中級編】サービスサイト〜複数ページ
- 第4章【上級編】カフェサイト〜複数レイアウト
- 第5章【応用編】ランディングページ〜動きのあるWebサイト
- 第6章【実践編】コーポレートサイト〜実務を想定したWebサイト制作
現場レベルのコーディングスキルを身につけたい方は、こちらの書籍を一通り学習した後、Codejumpの練習課題に取り組むと効率良く学習できます。



