EC-CUBE4のサイトにWordPressの投稿一覧を表示する方法

EC-CUBE4のサイトにWordPressの投稿一覧を表示する方法

EC-CUBE4のサイトにWordPressの投稿一覧を表示する方法
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加
  • follow us in feedly


  • 一式98,000円~の格安プランをご用意!Web制作お任せください!
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

EC-CUBE4のサイトにWordPressの投稿一覧を表示する方法をご紹介いたします。紹介する方法を使えば、投稿一覧だけでなくWordPressの色んな情報をEC-CUBE側に表示させることが可能です。

スポンサードリンク

環境について

今回、EC-CUBE4にWordPressの投稿一覧を表示させた環境は、以下の通りです。EC-CUBEとWordPressは同じサーバー上にインストールされています。

  • EC-CUBEのバージョン:4.0.3
  • WordPressのバージョン:5.3.2
  • EC-CUBEインストールディレクトリ:ec
  • EC-CUBEテンプレート:default
  • WordPressインストールディレクトリ:wp

EC-CUBE4のサイトにWordPressの投稿一覧を表示する方法

ステップ1. WordPressの投稿一覧を読み込むPHPファイルの作成

まずは、WordPressの投稿一覧を読み込むためのPHPファイルを作成します。今回はwp_news.phpというファイル名で作成しました。

wp_news.phpの中身は以下の通りです。

<?php 
$webroot = $_SERVER['DOCUMENT_ROOT'];
require ($webroot.'/wp/wp-load.php');
?>
 
<section>
   <h2>新着情報</h2>
   <?php
      $args = array(
         'posts_per_page' => 5,
         'post_type' => 'post'
      );
      $posts = get_posts($args);
   ?>
   <?php if($posts): ?>
   <ul>
      <?php foreach($posts as $key => $post): setup_postdata($post); ?>
      <li>
         <a href="<?php the_permalink(); ?>">
            <?php the_title(); ?>
         </a>
      </li>
      <?php endforeach; ?>
   </ul>
   <?php endif; ?>
   <?php wp_reset_postdata(); ?>
</section>

WordPressのインストールディレクトリ内にあるwp-load.phpを読み込むことで、WordPressの関数が利用できるようになります。

ファイルの設置場所は任意のディレクトリで大丈夫ですが、今回は「html/template/default/assets/php」に設置しています。

ステップ2. EC-CUBEからPHPファイルの読み込み

EC-CUBE側からPHPファイルを読み込みます。ブロックもしくはページの投稿一覧を表示させたい箇所で、以下を記述します。

{% set home_url = url('homepage') %}
{% set news_path = asset('/html/template/default/assets/php/wp_news.php') %}
{% set news_url = home_url~news_path %}
{{ php_file_get_contents(news_url) }}

file_get_contentsでPHPファイルを読み込んでいますが、EC-CUBE4のブロックやページ内でPHPの関数を利用するには、先頭に「php_」を付けてあげます。

もし、まだテスト環境でサイトにBasic認証をかけているという場合は、以下のようにBasic認証を通したうえでfile_get_contentsを実行する必要があります。

{% set home_url = url('homepage') %}
{% set news_path = asset('/html/template/default/assets/php/wp_news.php') %}
{% set news_url = home_url~news_path %}
 
{% set basic = ['User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100','Authorization: Basic ' ~ php_base64_encode('id:password')] %}
{% set options = {'http': {'header' : php_implode("\r\n", basic )}} %}
 
{{ php_file_get_contents(news_url, false, php_stream_context_create(options)) }}

「php_base64_encode(‘id:password’)」の部分で、Basic認証のユーザー名とパスワードを入れてください。例えば、ユーザー名が”test”、パスワードが”abcde”だったら、「php_base64_encode(‘test:abcde’)」とします。

これで、EC-CUBEのブロックやページ内で、WordPressの投稿一覧を表示できます。wp_news.phpではWordPressの関数が利用可能なので、カスタム投稿やカスタムフィールドを出力することも可能です。

余談:EC-CUBE3でWordPressの情報を表示したい場合

上記はEC-CUBE4.0.3の場合でしたが、EC-CUBE3ではPHPの関数を使えるようにするために、以下ファイルを変更する必要があります。

src/Eccube/Twig/Extension/EccubeExtension.php

まず「public function getFunctions()」の中に以下を追記します。

new \Twig_SimpleFunction('php_*', array($this,'phpFunctions'),array('is_safe' => array('html'))),

さらに、「class EccubeExtension extends \Twig_Extension」内に以下を追記します。

public function phpFunctions()
{
    $arg_list = func_get_args();
    $function = array_shift($arg_list);
 
    if(is_callable($function)){
        return call_user_func_array($function, $arg_list);
    }
 
    $errMsg = 'Called to an undefined function : <b>php_' . $function . "</b> ";
    trigger_error($errMsg, E_USER_NOTICE);
    return NULL;
}

これで、先頭に「php_」を付ければPHP関数が使えるようになります。あとはEC-CUBE4の手順と同じです。

EC-CUBE4.0.3で「src/Eccube/Twig/Extension/EccubeExtension.php」を確認すると、上記コードがすでに入っています。EC-CUBE4.0.2以前では定かではないので、上述したコードが入っているか確認してみてください。

あとがき

オフィシャルサイトはWordPress、オンラインショップはEC-CUBEで制作するといった構成も割とあるのではないかと思います。そういった時に役立ちます。

EC-CUBEにWordPressの情報を表示したい時は、参考にしていただければ幸いです。

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

3 thoughts on “EC-CUBE4のサイトにWordPressの投稿一覧を表示する方法

    1. himecas Post author

      コメントありがとうございます。
      EC-CUBE内とはいえ投稿一覧はWordPressの関数で表示しているので、ページネーションも実装できるはずです。
      記事内ではget_postsを使って投稿を取得していますが、ページネーションを実装する場合はWP_Queryの方が楽です。具体的には、当ブログではありませんがこちらの記事が参考になると思います。
      get_postsでページネーションを実装する方法については、当ブログ内のこちらの記事で紹介しています。

  1. ホア

    ご返事ありがとごうざいます。
    ページネーションを入れてみましたが。ただ、ページネーションのリンク先はwpへ飛びました。

    1
    2
    3

コメントを残す

メールアドレスが公開されることはありません。