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 テーマ自作 | サイト全体のレイアウトを整える。

スポンサードリンク

関連コンテンツ

オススメ記事

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。文字の大きさを設定する。

こんにちわ。美しいものほど濁って見える@It_is_Rです。 今回もFC2ブログの"最強"カスタマイズを始めていこうと思います。 今回は文字の大きさや色など、ブログ内の文字の設定をしていきます

【Android Studio】アプリ開発の基本とそれぞれのファイルの役割を覚える。

iPhone持ってないみなさん、一緒にAndroidアプリ開発しましょう。@It_is_Rです。 Androidアプリ開発、5回目となりました。 今回は Android Studio でアプリ

Yarn

Yarn の使い方。インストールの方法から使い方まで解説します。

最近ドラクエにはまっている@It_is_Rです。PS1 のやつです。ドラクエⅦ。 関係ない話はさておき、今回は Yarn の使い方を解説していきたいと思います。 Yarn とは

キーボードで画像を動かすよ!

小学生からのJavaScript入門。キー入力でキャラを動かしてみよう!

小学生からのJavaScript入門講座(にゅうもんこうざ)、第4弾です。 前回はHTMLでりこちゃんの画像を表示し、クリックすると前に一歩動くというのをJavaScriptで作りました。 J

Swift

【Xcode7】Swift2でMacアプリ開発。Storyboardでボタンを作る。

喧嘩するほど仲がいいとは言いますが、喧嘩する相手がいません。友達がいないということでしょうか。@It_is_Rです。 前回、StoryboardでMacのウィンドウに文字を表示しました。しかし、

Swift

【Xcode7】Storyboardを使ってMacアプリ開発に挑戦。

何だか今日はトイレが近い。@It_is_Rでございます。 現在開発中の人魚のゲームは今ストーリーを練っている所です。まだまだ時間がかかりそうです。 さて、Rは今、Macアプリ開発を勉強中なので

【 gulp 】 超便利! Sass で Normalize.css などをインポートする方法。

ふと立ち上がった瞬間に、ホットマットを猫に奪われる@It_is_Rです。 全然どいてくれない。 今回は gulp を使って、 Sass ファイルから Normalize.css などをインポー

これまでのプログラム全体をクラスを使って作るべ!

小学生からのJavaScript。プログラム全体をクラスを使って作ってみよう!

小学生からのプログラミング講座(こうざ)、第13弾です。 前回はプログラミングにおける、クラスの使い方を学びました。しかし、まだクラスをどうやって使えばいいのか、ピンときていないかも

Swift

【Xcode7】Swift2でMacアプリ開発。画像を読み込む為のボタンを作る。

犬も歩けば棒にあたる。だからRは歩かない。@It_is_Rです。 最近はSwiftの記事が多いと思っている人もいるのでは無いでしょうか。実はRは現在、Swiftを使ってゲーム開発のお助けアプリを

HTML CSS

CSSで文字を、円の上下左右中央ド真ん中に表示する方法。

体重が50キロを切りました。@It_is_Rです。身長は171あります。 骨っていうなー! サイトを作る時、円形のパーツを作りたい時ってよくありますよね。画像を丸くして。。。なんてやっている人

コメントをどうぞ!

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