pythonのflaskでwordpress apiを使ったレンダリング[python]

Python

2020.05.10

この記事は約7分で読めます。

目的
環境
何ができるのか
ソースコード
使い方
まとめ

目的

pythonを使ったAPI Viewerの作成をしてみたかった。
最近流行の兆しを見せつつあるHeadless CMSにpythonで対応してみよーという単なる思いつき。
web frameworkはflaskを採用。小さいプロジェクトには使いやすいですからね。

環境

OS: macOS Catalina
python: Python 3.6.10 :: Anaconda
module: pathlib, flask, HTMLParser

何ができるのか

こんな感じのレンダリングができます。

ソースコード

GitHub - wmapst/wmap_wordpress_lib

Contribute to wmapst/wmap_wordpress_lib development by creating an account on GitHub.

使い方

git clone https://github.com/wmapst/wmap_wordpress_lib.git
cd wmap_wordpress_lib
cp env.py.sample env.py
vi env.py
python make_source.py

※そもそもAPIからデータを取得するにあたって、対象とするWordPressのAPIを使えるようにしてください。

env.py の編集内容については、env.py.sample に記載の通りです。

PER_PAGE = 10 # 取得する記事数です。上限値:100
DESCRIPTION_LIMIT = 200 # キャプションの文字数制限です。
HOST_URL = 'https://www.hogehoge.net' # URLの最後のスラッシュ[/]は含めないでください。
STATIC_FOLDER = 'html/static' # static ファイルの設置ディレクトリを指定してください。
TEMPLATE_FOLDER = 'html/templates' # template ファイルの設置ディレクトリを指定してください。
HTML_FILEPATH = 'wp-list.html' # レンダリングさせたいHTMLファイル名を入力してください。 * html/templates は省略
FAVICON_FILE = 'img/favicon.ico' # faviconとして設定したいファイルを入力してください。 * html/static/ 以降を入力してください。

レンダリングに用いるHTMLとCSSはhtmlに格納してあります。
一応部品ごとに分けたファイルにしてあり、以下のような感じです。

layout.html

<!doctype html>
<html lang="ja">
    <head>
        {% include "head.html" %}
    </head>

    <body>
        {% include "header.html" %}
        {%- block content %}{% endblock %}
        {% include "footer.html" %}
    </body>
</html>

head.html

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="{{host_url}}static/css/style.css">
<title>wmap_wordpress_lib</title>

header.html

# 空ファイル

wp-list.html

{%- extends "layout.html" %}
{%- block content %}
<div class="wp-contents">
    {% for contents in wp_contents %}
        <a href="{{contents.wp_link}}" class="wp-link">
            <article class="wp-article">
                <figure class="wp-imagebox">
                    <img src="{{contents.wp_image}}" alt="{{contents.wp_title}}" class="wp-image" />
                </figure>
                <div class="wp-caption">
                    <h3 class="wp-title">{{contents.wp_title}}</h3>
                    <p class="wp-description">{{contents.wp_description}}</p>
                    <p class="wp-date">{{contents.wp_date}}</p>
                </div>
            </article>
        </a>
    {% endfor %}
</div>
{%- endblock %}

footer.html

# 空ファイル

style.css

@charset 'utf-8';

body {
    background: #ffffff;
    line-height: 1.8;
    font-size: 18px;
}

figure {
    margin: 0;
}

.wp-contents {
    display: block;
    max-width: 1000px;
    height: auto;
}

.wp-link {
    margin: 10px 0 10px 0;
    display: block;
    border: 1px solid #dddddd;
    text-decoration: none;
    color: #333;
    padding: 1.5%;
}

.wp-article {
    position: relative;
    height: 100%;
    display: inline-block;
}

.wp-imagebox {    
    width: 320px;
    float: left;
}

.wp-image {
    max-width: 100%;
    border: 1px solid #dddddd;
    height: auto;
}

.wp-caption {
    margin-left: 330px;
}

.wp-title {
    font-size: 18px;
    margin: 0 0 5px 0;
    line-height: 1.2;
    font-weight: bold;    
}

.wp-description {
    font-size: .8em;
    max-height: 7.8em;
    line-height: 1.3;
}

.wp-date {
    font-size: .8em;
}

@media screen and (max-width: 480px) {
    .wp-description {
        display: none;
    }
    .wp-imagebox {    
        float: unset;
        width: 100%;
        text-align: center;
    }
    .wp-caption {
        margin-left: 0;
    }    
}

まとめ

とりあえず作ってみただけ、という感じなので、これからまだ改修を入れていく予定です。
そもそも、wordpressのコピーサイトをflaskで作ってみるというのも面白そうなので、そこまでやるかもしれません。
また、wordpressの新着記事一覧メルマガを自動生成させる機能なんかもニーズがありそうなので、それも作ろうかなーと考えています。