WagtailでWEBページを追加する

ページの追加方法 Wagtail布教活動その4

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

おさらい・新規フィールド追加

その前に、HomePageクラスにもう一つフィールドを追加しておくとします。説明を付けられるようにnoteというフィールドをCharFieldで定義します。次のようになります。

from django.db import models
from wagtail.admin.edit_handlers import FieldPanel
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)
    note = models.CharField(max_length=100, blank=True)

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

これで名前、住所、説明が入れられるページの枠組みができました。models.pyのクラス構成を変更したので、データベースマイグレーションを忘れずやりましょう。やらないとWagtailが落ちます。

python manage.py makemigrations
python manage.py migrate

テンプレート修正・体裁

テンプレートもnoteフィールドが表示されるように改造します。{{ self.note }}タグで表示できます。ついでに体裁を簡単にBootStrapで整えておきましょう。

ということでhome_page.htmlは次のようになりました。

{% extends "base.html" %}

{% block extra_css %}
    <link rel="stylesheet" href="BootStrapCDN読み込み(省略)">
{% endblock %}

{% block content %}
    <div class="container mt-5">
        <div class="card text-center">
            <div class="card-header">
                <h2>
                    さいたま
                </h2>
            </div>
            <div class="card-body">
                <h1 class="card-title">{{ self.name }}</h1>
                <p class="text-muted">{{ self.address }}</p>
                <p>{{ self.note }}</p>
            </div>
        </div>
    </div>
{% endblock content %}

{% block extra_js %}
    <script src="BootStrapCDN読み込み(省略)">
{% endblock %}

BootStrapに必要なCSS、JSファイルはCDNから読み込みます。長いのでURLは省略しています。{% block extra_css %}{% block extra_js %}base.htmlから継承しているブロックタグで、home_page.htmlで実際のコードを実装しているということです。

今回はhome_page.htmlのみにBootStrapを適用していますが、サイト全体をBootStrapでデザインするのであれば、base.html側へCDN参照を書いておくことで、各ページのテンプレートでわざわざ別個に実装しなくてよくなります。

管理サイトでページを追加する

つづいて管理サイトへログインします。開発サーバーが起動していなければ起動します。

http://localhost:8000/admin/ からログインします。

ログインしたら、左のメニューからPagesを展開してホームページをクリックします。

wagtail_page_add1.png

ADD CHILD PAGEボタンをクリックします。

wagtail_page_add2.png

その名の通りですが、これでホームページを親とした新規の子ページが作成されます。

新規ページの編集画面になるので、必要事項を埋めます。新しくNOTEフィールドができていますね。

wagtail_page_add3.png

あとはPUBLISHボタンで公開できるのですが、その前にやっておきたいことがあります。URLの設定です。

デフォルトではページURLはTITLEに入れた文字がそのまま使われます。つまりこの場合「浦和区」になってしまいます。

PROMOTEタブをクリックすると実際に確認できます。

wagtail_page_add4.png

wagtail_page_add5.png

SlugがそのページのURL(の一部)になります。バリバリ日本語になってます。別にこのままでもちゃんとうごきますし、最近のブラウザーなら日本語URLのまま表示されます。でも個人的に嫌なので英数字にしておきます。このまま書き換えることが出来ます。

wagtail_page_add6.png

PROMOTEタブでは、この他にブラウザに表示されるタイトルや、検索エンジンに提示する概要文などを設定できます。本番環境ではそれらも設定することになります。

下部メニューを展開してPUBLISHで公開できます。初期状態ではホームページがルート(index.html扱い)になっているので、子ページはルート直下にできていて、アドレスは ホスト名/ページSlug/です。アクセスしてみると

wagtail_page_add7.png

バッチリ入力した内容で表示されました。

同じ要領でホームページ配下に子ページをもう一つ作ります。

wagtail_page_add8.png

PUBLISHで公開します。同様にページSlugでアクセスできます。

wagtail_page_add9.png

このように枠は同じで中身だけ違う、たとえばブログみたいなサイトは最低限の手間でもりもり新規投稿を追加していけます。

Pages→ホームページでページの階層構造がどのようになっているか確認することができます。

wagtail_page_add10.png

ホームページの下に2つのページがぶら下がっていることがわかります。ここから各ページの編集画面にもいけますし削除、移動などもできます。

子ページにもADD CHILD PAGEボタンがあり、さらにページをぶら下げることができます。孫ページまで作成した場合は、ホスト名/子ページSlug/孫ページSlug/というURLになるわけです。

このようにしてWagtailでは簡単にページを追加、管理できます。


次回は今回のホームページとは構造が違うタイプのページを作成してみます。

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

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

Read More ...
WagtailでWEBページを表示する 後編
管理サイトでページ編集 Wagtail布教活動その3

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

Read More ...
WagtailのSitemapのhttpをhttpsにする
Sitemapのhttpをhttpsに変更する方法。

Wagtailではサイトマップを動的に自動生成してくれますがプロトコルがhttpになってしまうことがあります。httpsにするには管理サイトから設定が必要です。

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

2020-07-25

更新日

2020-07-26

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