EC-CUBE4でWordPressの投稿記事を簡単に出力する方法

EC-CUBE Advent Calendar 2020 4日目の記事です。

EC-CUBE4でサイトを公開したが、商品紹介記事などはWordPressで作成しており、その記事をEC-CUBE側で公開したいという要望が時々あります。

そこで簡単にWordPress側から記事を取得してEC-CUBE4へ表示させる方法を書いていきます。

今回は、

EC-CUBE4のURL
http://xxxxx/
WordPressのURL
https://xxxxx/blog

というように、同一ドメインでEC-CUBE4とWordPressが動作されている事を想定しています。

前提としてWordPress側でREST APIが有効になっている必要があります。

WordPressから記事情報を取得

トップページへアクセスした時にブログ記事を取得するパターンを想定してみます。今回は簡単にController側で処理をしてその内容を表示させます。

以下の内容をTopController.phpへ記述します。

src/Eccube/Controller/TopController.php

/**
 * @Route("/", name="homepage")
 * @Template("index.twig")
 */
public function index(Request $request)
{

    // ブログ情報を取得
    $posts = json_decode(file_get_contents($request->getSchemeAndHttpHost().$request->getBasePath().'/blog/wp-json/wp/v2/posts?per_page=3&_embed'));

    $blogDatas = [];
    foreach ($posts as $data) {
        $item = [];
        $item['title'] = $data->title;
        $item['date'] = $data->date;
        $item['link'] = $data->link;
        $name = 'wp:featuredmedia';
        if (isset($data->_embedded->{$name})) {
            $item['attachment'] = $data->_embedded->{$name}[0];
        }
        $name = 'wp:term';
        if (isset($data->_embedded->{$name})) {
            $item['category'] = $data->_embedded->{$name}[0];
        }
        $blogDatas[] = $item;
    }

    return [
        'blogDatas' => $blogDatas,
    ];
}

ソース中にある

// ブログ情報を取得
$posts = json_decode(file_get_contents($request->getSchemeAndHttpHost().$request->getBasePath().'/blog/wp-json/wp/v2/posts?per_page=3&_embed'));

がWordPress側と通信して記事を取得する部分となります。

$request->getSchemeAndHttpHost().$request->getBasePath()

でドメイン部分を構築させています。Requestクラスについて詳しくはこちらをご覧ください。 fivestar.hatenablog.com

その後に続く、

/blog/wp-json/wp/v2/posts?per_page=3&_embed

がREST APIを利用した記事取得部分となります。

「per_page=xx」というパラメータをつける事でxx件まで記事のデータを取得することができます。今回は3としているため、3件データを取得しています。

また、「&_embed」というパラメーターはアイキャッチの情報を含めたデータを取得することができます。他のAPIの種類やパラメーターはこちらをご覧ください。

Reference | REST API Handbook | WordPress Developer Resources

これでデータが取得できましたので、twig側へ扱いやすいように整形します。

    $blogDatas = [];
    foreach ($posts as $data) {
        $item = [];
        $item['title'] = $data->title;
        $item['date'] = $data->date;
        $item['link'] = $data->link;
        $name = 'wp:featuredmedia';
        if (isset($data->_embedded->{$name})) {
            $item['attachment'] = $data->_embedded->{$name}[0];
        }
        $name = 'wp:term';
        if (isset($data->_embedded->{$name})) {
            $item['category'] = $data->_embedded->{$name}[0];
        }
        $blogDatas[] = $item;
    }

この箇所は、WordPress側から取得したデータ必要な分だけ取り出しています。タイトルや日付、リンク先など最低限必要なものを取り出しています。

これでController側の処理が終わりました。次にTwigへの記述方法を説明します。

Twigへ取得した記事情報を表示させる

twig側は特に難しい事をするわけでもなく普通にタグを記述するのみです。今回は直接src直下にあるindex.twigを修正します。

src/Eccube/Resource/template/default/index.twig

{% if blogDatas|length > 0 %}
    <section class="blog">
        <div class="row">
            {% for blogData in blogDatas %}
                <div class="col-3">
                    <a href="{{ blogData.link }}" target="_blank" rel="noopener">
                        {% if blogData.attachment is defined %}
                            <figure class="thumbnail">
                                <img src="{{ blogData.attachment.source_url }}" alt="{{ blogData.title.rendered }}">
                            </figure>
                        {% endif %}
                        {% if blogData.category is defined %}
                            <p class="category">{% for category in blogData.category %}{{ category.name }}{% if not loop.last %},{% endif %}{% endfor %}</p>
                        {% endif %}
                        <p class="title">{{ blogData.title.rendered }}</p>
                    </a>
                    <time>{{ blogData.date|slice(0, 10)|replace({'-': '.'}) }}</time>
                </div>
            {% endfor %}
        </div>
    </section>
{% endif %}

blogDatasはController側から渡された変数となり、記事が存在すれば表示させるという処理を行っています。

タグの記述方法はデザインに合わせて記述してください。

上記を記述後、EC-CUBE4のトップページへアクセスするとブログ記事が表示されるようになります。

以上でWordPressから記事を取得して表示させる方法となりますので参考にしてください。