【WordPress ソースコード】初級編:ポートフォリオサイト
目次
ディレクトリ構成
~/wp-content/themes/my-work
├─img
│ ├─favicon.ico
│ ├─icon-instagram.png
│ ├─logo.svg
│ ├─mainvisual-pc.jpg
│ └─mainvisual-sp.jpg
│
├─css
│ ├─category.css
│ └─top.css
│
├─category-news.php
├─category-works.php
├─footer.php
├─functions.php
├─header.php
├─index.php
├─page.php
├─single.php
└─style.css
ファイル構成の解説
- カテゴリー一覧
- カテゴリー一覧のテンプレートファイルは通常「category.php」を使用しますが、
今回はカテゴリーが複数存在していてそれぞれレイアウトが異なるので、
「category-news.php」「category-works.php」とカテゴリーごとにテンプレートファイルを作成しました。
カテゴリーごとにテンプレートファイルを作成する場合は、今回のように category-[カテゴリースラッグ名].php という名前でファイルを作成すると、自動でそのファイルを読み込んでくれます。
各カテゴリー一覧のレイアウトが似ている場合は、「category.php」の中でif文を使用してレイアウトを切り分ける方法もあります。 - CSSファイル
今回はベースとなる「style.css」の他に、トップページ用の「top.css」と「category.css」を作成しました。中身は下記の通りです。
style.css:共通、ヘッダー、フッター、固定ページ、投稿ページ
top.css:トップページ
category.css:カテゴリー一覧CSSファイルの作成単位に特に決まりはないので、作るサイトによって管理しやすいファイル構成で作成してください。
例えば、規模が小さいサイトであれば「style.css」だけでもいいですし、規模が大きいサイトであれば投稿ページ用、固定ページ用、○○ページ用みたいな単位で作成しても問題ありません。