1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. WordPress
  6. »
  7. WordPress テーマの基本構成と読み込まれるファイルの優先順位。

WordPress テーマの基本構成と読み込まれるファイルの優先順位。

ドラクエとかにテンプレートっていう武器ありそうですね。@It_is_Rです。

WordPress テーマ自作シリーズ第4回目です。
今回はテーマを作成する上で、重要な知識を書いていこうと思います。

WordPress テーマの基本構成

まずは、テーマの基本構成について学びましょう。

テーマはいくつものパーツやページがファイルごとに分けられ、それが組み合わさって作られます。

サイト全体の、ページを作る主なファイル一覧

まず、サイト全体の、ページを作る主なファイルの一覧です。
サイトには、様々なページがありますね。トップページから、記事のページ、カテゴリー別の記事一覧などです。
それぞれのページを作るファイルが以下のものです。

トップページ home.php, front-page.php
記事ページ single.php
固定ページ page.php
記事・固定ページ singular.php
カテゴリーページ category.php
タグページ tag.php
アーカイブページ archive.php
検索ページ search.php
404ページ 404.php
全体 index.php

ページ全体の、パーツを作る主なファイル一覧

先ほど、サイト全体のページを作るファイルを紹介しましたが、 更にそのページを分けることができます。
例えば、どの一つのサイトのページでも、ヘッダーやフッター、サイドバーは、同じ場合が多いです。
それらを一つのファイルに作り、それぞれのページから読み込むことができます。

ヘッダー header.php
フッター footer.php
サイドバー sidebar.php
コメントエリア comments.php

その他

それぞれのページにスタイルをあてたり、サイトや管理者ページに機能を追加することもできます。

スタイル style.css
機能を追加 functions.php

詳しくはこちらのページを。
Codex テンプレート階層

主なファイルが読み込まれる優先順位

こんなにたくさんのファイルがあって、ファイルはどのように読み込まれるのでしょうか。

ファイルには、優先順位があります。
これは階層にして考えると分かりやすいです。

上にいくほど優先され、括弧「()」内のファイルがない場合に読み込まれます。

第1階層
トップページ front-page.php
第2階層
カテゴリーページ category.php
タグページ tag.php
第3階層
トップページ home.php ( front-page.php )
アーカイブページ archive.php ( category.php, tag.php )
検索ページ search.php
記事ページ single.php
固定ページ page.php
404ページ 404.php
第4階層
記事・固定ページ singular.php ( single.php, page.php )
第5階層
全体 index.php (上の階層のファイル)

まとめ。

今回はテーマ作成において重要な知識として、ファイルの構成と、読み込む優先順位について解説しました。
では、また次回もおたのしみに。

この企画の一覧はこちら

  1. WordPress テーマ自作 | 本格的に作りたい人が揃えるべきツールや知識。
  2. WordPress のテーマ開発に絶対必須な gulp プラグイン9選!
  3. これから作る WordPress のテーマをローカルサイトに適用させる。
  4. WordPress テーマの基本構成と読み込まれるファイルの優先順位。
  5. WordPress テーマ自作 | Pug ( Jade ) で記事一覧ページを作る方法!
  6. WordPress にウィジェット(サイドバー)を追加する方法。
  7. WordPress テーマ自作!投稿ページ、固定ページの作り方。
  8. 【 WordPress 】functions.php で色んな機能を使ってみよう!【基本】
  9. カスタムロゴの使い方。 WordPress サイトのタイトルを画像に変更!
  10. WordPress テーマ自作 | functions.php から CSS を読み込む方法。
  11. WordPress テーマ自作 | サイト全体のレイアウトを整える。

スポンサードリンク

関連コンテンツ

オススメ記事

宇宙一分かりやすい JavaScript のかなり詳しい基本の解説。

宇宙一分かりやすい JavaScript のかなり詳しい基本の解説。

普段から猫に遊ばれている@It_is_Rです。 今回は JavaScript について、初心者の人にも分かりやすく、丁寧に解説していきます。 JavaScript と EcmaSc

【Gitの使い方 – その3】Gitで実際にバージョン管理してみよう!

お魚くわえた@It_is_Rです。 Gitの使い方第3回目の今回は、実際にGitを使ってバージョン管理をしてみようと思います。 [serif name="It is R"]りこ師匠

WordPress テーマ自作 | サイト全体のレイアウトを整える。

水を飲む時、口に入れすぎてしまう@It_is_Rです。 WordPressテーマ自作シリーズ第11回目です。 今回は、サイト全体のレイアウトを整えてみましょう。 このシリーズの前回の記事

【Android Studio】開発したアプリの実機テストを行う方法。

どうも、頭がすっからかんの@It_is_Rです。 やかましいわ。 今回は Android Studio で実機テストする方法を紹介します。 これからアプリ開発をしていく上で必要不可欠な実機テ

JavaScriptマンガ講座。初心者でも痛いほど理解できる変数の使い方。(実践編)

押入れが部屋になっている@It_is_Rです。 今回の記事はJavaScriptマンガ講座、2回目となりました。 この企画はJavaScriptをフザケまくって覚えようというものです。

【 Bootstrap 4 】全体的な機能の解説と、Alert の使い方。

頭がお花畑の@It_is_Rです。 今回からは Bootstrap 4 の使い方について、詳しく書いていこうと思います。 このシリーズの、前回の記事はこちらです。 Bootstrap 4 を

zsh

enhancd で cd コマンドを超便利に! インストールと使い方。

曲を作っても、再生数が伸びない。@It_is_Rです。 やかましいわ。 ターミナルをカッコよくするシリーズ4回目です。 今回は enhancd というプラグインを使って cd コマンドを便利

Bootstrap 4 を読み込む為の方法を徹底解説。パッケージマネージャーなど。

今回は Bootstrap 4 の使い方です。It_is_Rです。 では詳しくみていきましょう。 Bootstrap とは Bootstrap は Webサイトを制作するときに使う、

【Android Studio】TextView を使ってテキストを変更、追加する方法。

TextViewの文字列を変更するより、これまでの人生を変更したい@It_is_Rです。 Android Studioを使ったアプリ開発講座6回目です。 今回はアプリに表示されたテキストを変更

ショートコード

BEMによるCSS設計の方法を解説。命名規則から使い方まで。

完璧を求めすぎて、平均以下な@It_is_Rです。 CSSは比較的簡単なものですが、CSS設計をしっかりしておかなければ、余分なコードが多くなったり、後から修正が大変になったりしてこまることにな

コメントをどうぞ!

メールアドレスが公開されることはありません。