DjangoのCMS, Wagtailの使い方をわかりやすく解説します
目次
- DjangoのCMS, Wagtailの使い方
- 解説するWagtailのバージョン
- Wagtailのインストール方法
- Wagtailのインデックスページ
- Wagtailの管理サイトの使い方
- Wagtailのhomeのページの拡張
- おわりに
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を日本語にすると |
(・ v ・) | 「セキレイ」っていう意味になるよ |