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

スポンサードリンク

関連コンテンツ

オススメ記事

リセットCSS は何を使う? 2018年ランキング5選紹介。

世間では年があけたと大騒ぎですが、私はいつでもオープンです。@It_is_Rです。 祝ってください。 Web開発でブラウザごとの表示の違いをリセットしてくれる リセットCSS というものがあり

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

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

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

wordpress

WordPress – デフォルトで用意されたショートコード一覧と使い方。

昔は WordPress の画面が真っ白になって、頭も真っ白になったこともありました。@It_is_Rです。 WordPress では、プラグインを使ったりしない限り、投稿記事のなかで php

【Bootstrap 4】記事一覧ページなどで使える「カード」の使い方

Bootstrap4の使い方、第7回目です。 トップページなどを見ると、記事の一部が抜粋された記事一覧が表示されているサイトをよく見かけます。 今回はそんな記事一覧ページを作るのに便利な「カー

小学生からのJavaScript入門。画像の表示と移動をしてみよう!

小学生からのJavaScript入門、第3弾です。 今回はゲーム開発(かいはつ)へもう一歩踏み込んでみましょう! [serif icon="aru-s.jpg" name="アル"]うーん……

Swift

【Xcode7】Swift2使ってみた。playgroundで遊びながら覚える。

最近は押入れの中で寝るのが日課の@It_is_Rです。 押入れは寝心地がいいです。部屋も押入れ分だけ広くなるし。 SwiftはAppleが出しているプログラミング言語です。Swiftを使うこと

zsh

zsh のインストール方法と、うまく起動しない時の対処法。

かっこいいものが大好きな@It_is_Rです。 そこで今回は、ターミナルをかっこよくする為の方法を、何回かの記事に分けて書いてみたいと思います。 今回、第一回目は zsh ( Z Shell

Dockerでよく使うコマンドとオプション、その使い方を徹底解説!

人生に意味は求めない。それよりもDockerのコマンドの意味を理解する方が重要です。@It_is_Rです。 Dockerにはたくさんのコマンドがありますが、まずはよく使うコマンドを覚えていきまし

【初心者向け】webpack 4入門。一番簡単で詳しい使い方

風邪をひいてぼんやりしている@It_is_Rです。どちらにしろいつもぼんやりしてますが。 さて、今回はWebpack4について紹介していきたいと思います。 この記事では、jsファイルをビルドす

enchant.js

enchant.js でクラスを作る、激分かりやすい方法!

こんばんわ、ちょっと海外へ行っておりました@It_is_Rです。 前回までの enchant.js の記事で、画像の表示やキャラの移動など、ゲーム制作には欠かせない基礎知識が身についたのではない

コメントをどうぞ!

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