DjangoのCMS, Wagtailの使い方をわかりやすく解説します

作成日: 2021-08-19
更新日: 2023-12-24
カテゴリ: Django

DjangoのCMS, Wagtailの使い方

Django製のCMSはいろいろありますが、今回はその中でも最近人気のあるWagtailというCMSの使い方を解説したいと思います。
Wagtailはカスタマイズ性に優れたCMSで、基本的なCMSの機能を利用して独自のサイトを作ることも可能になっています。

この記事では具体的にCMSであるWagtailについて↓を見ていきます。

解説するWagtailのバージョン
Wagtailのインストール方法
Wagtailのインデックスページ
Wagtailの管理サイトの使い方
Wagtailのhomeのページの拡張

解説するWagtailのバージョン

今回解説するWagtailのバージョンは2.13.2です。
バージョンが違う場合は細かい所、たとえば管理サイトのボタンの名前とかが違う場合があります。
あらかじめご了承ください。

Wagtailのインストール方法

Wagtailはpipなどのパッケージマネージャーでインストールします。
pipを使う場合は↓のようにwagtailをインストールします。

$ pip install wagtail

wagtailをインストールすると環境でwagtailを使えるようになります。
wagtailのstartコマンドでサイトを作成します。

$ wagtail start mysite

今回はmysiteというプロジェクト名にしています。
mysiteに移動してrequirements.txtに書かれている外部ライブラリをインストールします。
それからモデルをデータベースに適用して管理ユーザーを作ります。
あとは開発サーバーを起動します。

$ cd mysite  
$ pip install -r requirements.txt  
$ python manage.py migrate  
$ python manage.py createsuperuser  
$ python manage.py runserver

Wagtailのインデックスページ

開発サーバーを起動すると↓のようなインデックスページがhttp://localhost:8000/に表示されます。

これでWagtailのインストールは完了しました。

Wagtailの管理サイトの使い方

Wagtailの管理サイトはhttp://localhost:8000/admin/なので、ここにアクセスします。
すると↓のような管理サイトへのログイン画面が表示されます。

さきほど作成した管理ユーザーのユーザー名とパスワードを入力してログインします。
すると↓のような管理サイト画面になります。

デフォルトの状態ではページが一枚作成されています。
これはさきほどのWagtailのインデックスページ（http://localhost:8000/）です。

左のメニューから「Pages」をクリックします。
すると↓のような画面になります。

開いた画面の「Home」アイテムをクリックします。
すると↓のような画面になります。

Wagtailではページの表示を確認することができます。
タイトルの下にある「VIEW LIVE」というボタンをクリックします。
するとブラウザのタブが1つ開いて、ページのライブ状態（現在の公開状態）が表示されます。

ちなみにドラフトのページを作ると、ここに「VIEW DRAFT」というボタンが追加されます。
Wagtailではドラフト（公開してない下書き）のページをブラウザで表示して確認することができます。
その場合はこの「VIEW DRAFT」のボタンをクリックします。

ページのコンテンツの変更

デフォルトで作成されている「Home」のページのコンテンツ（タイトルやテキスト内容などを）編集したい場合は、「Edit」ボタンをクリックします。
すると↓のような画面になります。

デフォルトの状態ではタイトルしか編集できません。
ページのコンテンツの編集などは後述の「Home」のページの拡張が必要になります。

サイトのタイトルを編集して↓にある「SAVE DRAFT」をクリックするとページがドラフトとして保存されます。
「SAVE DRAFT」の横のメニューを開くと↓のような画面になります。

「PUBLISH」ボタンをクリックするとページをネットに本公開することが出来ます。

サイト名の変更

サイト名を変更するには左のメニューから「Settings」をクリックします。
そして開いた画面の「Sites」をクリックします。

「Sites」を開くと↓のような画面になります。

「localhost」というアイテムをクリックして、↓のようにサイト名を変更します。
保存する場合は「Save」ボタンをクリックします。

保存に成功すると↓のような画面になります。

サイトを確認すると、ブラウザに表示されるサイト名が変更したサイト名になります。

Wagtailのhomeのページの拡張

Wagtailが表示しているインデックスのページを拡張してみます。
インデックスのページはWagtailがデフォルトで作成しているhomeアプリが表示しています。
つまりhomeアプリのファイルを編集すればページの内容を変更することが出来ます。

モデルの拡張

home/models.pyをエディターで開いて↓のように編集します。

from django.db import models  

from wagtail.core.models import Page  
from wagtail.core.fields import RichTextField  
from wagtail.admin.edit_handlers import FieldPanel  


class HomePage(Page):  
    body = RichTextField(blank=True)  

    content_panels = Page.content_panels + [  
        FieldPanel('body', classname="full"),  
    ]

↑のHomePageというのが「Home」のモデルです。これはPageモデルを拡張しています。
body属性はRichTextFieldですが、これを追加すると「Home」のモデルにリッチなテキストフィールドを追加できます。

content_panels属性には管理サイトに表示するパネルの設定を入れておきます。
ここではPageのcontent_panelsにbodyというパネルを追加しています。
これで管理サイトからbodyの値を入力することが出来るようになります。

モデルを拡張したらmakemigrationsとmigrateを実行します。

$ python manage.py makemigrations  
$ python manage.py migrate

これでデータベースにモデルの拡張が反映されました。

テンプレートファイルの拡張

モデルを拡張しただけでは「Home」のページの内容は変更できません。
テンプレートファイルの編集も必要です。
home/templates/home/home_page.htmlをエディタで開くと↓のようになっています。

{% extends "base.html" %}  
{% load static %}  

{% block body_class %}template-homepage{% endblock %}  

{% block extra_css %}  

{% comment %}  
Delete the line below if you're just getting started and want to remove the welcome screen!  
{% endcomment %}  
<link rel="stylesheet" href="{% static 'css/welcome_page.css' %}">  
{% endblock extra_css %}  

{% block content %}  

{% comment %}  
Delete the line below if you're just getting started and want to remove the welcome screen!  
{% endcomment %}  
{% include 'home/welcome_page.html' %}  

{% endblock content %}

これを↓のように編集します。

{% extends "base.html" %}  

{% load wagtailcore_tags %}  

{% block body_class %}template-homepage{% endblock %}  

{% block content %}  
  <h1>{{ page.title }}</h1>  
  <article>{{ page.body|richtext }}</article>  
{% endblock %}

内容的にはpageのタイトルと、テキスト（body）を表示しています。

以上の変更を行い、ブラウザで「Home」のページを確認すると、↓のように表示されます。

おわりに

今回はWagtailの使い方を簡単に見てみました。
Wagtailでブログなどを作りたい場合はブログ用のモデルやテンプレートファイルを定義する必要があります。
このようにWagtailは非常にカスタマイズ性にすぐれたCMSです。
既存のパーツを使えば簡単に構築できそうですね。

GitHubなどで「wagtail blog」などで検索するとWagtailで実装されたブログのアプリが多数ヒットします。
これらのリポジトリを使ってブログなどを構築しても良いかと思います。

🦝 < Wagtailを日本語にすると

🐭 < 「セキレイ」っていう意味になるよ

ユーニックス総合研究所