【サイト改修】_s(underscores)のファイル群をザックリ解説

自作テーマを作る際や既存のテーマをカスタマイズする際に

「このファイルは何のためにあるの？？」

と初心者なら思うはずです。（私もそこでつまずきました。。）

カスタマイズするテーマのファイルを知ることはとても重要なのです。

ファイル群を読み解く意図

よし！「スターターテーマをカスタマイズしてオリジナルテーマを作ろう！！」

と思ってもそのスターターテーマの構造をある程度理解していないとどこを編集したらいいのかわからないなどカスタマイズが進みません。

テーマの構造を理解する事は作業の効率を格段にあげるポイントになります。

今日は_s(UnderScores)のテーマファイルをざっくりと紹介していきたいと思います。

_s(UnderScores)の全ファイル

_ｓ(UnderScores)をインストールすると上の画像のファイルが生成されています。

「多くねっ！！」と思うかもしれませんが大丈夫です。

_ｓ(UnderScores)のファイル群は

• 各ページのテンプレート
• サイトのデザイン
• サイトの機能

と大まかに分類できます。

それぞれの分類にどのようなファイルが入りそのファイルがどのような役割を持つのかを紹介します。

各ページのテンプレート

一つ目の分類ですがこちらのファイルはテーマのページごと（トップページ、記事の詳細ページ、固定ページの詳細ページ、記事をまとめたアーカイブページなど）の設計図のような役割を果たします。

その設計図にはヘッダー部分は「herader.phpを使う」と書かれてあったり、フッター部分には「footer.phpを使う」などなどそのページに必要な部品（ヘッダー、フッター、サイドバー、、、）などを呼び出してサイトを設計します。

index.php

メインページ（サイトのフロントページ）のテンプレート

page.php

固定ページでの投稿詳細のテンプレート

single.php

投稿詳細ページのテンプレート

archive.php

アーカイブページ（記事一覧ページ）のテンプレート

404.php

404ページ（ページが見つからなかったときのページ）のテンプレート

search.php

検索結果を表示させるページのテンプレート

comments.php

コメントの一覧表示用のテンプレート

各ページのパーツファイル（）

上記で説明したファイルは設計図の役割を果たすのに対し

この分類に書かれているものは設計図を完成させる為のパーツのような役割を果たします。

例えばですが、

サイトのヘッダーのレイアウトや表示の内容を変えたいと思った時には
header.phpを編集する事が必要です。
すると全てのページでその変更がなされます。

footre.php
サイトのフッター部分を管理するパーツファイル

header.php
サイトのヘッダー部分を管理するパーツファイル

sidebar.php
サイトのサイドバー部分を管理するパーツファイル

▼template-parts　（各ページ用のパーツとなる部分のファイルを格納している）
content-none.php　（記事が見つからない時に表示させるパーツ）
content-page.php （固定ページの記事を表示させるパーツ）
content-search.php （検索結果ページの記事を表示させるパーツ）
content.php （記事を出力するパーツ）

サイトのデザインファイル

この分類にはサイトのデザイン（色や余白、形、並び方などなど）を作る為のファイルです。

style.css
サイトのデザインを司るファイル

style-rtl.css
右から左へ記述する言語に対応するためのCSS（rtlは　right to leftの略）

WordPress機能拡張をする為のファイル

WordPressのテーマはそれぞれに機能が違ったりしますがその機能面などを支えるファイルがこの分類に入ります。

投稿機能を増やしたい（カスタム投稿タイプ）やフッターにナビゲーションを設置したいなどと思った時にはfunctions.phpを編集します。

また_s(underscores）ではfunctions.phpに直接機能追加のコードを書くこともできますが、機能だけのコードが書かれたファイルを作り(incフォルダに入っている)functions.phpで呼び出して使うというやり方もされています。

functions.php
テーマ機能の拡張をするファイル

▼inc　（functions.phpで使用するパーツファイルのファイル群）
custom-header.php
customizer.php
jetpack.php
template-functions.php
template-tags.php
index.php

その他

この分類のファイルはJavaScriptのファイル、node.jsやその他ツールを使うときの設定が書かれたファイルや国際化などの言語ファイルが入っています。

▼js（JavaScriptを使用する際のファイル群）
customizer.js
navigation.js

.eslintrc
lint=書式チェックなどで使われる環境ファイル

.stylelintrc.json

lint=書式チェックなどで使われる環境ファイル

conposer.json

PHPのコンポーサーというツールを使うときの設定ファイル

▼languages　（国際化ようの言語ファイルを格納している）
nino-challenge.pot
readme.txt　（Languagesの使い方のファイル）

LICENES

package.json
Node.jsを使用するときの環境設定ファイル

phpcs.xml.dist
PHPコードスニッファーと言われるツールで使われる書式ファイル

README.md
_sを利用するにあたっての説明ファイル

readme.txt
_sを利用するにあたっての説明ファイル

まとめ

今日はWrodpressスターターテーマ_s(UnderScores)をダウンロードした際どのようなファイルがあるのかを説明しました。

カスタマイズする際にファイル構造を理解することで自分の思い描いている事がどのファイルを編集すれば可能になるかが分かってきます。

まずはそれぞれのページのテンプレートファイルやテンプレートファイルで使われるパーツファイルなどをカスタマイズしてみるといいかと思います。

当ブログでも_s(UnderScores)を使ってのテーマ作りを記事にしていこうと思いますのでよければ見てください。

最後まで見ていただきありがとうございました。

また次の記事でお会いしましょう！