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の情報を表示したい時は、参考にしていただければ幸いです。
ページネーションが設定できますか?
コメントありがとうございます。
EC-CUBE内とはいえ投稿一覧はWordPressの関数で表示しているので、ページネーションも実装できるはずです。
記事内ではget_postsを使って投稿を取得していますが、ページネーションを実装する場合はWP_Queryの方が楽です。具体的には、当ブログではありませんがこちらの記事が参考になると思います。
get_postsでページネーションを実装する方法については、当ブログ内のこちらの記事で紹介しています。
ご返事ありがとごうざいます。
ページネーションを入れてみましたが。ただ、ページネーションのリンク先はwpへ飛びました。
1
2
3