WordPress:現在表示しているページで使用されているテーマ名・テンプレート名・テンプレートパスを表示させる方法

WordPress:現在表示しているページで使用されているテーマ名・テンプレート名・テンプレートパスを表示させる方法

WordPressはページを表示する際に条件に応じてテンプレートが呼び出される仕組みになっていますが、特にWordPressを触り始めた頃やテンプレートが大量にあるテーマなどを使用していると、現在表示されているページはどのテンプレートなのかわからないという場面があります。
そういったときに、どのテンプレートが使用されているかをすぐわかるようにフロント側に表示させる方法です。

実装には下記のようなコードを挿入し、挿入する際は共通で使用しているテンプレート(例えばheader.phpfooter.phpなど)に入れれば全ページで情報を確認できるようになります。
また、使用されているテンプレート名以外にも、その他使用されているテーマ名やそのテンプレートのパス情報も併せて表示させることができます。

PHP

<?php
  if ( current_user_can( 'administrator' ) ) {
    global $template;
    $template_theme_name = basename( dirname( $template ) );
    $template_file_name = basename( $template, '.php' );
    $template_file_path = str_replace( ABSPATH . 'wp-content/themes', '', $template );

    echo '<div class="wp-template-info">';
    echo '<p>Theme: ' . $template_theme_name . '</p>';
    echo '<p>Template Name: ' . $template_file_name . '.php</p>';
    echo '<p>Template Path: ' . $template_file_path . '</p>';
    echo '</div>';
  }
?>

上記を記述することで、テーマ名・テンプレート名・テンプレートパスの3つの情報を表示させることができます。
上記は表示管理者権限のユーザーのみ表示されるように限定していますが、もし他の権限ユーザーでも表示させたい場合は条件部分を変更して任意のものを追加、もしくはis_user_logged_in()を使う形に変更してログインユーザーに表示させるなどしてください。

表示イメージ

あとは、.wp-template-infoに対して固定表示させるためのCSSを少し記述してあげれば、フロントで指定した位置で常時表示させておくなどが可能になります。
例として、下記のようなCSSを記述することで上のキャプチャのようにページ右上に表示させることが可能です。
(一時的な表示ですし、わざわざ別途記述するのが面倒な場合は、style属性で直接要素に記述するのでももちろん問題ないです。)

CSS

.wp-template-info {
  position: fixed;
  top: 40px;
  right: 40px;
  z-index: 10000;
  padding: 1em 1.5em;
  background: rgba(0,0,0,.5);
  color: #fff;
}
.wp-template-info p {
  margin: .5em 0;
}

ここでは自身で任意の箇所や情報を表示させるための方法として紹介しましたが、こういった情報を簡単に表示できるプラグインとして「Show Current Template」というものがあり、こちらのプラグインは有効化するだけでテーマ名・テンプレート名・テンプレートパスだけでなく、子テーマかどうかやそのテンプレートにインクルードされているテンプレート名などまで表示してくれます。
使用する際はツールバーを有効化する必要があるというのはありますが、より簡単に且つ詳細な情報が見たいというときはこちらのプラグインを利用するのが良いと思います。

Close the search window,
please press close button or esc key.