WordPress オリジナルテーマを作ってみよう：② index.php を4つに分ける
2021年08月28日
②では前回作成した index.php を4つのファイルに分けていきます。
分ける前に、 控えとして index.php をコピーして違う名前で保存しておいてください。
header.phpを作る
index.php の下記の部分を切り取り、新しく header.php を作ります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div class="header">
header
</div>sidebar.phpを作る
index.php の下記の部分を切り取り、新しく sidebar.php を作ります。
<div class="side">
side
</div>footer.phpを作る
index.php の下記の部分を切り取り、新しく footer.php を作ります。
<div class="footer">
footer
</div>
</body>
</html>index.php
index.php は下記だけが残ります。
<div class="main">
main
</div>ファイル構成の確認
ここまでで作成したファイルは下図になります。
足りないファイルがあったら作成しましょう。
テーマを有効化してプレビューしてみる
外観で、オリジナルテーマを有効化します。
Wordpressでは、様々なファイルを読み込む順番がありますが、今回作ったファイルの中では index.php を最初に読み込みます。
その中にある文字が「main」しかないので、プレビューでは main が表示されます。
まとめ
以上で、index.php を4つに分ける方法は終わりです。
index.php の各部分を切り取って
- header.php
- sidebar.php
- index.php
- footer.php
に分ける、だけですね。
次は、header.php と footer.php にWordPress用のコードを加えていき、index.php を完成させます。
PHPのコードが出てきますが、最小限のプログラムなので 自身のテンプレートとして保存しておくといいと思います。
最終更新日:2023/07/20