概要
仕事でEC-CUBEを使用することがあり、TOPページにWordpressの記事一覧を表示する機能を実装しないといけなかったので実装した。
ネットを見ても、EC-CUBE2,3系の情報しかなかったため、困っている人がいれば参考にしてほしい。
環境
EC-CUBE4.0.3
WordPress
同じサーバに配置してEC-CUBEの直下にWordpressを配置する
- EC-CUBE(shop)
┣Wordpress(blog)
実装方法
今回はWordpressとの連携がメインのため、インストール方法は省略します。(すいません。。。)
EC-CUBE4系ではtwigを使用しており2系のSmartyテンプレートとは書き方が多少異なり、PHPタグを直接書き込む方法は使えません。
しかし、file_get_contents等の関数は使えるようになっています(3系だとEccubeExtension.phpなど変更が必要だったが、4.0.3ではデフォルトで設定が追記されていた)
なので、 Wordpressと連携するためのPHPを書き、それをtwig内のfile_get_contentsで取得するようにします。
1.Wordpressと連携するためのPHPを書く
PHPは下記のように書きました(wp-loadの場所には注意してください)
<?php
$webroot = $_SERVER['DOCUMENT_ROOT'];
require ($webroot.'blog/wp-load.php');
?>
<ul id="top_info">
<?php
$newslist = get_posts( array(
'posts_per_page' => 4 //記事数
));
if($newslist):
foreach( $newslist as $post ):
setup_postdata( $post );?>
<li><a href="<?php the_permalink(); ?>" target="_blank"><span><?php the_time('Y.n.d'); ?></span>
<?php the_title(); ?></a></li>
<?php
endforeach;
wp_reset_postdata();
else:
echo '記事がありません';
endif;
?>
</ul>
PHPファイルはEC-CUBE直下に置きましたが、twigで読み込めればどこに置いても問題ないと思います。
2.twigでPHPを取得する
PHPでWordpressの連携は完了しているのであとはtwigで読み込んでやるだけです。
<div id="news_area">
<h2 class="heading01">新着情報</h2>
<div class="accordion">
<div class="newslist">
{{ php_file_get_contents('http://ドメイン名/wp_post.php') }}
</div>
</div>
</div>
'php_'をつけるとPHPタグがなくてもfile_get_contentsが使えるようです。
file_get_contents(url('homepage') ~ 'wp_post.php')でも良いかもしれません。
html要素はサイトに合わせて変更していってください。
wordpressの関数一覧はこちらから
最後に
以上が実装方法です。
思い出しながら書いたので、間違っているところがあるかもです(すいません。。。)
あと私事ではありますが、転職して今はweb系の会社に働いています。(前職については過去記事を参照)
めっちゃ楽しいです!!
これからも頑張っていこうと思います。
以上