Django adminテンプレートのオーバーライド方法について解説

【注意】この記事はDjango2.2を調査対象にして書きました。（ですが、記事の内容は3系でも使えます）

Django Advent Calendar 2020 - Qiitaの10日目はDjango adminテンプレートをオーバーライドする方法について書きます。

Django adminを使っていて「もっとオリジナリティがあるUIにしたい」と思ったことはないでしょうか？ Djangoでは標準のadminテンプレートをオーバーライドする方法があります。以下では、その方法について解説します。

Django adminテンプレートのオーバーライド方法

Django adminのテンプレートをカスタマイズする手順は以下のとおりです。²

admin全体をオーバーライドする場合

何らかのアプリケーションを作成する
1.をINSTALLED_APPSの中でdjango.contrib.adminより上に入れる
1.のアプリケーションの直下のtemplatesディレクトリにDjangoソースコードのdjango/contrib/admin/templates以下をコピーし、それらを編集する。

または

DIRSに指定したディレクトリの直下にadmin用テンプレートを入れる

特定のアプリケーションのadminテンプレートのみオーバーライドする場合

アプリケーション直下のtemplatesディレクトリ、または DIRSに指定したディレクトリの直下にadmin/{アプリケーション名}/ディレクトリを作成する
1.で作ったディレクトリにDjangoソースコードのdjango/contrib/admin/templates/admin以下をコピーし、それらを編集する。

例えば、exampleというアプリケーションを作ったなら、templates/admin/example/というディレクトリを作る必要があります。

この方法ではdjango/contrib/admin/templates/adminにある全てのファイルをオーバーライドできるわけではありません。オーバーライドできるファイルについては公式ドキュメントの「Templates which may be overridden per app or model」を参照してください。

admin用テンプレートファイルの構成について

admin用テンプレートファイルはどのファイルが何の役割なのか公式サイトには書かれていませんが、実際にサンプルコードを作って調査してみました。以下に調査結果を載せます。

なお、以下文中に登場するexampleはサンプルコードで作成したアプリケーション名・モデル名です。適宜自分のプロジェクトで使っている名前に置き換えてください。

Index

`admin/404.html`

404エラー用のページ。

Django adminテンプレートのオーバーライド方法#

admin全体をオーバーライドする場合#

特定のアプリケーションのadminテンプレートのみオーバーライドする場合#

admin用テンプレートファイルの構成について#

Index#

admin/404.html#

admin/500.html#

admin/actions.html#

admin/app_index.html#

admin/auth#

admin/auth/user/add_form.html#

admin/auth/user/change_password.html#

admin/base.html#

admin/base_site.html#

admin/change_form.html#

admin/change_form_object_tools.html#

admin/change_list.html#

admin/change_list_object_tools.html#

admin/change_list_results.html#

admin/date_hierarchy.html#

admin/delete_confirmation.html#

admin/delete_selected_confirmation.html#

admin/edit_inline#

admin/edit_inline/stacked.html#

admin/edit_inline/tabular.html#

admin/filter.html#

admin/includes#

admin/includes/fieldset.html#

admin/includes/object_delete_summary.html#

admin/index.html#

admin/invalid_setup.html#

admin/login.html#

admin/object_history.html#

admin/pagination.html#

admin/popup_response.html#

admin/prepopulated_fields_js.html#

admin/search_form.html#

admin/submit_line.html#

admin/widgets#

admin/widgets/clearable_file_input.html#

admin/widgets/foreign_key_raw_id.html#

admin/widgets/many_to_many_raw_id.html#

admin/widgets/radio.html#

admin/widgets/related_widget_wrapper.html#

admin/widgets/split_datetime.html#

admin/widgets/url.html#

registration/logged_out.html#

registration/password_change_done.html#

registration/password_change_form.html#

registration/password_reset_complete.html#

registration/password_reset_confirm.html#

registration/password_reset_done.html#

registration/password_reset_email.html#

registration/password_reset_form.html#

Django adminテンプレートのオーバーライド方法

admin全体をオーバーライドする場合

特定のアプリケーションのadminテンプレートのみオーバーライドする場合

admin用テンプレートファイルの構成について

Index

`admin/404.html`

`admin/500.html`

`admin/actions.html`

`admin/app_index.html`

`admin/auth`

`admin/auth/user/add_form.html`

`admin/auth/user/change_password.html`

`admin/base.html`

`admin/base_site.html`

`admin/change_form.html`

`admin/change_form_object_tools.html`

`admin/change_list.html`

`admin/change_list_object_tools.html`

`admin/change_list_results.html`

`admin/date_hierarchy.html`

`admin/delete_confirmation.html`

`admin/delete_selected_confirmation.html`

`admin/edit_inline`

`admin/edit_inline/stacked.html`

`admin/edit_inline/tabular.html`

`admin/filter.html`

`admin/includes`

`admin/includes/fieldset.html`

`admin/includes/object_delete_summary.html`

`admin/index.html`

`admin/invalid_setup.html`

`admin/login.html`

`admin/object_history.html`

`admin/pagination.html`

`admin/popup_response.html`

`admin/prepopulated_fields_js.html`

`admin/search_form.html`

`admin/submit_line.html`

`admin/widgets`

`admin/widgets/clearable_file_input.html`

`admin/widgets/foreign_key_raw_id.html`

`admin/widgets/many_to_many_raw_id.html`

`admin/widgets/radio.html`

`admin/widgets/related_widget_wrapper.html`

`admin/widgets/split_datetime.html`

`admin/widgets/url.html`

`registration/logged_out.html`

`registration/password_change_done.html`

`registration/password_change_form.html`

`registration/password_reset_complete.html`

`registration/password_reset_confirm.html`

`registration/password_reset_done.html`

`registration/password_reset_email.html`

`registration/password_reset_form.html`