EC-CUBEのTwigから独自PHP関数を呼び出す方法

2021.09.17
EC-CUBE

EC-CUBEでは、テンプレートエンジンのTwigが使用されています！使い慣れている人であればなんて事ないんでしょうが、初めて使うとなるとなかなかとっつきにくいですよね。
なので今回は、実施にテンプレートエンジンのTwigファイルから独自に作成したPHP関数を呼び出して外部のWordPressの記事を表示させてみようと思います！

1. Twigから呼べるPHP関数を設定する
2. 本体ファイルは直接変更しない
3. TwigからPHP関数を呼ぶ
4. EC-CEBEにWordPressの記事を表示させる

Twigから呼べるPHP関数を設定する

百聞は一見にしかず。まずは追加するファイルを見てみましょう。

namespace Customize\Twig\Extension;
use Twig\Extension\AbstractExtension;
use Twig\TwigFunction;

class EccubeExtension extends AbstractExtension
{
    public function getFunctions()
    {
        return [
            new TwigFunction('get_wp_blog_posts', [$this, 'getWpBlogPosts']),
        ];
    }

    /**
     * WordPressのブログ記事を取得
     * テンプレートファイル(.twig)から呼び出し可能にする
     */
    public function getWpBlogPosts($url, $per_page = '5', $order_by = 'date'){

      // WP REST API
      $wp_api_url = $url . "wp-json/wp/v2/posts";

      // 取得条件パラメータ
      $get_params = array(
        'per_page='.$per_page,  // 取得数
        'status=publish',       // 公開ステータス
        'oederby='.$order_by,   // 並び替え
        '_embed'
      );
      $wp_api_url .= '?' . implode('&', $get_params);

      // 取得/取得エラーの場合はデータを空にする
      $wp_post_json = @file_get_contents($wp_api_url);
      if($wp_post_json){
        $wp_post_data = json_decode($wp_post_json, true);
      }else{
        $wp_post_data = array();
      }

      // 返却用のデータ整形
      $return_data = array();
      foreach($wp_post_data as $post){
        // タイトル
        $title = $post['title']['rendered'];
        // 投稿日付
        $date = date('Y年m月d日', strtotime($post['date']));
        // 投稿リンク
        $link = $post['link'];
        // 抜粋
        $excerpt = strip_tags(mb_strimwidth($post['excerpt']['rendered'], 0, 180, '…', "UTF-8"));
        // サムネイル画像
        $thumbnail = $post['_embedded']['wp:featuredmedia']['0']['media_details']['sizes']['thumbnail']['source_url'];
        $return_data[] = array(
          'title' => $title,
          'date' => $date,
          'link' => $link,
          'excerpt' => $excerpt,
          'thumbnail' => $thumbnail,
        );
      }

      return $return_data;
    }
}

本体ファイルは直接変更しない

上記内容でファイルを新規に追加します。ファイルパスは「app/Customize/Twig/Extension/EccubeExtension.php」になるようにします。
ここでポイントなのが「app/Customize/*」ディレクトリにファイルを新規に追加することです。

既存の本体ファイルを直接変更してしまうと、EC-CUBEのバージョンアップ等でファイルが上書きされてしまい、気づいたらせっかく編集した内容が消えてる！表示がくずれてる！なんてことが起きてしまいます。
しかし、「app/Customize/*」ディレクトリに追加したファイルは基本的にEC-CUBEの更新があっても変更されることはありませんので安心です！

TwigからPHP関数を呼ぶ

さっそくTwigから設定したPHP関数を呼んでWordPressの記事を取得してみましょう！

{% set WpBlogUrl = "https://lsd-blog.com/" %}
{% set WpBlogPosts = get_wp_blog_posts(WpBlogUrl, 5, date) %}

PHP関数の呼び出しは難しいことありませんよね！ただ関数名を書いて引数を渡してあげるだけです！

EC-CEBEにWordPressの記事を表示させる

こちらもさっそくコードを見てみましょう。


{% set WpBlogUrl = "https://lsd-blog.com/" %}
{% set WpBlogPosts = get_wp_blog_posts(WpBlogUrl, 5, date) %}
{% if WpBlogPosts is not null or WpBlogPosts is not empty %}
    {% autoescape false %}
    <aside class="wp-feed">
        <div class="wp-feed-title">
            <a href="{{ WpBlogUrl }}">
                ゆたブログ
            </a>
        </div>
        <ul class="wp_feed__list">
            {% for Post in WpBlogPosts %}
                <li class="wp_feed__item">
                    <a class="wp_feed__imgLink" href="{{ Post.link }}" title="{{ Post.title }}">
                        <img src="{{ Post.thumbnail }}" width="150" height="150">
                    </a>
                    <h3 class="wp_feed__title">
                        <a href="{{ Post.link }}">
                        {{ Post.title }}
                        </a>
                    </h3>
                    <p class="wp_feed__contents">
                        {{ Post.excerpt }}
                        <span>{{ Post.date }}</span>
                    </p>
                </li>
            {% endfor %}
        </ul>
    </aside>
    {% endautoescape %}
{% endif %}

取得したデータをforでまわして表示させてあげます。

.wp-feed-title {
    background-color: #FF6600;
    background-image: none;
    font-size: 16px;
    font-weight: bold;
    margin: 0;
    padding: 20px 15px;
    word-wrap: break-word;
    color: #FFFFFF;
}
.wp-feed-title a {
    color: #FFFFFF;
}
.wp_feed__list {
    list-style-type: none;
    padding: 0 4px;
}
.wp_feed__item {
    padding-top: 20px;
}
.wp_feed__item:last-child {
    padding-bottom: 20px;
}
.wp_feed__imgLink {
    display: block;
    float: left;
    width: 120px;
    height: 120px;
    overflow: hidden;
}
.wp_feed__title {
    width: calc(100% - 120px);
    float: right;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.5;
    margin-top: 0;
    margin-bottom: 10px;
    color: #2E7EC8;
    padding-left: 8px;
}
.wp_feed__contents {
    width: calc(100% - 120px);
    float: right;
    font-size: 1.3rem;
    line-height: 1.5;
    color: #505659;
    padding-left: 8px;
}
.wp_feed__contents span {
    display: block;
    font-size: 1.2rem;
    color: #505659;
    font-weight: normal;
    margin-top: 4px;
}
.wp_feed__item::after {
    content: "";
    display: block;
    clear: both;
}

さらに、こんな感じでスタイルを整えてあげると