【HTMLサイトをWordPress化しよう】④ファイル分割編

最終更新日

|

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タグ以降がフッターになります。

基本的な分割の考え方は上記の通りです。

それでは、ヘッダーから順に作成していきます。

次の記事 >

< 前の記事

現場レベルのスキルを身につけたい方へ

現場レベルのコーディングスキルを身につけたい方は、書籍『HTML&CSS Webデザイン 現場レベルのコーディング・スキルが身につく実践入門』(出版社:技術評論社)がおすすめです。

本書は、入門編から実践編の6つのWebサイト制作を通して、現場で必要なコーディングスキルをステップアップしながら1冊で身につけていきます。

  • 第1章【入門編】プロフィールサイト〜フレックスボックス
  • 第2章【初級編】ブランドサイト〜ポジション
  • 第3章【中級編】サービスサイト〜複数ページ
  • 第4章【上級編】カフェサイト〜複数レイアウト
  • 第5章【応用編】ランディングページ〜動きのあるWebサイト
  • 第6章【実践編】コーポレートサイト〜実務を想定したWebサイト制作

現場レベルのコーディングスキルを身につけたい方は、こちらの書籍を一通り学習した後、Codejumpの練習課題に取り組むと効率良く学習できます。

Codejump

著者:Codejump運営者

X
将来Web業界での活躍を目指す人のために、お役立ち情報や学習コンテンツを発信していきます。
運営者情報

HTMLサイトをWordPress化しよう

関連記事