【完全版】ECCUBE4でwordpressと連携して記事一覧を表示する方法

• ECCUBEのバージョンは、４.xであること。
• WordPressはECCUBEと同じサーバーにインストール済みであること。

インストールディレクトリについて

• ECCUBE4のトップページにWordPressの最新記事５つを表示する
• ECCUBE4のトップページに特定のカテゴリの最新記事５つを表示する
• ECCUBE4のトップページに特定の２つのカテゴリの最新記事を５つずつ表示する

<?php
require ('/home/xxx/abc.com/public_html/blog/wp-load.php');
?>
 
<section>
   <h2>新着情報</h2>
<ul class="wpposts-inblock">
    <?php
    $recent_posts = wp_get_recent_posts(array(
        'numberposts' => 5, 
        'post_status' => 'publish' 
    ));
    foreach($recent_posts as $post) :?>
        <li class="blog_post">
            <a href="<?php echo get_permalink($post['ID']) ?>" style="font-weight:750;">
            <div class="blog_post_image"><img src='<?php
            echo get_the_post_thumbnail_url( $post['ID'], array(600,600) );
            ?>'></div>
            <time datetime="<?php echo $post['post_date'];?>" class="wp-block-latest-posts__post-date"><?php echo date("Y.m.d", strtotime($post['post_date']));?></time>
            <h4 ><?php echo $post['post_title'] ?></h4>
            </a>
        </li>
    <?php endforeach; wp_reset_query(); ?>
</ul>
</section>

require (‘/home/xxx/abc.com/public_html/blog/wp-load.php’); の部分は、インストールされているwordpressの「wp-load.php」を参照するという指示が書かれています。

/home/xxx/abc.com/public_html/html/template/default/assets/php/

※上記パスは、サーバーのフルパスです。
※どこでも良いのですが、管理が楽になる為この場所に保存します。
※phpディレクトリ（フォルダ）は、無いので作成しましょう。

ECCUBE4の管理画面の左メニュー「コンテンツ管理」内の「ブロック管理」を開き「新規作成」をクリックします。

1. ブロック名：wordpress 記事一覧
2. ファイル名：wordpresspost.twig
3. コード：（下記のコードを記入してください）
4. 記入したら「登録」をクリックします

{% 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) }}

<?php
require ('/home/xxx/abc.com/public_html/blog/wp-load.php');
?>
 
<section>
   <h2>新着情報</h2>
<ul class="wpposts-inblock">
    <?php
    $recent_posts = wp_get_recent_posts(array(
	'category_name' => 'media', 
        'numberposts' => 5, 
        'post_status' => 'publish' 
    ));
    foreach($recent_posts as $post) :?>
        <li class="blog_post">
            <a href="<?php echo get_permalink($post['ID']) ?>" style="font-weight:750;">
            <div class="blog_post_image"><img src='<?php
            echo get_the_post_thumbnail_url( $post['ID'], array(600,600) );
            ?>'></div>
            <time datetime="<?php echo $post['post_date'];?>" class="wp-block-latest-posts__post-date"><?php echo date("Y.m.d", strtotime($post['post_date']));?></time>
            <h4 ><?php echo $post['post_title'] ?></h4>
            </a>
        </li>
    <?php endforeach; wp_reset_query(); ?>
</ul>
</section>

変わった部分は、「 ‘category_name’ => ‘media’ , 」の１行のみです。

「media」というカテゴリを指定した。ということになります。

複数のカテゴリを対象にしたい場合には、「media,news,events」というように、半角のカンマで区切ることで可能となります。

<?php
require ('/home/xxx/abc.com/public_html/blog/wp-load.php');
?>

<section>
<h2>新着情報</h2>
<ul class="wpposts-inblock">
    <?php
    $recent_posts = wp_get_recent_posts(array(
	'category_name' => 'media', 
        'numberposts' => 5, 
        'post_status' => 'publish' 
    ));
    foreach($recent_posts as $post) :?>
        <li class="blog_post">
            <a href="<?php echo get_permalink($post['ID']) ?>" style="font-weight:750;">
            <div class="blog_post_image"><img src='<?php
            echo get_the_post_thumbnail_url( $post['ID'], array(600,600) );
            ?>'></div>
            <time datetime="<?php echo $post['post_date'];?>" class="wp-block-latest-posts__post-date"><?php echo date("Y.m.d", strtotime($post['post_date']));?></time>
            <h4 ><?php echo $post['post_title'] ?></h4>
            </a>
        </li>
    <?php endforeach; wp_reset_query(); ?>
</ul>
</section>

wp_news.php を複製し、例）wp_events.php として２つ目のファイルを作成します。

「’category_name’ => ‘media’,」の部分を、wordpressの別のカテゴリ名を記入します。
例）‘category_name’ => ‘events’, とします。

ECCUBE4の管理画面の左メニュー「コンテンツ管理」内の「ブロック管理」を開き「新規作成」をクリックします。

1. ブロック名：wordpress 記事一覧
2. ファイル名：wordpresspost.twig
3. コード：（下記のコードを記入してください）
4. 記入したら「登録」をクリックします

{% 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) }}

２行目の{% set news_path = asset(‘/html/template/default/assets/php/wp_news.php‘) %}の部分で、どのカテゴリを表示するのかの、ファイル（wp_news.php）を記述します。

ECCUBE4の管理画面の左メニュー「コンテンツ管理」内の「ブロック管理」を開き「新規作成」をクリックします。

1. ブロック名：wordpress イベント記事一覧
2. ファイル名：wordpress-event-post.twig
3. コード：（下記のコードを記入してください）
4. 記入したら「登録」をクリックします

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

２行目の

{% set news_path = asset(‘/html/template/default/assets/php/wp_events.php‘) %}

の部分で、どのカテゴリを表示するのかの、ファイル（wp_events.php）を記述します。