WagtailでWEBページを表示する 後編

管理サイトでページ編集 Wagtail布教活動その3

前回に続きWagtailでWEBページを作成します。

WagtailでWEBページなどのコンテンツの管理を行うには、管理サイトへログインします。

管理サイトへログイン

管理サイトは初期設定ではホスト名に続けて/admin/でアクセスできます。さっそくrunserverでサーバーを起動してhttp://localhost:8000/admin/にアクセスしましょう。

次のようなログインフォームが表示されます。

wagtail_home7.png

プロジェクト開始時に作成したsuperuserでログインできます。ログインが成功すると、次のようなメニュー画面が表示されます。

wagtail_home8.png

左のメニューからPagesHomeをクリックします。

このHomeが前回表示させたホームページになります。EDITボタンを押します。

wagtail_home9.png

TITLEを編集できるようになります。適当に書き換えて

wagtail_home10.png

wagtail_home11.png

画面下の方にあるボタンを展開してPUBLISHをクリックします。

wagtail_home12.png

ページが公開状態になります。VIEW LIVEをクリックすると実際の表示が確認できます。

wagtail_home13.png

ページのタイトル(タブに表示)が書き換えられました。

wagtail_home14.png

初期状態ではタイトルしか編集できませんが、ここへ新しく入力欄を追加して、それをページ上へ表示できるようになれば、ようやくCMSらしくなります。

ページ編集画面のカスタマイズ

ページ編集画面自体の編集はPythonコードで行います。

プロジェクトのhomeアプリからmodels.pyを開きます。

wagtail_home15.png

次のようなクラスがすでに定義されています。

from django.db import models
from wagtail.core.models import Page

class HomePage(Page):
    pass

何も中身がないクラスです。このクラスがページの枠組みだと思ってください。Wagtailのページはこのmodels.pyへクラスのかたちで定義していきます。

では、HomePageクラスへ新しく「名前」と「住所」を入力できるようにしてみます。

from django.db import models
from wagtail.core.models import Page

class HomePage(Page):
    name = models.CharField(max_length=20, blank=True)
    address = models.CharField(max_length=100, blank=True)

    content_panels = Page.content_panels + [
        FieldPanel('name'),
        FieldPanel('address'),
    ]

やり方は簡単で、クラスのフィールドとして必要な項目を定義して、どのようなデータを入れるのかをdjango.db.modelsモジュールのクラスで指定します。

models.CharField()で文字データを格納できるフィールドになります。max_lengthは最大文字数を指定する引数で必須なので適当に数値を指定します。blankはフィールドが空の状態を許可するかで、特にこだわりがなければTrueを指定しておきましょう。この引数はオプションですが、デフォルト(False)にしておくと後のデータベースへの反映の手順で余計な手間が発生するので、とりあえずTrueにしておくことをオススメします。

その他にも数値用フィールドなどいろいろタイプがあるのですが、機会があれば別記事で紹介したいです。

Page.content_panelsで編集画面のインターフェイスを定義しています。FieldPanel()でクラスのフィールド名を指定すると、そのフィールドの入力欄が作られます。

最後にこれらをデータベースへ反映します。

データベースマイグレーション

Wagtailでのコード上の変更をデータベースへ適用する作業をマイグレーションと称します。ページクラスのフィールドの値はデータベースに保存されますので、フィールドが増えた、減った、名前が変わった等をデータベースにも教えてあげなければなりません。

まずターミナルで次のコマンドを実行します。カレントディレクトリはWagtailのプロジェクトフォルダです。

python manage.py makemigrations

すると次にようなメッセージが出ます。数字の部分は実行環境により変わります。

Migrations for 'home':
  home\migrations\0003_auto_20200301_1718.py
    - Add field address to homepage
    - Add field name to homepage

続けて、次のコマンドを実行します。

python manage.py migrate

次のようなメッセージが出ればデータベースへの反映が完了しています。

Operations to perform:
  Apply all migrations: admin, auth, contenttypes, home, (略)
Running migrations:
  Applying home.0003_auto_20200301_1718... OK

models.pyでクラスの構成を変更したときは面倒ですが、原則このマイグレーションを実行する必要があります。やらないで編集画面にアクセスするとエラーでWagtailが落ちます。

migrate実行後に再度編集画面を表示すると新しく入力フィールドが追加されています。

wagtail_home16.png

この状態で、何か適当に入力してPUBLISHで公開してホームページへアクセスしても、何も表示が変わっていません。これは入力した値はデータベースには記録されていますが、それを表示する部分がないからです。models.pyの役目はここまでで、表示に関してはテンプレートが担っていますので、テンプレートを編集します。

templatesフォルダのhome/home_page.htmlを次のように書き換えます。

{% extends "base.html" %}

{% block content %}
    <h1>さいたまさいたま</h1>
    <h2>{{ self.name }}</h2>
    <p>{{ self.address }}</p>
{% endblock content %}

考え方としては、先ほど定義したHomePageクラスがこのテンプレートに読み込まれていると思ってください。{{ }}タグでクラスのフィールドを指定してあげると、その値がテンプレートに組み込まれて表示されます。

適当に入力して

wagtail_home17.png

PUBLISHしてページをリロードすると、次のように入力した値が指定した場所に表示されました。

wagtail_home18.png

クラスとテンプレートの対応は名前で自動的に決まります。今回の場合HomePageクラスはhome_page.htmlテンプレートへ読み込まれます。

例えば
SaitamaCityクラスを定義したのであれば
saitama_city.htmlという名前でテンプレートを用意します。

この法則を守ればWagtailが自動的にクラスとテンプレートを対応させますので、別途設定する必要はありません。

以上がWagtailのWEBページ作成の基本です。次回は作成したページをベースにして、内容が異なるページを追加していきます。

次回

ページを追加する

related pages
WagtailでWEBページを追加する
ページの追加方法 Wagtail布教活動その4

WagtailでWEBページを追加するのは簡単です。ここからがCMSの本領発揮です。前回作成したホームページをベースに内容が異なるページを追加していきます。

Read More ...
Wagtailのはじめかた
CMSもPythonにしよう! Wagtail布教活動その1

CMSはPHPの天下となって久しいですが、Python使いなら、全部Pythonで済ませたいですよね。そんなあなたにWagtailです。CMSもPythonにすれば、WEBサイト作成のためだけにわざわざPHPを習得する必要がなくなり、WEBサーバーにPHPをインストールしなくてよくなります。

Read More ...
WagtailでWEBページを表示する 前編
テンプレートでWEBページ Wagtail布教活動その2

HTMLファイルはテキストデータなので、<html>から始まり</html>で終わるまでの文字列を作成するわけですが、これを純粋にPythonのソースコードだけでやるとものすごい大変です。Wagtailにはそんなことをする必要がないようにしくみが備わっています。

Read More ...
この記事の
作成日

2020-03-24

更新日

2020-07-25

ページ内検索
目次
WEB MASTER
さいた
神エクセル撲滅協会理事(自称)
さいたま市民 埼玉こそ地上の楽園