カスタマイズ 2023.10.24 2023.10.24

WordPressのテーマディレクトリをget_template_part関数で整理する方法

この記事を書いた人

株式会社e2e wp.geek編集部

WordPressサイト制作サービス「wp.make」やWordPress保守・運用サービス「wp.support」などを展開する株式会社e2eの情報発信チームです。お客様の課題解決に役立つ、WordPressの最新情報をお届けいたします。

はじめに

開発・運用をする上で、テーマディレクトリ直下が煩雑であると、作業に混乱や勘違いが起こる可能性が高くなります。

結果としてバグや不具合、コードの重複などを起こしかねません。

見やすく探しやすいスッキリしたテーマディレクトリで快適に開発し運用するために、
本記事ではテーマディレクトリ直下を get_template_part関数 を使って整理するための方法を紹介します。

実際の案件にあったテーマディレクトリ

WordPress の開発が進んでいくと、テーマディレクトリにはファイルが多くなっていきます。

テーマディレクトリ内を見やすく仕分けしないと、
今後追加で開発するときに必要なファイルを探す手間が増えてしまいます。

例えば、こんなディレクトリがあったらどう思いますか？
以下のテーマディレクトリは実際に弊社にご相談いただいた案件であったものです。（ファイル名などは一部変更しています）

良くないディレクトリ

/path/to/themes/geek
                ├── template-england.php
                ├── template-france.php
                ├──  (約40ヵ国分のファイルが続きます。)
                ├── template-Germany.php
                ├── tmp-about-news.php
                ├── tmp-about-sports.php
                ├──  (約10ジャンルのファイルが続きます。)
                └── tmp-about-music.php

/path/to/themes/geek

├── template-england.php

├── template-france.php

├── (約40ヵ国分のファイルが続きます。)

├── template-Germany.php

├── tmp-about-news.php

├── tmp-about-sports.php

├── (約10ジャンルのファイルが続きます。)

└── tmp-about-music.php

このディレクトリの問題点を整理します。

似たような名前のファイルがテーマディレクトリ直下に複数存在している
tmp が何の略語を指しているのか判断に迷ってしまう (template or temporary)
template-{$name}.php とtmp-{$name}.php に何の違いがあるのかが分からない

このような問題点を放置したまま、開発・運用を続けていくと、
いずれ近いうちにバグや不具合、コードの重複などを起こす原因となる可能性があります。

このような問題を解消すべく、次にテーマディレクトリを整理整頓する方法を説明していきます。

テーマディレクトリ直下を整頓する

テーマディレクトリに存在する似たような名前のファイルを減らすだけでも、開発の負担をかなり減らせます。

まず、WordPress には テンプレート階層 と呼ばれる
テーマディレクトリ内のテンプレートファイルを検索し実行するときの優先順位があります。
これによって、Web サイト上でどのタイミングでどのようなページを表示するかコントロールできます^[1]

テンプレート階層によるページの生成では、テーマディレクトリ直下のテンプレートファイルの中で該当するファイルを使用します。
つまり、テンプレートファイルを他のディレクトリに移すことはできません。
したがって、ページ取得でテンプレートファイルとして呼び出されないファイルをディレクトリ毎に整理して、
テーマディレクトリ直下を整頓する必要があります。

テーマディレクトリ直下に新規作成したディレクトリも何の用途かを書くと必要なファイルを探しやすくなります。
以下のような、WordPress で想定されているディレクトリ名を使うと分かりやすいです。^[2]

Web サイトのデザインにかかわるディレクトリには assets
functions.php で呼び出されるような関数やクラスのディレクトリは inc
Web サイトページの構成部品は template-parts

小分けしたディレクトリ内のファイルを呼び出す

複数のファイルをディレクトリごとに分けたとしても、ディレクトリ内のファイルを取り込まなければ意味がありません。
しかし、WordPress には get_template_part という関数があります。

テンプレートパーツの呼び出し

require, include の他に、ページのテンプレートを分割し、それぞれの要素ごとに呼び出すことが出来る関数があります。
パーツごとに呼び出すとこで、1 ファイルのソースコード分量を減らすことが出来ます。

テンプレートパーツごとにファイルを呼び出す関数は大きく分けて以下のようになります。

ヘッダー : get_header($name, $args)
サイドバー : get_sidebar($name, $args)
フッター : get_footer($name, $args)
カスタム : get_template_part($slug, $name, $args)

上記のうち、 get_template_part(カスタム)以外の関数は、テーマディレクトリ直下の header.php や footer.php などを呼び出します。

第一引数に$nameを渡せば、header-{$name}.php や、footer-{$name}.php を呼び出せます
第二引数に呼び出し元で定義した配列を渡せば、呼び出し先のファイルに配列を渡せます

(WordPress バージョン 5.5 で追加されました)

ここで考えていただきたいのが、例えば以下のディレクトリの場合です。

/path/to/themes/geek
                ├── footer-toppage.php
                ├── footer-mypage.php
                ├── footer.php
                ├── functions.php
                ├── header-toppage.php
                ├── header-mypage.php
                └── header.php

/path/to/themes/geek

├── footer-toppage.php

├── footer-mypage.php

├── footer.php

├── functions.php

├── header-toppage.php

├── header-mypage.php

└── header.php

各テンプレートごとにヘッダー・フッターを複数作成していく場合、上記のようにヘッダー・フッターファイルが複数存在することも珍しくありません。間違いというわけではないものの、コードエディタ等でディレクトリ内のファイルは、アルファベット順に表示されるため、
footer.php 群と header.php 群の間に functions.php が埋もれて探しにくくなる可能性があります。

テンプレートパーツの場合分けが header.php, footer.php で収まりきらない場合は、get_template_part()に切り替え、ディレクトリ毎で振り分けると、ディレクトリがきれいにまとまります。

get_template_part() は以下の引数で利用できます。^[3]

get_template_part( string $slug, string|null $name = null, array $args = array() ): void|false

1	get_template_part( string $slug, string\|null $name = null, array $args = array() ): void\|false

この関数は、 $slug , $name で呼び出したい PHP ファイルのパスを指定するので、
テーマディレクトリからパスを探して {$slug} – {$name}.php を呼び出すことが出来ます。

また $args で呼び出し先に配列を渡すことができます。
例えば、template-parts/work.php を呼び出したい時、以下のように書きます。

// themes/geek/index.php
<?php
    $args_work = array(
      'posts_per_page' => '24',
      'post_type' =>  'work',
      'order' => 'ASC',
    );
    $the_query_work =  get_posts($args_work);
?>

<div>
    <?php get_template_part(
      slug:'template-parts/work',
      arg:[
        'arg' => $the_query_work
        ],
      ); ?>
</div>

// themes/geek/template-parts/work.php
<div class="work">
    <p>WORK</p>
    <dl class="work__list">
        <?php foreach ($args['arg'] as $post) : ?>
            <a href="<?= get_permalink($post->ID) ?>">
                <dt><?= the_time('Y.m.d.H.i', $post->ID); ?></dt>
                <dd><?php the_title_attribute(); ?></dd>
            </a>
        <?php endforeach;
        wp_reset_postdata(); ?>
    </dl>
</div>

// themes/geek/index.php

<?php

$args_work = array(

'posts_per_page' => '24',

'post_type' => 'work',

'order' => 'ASC',

);

$the_query_work = get_posts($args_work);

<div>

<?php get_template_part(

slug:'template-parts/work',

arg:[

'arg' => $the_query_work

); ?>

</div>

// themes/geek/template-parts/work.php

<?php foreach ($args['arg'] as $post) : ?>

</a>

<?php endforeach;

wp_reset_postdata(); ?>

</dl>

</div>

$args によって、HTML 構造が似たファイルを、ファイル名を変えて新規作成し個別に呼び出すことなく、条件によって異なる配列を渡すことで、1 つのテンプレートファイルで様々な条件に対応出来ます。
つまりテーマディレクトリ直下をきれいにすることが出来ます。

get_template_part 関数を使うメリット

require と異なり、呼び出し元から値を渡すことが出来る
テーマディレクトリからの呼出なので、ディレクトリパスを簡潔に書ける

get_template_part を活用すると、以下のディレクトリ構成であれば、index.php をこのように書くことが出来ます。
参考にしてみてください。

テーマディレクトリ構成

/path/to/themes/geek
                ├─ index.php
                └─ template-parts
                      ├── content
                      ├── header.php
                      │      ├── toppage.php
                      │      └── mypage.php
                      └── footer.php

/path/to/themes/geek

├─ index.php

└─ template-parts

├── content

├── header.php

│ ├── toppage.php

│ └── mypage.php

└── footer.php

index.php

<?php
/* header */
if(
  //現在のページがマイページである
){
    get_template_part(slug:"template-parts/header/mypage");
}
else{
  get_template_part(slug:"template-parts/header/toppage");
}

/* content */
$args = array(
  'posts_per_page' => '5',
);
$args_posts = get_posts($args);
get_template_part(
  slug:"template-parts/content",
  args:['args' => $args_posts],
);

/* footer */

if(
  //現在のページがマイページである
){
    $footer_page = [
      //マイページで使う情報
    ]
}
else{
  $footer_page = [
    //トップページで使う情報
  ]
}
get_template_part(
  slug:"template-parts/footer",
  args:[
    'arg' => $footer_page
  ],
);

<?php

/* header */

if(

//現在のページがマイページである

){

get_template_part(slug:"template-parts/header/mypage");

}

else{

get_template_part(slug:"template-parts/header/toppage");

}

/* content */

$args = array(

'posts_per_page' => '5',

);

$args_posts = get_posts($args);

get_template_part(

slug:"template-parts/content",

args:['args' => $args_posts],

);

/* footer */

if(

//現在のページがマイページである

){

$footer_page = [

//マイページで使う情報

]

}

else{

$footer_page = [

//トップページで使う情報

]

}

get_template_part(

slug:"template-parts/footer",

args:[

'arg' => $footer_page

);

まとめ

バージョンアップした get_template_part を上手く活用してテーマディレクトリ直下の整理整頓を心がけましょう。

参考記事

1.テンプレート階層 – Japanese Team – WordPress.org 日本語

2.Organizing Theme Files | Theme Developer Handbook | WordPress Developer Resources

3.get_template_part() | Function | WordPress Developer Resources

WordPressサイト制作・カスタマイズなら「wp.make」にお任せ！

WordPressでのサイト制作やリニューアルを検討する時、以下のようなお悩みはありませんか？

WordPressに詳しい制作会社に依頼したいが、どこがいいかわからない…
セキュリティ対策をしっかりしたいが、社内にノウハウがないのでプロに任せたい…
WordPressに最適なサーバーの選定や構築から依頼したい…
SEO対策や高速化も考慮したサイト構築を行なってほしい…
制作後の保守・運用についてもサポートしてほしい…
今のサイトを簡単に運用できるようにしてほしい…

「wp.make」は、WordPressのプロフェッショナル集団によるWordPressサイト制作・カスタマイズサービスです。
サイトの制作だけでなく、WordPressに最適なサーバーの選定や構築といったインフラ面の支援から、SEO対策や表示スピードの高速化、高度なセキュリティ対策や制作後の保守・運用サポートまで、WordPressに関わることならあらゆるお悩みを解消いたします。

既存のお客さまからも
「コミュニケーションが取りやすく、クオリティが高い」
「WordPressのプロとして信頼感がある」
と大変ご好評をいただいています。

WordPressサイトの制作・カスタマイズをご検討されているなら、ぜひ以下からお気軽にご相談ください。

>> wp.makeに無料相談する

WordPress開発・カスタマイズなら『wp.make』

全案件WordPressのみ！
株式会社e2eの『wp.make』はWordPress専門のWeb制作サービスです。

WordPress案件だけを扱っているから、技術・ノウハウ・対応力が圧倒的！

【WordPressサイト制作でよくあるお悩み】
・運用シーンが想定されておらず、更新しづらかった…
・打ち合わせで専門用語が多くてわかりづらい…
・制作後の保守には対応してくれなかった…

こんな事態になる前に、ぜひ一度、ご相談ください！
WordPressサイトを作るなら、一番WordPressに詳しいところへ！

今すぐ問い合わせるサービス資料をダウンロード

WordPressのテーマディレクトリをget_template_part関数で整理する方法

株式会社e2e wp.geek編集部

はじめに

実際の案件にあったテーマディレクトリ

テーマディレクトリ直下を整頓する

小分けしたディレクトリ内のファイルを呼び出す

テンプレートパーツの呼び出し

get_template_part 関数を使うメリット

まとめ

参考記事

WordPressサイト制作・カスタマイズなら「wp.make」にお任せ！

WordPress開発・カスタマイズなら 『wp.make』

WordPress開発・カスタマイズなら『wp.make』