最初に「どんなサイトにするか」を決めておくと、必要なファイルが自然と決まります。
この記事では、3つの選択で、自分のサイトに必要なファイル一覧が見えてくる流れを解説します。
📌 前回の記事で「4つのファイル(土台)」を用意しました。
今回はそこからさらに、サイトの形に合わせてファイルを追加していきます。
3つの選択をする
まず、自分のサイトについて3つの質問に答えてみましょう。
答えが決まると、必要なファイルが自動的に絞られます。
選択① トップページは何を表示する?
WordPressには最初から「どちらにするか」を選ぶ設定があります。
🗞️
ブログ型
最新記事の一覧が並ぶ
ブログ・日記・情報発信サイト
🏠
ホームページ型
自分でデザインした固定ページ
企業・ポートフォリオ・ブログ複合型
💡 ブログも書きつつトップをおしゃれにしたい → ホームページ型がおすすめ
選択② サイドバーはつける?
📰
2カラム
メイン+サイドバー
ブログ・情報サイト向き
📄
1カラム
メインコンテンツのみ
シンプルなサイト・LP向き
💡 プロフィールやカテゴリーを常に見せたい → 2カラム / 記事に集中させたい → 1カラム
選択③ ページごとにデザインを分けたい?
こだわるとキリがないですが、まずはこの2つ!
📄 記事ページを一覧ページと別デザインにしたい
💡 single.html と page.html の2つがないと、記事や固定ページを開いたとき一覧ページ(index.html)が表示されてしまいます。中身はまったく同じでOKですが2つ必要です。
それぞれ異なるデザインにすれば、投稿と固定でデザインを分けることができます。
🗂️ カテゴリー一覧をブログ一覧と別デザインにしたい
選択結果 → 必要ファイルは?
まずはここ(基本構成)
🗞️ ブログ型
index.html
ブログ一覧
single.html
★ 投稿ページ(必須)
page.html
★ 固定ページ(必須)
parts/header.html
parts/footer.html
🏠 ホームページ型
front-page.html
トップページ
home.html
ブログ一覧
single.html
★ 投稿ページ(必須)
page.html
★ 固定ページ(必須)
index.html
受け皿(保険)
parts/header.html
parts/footer.html
追加の選択肢
templates/archive.html
を追加
parts/sidebar.html
を追加
💡 まずは基本構成だけ作って動かしてみるのがおすすめ。必要になったタイミングで少しずつ追加していけばOKです!
フォルダ構成の参考パターン
一覧ページと記事ページを分けることを前提にしています
my-theme/ ├── templates/ │ ├── index.html │ ├── single.html ← 追加 │ └── page.html ← 追加 └── parts/ ├── header.html ← 追加 └── footer.html ← 追加
my-theme/ ├── templates/ │ ├── index.html │ ├── front-page.html ← 追加 │ ├── home.html ← 追加 │ ├── single.html ← 追加 │ ├── page.html ← 追加 │ └── archive.html ← 追加 └── parts/ ├── header.html ← 追加 ├── footer.html ← 追加 └── sidebar.html ← 追加
ファイルを用意する
設計が決まったら、実際にファイルを作っていきましょう。
今は、ファイルは中身が空でOKです。
テンプレートファイルとパーツファイル(.html)は、空のファイルを作って置くだけでWordPressに認識されます。
中身のブロックマークアップは次回の記事で入れていきます。
テーマフォルダを更新する
手元の my-theme/ フォルダに parts/ フォルダを追加する。templatesフォルダと、parts/ フォルダに必要なファイルを追加する。
zip圧縮する
my-theme/ フォルダを右クリック → 圧縮して my-theme.zip を作る。
管理画面からアップロード
外観 → テーマ → 新しいテーマを追加 → テーマのアップロード → zip を選択してインストール。
「上書き」でOK
「上書きインストール(インストール済みのものを置き換える)」を選択。有効化してサイトエディターのテンプレート一覧に追加ファイルが表示されていればOK!
⚠️ 管理画面のテーマファイルエディターで直接編集した内容がある場合は、上書きで消えてしまいます。その場合はFTPで個別にファイルをアップする方が安全です。
⚠️ ファイル名の命名ルール|スペルミスに注意!
すべて小文字で書く
単語はハイフンでつなぐ
拡張子は .html
💡 テキストエディターで作ると .html が正しく付かない場合があるので注意!
空ファイルはVSCodeの「新しいファイル」から作るのが確実です。
💡 アップ後に「テンプレートとして認識されているか」を「外観」→ 「エディター」 → 「テンプレート」 → 「テンプレート一覧」で確認しましょう。
