MENU
  • Profileプロフィール
  • Blogブログ
    • WordPressワードプレス
    • プログラミング
    • WEBデザイン
    • フリーランス
    • ライフログ
  • Portfolioポートフォリオ
  • Sitemapサイトマップ
  • Contactお問合せ

カテゴリー

  • 趣味
  • WordPress
  • 本棚
  • プログラミング
  • 日記
  • WEBデザイン
  • フリーランス

タグ

Adobe Illustrator Gatsby.js HTML/CSS MySQL Node.js Python SWELL WordPressプラグイン おすすめツール エックスサーバー セキュリティ バレットジャーナル 確定申告 開発環境

アーカイブ

  • 2022年3月
  • 2022年2月
  • 2022年1月
  • 2021年12月
  • 2021年11月
  • 2021年10月
  • 2021年8月
  • 2020年10月
  • 2020年8月
  • 2020年7月
  • 2020年6月
  • 2020年5月
  • 2020年4月
  • 2020年3月
  • 2020年1月
  • 2019年11月
  • 2019年9月
  • 2019年8月
  • 2019年5月
  • 2019年2月
  • 2018年11月
  • 2018年9月
  • 2018年8月
  • 2018年7月
  • 2018年6月
  • 2017年10月
プログラミングとデザインでものづくりを楽しむブログ
ゼロの森
  • Profileプロフィール
  • Blogブログ
    • WordPressワードプレス
    • プログラミング
    • WEBデザイン
    • フリーランス
    • ライフログ
  • Portfolioポートフォリオ
  • Sitemapサイトマップ
  • Contactお問合せ
ゼロの森
  • Profileプロフィール
  • Blogブログ
    • WordPressワードプレス
    • プログラミング
    • WEBデザイン
    • フリーランス
    • ライフログ
  • Portfolioポートフォリオ
  • Sitemapサイトマップ
  • Contactお問合せ
  1. ホーム
  2. WordPress
  3. WordPressの仕組み〜テンプレートファイルの優先順位

WordPressの仕組み〜テンプレートファイルの優先順位

2022 1/30
WordPress
2018-07-28 2022-01-30

「テーマを作りたいんだけど、どのテンプレートを作ればいいの?」
「ページを表示するとき、テーマ内ファイルはどう使われるの?」

WordPressテーマをカスタマイズしていて、こんな疑問がでてきたので、WordPressのテンプレートファイルが選ばれる仕組みについて調べてみました。

目次
スポンサーリンク

WordPressはページによってどのテンプレートファイルを使うか決まっている

WordPressページが表示する仕組み

ページの種類によって、WordPress側テーマ内でどのファイルを使うかを自動で選んでくれます。

あわせて読みたい
WordPressが記事を表示する仕組み〜メインクエリとサブクエリ〜 この記事では、WordPressの記事を表示する仕組みとコードの意味について整理してみました。 【WordPressのサイトにアクセスしてからページが表示されるまで。】 WordPre…

テーマのファイル構成

テーマはテンプレートファイル(PHPファイル)で構成されています。

テーマディレクトリの中身

<assetsフォルダ内>
css、画像、javascriptなど、装飾に必要なファイルが入っています。

<コンテンツを表示するための主なテンプレート群>

  • index.php、front-page.php :トップページ用のテンプレート
  • page.php:固定ページ用のテンプレートファイル
  • single.php:記事投稿用のテンプレートファイル
  • archive.php:記事一覧用のテンプレートファイル
  • 404.php:ページが見つからない時に表示するテンプレートファイル
  • search.php、seachform.php:サイト内検索用のテンプレートファイル
  • header.php、footer.php、sidebar.php、comments.php:ヘッダー、フッター、サイドバー、コメントなど、共通して使うパーツを切り出したファイル
  • functions.php:テーマ内で使う機能を記述したファイル
  • screenshot.png:テーマのイメージ画像

最低限必要なのはこの2つ
index.php(ページの表示を記述するテンプレートファイル)
index.phpは他に使えるファイルがなかったときに、最終的に使われるテンプレートファイルになっています。
style.css(ページの装飾を記述するCSSファイル)

テンプレートファイルの優先順位

ページの種類によって、どのテンプレートファイルを使うかは優先順位が決まっています。この順番はファイル名で判断されています。

テンプレートファイルの優先順位


テーマを作るときは、コンテンツに沿って、上記に応じたファイル名をつけてあげてください。

表示中のページに、どのテンプレートファイルを使われているかを確認する

<?php
    global $template;
    $template_name = basename($template, '.php');
    echo $template_name;
?>

【参考記事】WordPress で使用中のテンプレートファイル名を表示する方法 – by Takumi Hirashima

また管理バーに使用中のテンプレートファイル名を表示させるプラグインもあるようなので、テーマ開発時に使っても良さそうです。。
【参考記事】WordPressで使用されているテンプレートファイル名を管理バーに出力するプラグイン

共通パーツはモジュールテンプレートに書く

WordPressのテンプレートは1ファイルに1ページというわけではなく
パーツごとにファイルに切り出すことができます。

共通パーツ

基本のモジュール

よく使う共通パーツを表にしました。

<?php get_header();?>
    <main role="main">
        <div class="container">
            <?php get_template_part('loop'); ?>
            <?php get_sidebar(); // sidebar.phpを読み込む?>
        </div>
    </main>
<?php get_footer(); // footer.phpを呼び出す?>

モジュールテンプレートの具体的な記述方法は、トップページのテンプレートの作り方をご覧ください。

カスタムモジュール

上記以外にも、必要に応じて、モジュールテンプレートを作ることができます。

上の例では、<?php get_template_part(‘loop’); ?>はloop.phpを呼び出すコードになります。

loop.phpには記事一覧の表示コードを記述しています。

<?php if(have_posts()):
    while(have_posts()): the_post(); ?>
        <article id="post-<?php the_ID(); ?>" <?php post_class();?>>
            <?php the_category(', '); ?>
            <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
            <?php the_excerpt(); ?>
        </article>
    else : ?>
        <p>投稿が見つかりません。</p>
<?php endif; ?>

まとめ

  • アクセスしたURLに応じて、WordPress側がどのテンプレートを使うかを自動で選んでくれる
  • ページ種類によって、どのテンプレートファイルを作るかが決まる。
  • 共通するコードはモジュールテンプレートとして切り出すことができる。
WordPress
よかったらシェアしてね!
URLをコピーする
URLをコピーしました!
  • WordPressが記事を表示する仕組み〜メインクエリとサブクエリ〜
  • 個人事業主が結婚したときに行う手続き

関連記事

  • 【2022年版】Smash Balloon Social Photo Feedの使い方〜インスタグラムを表示できるプラグイン〜
    2022-03-25
  • WordPressでホームページを作れるようになるまでに私が学んだこと
    2022-01-30
  • 【図解】WordPressのテーブル構造はどうなっているの?
    2021-12-03
  • WordPressの投稿に管理者用メモをいれるプラグインを作る
    2021-11-29
  • 記事をランダム表示するウィジェットを作る
    2021-11-27
  • Snow Monkey Formsでお問合せフォームを作成する
    2021-11-17
  • WordPressプラグインを作ってみる。はじめの一歩。
    2021-11-10
  • 【初心者向け】WordPressを安全に使いたい!Wordfence Securityの設定方法
    2021-10-31
Zero Forest
カテゴリー
  • WordPress (30)
  • プログラミング (17)
  • WEBデザイン (6)
  • フリーランス (7)
  • ライフログ (10)
    • 趣味 (2)
    • 本棚 (3)
    • 日記 (5)
タグ
Adobe Illustrator (2) Gatsby.js (3) HTML/CSS (7) MySQL (1) Node.js (2) Python (2) SWELL (1) WordPressプラグイン (10) おすすめツール (3) エックスサーバー (4) セキュリティ (3) バレットジャーナル (2) 確定申告 (1) 開発環境 (3)
  • サイトマップ
  • サイトポリシー

© Zero*forest

目次
閉じる