【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」だけでもいいですし、規模が大きいサイトであれば投稿ページ用、固定ページ用、○○ページ用みたいな単位で作成しても問題ありません。

category-news.php

別タブで開く

category-works.php

別タブで開く
別タブで開く

functions.php

別タブで開く

header.php

別タブで開く

index.php

別タブで開く

page.php

別タブで開く

single.php

別タブで開く

style.css

別タブで開く

category.css

別タブで開く

top.css

別タブで開く