目的の箇所はどのテンプレートをいじれば変更できるの?

ヘッダ画像

WordPress どのテンプレートが使われているか

WordPressでは、投稿タイプに応じてデフォルトの構成テンプレートが適用されます。
ただし、プラグインなどを使用しなくても、トップページ(インデックスページ)・固定ページ・カテゴリ、あるいはカスタム投稿タイプなど、表示の際にテーマ中のデフォルトとは異なったテンプレートを適用することができます。
しかし、テーマ構成が複雑になった場合に該当ページが「どのテンプレートで表示されているか?」分からないケースもあります。
そこで現在表示しているテーマの情報を表示させてみます。

↓↓本ページの解説機能をプラグイン化しました↓↓

Confirm theme structure:プラグイン開発者のページ
Confirm theme structure:プラグイン開発者のページ

このページはWordPressのページの表示に使用するテンプレートのリストを表示できるプラグイン「Confirm theme structure」の作者R3098による解説です。 テーマのカスタマイズに必要な情報とは WordPressの初めてのカスタマイズは […]



適用しているテーマ名とテンプレート名を取得

まずは表示に使われているテーマ名とテンプレート名を取得してみます。
このような際にWordPressでは適用されているテンプレートの情報を持つ$templateという関数で調べることができます。

<?php
if ( is_user_logged_in() ) {
  global $template;
  $template_dir  = basename ( dirname( $template ) );
  $template_name = basename($template, '.php');
  echo "テーマ:{$template_dir}<br />テンプレート:{$template_name}";
}
?>

テーマの「Twenty Seventeen」の「single」のテンプレートが適用されている

このglobal $templateをヘッダテンプレートのbody直下あたりに記述すれば、ブラウザの最上部、あるいはフッタテンプレートのbodyの閉じタグ直前あたりに記述すれば、ブラウザの最下部に適用されているテーマ名とテンプレートが表示されます。

includedしているテンプレートを表示する

WordPressではヘッダ・メイン・サイドバー・フッタなどをパートごとに読み込むわけですが、各テンプレート内においてもget_template_partを使うことにより、さらに別のテンプレートを読み込むことができます。
便利ではあるのですが、インクルードが多すぎると該当の箇所が実際にどのテンプレートで表示されているのか非常に分かりにくくなってしまいます。
つまり、目的のカスタマイズを行うためには構成テンプレート認識する必要があるということです。
WordPressにデフォルトのTwentyシリーズなどもそういう傾向がありまね。

こういった際に役立ちそうな該当ページの表示に使われているテンプレートを確認する方法を紹介します。
このPHPコードを読み込んだ時点でincludedされているテンプレートの一覧を書き出しますので、こちらはフッタテンプレートのwp_footer()以降</body>直前などに挿入ください。
最下部にincludedされたものを含むすべての使用テンプレートを表示します。

<?php
if ( is_user_logged_in() ) {
  $inc_file_list=get_included_files();
  foreach($inc_file_list as $ink_key => $ink_val){
    if(stristr($ink_val,'themes')){
      $ink_temp=mb_strlen($ink_val)-strrpos($ink_val,'.');
      $ink_temp=strrpos($ink_val,'/',$ink_temp);
      echo substr($ink_val,$ink_temp+1).'<br>'.PHP_EOL;
    }
  }
}
?>

少々、追加項目はありますが、下記は自前のオリジナルテーマに実装したものです。

フッタ部分に仕様テンプレートを表示

Twentyシリーズの構成テンプレート?

例としてカスタマイズに人気のTwentyシリーズの表示に使用されているテンプレート一覧を取得してみました。

Twenty Twenty-One のインデックスページ

  1. class-twenty-twenty-one-custom-colors.php
  2. class-twenty-twenty-one-customize.php
  3. class-twenty-twenty-one-dark-mode.php
  4. class-twenty-twenty-one-svg-icons.php
  5. comments.php
  6. footer.php
  7. functions.php
  8. header.php
  9. block-patterns.php
  10. block-styles.php
  11. custom-css.php
  12. menu-functions.php
  13. template-functions.php
  14. template-tags.php
  15. searchform.php
  16. single.php
  17. content-single.php
  18. footer-widgets.php
  19. site-branding.php
  20. site-header.php
  21. site-nav.php
  22. author-bio.php

いかがでしょうか。
ページの表示に実はこんなにたくさんのテンプレートを使っているのです。

例えばインデックスページでは記事全文が表示されますが、これを抜粋にしたい場合はtwentyseventeen/template-parts/post/content.phpの中のthe_contentthe_excerptに書き換えます。
このようなカスタマイズを行うには構成テンプレートを知る必要があるのです。
Twentyシリーズはなかなかよくできていますが、正直なところ、構成テンプレートが複雑で初心者にはカスタマイズが難しいと思います。

Twenty Fourteenの投稿ページ

  1. functions.php
  2. custom-header.php
  3. template-tags.php
  4. customizer.php
  5. featured-content.php
  6. widgets.php
  7. single.php
  8. header.php
  9. content.php
  10. comments.php
  11. sidebar-content.php
  12. sidebar.php
  13. footer.php
  14. sidebar-footer.php

is_user_logged_inでログイン状態時のみテンプレート情報を表示するようにしています。
いずれにしても、基本的にカスタマイズ時以外では不要なコードかと思いますので、制作案件として承っている場合はお客様への納品時の消去をお忘れなく!

プラグイン化しました

単純な機能なのでソースをそのまま紹介していましたが、思うところがあり、少々手を加えて「Confirm theme structure」という名称でプラグイン化しました。
公式登録しましたので、ダッシュボードかプラグインディレクトリから検索してお使いください。

Confirm Theme Structure

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です


The reCAPTCHA verification period has expired. Please reload the page.



関連記事