1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

WagtailでWebサイト作成

Posted at

##Wagtail とは
Wagtailとは、Python・Djangoを用いてWebサイトを作るためのCMSです。
簡単にいうと、WordPressのような感じです。

公式ドキュメントのチュートリアルにしたがって進めていきます。

##インストール
###仮想環境作成
ここでは、.venvという名前の仮想環境を作ります。
この後、mysiteというディレクトリを作成し、その中に仮想環境を作ります。

python3 -m venv mysite/.venv

###インストール

pip install wagtail

インストールしたら、Wagtailのプロジェクトを作成します。
Djangoでいう、django-admin startproject <プロジェクト名>のような感じです。
.venvと同じディレクトリにプロジェクトを作成したいので、「既にあるmysiteディレクトリの中にWagtailのプロジェクトmysiteを作ってね」と命令します。

wagtail start mysite mysite

後ろのmysiteは、プロジェクト名に変換してください。
これを実行すると、mysiteという名前のディレクトリが追加され、そこに必要なファイルが入っています。

次に、必要なライブラリをインストールします。
mysiteディレクトリ内にrequirements.txtが含まれているので、mysiteディレクトリに入ってpipインストールします。また、migrate, createsuperuserします(ここはDjango自体に必要な部分です)。

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

ここまででサイト表示に必要な設定は完了しました。サイトを開いてみましょう。

>python manage.py runserver

ブラウザを開いて、localhost:8000にアクセスしてみましょう。
成功した画像.png
このようなページが表示されていれば、成功です!

createsuperuserしたので、管理サイトにもアクセスできます。
localhost:8000/adminにアクセスすると、こんな感じの画面が現れます。
管理画面.png
"
usernameとpasswordを入力してログインしてみると、こんな感じです。
管理画面.png
シンプルで、操作しやすそうですね!

##Homeページに文字を表示する

先ほど表示されたウェルカムページを編集できるようにしていきます。
Wagtailのインストール時に作成されたディレクトリに、mysite/home以下があり、この中にあるmodels.pyがホームページのデータベースを定義しています。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"),
    ]

bodyはWagtail独自のRichTextFieldとして定義されています。content_panelsでは、ページの編集画面でできることやレイアウトを定義します。

ここまでできたら、python manage.py makemigrations python manage.py migrateを実行して、データベースにmodels.pyの変更を反映させましょう。
これで、Wagtailの管理サイトからホームページを編集できるようになります。
管理サイトにアクセスして、Pages→Homepage→Editの順に進みます。先ほどHomePageクラスにbodyとcontent_panelsを追加したので、下の画像のペンで囲った部分が増えました。

この管理サイト上のテキストエディタは、編集することはできるのですが、まだ保存しても内容がページに反映されません。Wagtailは、models.pyのクラス名を単語ごとに_で区切った名前のファイルをテンプレートファイルとして使用します(例:HomePageクラスのテンプレートは、home/home_page.html)。テンプレートファイルは、アプリケーション内のtemplatesディレクトリ下に配置します。(今回は、home/templates/home/home_page.html)

今はhome_page.htmlが用意されているので、それを次のように編集します。

{% extends "base.html" %}

{% load wagtailcore_tags %}  <!-- Wagtail独自のテンプレートタグとフィルター --!>

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

{% block content %}
    {{ page.body|richtext }} <!-- ここに、管理サイトのBODYブロックで編集したテキストが入る -->
{% endblock %}

これで、管理サイトでの変更がページに反映されるようになりました。

##おわりに
この記事では、Django製CMSのWagtailを使ってWebサイトを作成する方法を簡単に書きました。
私もWagtail初心者なのですが、管理サイトがスタイリッシュで気に入りました。これからどんどん使っていこうと思います!
この記事の内容で、何か間違っていることなどがあればご意見ください。

##参考
Your first Wagtail site - Wagtail 2.12 documentation

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?