【ECCUBE4】WordPress連携して記事を埋め込む方法

2020.10.07

ECオープンプラットフォームEC-CUBE

※この記事は上級者向きの記事です。

今回は同じドメイン内でEC-CUBE4とWordpressを連携して構築するカスタマイズ方法です。
Wordpressの投稿をEC-CUBE側で表示させます。

feedから読み込むこともできますが、
同じドメイン（サーバ）内であれば”wp-load.php”を読み込む方法が早くて確実です。

もしECCUBEとWordpressが同じサーバ内にない場合は、feedで行うことができます。以下を参考にしてください。

【ECCUBE4】WordPress連携して記事を埋め込む方法feed編

今回は同じドメインという条件で”wp-load.php”を読み込む方法をお伝えします。
以下の通りに行えば超簡単！

※カスタマイズになるのでバックアップを取りながら進めましょう。

wp-load.phpを読み込む
投稿内容を条件により取得する
WordPressアイキャッチやNEWマークも可能
テンプレート側(twig)で設置

wp-load.phpを読み込む

WordPressの投稿を読み込みたいPHPファイル（XXXXController.php）で以下を設置します。

PHP

require_once($_SERVER['DOCUMENT_ROOT'].'/wordpress/wp-load.php');

“wordpress”はあなたの環境のWordpressインストールフォルダと置き換えてください。
wp-load.phpを読み込むことでWordpressの関数が利用できるようになります。

投稿内容を条件により取得する

以下はpost_typeが”sample”の記事を最新から5件取得し”SampleList”に格納してテンプレート（twig）に渡すサンプルです。

PHP


    $args = array(
        'post_type' => 'sample',
        'posts_per_page' => 5,  // 最新から5件取得
    );

    $wp_samples = get_posts($args);
    foreach ($wp_samples as $val) {
        $samples[$i]['title'] = $val->post_title; // タイトル
        $samples[$i]['link'] = "/sample/".$val->ID; // リンク先
        $samples[$i]['date'] = $val->post_date; // 投稿日
        $samples[$i]['description'] = get_the_excerpt($val->ID); // description
        $i++;
    }

    return [
        'SampleList' => $samples,
    ];

“sample”や”5″はあなたの環境にあわせて置き換えてください。

WordPressアイキャッチやNEWマークも可能

必要に応じて、foreach文の中に追加しましょう。

アイキャッチ画像

アイキャッチ画像は以下で取得可能です。

PHP

$samples[$i]['image'] = get_the_post_thumbnail_url($val->ID,'thumbnail');

NEWマーク判断

NEWマークは以下で取得可能です。
投稿日から5日間はtrue,それ以外はfalseを返す処理となっています。

PHP

// 5日前取得
$last_date = date('Ymd', strtotime('-5 day', time()));
if (date('Ymd', strtotime($val->post_date)) >= $last_date){
    $samples[$i]['newmark'] = true;
}else{
    $samples[$i]['newmark'] = false;
}

テンプレート側(twig)で設置

テンプレートでは取得したデータをfor文で以下のようにして値を設置できます。HTMLは適当ですので、自由に調整してくださいね。

HTML

    {% for Sample in SampleList%}
      <a href="{{ Sample.link }}">

          <!-- アイキャッチ画像(なければ/common/default.png） -->
          <img src="{% if Sample.image %}{{ Sample.image }}{% else %}/common/default.png{% endif %}" alt="{{ Sample.title }}">

          <!-- タイトル -->
          <h3>{{ Sample.title }}</h3>

          <!-- 投稿日'Y.m.d'とNEWマーク -->
          {{ Sample.date|date('Y.m.d') }}{% if Sample.newmark %}NEW!!{% endif %}

          <!-- description -->
          <p>{{ Sample.description }}</p>

      </a>
    {% endfor %}

Wordpress連携して記事を埋め込む方法のまとめ