【WordPress ブロックテーマ自作②】作り始める前の「設計図」|必要なファイルを決める

最初に「どんなサイトにするか」を決めておくと、必要なファイルが自然と決まります。
この記事では、3つの選択で、自分のサイトに必要なファイル一覧が見えてくる流れを解説します。

📌 前回の記事で「4つのファイル(土台)」を用意しました。
今回はそこからさらに、サイトの形に合わせてファイルを追加していきます。

3つの選択をする

AD – 読み進める前のひとやすみ

まず、自分のサイトについて3つの質問に答えてみましょう。
答えが決まると、必要なファイルが自動的に絞られます。

選択① トップページは何を表示する?

WordPressには最初から「どちらにするか」を選ぶ設定があります。

🗞️

ブログ型

最新記事の一覧が並ぶ

ブログ・日記・情報発信サイト

おすすめ

🏠

ホームページ型

自分でデザインした固定ページ

企業・ポートフォリオ・ブログ複合型

💡 ブログも書きつつトップをおしゃれにしたい → ホームページ型がおすすめ

選択② サイドバーはつける?

📰

2カラム

メイン+サイドバー

ブログ・情報サイト向き

📄

1カラム

メインコンテンツのみ

シンプルなサイト・LP向き

💡 プロフィールやカテゴリーを常に見せたい → 2カラム / 記事に集中させたい → 1カラム

選択③ ページごとにデザインを分けたい?

こだわるとキリがないですが、まずはこの2つ!

📄 記事ページを一覧ページと別デザインにしたい

single.html — 投稿(ブログ記事)専用
page.html — 固定ページ(About・お問い合わせなど)専用

💡 single.html page.html の2つがないと、記事や固定ページを開いたとき一覧ページ(index.html)が表示されてしまいます。中身はまったく同じでOKですが2つ必要です。
それぞれ異なるデザインにすれば、投稿と固定でデザインを分けることができます。

🗂️ カテゴリー一覧をブログ一覧と別デザインにしたい

archive.html — カテゴリー・タグ一覧専用

選択結果 → 必要ファイルは?

AD – 読み進める前のひとやすみ

まずはここ(基本構成)

🗞️ ブログ型

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です!

フォルダ構成の参考パターン

一覧ページと記事ページを分けることを前提にしています

パターンA ブログ型でサイドバーなし
ブログ型 / サイドバーなし
my-theme/
  ├── templates/
  │     ├── index.html
  │     ├── single.html ← 追加
  │     └── page.html ← 追加
  └── parts/
         ├── header.html ← 追加
         └── footer.html ← 追加
        
パターンB フル構成 ホームページ型でサイドバーつき
ホームページ型 / サイドバーあり / デザイン分けあり
my-theme/
  ├── templates/
  │    ├── index.html
  │    ├── front-page.html ← 追加
  │    ├── home.html ← 追加
  │    ├── single.html ← 追加
  │    ├── page.html ← 追加
  │    └── archive.html ← 追加
  └── parts/
        ├── header.html ← 追加
        ├── footer.html ← 追加
        └── sidebar.html ← 追加

ファイルを用意する

AD – 読み進める前のひとやすみ

設計が決まったら、実際にファイルを作っていきましょう。
今は、ファイルは中身が空でOKです。

テンプレートファイルとパーツファイル(.html)は、空のファイルを作って置くだけでWordPressに認識されます。

中身のブロックマークアップは次回の記事で入れていきます。

1

テーマフォルダを更新する

手元の my-theme/ フォルダに parts/ フォルダを追加する。
templatesフォルダと、parts/ フォルダに必要なファイルを追加する。

2

zip圧縮する

my-theme/ フォルダを右クリック → 圧縮して my-theme.zip を作る。

3

管理画面からアップロード

外観 → テーマ → 新しいテーマを追加 → テーマのアップロード → zip を選択してインストール。

4

「上書き」でOK

「上書きインストール(インストール済みのものを置き換える)」を選択。有効化してサイトエディターのテンプレート一覧に追加ファイルが表示されていればOK!

⚠️ 管理画面のテーマファイルエディターで直接編集した内容がある場合は、上書きで消えてしまいます。その場合はFTPで個別にファイルをアップする方が安全です。

⚠️ ファイル名の命名ルール|スペルミスに注意!

🔡

すべて小文字で書く

Single.html ❌ single.html ✓

単語はハイフンでつなぐ

frontpage.html ❌ front-page.html ✓
📄

拡張子は .html

single.htm ❌ single.html ✓

💡 テキストエディターで作ると .html が正しく付かない場合があるので注意!
空ファイルはVSCodeの「新しいファイル」から作るのが確実です。

💡 アップ後に「テンプレートとして認識されているか」を「外観」→ 「エディター」 → 「テンプレート」 → 「テンプレート一覧」で確認 しておきましょう。

最後まで読んでいただき、ありがとうございました。
おつかれさまでした 🍵

スポンサーリンク